/* WebPies — About page styles.
   Compiled from scss/sections/about.scss. */

/* Founder portraits: subtle zoom on hover, parallax handled by data-parallax */
.about-portrait{ overflow: hidden; border-radius: 1rem; }
.about-portrait img{ transition: transform .9s cubic-bezier(.16,1,.3,1); will-change: transform; }
.about-portrait:hover img{ transform: scale(1.04); }

/* Belief cards: lime corner-tick reveal on hover */
.belief-cell{ position: relative; transition: background .3s ease; }
.belief-cell:hover{ background: var(--cream-2); }
.belief-cell .belief-num{ transition: color .3s ease; }
.belief-cell:hover .belief-num{ color: var(--ink); }
html.theme-dark .belief-cell:hover{ background: rgba(245,241,234,.04); }

/* Client logo strip */
.client-strip{ display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); border-radius: 1.25rem; overflow: hidden; }
@media (min-width: 640px){ .client-strip{ grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1024px){ .client-strip{ grid-template-columns: repeat(6,1fr); } }
.client-cell{
  background: var(--cream); display: grid; place-items: center; padding: 28px 16px; min-height: 92px;
  font-family: 'Instrument Serif', serif; font-size: 22px; letter-spacing: -.01em; color: var(--ink);
  opacity: .55; transition: opacity .3s ease, transform .3s ease; text-align: center;
}
.client-cell:hover{ opacity: 1; transform: translateY(-2px); }
.client-cell .cl-mono{ font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }

/* Process steps */
.proc-step{ position: relative; padding-top: 26px; }
.proc-step::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--line); overflow: hidden; }
.proc-step::after{ content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background: var(--lime-deep); transition: width .6s cubic-bezier(.16,1,.3,1); }
.proc-step:hover::after{ width: 100%; }
.proc-step .proc-n{ font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }