/* home-v10.css — Home on the same system as services-v3.css (tokens, type levels, buttons, steps, close).
   Only what is specific to the Home lives here. */

/* ---------- 1 hero: the reel, full bleed ---------- */
.h-hero{position:relative;height:100svh;min-height:640px;max-height:1000px;overflow:hidden;background:#000}
.h-reel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.32) 45%,rgba(0,0,0,0) 72%),linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,0) 200px)}
.h-copy{position:absolute;left:0;right:0;bottom:clamp(40px,6vw,84px)}
.h-copy .kick{color:rgba(245,245,240,.7)}
.h-copy h1{max-width:12ch;font-size:clamp(48px,7vw,112px)}
.h-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;margin-top:clamp(26px,2.6vw,38px)}
.h-row .lead{grid-column:1/6;color:rgba(245,245,240,.86);max-width:44ch}
.h-row .ctas{grid-column:8/13;justify-content:flex-end;margin-top:0}

/* ---------- 2 brands: one sentence ---------- */
.h-brands{padding:clamp(44px,5vw,72px) 0;border-bottom:1px solid var(--line)}
.h-brands p{max-width:62ch;font-size:clamp(20px,1.9vw,28px);line-height:1.35;letter-spacing:-.015em;color:var(--ink)}
.h-brands span{color:var(--meta)}

