/* ─────────────────────────────────────────────────────────────────────────
   Home: THE WAVE. One pinned hero of four planes of light on pure black,
   screen-blended so the black drops out, separating under the scroll and
   answering the pointer; then the page. The engine owns .sc-stage, --sc-p,
   cues, parallax, spotlight, tilt and magnet; everything below styles our
   own markup around them. Depth is the through-line: planes at their own
   rates, cards that tilt, a back wall that drifts slower than the content.
   ───────────────────────────────────────────────────────────────────────── */

/* A sticky, z-indexed stage is a stacking context: a screen-blended plane
   inside it composites against the stage's own paint, so the stage owns an
   explicit ground or the black rectangles show. */
.hero__stage, .close__stage{background:var(--sc-canvas)}
.hero__stage::after, .close__stage::after{display:none}

/* --rate repeats each plane's data-sc-parallax so the lift above can read it. */
.plane--far  {--rate:-0.4; --px:-16px; --py:-8px;  --pz:0.03; opacity:.9}
.plane--wave {--rate:-0.9; --px:-30px; --py:-14px; --pz:0.06; opacity:.85}
.plane--cards{--rate:-1.6; --px:-54px; --py:-26px; --pz:0.10}
.plane--front{--rate:-3;   --px:-96px; --py:-46px; --pz:0.22; opacity:.75}

/* The hero copy arrives once, on load; the cues hold it through the pin. */
.hero__copy{max-width:min(50rem,80vw); bottom:clamp(4rem,14vh,9rem); animation:hero-in 1100ms var(--sc-ease-out) both}
@keyframes hero-in{from{opacity:0; translate:0 18px}}
.hero__label{margin-bottom:1.25rem; color:var(--sc-ink)}
.world-h{font-family:var(--sc-font-display); font-weight:700; color:var(--sc-ink); text-wrap:balance; margin:0; line-height:0.98; letter-spacing:-0.03em}
.world-h--xl{font-size:var(--sc-t-3xl)}
.world-h--lg{font-size:var(--sc-t-2xl)}
.world-h span{white-space:nowrap}
.world-p{margin-top:1.25rem; max-width:40ch; font-size:var(--sc-t-lg); line-height:1.4; letter-spacing:-0.01em; color:var(--sc-ink); text-wrap:pretty}
.hero__actions{margin-top:2rem; gap:1rem 1.75rem}
.magnet{display:inline-block}

/* One line across the top of the page: how far along the reader is. */
.progress{position:fixed; left:0; top:0; z-index:calc(var(--sc-z-chrome) + 1); width:100%; height:2px; background:var(--g-tri); transform-origin:0 50%; transform:scaleX(0); pointer-events:none}

/* Without JS the engine never opens a cue: show everything settled. */
html:not(.sc-ready) [data-sc-cue]{opacity:1}
#content{scroll-margin-top:var(--header-h)}
.sc-section--tight{padding-top:0}

/* ── 2. statement: the words light in order as the section climbs ─────── */
.statement__h{font-size:var(--sc-t-3xl); line-height:1.02; letter-spacing:-0.03em; max-width:22ch; text-wrap:balance}
.statement__sub{margin-top:1.5rem; font-size:var(--sc-t-xl); line-height:1.25; letter-spacing:-0.02em; font-weight:600; max-width:30ch; text-wrap:pretty}
[data-words] span{
  --w:clamp(0, (var(--sc-p, 1) - 0.14 - var(--i, 0) * 0.30) / 0.06, 1);
  color:color-mix(in oklab, var(--sc-ink) calc(22% + var(--w) * 78%), transparent);
}
html:not(.sc-ready) [data-words] span{--w:1}
.statement__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,6vw,6rem); align-items:center; margin-top:clamp(2.5rem,6vw,4.5rem)}
.statement__copy{color:var(--sc-ink-soft); text-wrap:pretty; max-width:54ch}
.statement__grid .btn-row{margin-top:2rem}
@media (max-width:900px){ .statement__grid{grid-template-columns:1fr; gap:2.5rem} }
/* Three pillars, stepped down the wave. */
.pillars{list-style:none; display:grid; gap:1rem; align-content:center; perspective:1000px}
.pillars li{position:relative; display:grid; grid-template-columns:2.25rem 1fr; gap:1rem; padding:1.5rem 1.75rem; border-radius:var(--r-surface); background:var(--sc-surface); box-shadow:var(--sc-e2), var(--sc-edge); overflow:clip}
.pillars li::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--g-tri)}
.pillars .n{font-size:var(--sc-t-sm); font-weight:600; color:var(--sc-ink-soft); font-variant-numeric:tabular-nums; padding-top:.3rem}
.pillars h3{font-size:var(--sc-t-lg)}
.pillars p{margin-top:.35rem; color:var(--sc-ink-soft); text-wrap:pretty}
@media (min-width:901px){ .pillars li:nth-child(2){margin-left:1.75rem} .pillars li:nth-child(3){margin-left:3.5rem} }

