/* About — ported from the Claude Design prototype (AboutPage.dc.html).
   --h is the viewport height (set from innerHeight by about.js); every
   height-driven size in the prototype is expressed against it. */

.about{
  --h:100vh;
  --gap:calc(var(--h) * .18);
  --labelGap:32px;
  --st:clamp(24px, 3vw, 44px);
}
@media (max-width:639px){ .about{ --labelGap:24px; } }

.about main{position:relative}
.about .label{margin:0 0 var(--labelGap);font-size:var(--small);font-weight:400;line-height:16px;letter-spacing:.01em}

/* ---------- 1 · statement ---------- */
.s1{position:relative;height:calc(var(--h) * 1.9)}             /* h + 0.9h scrub */
.s1__pin{position:sticky;top:0;height:var(--h);padding:var(--hdr-h) var(--m) var(--m);
  display:flex;flex-direction:column;justify-content:center}
.statement{margin:0;max-width:1180px;font-size:var(--st);line-height:1.12;letter-spacing:-.04em;text-wrap:pretty}
.statement .w{opacity:.16}
.s2{padding:0 var(--m);margin-top:var(--p2Pull, 0px)}

/* ---------- 2 · capabilities (stack) ---------- */
.caps{position:relative;margin-top:var(--gap)}
.caps__pin{padding:var(--hdr-h) var(--m) var(--m);display:flex;flex-direction:column;justify-content:center}
.caps.is-stack{height:calc(var(--h) * 2.6)}                    /* h + 1.6h */
.caps.is-stack .caps__pin{position:sticky;top:0;height:var(--h)}

.cap{border-top:1px solid var(--rule);
  padding:clamp(12px, calc(var(--h) * .024), 22px) 0;
  transition:opacity .6s ease}
.theme-ready .cap{transition:opacity .6s ease, border-color var(--theme-t)}
.cap__head{display:flex;align-items:flex-start;gap:24px}
.cap__n{flex:none;width:56px;padding-top:.9em}
.cap__main{flex:1;min-width:0}
.cap__title{margin:0;font-size:min(clamp(44px, 7.2vw, 120px), calc(var(--h) * .105));font-weight:400;line-height:1;letter-spacing:-.05em;text-wrap:balance}
.cap__x{display:grid;grid-template-rows:1fr;transition:grid-template-rows .7s var(--ease)}
.cap__clip{overflow:hidden;min-height:0}
.cap__body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;padding-top:24px;transition:opacity .5s ease 0s}
.cap__desc{margin:0;max-width:40ch;font-size:var(--body);line-height:1.55;letter-spacing:-.01em;text-wrap:pretty;opacity:.65}
.cap__svcs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2, minmax(0,1fr));column-gap:24px}
.cap__svcs li{border-top:1px solid var(--rule);padding:10px 0;font-size:15px;line-height:1.4;letter-spacing:-.01em}

/* collapsed rows (only while the stack is driven by scroll) */
.caps.is-stack .cap{opacity:.22}
.caps.is-stack .cap__x{grid-template-rows:0fr}
.caps.is-stack .cap__body{opacity:0}
.caps.is-stack .cap.is-on{opacity:1}
.caps.is-stack .cap.is-on .cap__x{grid-template-rows:1fr}
.caps.is-stack .cap.is-on .cap__body{opacity:1;transition-delay:.25s}

/* ---------- 3 · brands ticker ---------- */
.brands{margin-top:var(--gap)}
.brands__h{margin:0 0 20px;padding:0 var(--m);font-weight:400}
.band{position:relative;width:100%;height:160px;background:#FFFFFF;overflow:hidden;display:flex;align-items:center}
.track{display:flex;flex-wrap:nowrap;justify-content:center;width:max-content;will-change:transform}
.set{list-style:none;margin:0;padding:0 80px 0 0;display:flex;flex:none;flex-wrap:nowrap;justify-content:center;align-items:center;column-gap:80px;row-gap:24px}
.set li{flex:none;display:flex;align-items:center}
.set img{display:block;height:var(--hd);width:auto;max-width:none}
.band__fade{position:absolute;top:0;bottom:0;width:140px;pointer-events:none}
.band__fade--l{left:0;background:linear-gradient(to right,#FFFFFF,rgba(255,255,255,0))}
.band__fade--r{right:0;background:linear-gradient(to left,#FFFFFF,rgba(255,255,255,0))}

/* ---------- 4 · founder ---------- */
.founder{margin-top:var(--gap);padding:0 var(--m);display:grid;
  grid-template-columns:minmax(0, min(420px, 33vw)) minmax(0,1fr);gap:5vw;align-items:end}
.portrait{position:relative;width:100%;max-width:420px;aspect-ratio:4/5;overflow:hidden;clip-path:inset(0 0 0 0)}
.portrait__img{position:absolute;inset:0;background:var(--ph);display:flex;align-items:center;justify-content:center;filter:grayscale(1)}
.theme-ready .portrait__img{transition:background-color var(--theme-t)}
.portrait__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.founder__text{display:flex;flex-direction:column;padding-bottom:8px}
.founder__mask{overflow:hidden;padding-bottom:.08em}
.founder__name{margin:0;font-size:clamp(32px, 4vw, 56px);font-weight:400;line-height:1.04;letter-spacing:-.045em}
.founder__role{margin:12px 0 0}
.founder__bio p{margin:0}
.founder__bio p + p{margin-top:1em}
.founder__bio{margin:28px 0 0;max-width:46ch;font-size:var(--body);line-height:1.55;letter-spacing:-.01em;text-wrap:pretty;opacity:.65}
.founder__links{display:flex;flex-wrap:wrap;gap:32px;margin-top:32px}
.founder__links a{font-size:14px;line-height:1.3;letter-spacing:-.005em;color:var(--fg)}

/* pre-reveal state (JS drives the reveal from here) */
.js .portrait{clip-path:inset(100% 0 0 0)}
.js .portrait__img{transform:scale(1.1)}
.js .founder__name{transform:translateY(105%)}
.js .founder__role,.js .founder__bio,.js .founder__links{opacity:0}
.js .founder__bio,.js .founder__links{transform:translateY(14px)}

/* ---------- footer ---------- */
.about .foot{margin-top:var(--gap)}

/* ---------- mobile ---------- */
@media (max-width:639px){
  .cap{padding:18px 0}
  .cap__head{gap:10px}
  .cap__n{width:18px}
  .cap__title{font-size:clamp(34px, 10vw, 44px)}
  .cap__body{grid-template-columns:minmax(0,1fr);gap:24px}
  .cap__svcs{grid-template-columns:minmax(0,1fr)}
  .band{height:112px}
  .set{padding-right:48px;column-gap:48px}
  .set img{height:var(--hm)}
  .band__fade{width:48px}
  .founder{grid-template-columns:minmax(0,1fr);gap:32px}
  .portrait{max-width:360px}
  .founder__text{padding-bottom:0}
}

/* ---------- reduced motion: everything lit, no pinning, static logo row ---------- */
@media (prefers-reduced-motion:reduce){
  .s1{height:var(--h)}
  .statement .w{opacity:1}
  .band{height:auto;padding:40px}
  .track{flex-wrap:wrap;width:100%}
  .set{flex-wrap:wrap;padding-right:0}
  .band__fade{display:none}
  .js .portrait{clip-path:none}
  .js .portrait__img,.js .founder__name,.js .founder__bio,.js .founder__links{transform:none}
  .js .founder__role,.js .founder__links{opacity:1}
  .js .founder__bio{opacity:.65}
}
@media (prefers-reduced-motion:reduce) and (max-width:639px){
  .band{padding:24px 18px}
}