/* ---------- 3 work ---------- */
.h-work{padding:var(--sec) 0}
.case{display:block}
.case .ph{overflow:hidden;background:#111}
.case .ph.light{background:#fff}
.case .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.case:hover .ph img{transform:scale(1.015)}
.case .client{margin-top:20px;font-size:15px;color:var(--meta)}
.case h3{margin-top:8px;max-width:22ch}
.case .fact{margin-top:12px;color:var(--body);max-width:40ch}
.case .note{margin-top:8px;font-size:13px;color:var(--meta)}
.case .more{display:inline-block;margin-top:20px;font-size:15px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.case:hover .more{text-decoration-thickness:2px}
.case-lead{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;margin-bottom:clamp(64px,7vw,112px)}
.case-lead .ph{grid-column:1/9;aspect-ratio:3/2}
.case-lead .tx{grid-column:9/13}
.case-lead .client{margin-top:0}
.case-lead h3{font-size:clamp(26px,2.4vw,36px)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.stats div{margin:0}
.stats dt{font-size:clamp(36px,3.4vw,52px);line-height:1;letter-spacing:-.04em;font-weight:700}
.stats dd{margin:8px 0 0;font-size:14px;line-height:1.35;color:var(--meta)}
.case-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.case-pair .ph{aspect-ratio:4/3}

/* ---------- 4 what we make ---------- */
.h-make{padding-top:0}
.sec-head-row{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.sec-head-row>div{max-width:760px}
.link{font-size:15px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;white-space:nowrap}
.link:hover{text-decoration-thickness:2px}

/* ---------- 5 studio: the light chapter ---------- */
.h-studio{background:var(--paper);color:var(--ink-d);padding:var(--sec) 0}
.h-studio .kick{color:var(--meta-d)}
.h-studio .sec-sub{color:var(--body-d)}
.st-copy{grid-column:1/7;align-self:center}
.st-copy h2{max-width:18ch}
.h-studio .outs{margin-top:32px;max-width:440px}
.h-studio .outs li{color:var(--ink-d);border-color:var(--line-d)}
.st-media{grid-column:8/13}
.st-media img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* ---------- 6 how we start ---------- */
.h-start{padding:var(--sec) 0}
.steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.h-start .step{border-top-color:var(--ink)}
.h-start .step::before{background:var(--ink)}
.h-start .step-n{color:var(--meta)}
.h-start .step h3{font-size:clamp(22px,1.9vw,28px)}
.h-start .step-p{color:var(--body)}

/* ---------- 7 close ---------- */
.close-fit{grid-column:1/6}
.close-fit>p{color:var(--meta);font-size:15px;margin-bottom:6px}
.close-fit .outs li{color:var(--ink)}
.fine-d{font-size:14px;color:var(--meta);max-width:38ch}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .h-row .lead,.h-row .ctas{grid-column:1/-1}
  .h-row .ctas{justify-content:flex-start;margin-top:26px}
  .case-lead .ph,.case-lead .tx{grid-column:1/-1}
  .case-lead .client{margin-top:20px}
  .st-copy,.st-media{grid-column:1/-1}
  .st-media{margin-top:48px;max-width:520px}
  .close-fit{grid-column:1/-1}
}
@media (max-width:760px){
  .case-pair,.steps-3{grid-template-columns:minmax(0,1fr)}
  .case-pair{row-gap:56px}
  .steps-3{row-gap:44px}
  .sec-head-row{flex-direction:column;align-items:flex-start}
}

/* ---------- tightening + legibility ---------- */
.h-shade{background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.36) 46%,rgba(0,0,0,0) 74%),linear-gradient(rgba(0,0,0,.62),rgba(0,0,0,0) 240px)}
.nav:not(.scrolled) .nav-link{color:rgba(245,245,240,.9)!important}
.st-media img{aspect-ratio:1/1}
.h-studio{padding:clamp(88px,9vw,140px) 0}
.h-start{padding:clamp(88px,9vw,140px) 0 clamp(72px,7vw,112px)}
.h-start + .s-close{padding-top:clamp(88px,9vw,140px)}

/* =====================================================================
   Typography pass — hierarchy through scale, not colour.
   L1 (giant): the hero word "scales" and the closing line.
   L2 (display figures): the proof numbers in the work section.
   L3 (index): the three capabilities, set as a large typographic list.
   L4 headline / L5 body / L6 meta stay as in services-v3.css.
   ===================================================================== */

/* ---------- hero: the headline does what it says ---------- */
.h-copy h1.h-scale{max-width:none;font-size:inherit;line-height:1;letter-spacing:0;display:flex;flex-direction:column;align-items:flex-start}
.h-scale span{display:block}
.h-scale .s1,.h-scale .s3{font-size:clamp(30px,3.4vw,56px);font-weight:400;letter-spacing:-.03em;line-height:1.05}
.h-scale .s2{font-size:clamp(116px,21vw,340px);font-weight:700;letter-spacing:-.065em;line-height:.8;margin:.04em 0 .1em -.04em}
.h-copy .kick{margin-bottom:clamp(16px,1.6vw,22px)}

/* ---------- client band: back, as a slow strip ---------- */
.h-brands{padding:clamp(28px,3vw,44px) 0 clamp(36px,4vw,56px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.br-head{display:flex;justify-content:space-between;gap:24px;margin-bottom:clamp(18px,2vw,28px)}
.br-head p{font-size:15px;color:var(--meta)}
.br-strip{display:flex;width:max-content}
.br-track{display:flex;list-style:none;margin:0;padding:0;flex:none;animation:br 46s linear infinite}
.br-track li{display:flex;align-items:center;font-size:clamp(34px,4.2vw,68px);line-height:1;letter-spacing:-.035em;color:var(--ink);white-space:nowrap}
.br-track li::after{content:"";width:9px;height:9px;background:var(--meta);margin:0 clamp(28px,3vw,52px)}
.h-brands:hover .br-track{animation-play-state:paused}
@keyframes br{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){
  .br-strip{width:auto;padding:0 var(--gut)}
  .br-track{animation:none;flex-wrap:wrap;row-gap:14px}
  .br-track[aria-hidden]{display:none}
  .br-track li{font-size:clamp(24px,2.6vw,36px)}
}

/* ---------- section heads: label in the margin, headline across the grid ---------- */
.sec-head.split{max-width:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;margin-bottom:clamp(48px,6vw,96px)}
.sec-head.split .kick{grid-column:1/4;margin:0;padding-top:.7em}
.sec-head.split h2{grid-column:4/13;max-width:20ch;font-size:clamp(38px,4.6vw,76px);line-height:1;letter-spacing:-.04em}
.sec-head.split .sec-sub{grid-column:4/11}

/* ---------- work: the figures are the headline of each case ---------- */
.case-lead{align-items:stretch}
.case-lead .ph{grid-column:1/8;aspect-ratio:4/3}
.case-lead .tx{grid-column:8/13;display:flex;flex-direction:column;justify-content:space-between;padding:4px 0}
.case-lead h3{font-size:clamp(24px,2vw,32px);max-width:20ch}
.figs{margin:clamp(36px,4vw,64px) 0 0;display:grid;gap:clamp(18px,2vw,28px)}
.figs div{margin:0;padding-top:14px;border-top:1px solid var(--line)}
.figs dt{font-size:clamp(72px,8.4vw,148px);line-height:.86;letter-spacing:-.06em;font-weight:700}
.figs dd{margin:12px 0 0;font-size:15px;color:var(--meta)}
.case .fig{margin-top:18px;font-size:clamp(44px,4.6vw,80px);line-height:.9;letter-spacing:-.05em;font-weight:700}
.case .fig + .fact{margin-top:8px;font-size:15px;color:var(--meta)}
.case-pair .case h3{margin-top:8px}

/* ---------- what we make: a typographic index ---------- */
.index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.index li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;padding:clamp(22px,2.4vw,36px) 0;border-bottom:1px solid var(--line)}
.index h3{grid-column:1/7;font-size:clamp(38px,4.8vw,80px);line-height:.98;letter-spacing:-.045em;font-weight:400;transition:font-weight .2s}
.index p{grid-column:7/10;color:var(--body);max-width:30ch}
.index img{grid-column:10/13;justify-self:end;width:100%;max-width:240px;aspect-ratio:4/5;object-fit:cover}
.index li:hover h3{font-weight:700}
.index-foot{margin-top:28px}

/* ---------- studio: one statement, then the detail ---------- */
.h-studio .wrap.g12{row-gap:0}
.st-kick{grid-column:1/-1}
.st-state{grid-column:1/12;font-size:clamp(40px,5.2vw,88px);line-height:1;letter-spacing:-.045em;max-width:22ch;margin-bottom:clamp(44px,5vw,80px)}
.st-copy{grid-column:1/6;align-self:end}
.st-media{grid-column:8/13;align-self:end}
.st-media img{aspect-ratio:4/3}

/* ---------- steps: the numerals carry the sequence ---------- */
.h-start .step{padding-top:22px}
.h-start .step-n{font-size:clamp(64px,7vw,120px);line-height:.85;letter-spacing:-.05em;font-weight:400;color:var(--ink)}
.h-start .step h3{margin-top:22px}

/* ---------- responsive for the pass ---------- */
@media (max-width:1000px){
  .sec-head.split .kick,.sec-head.split h2,.sec-head.split .sec-sub{grid-column:1/-1}
  .sec-head.split .kick{padding-top:0;margin-bottom:18px}
  .case-lead .ph,.case-lead .tx{grid-column:1/-1}
  .index h3{grid-column:1/-1}
  .index p{grid-column:1/9;margin-top:12px}
  .index img{grid-column:9/13;max-width:140px}
  .st-state,.st-copy,.st-media{grid-column:1/-1}
  .st-media{margin-top:40px}
}
@media (max-width:760px){
  .index p{grid-column:1/-1}
  .index img{grid-column:1/-1;justify-self:start;max-width:none;aspect-ratio:5/4;margin-top:18px}
}
/* index rows: the type leads, the thumbnail confirms */
.index img{max-width:168px;aspect-ratio:1/1}
.index li{padding:clamp(18px,2vw,28px) 0}
@media (max-width:760px){.index img{max-width:none;aspect-ratio:5/4}}

/* =====================================================================
   Calm pass (option A): one left axis, one big moment per screen.
   Overrides the typography pass above.
   ===================================================================== */
/* hero: one bold headline, everything stacked in one column */
.h-copy h1{max-width:13ch;font-size:clamp(48px,7.2vw,104px);line-height:.95;letter-spacing:-.045em;font-weight:700}
.h-row{display:block;margin-top:clamp(22px,2.2vw,30px)}
.h-row .lead{max-width:42ch}
.h-row .ctas{justify-content:flex-start;margin-top:clamp(28px,2.6vw,36px)}

/* client band: present, not shouting */
.br-track li{font-size:clamp(24px,2.6vw,40px);color:rgba(245,245,240,.78)}
.br-track li::after{width:7px;height:7px;margin:0 clamp(22px,2.4vw,40px)}

/* section heads: label above, headline below, same left edge everywhere */
.sec-head{max-width:820px;margin-bottom:clamp(44px,5vw,72px)}
.sec-head h2{font-size:clamp(34px,3.6vw,56px);line-height:1.03;letter-spacing:-.035em;max-width:22ch}

/* work: figures contained, image leads */
.case-lead .ph{grid-column:1/9;aspect-ratio:3/2}
.case-lead .tx{grid-column:9/13;justify-content:flex-end}
.figs{margin-top:28px;grid-template-columns:1fr 1fr}
.figs dt{font-size:clamp(40px,3.8vw,60px);line-height:1;letter-spacing:-.045em}
.case .fig{font-size:clamp(30px,2.6vw,42px);line-height:1;letter-spacing:-.04em;margin-top:14px}

/* what we make: the index stays, at a reading size */
.index h3{font-size:clamp(26px,2.6vw,40px);letter-spacing:-.03em}
.index li:hover h3{font-weight:400}
.index img{max-width:128px}

/* studio: headline + text left, image right, nothing oversized */
.st-state{grid-column:1/7;font-size:clamp(34px,3.6vw,56px);line-height:1.03;letter-spacing:-.035em;max-width:18ch;margin-bottom:24px}
.st-kick{grid-column:1/7}
.st-copy{grid-column:1/7;align-self:start}
.st-media{grid-column:8/13;grid-row:1/span 3;align-self:center}
.st-media img{aspect-ratio:1/1}

/* steps: numerals sized like headlines, not posters */
.h-start .step-n{font-size:clamp(36px,3.2vw,52px);line-height:1;color:var(--meta)}
.h-start .step h3{margin-top:14px}

@media (max-width:1000px){
  .case-lead .ph,.case-lead .tx{grid-column:1/-1}
  .st-state,.st-kick,.st-copy,.st-media{grid-column:1/-1}
  .st-media{grid-row:auto;margin-top:40px}
}
/* hero legibility on bright frames of the reel: shade the text side, not the whole frame */
.h-shade{background:linear-gradient(to right,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 45%,rgba(0,0,0,0) 70%),linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 55%),linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0) 240px)}

/* hero headline: always two lines — "CGI that scales" / "with your catalog." */
.h-copy h1{max-width:none;font-size:clamp(32px,7.2vw,104px)}
.h-copy h1 .ln{display:block;white-space:nowrap}

/* client band: outlined names, as on the published site (solid square separators, no sparkles) */
.br-track li{font-size:clamp(48px,7vw,120px);font-weight:700;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(245,245,240,.5);transition:color .4s,-webkit-text-stroke-color .4s}
.br-track li:hover{color:var(--ink);-webkit-text-stroke-color:transparent}
.br-track li::after{width:9px;height:9px;background:rgba(245,245,240,.35);margin:0 clamp(28px,3vw,56px);-webkit-text-stroke:0}
.h-brands{padding:clamp(28px,3vw,44px) 0 clamp(40px,4.4vw,64px)}
@media (prefers-reduced-motion:reduce){.br-track li{font-size:clamp(32px,4vw,64px)}}