/* ── 3. services: cards over a back wall that drifts at its own rate ──── */
.services{position:relative; isolation:isolate; overflow:clip}
.plane--bg{z-index:-1; top:60%; opacity:.42; translate:none; transition:none;
  mask-image:linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%)}
.svc{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; perspective:1200px}
@media (max-width:1000px){ .svc{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .svc{grid-template-columns:1fr} }
.svc li{position:relative; display:grid; align-content:start; gap:.5rem; padding:1.75rem; border-radius:var(--r-surface);
  background:color-mix(in oklab,var(--sc-surface) 94%,transparent); box-shadow:var(--sc-e2), var(--sc-edge); overflow:clip;
  transform-style:preserve-3d; transition:box-shadow var(--sc-d-base)}
/* The wave runs along the top on hover, from the corner to the edge. */
.svc li::before{content:""; position:absolute; left:0; top:0; height:3px; width:2.5rem; background:var(--g-tri); transition:width var(--sc-d-slow) var(--sc-ease-out)}
@media (hover:hover){ .svc li:hover{box-shadow:var(--sc-e3), var(--sc-edge)} .svc li:hover::before{width:100%} }
.svc__top{display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem}
.svc__icon{display:grid; place-content:center; width:2.75rem; height:2.75rem; border-radius:var(--r-input); background:color-mix(in oklab,var(--sc-ink) 7%,transparent); border:1px solid var(--line)}
.svc__icon svg{width:1.3rem; height:1.3rem; fill:none; stroke:var(--sc-ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.svc__n{font-size:var(--sc-t-sm); font-weight:600; color:var(--sc-ink-soft); font-variant-numeric:tabular-nums}
.svc h3{font-size:var(--sc-t-lg)}
.svc p{color:var(--sc-ink-soft); text-wrap:pretty}
.svc .tag{justify-self:start; margin-top:.5rem}
.services__cta{margin-top:2.5rem}

/* ── 4. studios: each card holds one colour of the wave ───────────────── */
.studio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; perspective:1200px}
@media (max-width:900px){ .studio-grid{grid-template-columns:1fr} }
.studio{--k:var(--hot-pink); position:relative; display:grid; align-content:start; gap:.75rem; padding:2rem 1.75rem; border-radius:var(--r-surface); background:var(--sc-surface); box-shadow:var(--sc-e2), var(--sc-edge); overflow:clip; transform-style:preserve-3d}
.studio--dev{--k:var(--cyan)} .studio--ai{--k:var(--violet)}
.studio::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--k)}
.studio::after{content:""; position:absolute; width:20rem; height:20rem; right:-9rem; top:-9rem; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in oklab,var(--k) 20%,transparent),transparent)}
.studio > *{position:relative; z-index:1}
.studio__k{display:flex; align-items:center; gap:.6rem; font-size:var(--sc-t-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--sc-ink-soft)}
.studio__k::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--k); box-shadow:0 0 10px var(--k)}
.studio h3{font-size:var(--sc-t-xl); font-weight:700; letter-spacing:-0.02em}
.studio p{color:var(--sc-ink-soft); text-wrap:pretty}
.studio .ticks{margin-top:.25rem}
.studio__link{margin-top:auto; padding-top:.75rem}

/* ── 5. launch: one still wipes open, the front plane passes over it ──── */
.launch__fig{position:relative; margin:0; height:min(74vh,54vw); min-height:24rem; overflow:clip; background:var(--sc-canvas); isolation:isolate}
.launch__still{position:absolute; inset:-8% 0; width:100%; height:116%; object-fit:cover; object-position:center}
.plane--over{top:50%; opacity:.8; mask-image:none; -webkit-mask-image:none; translate:none; transition:none}
.launch__copy{position:absolute; z-index:2; right:var(--sc-gutter); bottom:clamp(2rem,8vh,5rem); max-width:36rem; text-align:right; display:grid; gap:.75rem; justify-items:end}
.launch__copy .world-p{margin-top:0}

/* ── 6. why ───────────────────────────────────────────────────────────── */
.why .section-head h2{font-size:var(--sc-t-3xl); line-height:1; letter-spacing:-0.03em; max-width:16ch}
.why__list{list-style:none}
.why .step{border-top:2px solid; border-image:var(--g-tri) 1}
.why .step .n{color:var(--sc-ink)}
.why .step p{font-size:var(--sc-t-base)}

/* ── 7. proof ─────────────────────────────────────────────────────────── */
.proof__lead{margin:0 0 clamp(2.5rem,6vw,4rem); max-width:44rem; display:grid; gap:1.25rem}
.world-quote{margin:0; font-size:var(--sc-t-3xl); font-weight:700; line-height:1.02; letter-spacing:-0.03em; color:var(--sc-ink); text-wrap:balance}
.world-cite{display:flex; align-items:center; gap:.9rem; font-style:normal; color:var(--sc-ink); font-size:var(--sc-t-base)}
.world-cite img{width:3rem; height:3rem; border-radius:50%; object-fit:cover; flex:none; box-shadow:var(--sc-e2)}
.world-cite span{display:block; color:var(--sc-ink-soft); font-size:var(--sc-t-sm)}
.clients{display:grid; grid-template-columns:auto 1fr; gap:1rem 3rem; align-items:center; margin-top:clamp(2.5rem,6vw,4rem); padding-block:1.5rem; border-block:1px solid var(--line)}
.clients .label{margin:0}
.clients__row{list-style:none; display:flex; flex-wrap:wrap; gap:.6rem 1.25rem; font-weight:600; font-size:var(--sc-t-sm); color:var(--sc-ink)}
.clients__row li{display:flex; align-items:center; gap:1.25rem; white-space:nowrap}
.clients__row li + li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--g-tri)}
@media (max-width:760px){ .clients{grid-template-columns:1fr} }

/* ── 8. the stack ─────────────────────────────────────────────────────── */
.tech{padding-top:clamp(2.5rem,5vw,4rem)}
.tech__head{display:flex; align-items:baseline; gap:1rem 1.5rem; flex-wrap:wrap; margin-bottom:1.25rem}
.tech__head .label{margin:0}
.tech__head h2{font-size:var(--sc-t-lg); font-weight:600}
.marquee--logos .marquee-track{animation-duration:65s; gap:3rem; padding-right:3rem}
.marquee--logos span{color:var(--sc-ink); font-size:var(--sc-t-sm); opacity:.92}
.marquee--logos img{height:1.35rem; width:auto; opacity:.9}

/* ── 9. close: the wave at rest, the copy fading in across the approach ── */
.plane--rest{mask-image:none; -webkit-mask-image:none; transition:none}
.plane--rest-far{--rate:-0.2; --px:-10px; --py:-6px; opacity:.55}
.plane--rest-wave{--rate:-0.5; --px:-28px; --py:-14px; opacity:.38; top:56%}
.close__pool{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 66% at 50% 50%,
    color-mix(in oklab,var(--sc-canvas) 88%,transparent) 0%,
    color-mix(in oklab,var(--sc-canvas) 74%,transparent) 40%,
    color-mix(in oklab,var(--sc-canvas) 42%,transparent) 66%,
    transparent 90%)}
/* --in is the act's approach (home.js): 0 at the viewport bottom, 1 when the
   pin locks. A pin's own progress only runs while it is stuck, so a cue
   inside it would pop. */
.close{--in:1}
.close__copy{max-width:min(56rem,88vw); text-align:center; opacity:clamp(0, (var(--in) - 0.3) / 0.6, 1)}
.close__copy .world-h{font-size:var(--sc-t-3xl); max-width:22ch; margin-inline:auto; translate:0 calc((1 - var(--in)) * 6vh)}
.close__copy .world-p{margin:1.25rem auto 0; max-width:52ch; translate:0 calc((1 - var(--in)) * 4vh)}
.close__actions{margin-top:2.25rem; justify-content:center; gap:.75rem 1.5rem; translate:0 calc((1 - var(--in)) * 9vh)}

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width:860px){
  .world-h--xl{font-size:var(--sc-t-2xl)}
  .world-h--lg{font-size:var(--sc-t-xl)}
  .world-p{font-size:var(--sc-t-base)}
  .hero__copy{bottom:clamp(4rem,12vh,7rem); max-width:none; right:var(--sc-gutter)}
  /* Planes sit in the upper part of a portrait screen and fade under the copy. */
  .plane--far{--rate:-0.15} .plane--wave{--rate:-0.4} .plane--cards{--rate:-0.7} .plane--front{--rate:-1.6} .plane--rest-wave{--rate:-0.3}
  /* Seated high so the top edge clears the viewport; the copy sits below. */
  .plane{--pw:196vw; top:24%; mask-image:linear-gradient(180deg, #000 55%, transparent 100%); -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent 100%); mask-composite:add; -webkit-mask-composite:source-over}
  .plane--over,.plane--rest{top:50%; mask-image:none; -webkit-mask-image:none}
  .plane--bg{top:60%; mask-image:linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%)}
  .statement__h{font-size:var(--sc-t-2xl)}
  .statement__sub{font-size:var(--sc-t-lg)}
  .world-quote{font-size:var(--sc-t-2xl)}
  .launch__fig{height:68svh}
  .launch__copy{right:auto; left:var(--sc-gutter); text-align:left; justify-items:start; max-width:none}
  .close__copy .world-h{font-size:var(--sc-t-2xl)}
  /* The engine re-anchors every .sc-copy to the gutters here but leaves the
     centred variant's -50% translate in place. Keep the vertical centring. */
  .close__copy{translate:0 -50%}
}

@media (prefers-reduced-motion:reduce){
  .hero__copy{animation:none}
  .plane{transition:none; scale:none}
  [data-words] span{--w:1}
  .close__copy, .close__copy .world-h, .close__copy .world-p, .close__actions{translate:none; opacity:1}
}