.hero__blend{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* edge resolve is always on — it is what stops the film looking like a box */
  background:
    radial-gradient(ellipse 58% 46% at 50% 50%,rgba(5,5,7,.80),rgba(5,5,7,.52) 55%,transparent 82%),
    linear-gradient(180deg,var(--black) 0%,rgba(5,5,7,.42) 12%,rgba(5,5,7,.20) 30%,rgba(5,5,7,.22) 72%,rgba(5,5,7,.66) 92%,var(--black) 100%),
    linear-gradient(90deg,var(--black) 0%,rgba(5,5,7,.18) 18%,rgba(5,5,7,.18) 82%,var(--black) 100%);
}
/* the reading field fades in only as the copy does, so the film starts clear */
.hero__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:var(--hs,0);
  background:
    /* tight pool directly under the type */
    radial-gradient(ellipse 46% 42% at 50% 50%,rgba(5,5,7,.94),rgba(5,5,7,.70) 55%,transparent 80%),
    /* broader settle so the whole frame quietens rather than spotlighting */
    linear-gradient(180deg,rgba(5,5,7,.55),rgba(5,5,7,.30) 40%,rgba(5,5,7,.62) 100%);
}
/* film grain: the single cheapest thing that reads as depth rather than flatness */
.hero__grain{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.11;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  animation:grainshift 700ms steps(4) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}
  50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,-1%)}
  100%{transform:translate(0,0)}
}
/* ============================================================
   PHANTOM NETWORK // VISUAL IDENTITY SYSTEM v2.0.0
   Palette + type locked to brand guidelines v1.0.1
   Ratio discipline: 75% dark foundation / 15% neutral / 10% violet
   ============================================================ */

/* ---------- SUPPLY // display + mono (monospaced, 600/1000) ---------- */
@font-face{font-family:'Supply';src:url('../assets/fonts/Supply-UltraLight.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Supply';src:url('../assets/fonts/Supply-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Supply';src:url('../assets/fonts/Supply-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Supply';src:url('../assets/fonts/Supply-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Supply';src:url('../assets/fonts/Supply-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- EXO 2 // body (variable 100-900) ---------- */
@font-face{font-family:'Exo 2';src:url('../assets/fonts/Exo2-Variable.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* --- brand primaries --- */
  --black:    #050507;
  --graphite: #000E13;
  --white:    #F3F3F7;
  --silver:   #C8CAD1;
  --violet:   #6427BB;
  --purple:   #A650FF;

  /* --- derived surfaces --- */
  --surf-1: #08080C;
  --surf-2: #0B0B11;
  --surf-3: #101017;
  --surf-4: #14141D;

  --line:     rgba(200,202,209,.14);
  --line-2:   rgba(200,202,209,.24);
  --line-lit: rgba(166,80,255,.34);

  --ink:   #F3F3F7;
  --ink-2: rgba(206,208,215,.82);
  --ink-3: rgba(206,208,215,.64);
  --ink-4: rgba(206,208,215,.46);

  --grad-signal: linear-gradient(100deg,#A650FF 0%,#6427BB 100%);
  --grad-steel:  linear-gradient(178deg,#FFFFFF 0%,#F3F3F7 38%,#C8CAD1 72%,rgba(200,202,209,.42) 100%);

  /* --- type --- */
  --f-display:'Supply',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --f-body:'Exo 2',system-ui,-apple-system,sans-serif;

  /* --- rhythm --- */
  --wrap: 1440px;
  --gut: clamp(20px,4vw,58px);
  --sec-y: clamp(88px,11vw,172px);
  --r: 16px;
  --r-lg: 22px;

  /* --- motion constitution --- */
  --ease-in-out: cubic-bezier(.22,.61,.36,1);   /* interactions */
  --ease-land:   cubic-bezier(.16,1,.30,1);     /* entrances: land, never bounce */
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

body{
  margin:0;
  background:var(--black);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:300;
  font-size:clamp(15px,1.02vw,16.5px);
  line-height:1.74;
  letter-spacing:.004em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{
  margin:0;font-family:var(--f-display);font-weight:500;
  line-height:1.04;letter-spacing:-.045em;   /* mono needs negative tracking at display size */
}
::selection{background:var(--violet);color:#fff}
:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

.skip{position:fixed;top:-100px;left:16px;z-index:400;background:var(--purple);color:#0a0410;
  padding:10px 16px;border-radius:8px;font:500 12px/1 var(--f-display)}
.skip:focus{top:16px}

/* ============================================================
   LOADER
   ============================================================ */
.load{
  position:fixed;inset:0;z-index:500;background:var(--black);
  display:grid;place-items:center;
  transition:opacity .8s var(--ease-land),visibility .8s;
}
.load.is-done{opacity:0;visibility:hidden}
.load__mark{width:76px;opacity:0;animation:loadmark 1.5s var(--ease-land) forwards}
@keyframes loadmark{
  0%{opacity:0;transform:translateY(14px) scale(.86);filter:blur(10px)}
  55%{opacity:1;transform:none;filter:blur(0)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
.load__bar{
  position:absolute;bottom:0;left:0;height:1px;width:100%;
  transform:scaleX(0);transform-origin:left;
  background:var(--grad-signal);
  animation:loadbar 1.25s var(--ease-land) forwards;
}
@keyframes loadbar{to{transform:scaleX(1)}}

/* ============================================================
   ATMOSPHERE
   ============================================================ */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atmos__grid{
  position:absolute;inset:-20%;
  background-image:
    linear-gradient(to right,rgba(200,202,209,.022) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(200,202,209,.022) 1px,transparent 1px);
  background-size:92px 92px;
  mask-image:radial-gradient(ellipse 78% 58% at 50% 18%,#000 0%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 78% 58% at 50% 18%,#000 0%,transparent 76%);
}
.atmos__streak{
  position:absolute;width:190%;height:1px;left:-45%;transform-origin:center;filter:blur(.4px);
  background:linear-gradient(90deg,transparent,rgba(166,80,255,.38) 34%,rgba(243,243,247,.26) 52%,rgba(100,39,187,.28) 68%,transparent);
}
.atmos__streak--a{top:22%;transform:rotate(-19deg);opacity:.45}
.atmos__streak--b{top:62%;transform:rotate(-19deg);opacity:.22}
.atmos__glow{
  position:absolute;top:-34vh;left:50%;transform:translateX(-50%);
  width:min(1560px,150vw);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(100,39,187,.20) 0%,rgba(100,39,187,.06) 34%,transparent 62%);
}
.atmos__noise{
  position:absolute;inset:0;opacity:.10;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
main,.foot,.nav{position:relative;z-index:1}

/* ============================================================
   REVEAL SYSTEM // differentiated by role  (§3.1 blur-focus)
   ============================================================ */
.rv{
  opacity:0;
  filter:blur(14px) brightness(.66);
  transform:translateY(28px) scale(.985);
  transition:
    opacity   .9s var(--ease-land),
    filter    .9s var(--ease-land),
    transform .9s var(--ease-land);
  transition-delay:calc(var(--rd,0) * 90ms);
  will-change:opacity,filter,transform;
}
.rv.is-in{opacity:1;filter:blur(0) brightness(1);transform:none}

/* headlines resolve slower and travel further */
.rv--h{filter:blur(18px) brightness(.6);transform:translateY(40px) scale(.98);transition-duration:1.15s}
/* cards are crisper and quicker */
.rv--c{filter:blur(10px) brightness(.7);transform:translateY(22px) scale(.99);transition-duration:.72s}
/* numbers hold position, resolve only */
.rv--n{filter:blur(8px) brightness(.72);transform:translateY(10px);transition-duration:.8s}
/* diagrams scale up from slightly small */
.rv--d{filter:blur(16px) brightness(.66);transform:translateY(32px) scale(.965);transition-duration:1.25s}

/* ============================================================
   TYPE PRIMITIVES
   ============================================================ */
.eyebrow{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(9.5px,.7vw,11px);
  letter-spacing:.32em;text-transform:uppercase;color:var(--ink-3);
  display:flex;align-items:center;gap:.8em;
  margin-bottom:clamp(20px,2.4vw,32px);
}
.eyebrow b{color:var(--purple);font-weight:500}
.eyebrow em{color:var(--ink-4);font-style:normal}

.pill{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--f-display);font-weight:400;font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:999px;
  padding:8px 18px;background:rgba(243,243,247,.03);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.pill i{width:5px;height:5px;background:var(--purple);border-radius:1px;transform:rotate(45deg);
  box-shadow:0 0 8px rgba(166,80,255,.9)}

.h2{font-size:clamp(25px,3.25vw,45px)}
.h3{font-size:clamp(19px,1.7vw,25px);letter-spacing:-.03em}

.lede{color:var(--ink-2);font-size:clamp(15px,1.16vw,17.5px);line-height:1.78;max-width:62ch}

/* --- violet wipe on the emphasised word  (§3.4 Zova) --- */
.sweep{
  position:relative;display:inline-block;color:var(--ink-4);
  background:var(--grad-signal);
  -webkit-background-clip:text;background-clip:text;
  background-size:0% 100%;background-repeat:no-repeat;
  transition:background-size 1.1s var(--ease-land) .35s,color 1.1s var(--ease-land) .35s;
}
.is-in .sweep,.sweep.is-in{background-size:100% 100%;color:transparent;-webkit-text-fill-color:transparent}

.grad{
  background:var(--grad-signal);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.steel{
  background:var(--grad-steel);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--line-2) 82%,transparent);border:0;margin:0}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(10.5px,.78vw,12px);
  letter-spacing:.17em;text-transform:uppercase;
  padding:16px 28px;border-radius:11px;
  border:1px solid var(--line-2);color:var(--white);
  background:rgba(243,243,247,.035);
  position:relative;overflow:hidden;white-space:nowrap;
  transition:transform .42s var(--ease-in-out),border-color .42s var(--ease-in-out),background .42s var(--ease-in-out),box-shadow .42s var(--ease-in-out);
}
.btn__arrow{font-size:1.3em;line-height:0;transition:transform .38s var(--ease-in-out)}
.btn:hover{transform:translateY(-2px);border-color:var(--line-lit);background:rgba(166,80,255,.09)}
.btn:hover .btn__arrow{transform:translateX(5px)}

.btn--primary{
  background:var(--grad-signal);border-color:transparent;color:#fff;
  box-shadow:0 0 0 1px rgba(166,80,255,.38),0 14px 46px -18px rgba(100,39,187,.95);
}
.btn--primary:hover{
  background:var(--grad-signal);
  box-shadow:0 0 0 1px rgba(166,80,255,.68),0 22px 62px -16px rgba(166,80,255,.85);
  filter:brightness(1.09);
}
/* sheen sweep on primary */
.btn--primary::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:left .75s var(--ease-in-out);
}
.btn--primary:hover::after{left:130%}

.btn--ghost{background:transparent}
.btn--sm{padding:11px 19px;font-size:10.5px;letter-spacing:.15em}
.btn--lg{padding:19px 36px}
.btn--full{width:100%;margin-top:10px}

/* ============================================================
   NAV // floating, scroll-spy with travelling indicator (§2.5)
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;transition:.5s var(--ease-in-out)}
.nav__inner{
  max-width:var(--wrap);margin-inline:auto;padding:18px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  transition:padding .5s var(--ease-in-out);
}
.nav.is-stuck{background:rgba(5,5,7,.72);backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 1px 0 rgba(200,202,209,.045)}
.nav.is-stuck .nav__inner{padding-block:12px}

.lockup{display:inline-flex;align-items:center;gap:12px}
.lockup__mark{width:auto;height:38px;filter:drop-shadow(0 0 14px rgba(166,80,255,.32));transition:.5s var(--ease-in-out)}
.lockup:hover .lockup__mark{filter:drop-shadow(0 0 24px rgba(166,80,255,.62));transform:translateY(-1px)}
.lockup__type{display:flex;flex-direction:column;line-height:1}
.lockup__word{font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--white)}
.lockup__sub{font-family:var(--f-display);font-weight:500;font-size:9.5px;letter-spacing:.44em;
  text-transform:uppercase;color:var(--purple);margin-top:4px}

.nav__links{position:relative;display:flex;align-items:center;gap:clamp(14px,1.8vw,30px)}
.nav__links a{
  position:relative;font-family:var(--f-display);font-size:11.5px;font-weight:400;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
  display:inline-flex;align-items:baseline;gap:.55em;padding:8px 2px;
  transition:color .35s var(--ease-in-out);
}
.nav__links a .ix{font-size:9.5px;color:var(--ink-4);transition:color .35s var(--ease-in-out)}
.nav__links a:hover,.nav__links a.is-active{color:var(--white)}
.nav__links a:hover .ix,.nav__links a.is-active .ix{color:var(--purple)}
/* between the burger breakpoint and full width the six labelled links plus
   the CTA exceed the bar; the index numbers are the first thing to go */
@media (max-width:1200px){
  .nav__links{gap:clamp(12px,1.4vw,20px)}
  .nav__links a .ix{display:none}
}
/* the single travelling indicator */
.nav__ind{
  position:absolute;bottom:0;left:0;height:1px;width:0;
  background:var(--grad-signal);opacity:0;
  transition:transform .55s var(--ease-in-out),width .55s var(--ease-in-out),opacity .35s;
  box-shadow:0 0 10px rgba(166,80,255,.8);
}
.nav__ind.is-on{opacity:1}

.nav__actions{display:flex;align-items:center;gap:12px}
.burger{display:none;width:42px;height:42px;background:transparent;border:1px solid var(--line-2);
  border-radius:10px;cursor:pointer;position:relative}
.burger span{position:absolute;left:12px;width:18px;height:1.5px;background:var(--white);transition:.35s var(--ease-in-out)}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:23px}
.burger[aria-expanded="true"] span:nth-child(1){top:20px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){top:20px;transform:rotate(-45deg)}

.mobile{border-top:1px solid var(--line);background:rgba(5,5,7,.97);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);padding:14px var(--gut) 28px}
.mobile[hidden]{display:none}
.mobile a:not(.btn){display:flex;align-items:center;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--line);font-family:var(--f-display);font-size:11.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2)}
.mobile a i{color:var(--purple);font-style:normal;font-size:9.5px}

/* ============================================================
   HERO
   ============================================================ */

/* Supply is monospaced — every glyph is 0.6em wide, so display sizes
   run ~30% larger than a proportional face at the same px. Scale down. */

.metrics{
  margin-top:clamp(52px,6vw,86px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,40px);
  border-top:1px solid var(--line);padding-top:clamp(26px,2.6vw,34px);max-width:880px;
}
.metrics li{display:flex;flex-direction:column;gap:10px}
.metrics__l{font-family:var(--f-display);font-size:9.5px;font-weight:400;
  letter-spacing:.25em;text-transform:uppercase;color:var(--ink-3)}

.scrollcue{margin-top:clamp(46px,5vw,72px);display:flex;align-items:center;gap:13px;
  font-family:var(--f-display);font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-4)}
.scrollcue i{width:72px;height:1px;background:linear-gradient(90deg,var(--purple),transparent);
  position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;top:0;left:0;width:22px;height:1px;background:var(--white);
  animation:cue 2.6s var(--ease-in-out) infinite}
@keyframes cue{0%{transform:translateX(-24px);opacity:0}30%{opacity:1}100%{transform:translateX(74px);opacity:0}}

/* --- surface marquee behind hero  (§2.3 dual-direction) --- */
.surfaces{
  position:absolute;top:clamp(90px,12vw,150px);right:calc(var(--gut) * -1);
  width:min(46vw,660px);pointer-events:none;z-index:-1;
  display:flex;flex-direction:column;gap:14px;
  mask-image:radial-gradient(ellipse 70% 76% at 62% 50%,#000 8%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 76% at 62% 50%,#000 8%,transparent 78%);
  opacity:.34;
}
.srow{display:flex;gap:14px;width:max-content}
.srow--a{animation:slideL 58s linear infinite}
.srow--b{animation:slideR 74s linear infinite}
.srow--c{animation:slideL 66s linear infinite}
@keyframes slideL{to{transform:translateX(-50%)}}
@keyframes slideR{from{transform:translateX(-50%)}to{transform:translateX(0)}}

.stile{
  flex:0 0 auto;width:152px;padding:13px 15px;border-radius:13px;
  border:1px solid var(--line);background:linear-gradient(168deg,var(--surf-3),var(--surf-1));
  display:flex;flex-direction:column;gap:9px;
}
.stile__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stile__ico{width:15px;height:15px;fill:var(--ink-3)}
.stile__dot{width:5px;height:5px;border-radius:50%;background:var(--purple);box-shadow:0 0 8px rgba(166,80,255,.85)}
.stile__n{font-family:var(--f-display);font-weight:500;font-size:14px;letter-spacing:-.03em;color:var(--white)}
.stile__l{font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4)}
.stile__bar{height:2px;border-radius:2px;background:rgba(200,202,209,.10);overflow:hidden}
.stile__bar i{display:block;height:100%;background:var(--grad-signal);border-radius:2px}

/* ============================================================
   MARQUEE STRIP
   ============================================================ */
.marquee{
  border-block:1px solid var(--line);
  background:linear-gradient(180deg,rgba(11,11,17,.7),rgba(5,5,7,.25));
  overflow:hidden;padding:17px 0;
  mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);
}
.marquee__track{display:flex;align-items:center;gap:28px;width:max-content;animation:slideL 48s linear infinite}
.marquee__track span{font-family:var(--f-display);font-size:10.5px;letter-spacing:.27em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.dia{width:7px;height:7px;flex:0 0 7px;fill:var(--violet);transform:rotate(0deg)}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.sec{padding:var(--sec-y) 0;position:relative}
.sec--alt{background:linear-gradient(180deg,transparent,rgba(0,14,19,.44) 22%,rgba(0,14,19,.44) 78%,transparent)}
.sec--alt::before,.sec--alt::after{content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 20%,var(--line-2) 80%,transparent)}
.sec--alt::before{top:0}
.sec--alt::after{bottom:0}

.sechead{margin-bottom:clamp(46px,5.4vw,80px)}
.sechead__grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(24px,5vw,80px);align-items:end}
.sechead__body{display:flex;flex-direction:column;gap:16px;color:var(--ink-2);padding-bottom:6px}

/* ============================================================
   01 // THE NETWORK — sticky rail (§3.2 Seis)
   ============================================================ */
.rail{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,5vw,76px);align-items:start}

.rail__list{display:flex;flex-direction:column;gap:12px}
.rail__item{
  position:relative;display:grid;grid-template-columns:2px 1fr;gap:24px;
  padding:26px 26px 26px 0;border-radius:var(--r);cursor:pointer;
  transition:background .55s var(--ease-in-out);
}
.rail__item::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(100deg,rgba(166,80,255,.09),rgba(166,80,255,.02) 60%,transparent);
  opacity:0;transition:opacity .55s var(--ease-in-out);
}
.rail__item.is-on::before{opacity:1}
/* the progress track + fill */
.rail__track{position:relative;width:2px;border-radius:2px;background:rgba(200,202,209,.10);overflow:hidden}
.rail__fill{position:absolute;inset:0 0 auto 0;height:0;background:var(--grad-signal);border-radius:2px;
  box-shadow:0 0 10px rgba(166,80,255,.7);transition:height .25s linear}
.rail__body{position:relative;padding-left:4px}
.rail__num{font-family:var(--f-display);font-weight:500;font-size:9.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-4);display:flex;align-items:center;gap:11px;margin-bottom:14px;
  transition:color .5s var(--ease-in-out)}
.rail__item.is-on .rail__num{color:var(--purple)}
.rail__num::after{content:"";width:30px;height:1px;background:linear-gradient(90deg,currentColor,transparent);opacity:.6}
.rail__body h3{font-size:clamp(18px,1.6vw,24px);margin-bottom:11px;color:var(--ink-3);
  transition:color .5s var(--ease-in-out)}
.rail__item.is-on .rail__body h3{color:var(--white)}
.rail__body p{color:var(--ink-3);font-size:14.5px;transition:color .5s var(--ease-in-out)}
.rail__item.is-on .rail__body p{color:var(--ink-2)}
.rail__tags{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:0;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .6s var(--ease-in-out),opacity .5s var(--ease-in-out),margin-top .6s var(--ease-in-out);
}
.rail__item.is-on .rail__tags{max-height:130px;opacity:1;margin-top:20px}
.rail__tags li{font-family:var(--f-display);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:6px 12px;
  background:rgba(243,243,247,.02)}

/* sticky panel */
.rail__panel{position:sticky;top:130px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(168deg,var(--surf-2),var(--surf-1));overflow:hidden;
  aspect-ratio:1/.92;display:grid;place-items:center;padding:clamp(20px,3vw,40px)}
.rail__panel::before{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 70% at 50% 0%,rgba(100,39,187,.20),transparent 62%)}
.stage{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(20px,3vw,40px);
  opacity:0;transform:scale(.97);filter:blur(10px);
  transition:opacity .7s var(--ease-land),transform .7s var(--ease-land),filter .7s var(--ease-land);
  pointer-events:none}
.stage.is-on{opacity:1;transform:none;filter:blur(0)}
.stage svg{width:100%;height:auto}

/* ============================================================
   02 // CAPABILITIES — bento with live components (§3.6)
   ============================================================ */
.caps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.cap{
  position:relative;grid-column:span 2;display:flex;flex-direction:column;
  padding:clamp(24px,2.4vw,34px);border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(178deg,var(--surf-2),var(--surf-1));overflow:hidden;
  transition:transform .5s var(--ease-in-out),border-color .5s var(--ease-in-out),background .5s var(--ease-in-out);
}
.cap::after{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--grad-signal);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-in-out)}
.cap:hover{transform:translateY(-4px);border-color:var(--line-lit);
  background:linear-gradient(178deg,var(--surf-3),var(--surf-1))}
.cap:hover::after{transform:scaleX(1)}
.cap__idx{font-family:var(--f-display);font-size:9.5px;letter-spacing:.26em;color:var(--ink-4);margin-bottom:20px}
.cap h3{font-size:clamp(16.5px,1.35vw,20px);letter-spacing:-.03em;margin-bottom:11px}
.cap p{color:var(--ink-2);font-size:14px}
/* mini visual sits at the bottom of every card */
.cap__viz{margin-top:auto;padding-top:26px}
.cap__viz svg{width:100%;height:64px;overflow:visible}

.cap--flag{
  grid-column:span 6;border-color:rgba(166,80,255,.20);
  background:radial-gradient(88% 130% at 8% 0%,rgba(100,39,187,.26),transparent 62%),
             linear-gradient(178deg,var(--surf-3),var(--surf-1));
  padding:clamp(30px,3.4vw,52px);
  display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:start;
}
.cap--flag::after{transform:scaleX(1);opacity:.5}
.cap--flag:hover::after{opacity:1}
.cap--flag:hover{transform:none}
.cap__main{display:flex;flex-direction:column}
.cap__tag{align-self:flex-start;font-family:var(--f-display);font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--purple);border:1px solid var(--line-lit);border-radius:999px;
  padding:6px 15px;margin-bottom:22px;background:rgba(166,80,255,.08)}
.cap--flag h3{font-size:clamp(19px,1.95vw,28px);max-width:26ch}
.cap__line{font-family:var(--f-display);font-weight:500;font-size:clamp(16px,1.45vw,21px);
  letter-spacing:-.03em;margin:14px 0 16px}
.cap__cta{margin-top:24px;font-family:var(--f-display);font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--purple);display:inline-flex;align-items:center;gap:.6em}
.cap__cta b{transition:transform .38s var(--ease-in-out)}
.cap--flag:hover .cap__cta b{transform:translateX(5px)}

.cap__spec{margin:0;display:flex;flex-direction:column;border-left:1px solid var(--line-2);
  padding-left:clamp(20px,2.4vw,32px)}
.cap__spec > div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--line)}
.cap__spec > div:first-child{padding-top:0}
.cap__spec > div:last-child{border-bottom:0;padding-bottom:0}
.cap__spec dt{font-family:var(--f-display);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-4);white-space:nowrap}
/* the four surfaces, named as marks. They ride the label line, which has
   ~89px of unused width — so no row grows and the rules stay put. */
.cap__spec dt.has-pico{display:flex;align-items:center;justify-content:space-between;
  gap:12px;align-self:stretch}
.cap__pico{display:inline-flex;align-items:center;gap:6px;flex:none}
.cap__pico svg{width:13px;height:13px;display:block;fill:var(--ink-3);
  transition:fill .45s var(--ease-in-out),opacity .45s var(--ease-in-out);opacity:.75}
.cap:hover .cap__pico svg,a.cap:hover .cap__pico svg{fill:var(--silver);opacity:1}
.cap__pico svg:nth-child(1){transition-delay:0s}
.cap__pico svg:nth-child(2){transition-delay:.05s}
.cap__pico svg:nth-child(3){transition-delay:.1s}
.cap__pico svg:nth-child(4){transition-delay:.15s}
.cap__spec dd{margin:0;font-family:var(--f-display);font-weight:500;font-size:13px;letter-spacing:-.01em;
  color:var(--white);text-align:right}

/* ============================================================
   03 // DISTRIBUTION — engine + sticky stage stack (§3.3)
   ============================================================ */
.dist{position:relative}  /* no overflow clipping: it would disable the sticky xform */
.dist__aura{position:absolute;top:12%;left:50%;transform:translateX(-50%);width:min(1200px,120vw);
  aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(100,39,187,.16) 0%,transparent 58%)}
.dist__aura{width:min(1200px,100vw);max-width:100vw}
.dist__head{max-width:940px;margin-bottom:clamp(40px,4.6vw,68px)}
.dist__kicker{font-family:var(--f-display);font-size:clamp(10px,.8vw,11.5px);letter-spacing:.30em;
  text-transform:uppercase;color:var(--purple);margin-bottom:20px}
.dist__h2{font-size:clamp(27px,3.5vw,49px);letter-spacing:-.05em}
.dist__sub{margin-top:24px;color:var(--ink-2);max-width:60ch;font-size:clamp(15px,1.16vw,17.5px)}

.engine{margin:0 0 clamp(46px,5vw,78px)}
.engine__cap{display:flex;align-items:center;gap:.8em;font-family:var(--f-display);font-size:9.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-4);margin-bottom:16px}
.engine__caplabel{color:var(--purple)}
.engine__frame{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(178deg,var(--surf-2),var(--surf-1));padding:clamp(14px,2vw,26px);overflow:hidden}
.engine__corner{position:absolute;width:13px;height:13px;border:1px solid var(--line-lit);opacity:.7}
.engine__corner--tl{top:12px;left:12px;border-right:0;border-bottom:0}
.engine__corner--tr{top:12px;right:12px;border-left:0;border-bottom:0}
.engine__corner--bl{bottom:12px;left:12px;border-right:0;border-top:0}
.engine__corner--br{bottom:12px;right:12px;border-left:0;border-top:0}
.engine__svg{width:100%;height:auto;display:block}
.engine__legend{display:flex;flex-wrap:wrap;gap:24px;margin-top:16px;
  font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4)}
.engine__legend span{display:inline-flex;align-items:center;gap:9px}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.dot--silver{background:var(--silver)}
.dot--violet{background:var(--purple);box-shadow:0 0 8px rgba(166,80,255,.8)}
.dot--live{background:#3DDC84;box-shadow:0 0 8px rgba(61,220,132,.8)}

/* --- engine svg internals --- */
.e-rail{stroke:rgba(200,202,209,.13);stroke-width:1}
.e-flow{stroke:url(#gViolet);stroke-width:1.4;stroke-dasharray:8 132;opacity:.85;
  animation:flow 3.2s linear infinite;animation-delay:var(--d,0s)}
@keyframes flow{to{stroke-dashoffset:-140}}
.e-trunk{stroke:rgba(166,80,255,.5);stroke-width:1.4}
.e-clip rect,.e-gate rect,.e-out rect{fill:rgba(243,243,247,.022);stroke:var(--line-2);stroke-width:1}
.e-out rect{fill:rgba(243,243,247,.028)}
.e-mono-xs{font-family:var(--f-display);font-size:9.5px;letter-spacing:.14em;fill:var(--silver)}
.e-mono-sm{font-family:var(--f-display);font-size:10px;letter-spacing:.2em;fill:var(--white)}
.e-dim{fill:var(--ink-4)}
.e-dot{fill:var(--violet)}
.e-colhead{font-family:var(--f-display);font-size:9.5px;letter-spacing:.28em;fill:var(--ink-4)}
.e-hair{stroke:var(--line);stroke-width:1}
.e-play polygon{fill:rgba(166,80,255,.55)}
.e-ring{fill:none;stroke:rgba(200,202,209,.09);stroke-width:1}
.e-ring--slow{stroke-dasharray:3 9;animation:spin 62s linear infinite;transform-origin:640px 330px}
.e-ring--fast{stroke-dasharray:1 15;animation:spin 40s linear infinite reverse;transform-origin:640px 330px}
.e-ring--hair{stroke:rgba(166,80,255,.16)}
.e-diamond{fill:none;stroke:rgba(200,202,209,.34);stroke-width:1.4}
.e-diamond-in{fill:rgba(166,80,255,.045);stroke:rgba(166,80,255,.3);stroke-width:1}
.e-coreplay{fill:url(#gViolet)}
.e-coreword{font-family:var(--f-display);font-weight:500;font-size:13px;letter-spacing:.26em;fill:var(--white)}
.e-coreword--sub{font-size:9.5px;letter-spacing:.42em;fill:var(--purple)}
.e-tick{stroke:rgba(166,80,255,.5);stroke-width:1}
.e-chip rect{fill:rgba(243,243,247,.02);stroke:var(--line-2);stroke-width:1}
.e-chip{animation:chip 4.4s var(--ease-in-out) infinite;animation-delay:var(--d,0s)}
@keyframes chip{0%,74%,100%{opacity:.5}82%{opacity:1}}
.e-drop{stroke:rgba(166,80,255,.24);stroke-width:1;stroke-dasharray:3 5}
.e-ico{fill:var(--silver);opacity:.72}
.e-outname{font-family:var(--f-display);font-weight:500;font-size:10.5px;letter-spacing:.18em;fill:var(--white)}
.e-outsub{font-family:var(--f-display);font-size:9.5px;letter-spacing:.16em;fill:var(--ink-4)}
.e-live{fill:#3DDC84;animation:live 2.6s ease-in-out infinite}
@keyframes live{0%,100%{opacity:.35}50%{opacity:1;filter:drop-shadow(0 0 6px rgba(61,220,132,.9))}}
.e-pk--silver{fill:var(--silver)}
.e-pk--violet{fill:var(--purple);filter:drop-shadow(0 0 6px rgba(166,80,255,.9))}
.e-junction circle{fill:var(--black);stroke:rgba(166,80,255,.55);stroke-width:1.4}
.e-tele text{font-family:var(--f-display);font-size:9.5px;letter-spacing:.22em;fill:var(--ink-4)}
.e-televal{fill:var(--silver)!important}
.e-televal--live{fill:#3DDC84!important}
.e-breathe{animation:breathe 7s ease-in-out infinite;transform-origin:640px 330px}
@keyframes breathe{0%,100%{opacity:.5;transform:scale(.97)}50%{opacity:1;transform:scale(1.05)}}
.e-scan{animation:scan 9s linear infinite}
@keyframes scan{from{transform:translateX(-180px)}to{transform:translateX(1240px)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- sticky stage stack --- */
.stack{display:flex;flex-direction:column;gap:22px;margin-bottom:clamp(40px,4.6vw,64px)}
.stackcard{
  position:sticky;top:calc(120px + var(--i) * 18px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(178deg,var(--surf-3),var(--surf-1));
  padding:clamp(26px,3vw,44px);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3vw,44px);align-items:center;
  box-shadow:0 -1px 0 rgba(200,202,209,.05),0 -30px 60px -30px rgba(0,0,0,.9);
}
.stackcard__n{font-family:var(--f-display);font-weight:500;font-size:clamp(30px,3.4vw,46px);
  letter-spacing:-.05em;line-height:1;color:transparent;
  background:var(--grad-steel);-webkit-background-clip:text;background-clip:text}
.stackcard h3{font-size:clamp(17px,1.45vw,22px);margin-bottom:10px}
.stackcard p{color:var(--ink-2);font-size:14.5px;max-width:60ch}
.stackcard__viz{width:clamp(90px,11vw,150px)}
.stackcard__viz svg{width:100%;height:auto;overflow:visible}

.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px);
  border-top:1px solid var(--line);padding-top:clamp(26px,3vw,38px)}
.proof div{display:flex;flex-direction:column;gap:9px}
.proof b{font-family:var(--f-display);font-weight:500;font-size:clamp(20px,2.2vw,30px);
  letter-spacing:-.045em;color:transparent;background:var(--grad-steel);
  -webkit-background-clip:text;background-clip:text}
.proof span{font-family:var(--f-display);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}

/* ============================================================
   04 // PRINCIPLES
   ============================================================ */
.prins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.prin{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.2vw,32px);
  padding:clamp(26px,2.8vw,40px);border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(178deg,var(--surf-2),var(--surf-1));overflow:hidden;
  transition:transform .5s var(--ease-in-out),border-color .5s var(--ease-in-out)}
.prin::before{content:"";position:absolute;inset:0;
  background:radial-gradient(110% 80% at 0% 0%,rgba(166,80,255,.09),transparent 60%);
  opacity:0;transition:opacity .5s var(--ease-in-out)}
.prin:hover{transform:translateY(-3px);border-color:var(--line-lit)}
.prin:hover::before{opacity:1}
.prin__n{position:relative;font-family:var(--f-display);font-weight:500;font-size:clamp(26px,3vw,40px);
  line-height:1;letter-spacing:-.05em;color:transparent;background:var(--grad-steel);
  -webkit-background-clip:text;background-clip:text}
.prin__b{position:relative}
.prin h3{font-size:clamp(17px,1.5vw,22px);margin-bottom:11px}
.prin p{color:var(--ink-2);font-size:14.5px}

/* ============================================================
   05 // COVERAGE — radial rings (§2.2)
   ============================================================ */
.chans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.5vw,20px)}
.chan{position:relative;padding:clamp(24px,2.4vw,34px);border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(178deg,var(--surf-2),var(--surf-1));overflow:hidden;
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;
  transition:transform .5s var(--ease-in-out),border-color .5s var(--ease-in-out)}
.chan:hover{transform:translateY(-3px);border-color:var(--line-lit)}
.chan__ring{position:relative;width:76px;height:76px;flex:0 0 76px}
.chan__ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.chan__ring .trk{fill:none;stroke:rgba(200,202,209,.09);stroke-width:3}
.chan__ring .arc{fill:none;stroke:url(#gRing);stroke-width:3;stroke-linecap:round;
  transition:stroke-dashoffset 1.4s var(--ease-land)}
.chan__ico{position:absolute;inset:0;margin:auto;width:22px;height:22px;fill:var(--silver);opacity:.85}
.chan h3{font-size:17px;letter-spacing:-.02em;margin-bottom:7px}
.chan__f{font-family:var(--f-display);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px}
.chan__f em{color:var(--violet);font-style:normal}
.chan__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid var(--line);padding-top:12px}
.chan__meta span{font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4)}
.badge{font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--ink-3);font-weight:400}
.badge--primary{color:var(--purple);border-color:var(--line-lit);background:rgba(166,80,255,.08)}

/* ============================================================
   06 // SCALE — odometers (§2.1)
   ============================================================ */
.scale{padding:clamp(70px,8vw,120px) 0;position:relative;
  border-block:1px solid var(--line);
  background:linear-gradient(180deg,rgba(0,14,19,.5),rgba(5,5,7,.2))}
.scale__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.scale__grid > div{display:flex;flex-direction:column;gap:12px}
.scale__grid span{font-family:var(--f-display);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);max-width:22ch}

/* --- ODOMETER --- */
.odo{
  display:inline-flex;align-items:baseline;
  font-family:var(--f-display);font-weight:500;line-height:1;
  letter-spacing:-.05em;font-variant-numeric:tabular-nums;
}
.odo__d{
  position:relative;display:inline-block;overflow:hidden;
  height:1em;width:.6em;                 /* Supply advance = 600/1000 */
  vertical-align:baseline;
}
.odo__strip{
  position:absolute;top:0;left:0;width:100%;
  display:flex;flex-direction:column;align-items:center;
  transform:translateY(0);
  background:var(--grad-steel);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.odo__strip i{height:1em;line-height:1em;font-style:normal;display:block}
.odo__sep{background:var(--grad-steel);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.odo__suf{color:var(--purple);margin-left:.04em}

.scale .odo{font-size:clamp(30px,3.6vw,52px)}
.metrics .odo{font-size:clamp(24px,2.7vw,36px)}
.res__n .odo{font-size:clamp(21px,2.1vw,30px)}

/* ============================================================
   07 // CASE STUDIES — coverflow (§2.4)
   ============================================================ */
.cases{position:relative}
.cases__view{overflow:hidden;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);padding-block:10px}
.cases__track{display:flex;gap:clamp(16px,2vw,28px);
  transition:transform .6s var(--ease-in-out);will-change:transform}

.case{
  flex:0 0 clamp(290px,58vw,620px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(178deg,var(--surf-2),var(--surf-1));
  padding:clamp(26px,3vw,42px);position:relative;overflow:hidden;
  transform:scale(.9);opacity:.4;filter:saturate(.55) blur(1px);
  transition:transform .6s var(--ease-in-out),opacity .6s var(--ease-in-out),filter .6s var(--ease-in-out),border-color .6s var(--ease-in-out);
}
.case.is-active{transform:scale(1);opacity:1;filter:none;border-color:rgba(166,80,255,.22)}
.case::before{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 60% at 100% 0%,rgba(100,39,187,.20),transparent 60%);
  opacity:0;transition:opacity .6s var(--ease-in-out)}
.case.is-active::before{opacity:1}

.case__head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}
.case__ix{font-family:var(--f-display);font-size:9.5px;letter-spacing:.26em;color:var(--ink-4)}
.case__sector{font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--purple);border:1px solid var(--line-lit);border-radius:999px;padding:5px 12px;
  background:rgba(166,80,255,.08);white-space:nowrap}
.case h3{position:relative;font-size:clamp(18px,1.6vw,24px);margin-bottom:12px}
.case__brief{position:relative;color:var(--ink-2);font-size:14.5px;margin-bottom:24px}
.case__what{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.case__what li{font-family:var(--f-display);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:6px 12px}

.case__res{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,2vw,26px);border-top:1px solid var(--line-2);padding-top:24px}
.res__n{display:flex;flex-direction:column;gap:9px}
.res__l{font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);max-width:18ch;line-height:1.6}

.case__media{position:relative;margin-top:26px;border:1px dashed var(--line-2);border-radius:12px;
  padding:14px 16px;display:flex;align-items:center;gap:12px;
  font-family:var(--f-display);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4)}
.case__media svg{width:14px;height:14px;fill:var(--ink-4);flex:0 0 14px}

.cases__nav{display:flex;align-items:center;gap:14px;margin-top:clamp(26px,3vw,40px)}
.cnav{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:rgba(243,243,247,.03);
  color:var(--white);cursor:pointer;display:grid;place-items:center;font-size:16px;
  transition:.4s var(--ease-in-out);font-family:var(--f-display)}
.cnav:hover:not(:disabled){border-color:var(--line-lit);background:rgba(166,80,255,.11);transform:translateY(-2px)}
.cnav:disabled{opacity:.28;cursor:not-allowed}
.cases__prog{flex:1;height:1px;background:rgba(200,202,209,.10);position:relative;overflow:hidden;max-width:280px}
.cases__prog i{position:absolute;inset:0 auto 0 0;background:var(--grad-signal);
  transition:width .6s var(--ease-in-out),transform .6s var(--ease-in-out)}
.cases__count{font-family:var(--f-display);font-size:10px;letter-spacing:.22em;color:var(--ink-3)}
.cases__count b{color:var(--white);font-weight:500}

/* ============================================================
   08 // ENGAGEMENT
   ============================================================ */
.paths{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.5vw,20px)}
.path{position:relative;padding:clamp(24px,2.4vw,34px);border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(178deg,var(--surf-2),var(--surf-1));overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .5s var(--ease-in-out),border-color .5s var(--ease-in-out)}
.path::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--grad-signal);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-in-out)}
.path:hover{transform:translateY(-4px);border-color:var(--line-lit)}
.path:hover::after{transform:scaleX(1)}
.path__ix{font-family:var(--f-display);font-weight:500;font-size:11px;letter-spacing:.24em;
  color:var(--purple);margin-bottom:20px}
.path h3{font-size:clamp(16px,1.35vw,19.5px);margin-bottom:11px}
.path p{color:var(--ink-2);font-size:14px;margin-bottom:22px}

/* ============================================================
   09 // ACCESS
   ============================================================ */
.access{position:relative;padding:clamp(90px,11vw,170px) 0;overflow:hidden;text-align:center}
.access{overflow:hidden}
.access__aura{max-width:100vw;position:absolute;bottom:-40%;left:50%;transform:translateX(-50%);width:min(1300px,130vw);
  aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(100,39,187,.26) 0%,rgba(100,39,187,.06) 38%,transparent 64%)}
.access .eyebrow{justify-content:center}
.access__h2{font-size:clamp(27px,3.6vw,50px);letter-spacing:-.05em}
.access__body{margin:26px auto 0;max-width:62ch;color:var(--ink-2);font-size:clamp(15px,1.16vw,17.5px)}
.access__cta{margin-top:38px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.access__sig{margin-top:clamp(48px,5vw,72px);display:inline-flex;align-items:center;gap:14px;
  border:1px solid var(--line);border-radius:999px;padding:12px 24px 12px 14px;
  background:rgba(243,243,247,.025);backdrop-filter:blur(10px)}
.access__sig img{height:34px;width:auto}
.access__sig div{display:flex;flex-direction:column;line-height:1.3;text-align:left}
.access__sig b{font-family:var(--f-display);font-weight:500;font-size:12.5px;letter-spacing:.04em;color:var(--white)}
.access__sig span{font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.access__sig em{color:var(--violet);font-style:normal}

/* ============================================================
   FOOTER — embossed wordmark (§3.5)
   ============================================================ */
.foot{position:relative;padding-top:clamp(60px,7vw,100px);border-top:1px solid var(--line);overflow:hidden}
.foot__tag{font-family:var(--f-display);font-weight:500;text-align:center;
  font-size:clamp(18px,2.1vw,31px);letter-spacing:-.045em;color:var(--white);margin-bottom:clamp(46px,5vw,72px)}

.emboss{position:relative;text-align:center;margin-top:clamp(40px,5vw,70px);pointer-events:none;user-select:none}
.emboss span{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:clamp(38px,13.6vw,196px);line-height:.86;letter-spacing:-.055em;
  color:#0A0A10;
  text-shadow:
     0 1px 0 rgba(200,202,209,.055),
     0 2px 1px rgba(0,0,0,.9),
     0 -1px 0 rgba(0,0,0,.7);
}
.emboss::before{
  content:"";position:absolute;left:50%;top:-46%;transform:translateX(-50%);
  width:78%;height:150%;pointer-events:none;
  background:radial-gradient(ellipse 60% 46% at 50% 30%,rgba(166,80,255,.14),transparent 68%);
}
.emboss::after{
  content:"";position:absolute;inset:auto 0 -1px 0;height:52%;
  background:linear-gradient(180deg,transparent,var(--black) 82%);
}

.foot__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(26px,4vw,60px);padding-bottom:clamp(40px,5vw,64px)}
.foot__brand p{margin-top:18px;color:var(--ink-3);font-size:14px;max-width:34ch}
.foot h4{font-family:var(--f-display);font-weight:500;font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:18px}
.foot nav a{display:block;padding:7px 0;color:var(--ink-2);font-size:13.5px;
  transition:color .3s var(--ease-in-out)}
.foot nav a:hover{color:var(--purple)}
.foot__base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  border-top:1px solid var(--line);padding:26px 0;
  font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4)}
.foot__ver em{color:var(--violet);font-style:normal}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1160px){
  .surfaces{display:none}
  .hero__h1{max-width:22ch}
  .rail{grid-template-columns:1fr;gap:34px}
  .rail__panel{position:relative;top:0;order:-1;aspect-ratio:1/.72}
  .caps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cap{grid-column:span 2}
  .cap--flag{grid-column:span 4;grid-template-columns:1fr;gap:30px}
  .cap__spec{border-left:0;border-top:1px solid var(--line-2);padding-left:0;padding-top:22px}
  .chans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .paths{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scale__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sechead__grid{grid-template-columns:1fr;align-items:start;gap:24px}
}

@media (max-width:940px){
  .nav__links{display:none}
  .burger{display:block}
  .nav.is-open{background:rgba(5,5,7,.97)}
  .stackcard{grid-template-columns:auto 1fr;gap:22px}
  .stackcard__viz{display:none}
  .prins{grid-template-columns:1fr}
  .proof{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:680px){
  :root{--r:13px;--r-lg:17px}
  .hero{padding-top:clamp(120px,26vw,160px)}
  .metrics{grid-template-columns:1fr;gap:22px}
  .caps{grid-template-columns:1fr}
  .cap,.cap--flag{grid-column:span 1}
  .chans{grid-template-columns:1fr}
  .paths{grid-template-columns:1fr}
  .scale__grid{grid-template-columns:1fr;gap:30px}
  .case__res{grid-template-columns:1fr;gap:18px}
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:span 2}
  .stackcard{grid-template-columns:1fr;gap:14px;top:100px}
  .engine__frame{padding:10px}
  .foot__base{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   REDUCED MOTION — everything collapses to final state
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .rv{opacity:1!important;filter:none!important;transform:none!important}
  .sweep{background-size:100% 100%!important;color:transparent!important}
  .e-scan,.e-flow,.srow{display:none}
  .load{display:none}
  .case{opacity:1;filter:none;transform:none}
}

/* ============================================================
   MINI VISUALISATIONS // capability cards
   All draw once when their card reveals (.is-in on the card).
   ============================================================ */
.v-bars rect{
  fill:rgba(200,202,209,.16);
  transform:scaleY(0);transform-origin:center bottom;transform-box:fill-box;
  transition:transform .8s var(--ease-land),fill .8s var(--ease-land);
  transition-delay:calc(var(--i) * 70ms + 250ms);
}
.is-in .v-bars rect{transform:scaleY(var(--h))}
.is-in .v-bars rect:nth-last-child(-n+3){fill:url(#gViolet)}

.v-line .v-draw{
  fill:none;stroke:url(#gViolet);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:400;stroke-dashoffset:400;
  transition:stroke-dashoffset 1.5s var(--ease-land) .3s;
}
.is-in .v-line .v-draw{stroke-dashoffset:0}
.v-line .v-area{fill:url(#gFade);opacity:0;transition:opacity 1s var(--ease-land) .7s}
.is-in .v-line .v-area{opacity:1}
.v-line .v-head{fill:var(--purple);opacity:0;transform:scale(0);transform-origin:center;transform-box:fill-box;
  transition:opacity .5s var(--ease-land) 1.5s,transform .5s var(--ease-land) 1.5s;
  filter:drop-shadow(0 0 6px rgba(166,80,255,.9))}
.is-in .v-line .v-head{opacity:1;transform:scale(1)}
.v-spark .v-grid line{stroke:rgba(200,202,209,.07);stroke-width:1}

.v-nodes circle{fill:rgba(200,202,209,.34);opacity:0;transform:scale(.2);transform-origin:center;transform-box:fill-box;
  transition:opacity .5s var(--ease-land),transform .5s var(--ease-land);transition-delay:var(--d,0s)}
.is-in .v-nodes circle{opacity:1;transform:scale(1)}
.v-nodes .v-src{fill:var(--purple);filter:drop-shadow(0 0 7px rgba(166,80,255,.9))}
.v-nodes .v-end{fill:var(--purple)}
.v-nodes .v-edge path{fill:none;stroke:rgba(200,202,209,.15);stroke-width:1;
  stroke-dasharray:80;stroke-dashoffset:80;transition:stroke-dashoffset 1.1s var(--ease-land) .25s}
.is-in .v-nodes .v-edge path{stroke-dashoffset:0}

.v-split rect{transform:scaleY(0);transform-origin:center bottom;transform-box:fill-box;
  transition:transform .75s var(--ease-land);transition-delay:calc(var(--i) * 65ms + 250ms)}
.is-in .v-split rect{transform:scaleY(var(--h))}
.v-split .v-org rect{fill:rgba(200,202,209,.16)}
.v-split .v-paid rect{fill:url(#gViolet)}
.v-split .v-base{stroke:var(--line-2);stroke-width:1}

/* ============================================================
   RAIL STAGE GRAPHICS
   ============================================================ */
.stage svg text{font-family:var(--f-display);font-size:10px;letter-spacing:.22em;fill:var(--silver)}
.sg-dim{fill:var(--ink-4)!important;font-size:9.5px!important}
.sg-hair{stroke:var(--line);stroke-width:1}
.sg-noise path{fill:none;stroke:rgba(200,202,209,.22);stroke-width:1.2}
.sg-conv path{fill:none;stroke:rgba(200,202,209,.16);stroke-width:1}
.sg-fan path{stroke:url(#gViolet);opacity:.5;stroke-dasharray:6 120;animation:flow 3.4s linear infinite}
.sg-out path{fill:none;stroke:url(#gViolet);stroke-width:1.8;filter:drop-shadow(0 0 6px rgba(166,80,255,.6))}
.sg-node{fill:var(--purple);filter:drop-shadow(0 0 10px rgba(166,80,255,.95))}
.sg-ends circle,.sg-pts circle{fill:var(--purple);opacity:.85}
.sg-curve{fill:none;stroke:url(#gViolet);stroke-width:2;stroke-linecap:round}
.sg-area{fill:url(#gFade)}
.sg-loop path{fill:none;stroke:rgba(166,80,255,.45);stroke-width:1.2;stroke-dasharray:4 6}
.sg-loop .sg-arrow{fill:var(--purple);stroke:none}

/* ============================================================
   STACK CARD VISUALS
   ============================================================ */
.sv{width:100%;height:auto}
.sv-in rect{fill:rgba(243,243,247,.03);stroke:var(--line-2);stroke-width:1}
.sv-arrow{fill:none;stroke:rgba(166,80,255,.55);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sv-node{fill:var(--purple);filter:drop-shadow(0 0 8px rgba(166,80,255,.85))}
.sv-tick path{stroke:url(#gViolet);stroke-width:2;stroke-linecap:round}
.sv-fan path{fill:none;stroke:rgba(200,202,209,.18);stroke-width:1}
.sv-ends circle{fill:var(--purple);opacity:.8}
.sv-curve{fill:none;stroke:url(#gViolet);stroke-width:2;stroke-linecap:round}
.sv-base{stroke:var(--line);stroke-width:1}

/* ============================================================
   MEDIA SYSTEM
   Branded, drop-in frames for clips, screenshots and stills.
   Empty state is designed — it reads as a slot, never as broken.
   To fill: drop <img> or <video> inside .media and add .is-filled.
   ============================================================ */
.media{
  position:relative;border-radius:14px;overflow:hidden;isolation:isolate;
  border:1px solid var(--line-2);
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(100,39,187,.16),transparent 62%),
    linear-gradient(158deg,#16161F,#0C0C12);
  display:grid;place-items:center;
  transition:transform .55s var(--ease-in-out),border-color .55s var(--ease-in-out),box-shadow .55s var(--ease-in-out);
}
.media img,.media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
}
.media.is-filled .media__ph{display:none}

/* aspect variants */
.media--9x16{aspect-ratio:9/16}
.media--16x9{aspect-ratio:16/9}
.media--4x5{aspect-ratio:4/5}
.media--sq{aspect-ratio:1}

/* hairline grid + corner ticks so the empty frame has structure */
.media::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(200,202,209,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(200,202,209,.05) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000,transparent 78%);
}
.media.is-filled::before{opacity:0}
/* slow violet scan so an empty slot still feels alive */
.media::after{
  content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(166,80,255,.10),transparent);
  animation:mscan 6.5s var(--ease-in-out) infinite;
}
.media.is-filled::after{display:none}
@keyframes mscan{0%{left:-45%}60%,100%{left:120%}}

.media__ph{
  position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:11px;
  padding:16px;text-align:center;
}
.media__play{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-lit);background:rgba(166,80,255,.10);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.media__play svg{width:13px;height:13px;fill:var(--purple);margin-left:2px}
.media__lab{
  font-family:var(--f-display);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-4);line-height:1.7;max-width:20ch;
}
.media__lab b{display:block;color:var(--ink-3);font-weight:400}

/* meta chips layered over the frame */
.media__chip{
  position:absolute;z-index:4;font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--line);border-radius:999px;padding:4px 9px;
  background:rgba(5,5,7,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.media__chip--tl{top:10px;left:10px}
.media__chip--tr{top:10px;right:10px}
.media__chip--bl{bottom:10px;left:10px}
.media__chip--br{bottom:10px;right:10px;color:var(--purple);border-color:var(--line-lit)}
.media__chip svg{width:9px;height:9px;fill:currentColor;vertical-align:-1px;margin-right:5px}

.media:hover{transform:translateY(-4px);border-color:var(--line-lit);
  box-shadow:0 26px 60px -30px rgba(100,39,187,.9)}

/* ============================================================
   DEVICE — phone shell for native-output mockups
   ============================================================ */
.device{
  position:relative;border-radius:clamp(22px,2.4vw,34px);padding:clamp(5px,.62vw,8px);
  background:linear-gradient(158deg,#33333E 0%,#15151C 34%,#0B0B10 100%);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95),0 0 0 1px rgba(200,202,209,.09),
             inset 0 1px 0 rgba(243,243,247,.10);
}
.device__screen{position:relative;border-radius:clamp(17px,1.9vw,27px);overflow:hidden;
  aspect-ratio:9/19.2;background:#000}
.device__notch{
  position:absolute;z-index:6;top:9px;left:50%;transform:translateX(-50%);
  width:31%;height:15px;border-radius:999px;background:#000;
}
.device .media{border:0;border-radius:0;height:100%;aspect-ratio:auto}
.device__cap{
  margin-top:14px;text-align:center;font-family:var(--f-display);font-size:9.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4);
}
.device__cap b{display:block;color:var(--silver);font-weight:400;margin-bottom:4px}

/* ============================================================
   HERO COLLAGE
   ============================================================ */
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(30px,5vw,80px);align-items:center}

.collage{position:relative;padding-block:clamp(10px,3vw,40px)}
.collage__glow{
  position:absolute;inset:-18% -12%;pointer-events:none;
  background:radial-gradient(ellipse 62% 54% at 52% 46%,rgba(100,39,187,.34),transparent 66%);
  filter:blur(6px);
}
.collage__stage{position:relative;display:grid;grid-template-columns:repeat(12,1fr);align-items:center}
.collage__lead{grid-column:4 / 10;position:relative;z-index:3;
  transform:perspective(1400px) rotateY(-9deg) rotateX(2deg);
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.8))}
.collage__side{position:absolute;z-index:2;width:31%;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.75))}
.collage__side--l{left:-2%;top:16%;transform:perspective(1200px) rotateY(13deg) rotate(-5deg)}
.collage__side--r{right:-3%;top:36%;transform:perspective(1200px) rotateY(-13deg) rotate(4deg)}
.collage__tag{
  position:absolute;z-index:5;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--silver);border:1px solid var(--line-2);border-radius:999px;padding:8px 14px;
  background:rgba(5,5,7,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.9);
  animation:bob 7s var(--ease-in-out) infinite;
}
.collage__tag i{width:5px;height:5px;border-radius:50%;background:#3DDC84;
  box-shadow:0 0 8px rgba(61,220,132,.9)}
.collage__tag b{color:var(--purple);font-weight:500}
.collage__tag--a{top:4%;left:-4%;animation-delay:0s}
.collage__tag--b{bottom:12%;right:-6%;animation-delay:-2.4s}
.collage__tag--c{bottom:40%;left:-8%;animation-delay:-4.6s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* drifting clip rail behind the collage */
.driftwrap{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  mask-image:radial-gradient(ellipse 74% 72% at 50% 50%,#000 12%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 74% 72% at 50% 50%,#000 12%,transparent 76%);
  opacity:.5;
}
.drift{display:flex;gap:12px;width:max-content;position:absolute}
.drift--a{top:-6%;left:0;animation:slideL 64s linear infinite}
.drift--b{bottom:-6%;left:0;animation:slideR 78s linear infinite}
.drift .media{width:104px;flex:0 0 104px;border-radius:10px}
.drift .media::after{display:none}

/* ============================================================
   CASE MEDIA
   ============================================================ */
.case__shot{position:relative;margin-bottom:24px}
.case__strip{
  position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(9px,1.2vw,14px);margin-top:26px;
}
.case__strip .media{border-radius:11px}

/* ============================================================
   NATIVE OUTPUT ROW
   ============================================================ */
.native{margin-bottom:clamp(46px,5vw,78px)}
.native__cap{display:flex;align-items:center;gap:.8em;font-family:var(--f-display);font-size:9.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-4);margin-bottom:26px}
.native__lab{color:var(--purple)}
.native__cap em{color:var(--ink-4);font-style:normal}
.native__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.4vw,38px);
  align-items:start}
.native__item{
  transform-origin:center bottom;
  /* gentle arc: outer phones sit lower and tilt away */
  transform:translateY(calc(var(--i) * 0px));
}
.native__item:nth-child(1){transform:translateY(20px) rotate(-3.4deg)}
.native__item:nth-child(2){transform:translateY(0) rotate(-1.1deg)}
.native__item:nth-child(3){transform:translateY(0) rotate(1.1deg)}
.native__item:nth-child(4){transform:translateY(20px) rotate(3.4deg)}
.native__item .device{transition:transform .6s var(--ease-in-out)}
.native__item:hover .device{transform:translateY(-10px)}

@media (max-width:1160px){
  .native__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .native__item:nth-child(n){transform:none}
}
@media (max-width:680px){
  .native__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .case__strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}

/* ============================================================
   HERO GRID — responsive
   ============================================================ */
@media (max-width:1160px){
  .hero__grid{grid-template-columns:1fr;gap:44px}
  .collage{max-width:520px;margin-inline:auto;width:100%}
  .collage__tag--a{left:2%}
  .collage__tag--b{right:2%}
  .collage__tag--c{left:0%}
}
@media (max-width:680px){
  .collage__side{display:none}
  .collage__lead{grid-column:2 / 12;transform:none}
  .collage__tag{font-size:9.5px;padding:6px 11px}
  .collage__tag--c{display:none}
}

/* ════════════════════════════════════════════════════════════
   v3 // VISUAL STORYTELLING SYSTEM
   Every visual explains the machine, demonstrates scale,
   or proves an outcome. Nothing decorative.
   ════════════════════════════════════════════════════════════ */

/* ============================================================
   HERO VIDEO — integrated, not mockup'd
   ============================================================ */
.herovid{position:relative;isolation:isolate}
.herovid__frame{
  position:relative;aspect-ratio:4/3.4;overflow:hidden;border-radius:20px;
  /* soft edge mask so it dissolves into the page rather than sitting in a box */
  mask-image:radial-gradient(ellipse 78% 74% at 50% 48%,#000 42%,transparent 88%);
  -webkit-mask-image:radial-gradient(ellipse 78% 74% at 50% 48%,#000 42%,transparent 88%);
}
.herovid__frame video,.herovid__frame img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* vignette */
.herovid__frame::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 74% 70% at 50% 46%,transparent 38%,rgba(5,5,7,.62) 82%,var(--black) 100%);
}
/* restrained purple glow behind, never on top */
.herovid__glow{
  position:absolute;inset:-14%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 54% 48% at 50% 46%,rgba(100,39,187,.30),transparent 68%);
  filter:blur(10px);
}
.herovid .media{border:0;border-radius:20px;height:100%;aspect-ratio:auto}

/* ============================================================
   SIGNAL MAP — reusable routing component
   SOURCE -> CONTENT -> SURFACES -> AUDIENCE
   ============================================================ */
.signalmap{position:relative;width:100%}
.signalmap svg{width:100%;height:auto;display:block;overflow:visible}

.sm-col{font-family:var(--f-display);font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;fill:var(--ink-4)}
.sm-lab{font-family:var(--f-display);font-size:9.5px;letter-spacing:.14em;fill:var(--ink-3)}
.sm-lab--src{fill:var(--silver);font-size:10px;letter-spacing:.1em}

/* routes: neutral by default, purple only when active */
.sm-route{
  fill:none;stroke:rgba(200,202,209,.14);stroke-width:1;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.15s var(--ease-land) var(--rd,0s),stroke .6s var(--ease-in-out);
}
.signalmap.is-drawn .sm-route{stroke-dashoffset:0}
.sm-route.is-active{stroke:url(#gViolet);stroke-width:1.3}

/* pulse travelling along an active route */
.sm-pulse{
  fill:none;stroke:var(--purple);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:5 var(--gap,200);
  opacity:0;
  filter:drop-shadow(0 0 5px rgba(166,80,255,.85));
}
.signalmap.is-drawn .sm-pulse{opacity:.95;animation:smpulse var(--dur,3.4s) linear infinite var(--rd,0s)}
@keyframes smpulse{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}

/* nodes */
.sm-node{
  fill:var(--surf-3);stroke:rgba(200,202,209,.24);stroke-width:1;
  opacity:0;transform:scale(.4);transform-origin:center;transform-box:fill-box;
  transition:opacity .5s var(--ease-land) var(--rd,0s),transform .5s var(--ease-land) var(--rd,0s),
             fill .6s var(--ease-in-out),stroke .6s var(--ease-in-out);
}
.signalmap.is-drawn .sm-node{opacity:1;transform:scale(1)}
.sm-node.is-active{stroke:rgba(166,80,255,.75);fill:rgba(166,80,255,.16)}
.sm-node.is-source{fill:rgba(166,80,255,.20);stroke:var(--purple);
  filter:drop-shadow(0 0 9px rgba(166,80,255,.6))}
.sm-node.is-win{fill:var(--purple);stroke:var(--purple);
  filter:drop-shadow(0 0 11px rgba(166,80,255,.95))}
.sm-node.is-weak{opacity:.22;stroke:rgba(200,202,209,.14)}
.signalmap.is-drawn .sm-node.is-weak{opacity:.22}

.sm-tick{stroke:rgba(200,202,209,.1);stroke-width:1}
.sm-plate{fill:rgba(243,243,247,.02);stroke:rgba(200,202,209,.10);stroke-width:1}

/* activity trace behind the performance variant */
.sm-trace{fill:none;stroke:rgba(200,202,209,.13);stroke-width:1}
.sm-trace--lit{stroke:url(#gViolet);stroke-width:1.5;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.6s var(--ease-land) .4s}
.signalmap.is-drawn .sm-trace--lit{stroke-dashoffset:0}
.sm-area{fill:url(#gFade);opacity:0;transition:opacity 1s var(--ease-land) .9s}
.signalmap.is-drawn .sm-area{opacity:1}

.signalmap__legend{
  display:flex;flex-wrap:wrap;gap:22px;margin-top:20px;
  font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-4);
}
.signalmap__legend span{display:inline-flex;align-items:center;gap:8px}
.sm-key{width:14px;height:1px;background:rgba(200,202,209,.3);display:inline-block}
.sm-key--on{background:var(--purple);height:1.5px;box-shadow:0 0 6px rgba(166,80,255,.8)}
.sm-key--win{width:6px;height:6px;border-radius:50%;background:var(--purple);
  box-shadow:0 0 8px rgba(166,80,255,.9)}

/* ============================================================
   PROOF FRAME — one consistent treatment for all evidence
   ============================================================ */
.proof-frame{margin:0;position:relative}
.proof-frame__box{
  position:relative;overflow:hidden;border-radius:12px;
  background:linear-gradient(158deg,#1B1B27,#101018);
  border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(243,243,247,.05),0 12px 34px -20px rgba(0,0,0,.9);
  transition:transform .5s var(--ease-in-out),border-color .5s var(--ease-in-out);
}
.proof-frame__box img{width:100%;height:100%;object-fit:cover;display:block}
.proof-frame--16x9 .proof-frame__box{aspect-ratio:16/9}
.proof-frame--4x3  .proof-frame__box{aspect-ratio:4/3}
.proof-frame--9x16 .proof-frame__box{aspect-ratio:9/16}
.proof-frame--sq   .proof-frame__box{aspect-ratio:1}
.proof-frame--auto .proof-frame__box{aspect-ratio:auto}
.proof-frame:hover .proof-frame__box{transform:scale(1.01);border-color:var(--line-lit)}
.proof-frame figcaption{
  margin-top:11px;font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-4);line-height:1.7;
}
/* empty state — structured, never "broken" */
.proof-frame__ph{
  position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;
  background-image:
    linear-gradient(to right,rgba(200,202,209,.07) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(200,202,209,.07) 1px,transparent 1px);
  background-size:30px 30px;
}
.proof-frame__ph span{
  font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);line-height:1.9;
}
.proof-frame__ph b{display:block;color:var(--white);font-weight:500;font-size:10.5px;
  letter-spacing:.12em;margin-bottom:7px}

/* ============================================================
   TRANSFORMATION SEQUENCE — 1 source becomes 12+
   ============================================================ */
.xform{position:relative;margin-bottom:clamp(48px,6vw,90px)}
.xform__sticky{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.xform__stage{position:relative;width:100%;max-width:1040px;aspect-ratio:16/9;margin-inline:auto}

.xcard{
  position:absolute;top:50%;left:50%;
  border-radius:12px;overflow:hidden;
  border:1px solid var(--line-2);
  background:linear-gradient(158deg,#16161F,#0C0C12);
  box-shadow:0 20px 50px -26px rgba(0,0,0,.95);
  will-change:transform,opacity;
}
.xcard__ph{position:absolute;inset:0;display:grid;place-items:center;padding:10px;text-align:center;
  background-image:
    linear-gradient(to right,rgba(200,202,209,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(200,202,209,.045) 1px,transparent 1px);
  background-size:26px 26px}
.xcard__lab{font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-4);line-height:1.7}
.xcard__lab b{display:block;color:var(--ink-3);font-weight:400;margin-bottom:3px}
.xcard--src{border-color:rgba(166,80,255,.3);box-shadow:0 30px 70px -30px rgba(100,39,187,.9)}
.xcard--src .xcard__lab b{color:var(--silver)}
.xcard__chip{position:absolute;top:9px;left:9px;z-index:3;
  font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--purple);border:1px solid var(--line-lit);border-radius:999px;padding:3px 8px;
  background:rgba(5,5,7,.75)}

.xform__hud{
  position:absolute;left:50%;bottom:clamp(22px,5vh,64px);transform:translateX(-50%);
  display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);z-index:5;white-space:nowrap;
  font-family:var(--f-display);font-size:clamp(10px,1.05vw,14px);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);
  opacity:0;transition:opacity .7s var(--ease-land);
}
.xform__hud.is-on{opacity:1}
.xform__hud b{color:var(--white);font-weight:500;font-size:1.5em;letter-spacing:-.02em}
.xform__hud em{color:var(--purple);font-style:normal;font-size:1.2em}
.xform__hud .lit{color:transparent;background:var(--grad-signal);
  -webkit-background-clip:text;background-clip:text}
.xform__rail{position:absolute;left:50%;top:clamp(18px,4vh,44px);transform:translateX(-50%);z-index:5;
  width:min(300px,50vw);height:1px;background:rgba(200,202,209,.12)}
.xform__rail i{position:absolute;inset:0 auto 0 0;width:0;background:var(--grad-signal);
  box-shadow:0 0 8px rgba(166,80,255,.8)}

/* ============================================================
   CASE STUDIES — three tiers
   ============================================================ */
/* — Tier 1: large editorial — */
.ecase{position:relative;padding-block:clamp(56px,7vw,110px);border-top:1px solid var(--line)}
.ecase:first-of-type{border-top:0}
.ecase__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(28px,5vw,74px);align-items:center}
.ecase--flip .ecase__grid{direction:rtl}
.ecase--flip .ecase__grid > *{direction:ltr}

.ecase__ix{display:flex;align-items:center;gap:14px;margin-bottom:22px;
  font-family:var(--f-display);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-4)}
.ecase__ix b{color:var(--purple);font-weight:500}
.ecase__ix i{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent);font-style:normal}
.ecase h3{font-size:clamp(24px,2.9vw,42px);letter-spacing:-.05em;margin-bottom:16px}
.ecase__brief{color:var(--ink-2);font-size:clamp(14.5px,1.06vw,16px);max-width:52ch;margin-bottom:30px}

.ecase__hero{position:relative}
.ecase__hero .proof-frame__box{border-radius:var(--r-lg)}

/* primary metric — the visual anchor */
.bigmetric{margin-bottom:26px}
.bigmetric__n{font-family:var(--f-display);font-weight:500;line-height:.92;
  font-size:clamp(48px,7.4vw,110px);letter-spacing:-.06em;
  color:transparent;background:var(--grad-steel);-webkit-background-clip:text;background-clip:text;
  display:block}
.bigmetric__l{display:block;margin-top:12px;font-family:var(--f-display);font-size:9.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3)}

.submetrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,26px);
  border-top:1px solid var(--line);padding-top:24px;margin-bottom:30px}
.submetrics div{display:flex;flex-direction:column;gap:8px}
.submetrics b{font-family:var(--f-display);font-weight:500;font-size:clamp(16px,1.7vw,24px);
  letter-spacing:-.035em;color:var(--white)}
.submetrics b .arrow{color:var(--purple)}
.submetrics span{font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-4);line-height:1.7}

.proofrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,16px)}
.proofrow--2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* — Crown88: cinematic, darker — */
.ecase--cine{background:
  radial-gradient(ellipse 70% 60% at 50% 0%,rgba(100,39,187,.15),transparent 62%),
  linear-gradient(180deg,var(--graphite),rgba(5,5,7,.6));
  border-radius:var(--r-lg);padding-inline:clamp(20px,3.4vw,56px);
  border:1px solid var(--line);margin-block:clamp(20px,3vw,44px)}
.ecase--cine .ecase__grid{align-items:start}

/* — FG Vogel: before / after — */
.beforeafter{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,3vw,40px);
  align-items:center;margin-bottom:32px}
.ba{display:flex;flex-direction:column;gap:10px}
.ba__k{font-family:var(--f-display);font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-4)}
.ba__n{font-family:var(--f-display);font-weight:500;font-size:clamp(28px,4.2vw,60px);
  line-height:1;letter-spacing:-.05em;color:var(--ink-3)}
.ba--after .ba__n{color:transparent;background:var(--grad-steel);
  -webkit-background-clip:text;background-clip:text}
.ba--after .ba__k{color:var(--purple)}
.ba__link{position:relative;width:clamp(50px,9vw,120px);height:22px}
.ba__link svg{width:100%;height:100%;overflow:visible}
.ba__link path{fill:none;stroke:url(#gViolet);stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:var(--len,140);stroke-dashoffset:var(--len,140);
  transition:stroke-dashoffset 1.3s var(--ease-land) .3s}
.is-in .ba__link path{stroke-dashoffset:0}
.ba__link circle{fill:var(--purple);opacity:0;transition:opacity .4s var(--ease-land) 1.4s;
  filter:drop-shadow(0 0 6px rgba(166,80,255,.9))}
.is-in .ba__link circle{opacity:1}
.ba__note{font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;margin-bottom:30px}

/* — Tier 2: supporting modules — */
.scases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,30px)}
.scase{position:relative;padding:clamp(24px,2.6vw,38px);border:1px solid var(--line);
  border-radius:var(--r-lg);background:linear-gradient(178deg,var(--surf-2),var(--surf-1));
  overflow:hidden;transition:border-color .5s var(--ease-in-out)}
.scase:hover{border-color:var(--line-lit)}
.scase h3{font-size:clamp(18px,1.6vw,24px);margin-bottom:12px}
.scase__who{font-family:var(--f-display);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--purple);margin-bottom:16px}
.scase__m{display:flex;align-items:baseline;gap:12px;margin:22px 0}
.scase__m b{font-family:var(--f-display);font-weight:500;font-size:clamp(24px,2.6vw,38px);
  letter-spacing:-.045em;color:transparent;background:var(--grad-steel);
  -webkit-background-clip:text;background-clip:text}
.scase__m span{font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-4);max-width:16ch;line-height:1.6}
.scase__vis{margin-top:24px}
/* layered fanpage surfaces */
.layered{position:relative;height:clamp(150px,17vw,215px)}
.layered .proof-frame{position:absolute;top:0;width:52%;transition:transform .55s var(--ease-in-out)}
.layered .proof-frame:nth-child(1){left:0;transform:rotate(-4deg) translateY(10px);z-index:1}
.layered .proof-frame:nth-child(2){left:24%;z-index:3}
.layered .proof-frame:nth-child(3){left:48%;transform:rotate(4deg) translateY(10px);z-index:2}
.layered:hover .proof-frame:nth-child(1){transform:rotate(-7deg) translateY(4px)}
.layered:hover .proof-frame:nth-child(3){transform:rotate(7deg) translateY(4px)}

/* — Tier 3: results wall — */
.wall{columns:4;column-gap:clamp(10px,1.4vw,16px)}
.wall .proof-frame{break-inside:avoid;margin-bottom:clamp(10px,1.4vw,16px)}
.wall .proof-frame__box{cursor:zoom-in}
.wall__note{margin-top:clamp(24px,3vw,38px);font-family:var(--f-display);font-size:9.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4);text-align:center}

/* lightbox */
.lb{position:fixed;inset:0;z-index:400;display:none;place-items:center;padding:5vw;
  background:rgba(5,5,7,.93);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.lb.is-on{display:grid}
.lb img{max-width:92vw;max-height:88vh;border-radius:12px;border:1px solid var(--line-2)}
.lb__ph{width:min(720px,86vw);aspect-ratio:16/10;border-radius:12px;border:1px solid var(--line-2);
  background:linear-gradient(158deg,#141420,#0B0B11);display:grid;place-items:center;
  font-family:var(--f-display);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4)}
.lb__x{position:absolute;top:26px;right:26px;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-2);background:rgba(243,243,247,.04);color:var(--white);
  cursor:pointer;font-size:18px;font-family:var(--f-display)}
.lb__x:hover{border-color:var(--line-lit);background:rgba(166,80,255,.12)}

/* ============================================================
   PLATFORM COVERAGE — media-surface mockups, not equal cards
   ============================================================ */
.surfaces2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(12px,1.6vw,22px);align-items:end}
.surf{position:relative;display:flex;flex-direction:column;gap:14px}
.surf__frame{
  position:relative;border-radius:13px;overflow:hidden;border:1px solid var(--line-2);
  background:linear-gradient(158deg,#15151E,#0A0A10);
  transition:transform .55s var(--ease-in-out),border-color .55s var(--ease-in-out);
}
.surf:hover .surf__frame{transform:translateY(-5px);border-color:var(--line-lit)}
.surf__frame::before{
  content:"";position:absolute;inset:0;z-index:1;
  background-image:
    linear-gradient(to right,rgba(200,202,209,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(200,202,209,.045) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(ellipse 78% 70% at 50% 50%,#000,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 78% 70% at 50% 50%,#000,transparent 80%);
}
.surf__ico{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);
  width:26px;height:26px;fill:var(--silver);opacity:.5}
.surf__meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.surf__name{font-family:var(--f-display);font-weight:500;font-size:13px;letter-spacing:-.01em;color:var(--white)}
.surf__fmt{font-family:var(--f-display);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4)}
.surf__tier{font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-4);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.surf__tier--p{color:var(--purple);border-color:var(--line-lit);background:rgba(166,80,255,.08)}
/* differing proportions per surface type */
.surf--vert  {grid-column:span 2}  .surf--vert   .surf__frame{aspect-ratio:9/16}
.surf--vert2 {grid-column:span 2}  .surf--vert2  .surf__frame{aspect-ratio:9/16}
.surf--wide  {grid-column:span 4}  .surf--wide   .surf__frame{aspect-ratio:16/9}
.surf--feed  {grid-column:span 4}  .surf--feed   .surf__frame{aspect-ratio:4/3}
.surf--thread{grid-column:span 6}  .surf--thread .surf__frame{aspect-ratio:16/7}
.surf--doc   {grid-column:span 6}  .surf--doc    .surf__frame{aspect-ratio:16/7}

/* ============================================================
   OPERATING SCALE — typography is the visual. Silence.
   ============================================================ */
.scale2{padding:clamp(96px,13vw,200px) 0;border-block:1px solid var(--line);position:relative}
.scale2__grid{display:flex;flex-direction:column}
.scale2__row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,60px);
  align-items:baseline;padding-block:clamp(22px,3.2vw,46px);
  border-bottom:1px solid var(--line);
}
.scale2__row:last-child{border-bottom:0}
.scale2__n{
  font-family:var(--f-display);font-weight:500;line-height:.86;
  font-size:clamp(52px,12.5vw,190px);letter-spacing:-.065em;
  color:transparent;background:var(--grad-steel);
  -webkit-background-clip:text;background-clip:text;
}
.scale2__l{font-family:var(--f-display);font-size:clamp(9px,.82vw,11px);letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-3);text-align:right;max-width:20ch}

/* masked reveal — the number rises out of its own line */
.maskline{display:block;overflow:hidden}
.maskline > span{display:block;transform:translateY(102%);
  transition:transform 1.15s var(--ease-land) var(--rd,0s)}
.is-in .maskline > span{transform:translateY(0)}

/* ============================================================
   FINAL CTA — emblem, one pulse, calm
   ============================================================ */
.access{isolation:isolate}
.access__emblem{
  position:absolute;z-index:-1;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(680px,86vw);opacity:.05;pointer-events:none;
  filter:grayscale(1) brightness(1.6);
}
.access__pulse{position:absolute;z-index:-1;inset:0;pointer-events:none;overflow:hidden}
.access__pulse svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(760px,92vw);height:auto;overflow:visible}
.access__pulse path{fill:none;stroke:var(--purple);stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:6 620;opacity:.8;filter:drop-shadow(0 0 7px rgba(166,80,255,.9));
  animation:ctapulse 7s linear infinite}
@keyframes ctapulse{from{stroke-dashoffset:626}to{stroke-dashoffset:0}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1160px){
  .ecase__grid{grid-template-columns:1fr;gap:34px}
  .ecase--flip .ecase__grid{direction:ltr}
  .wall{columns:3}
  .surfaces2{grid-template-columns:repeat(8,minmax(0,1fr))}
  .surf--wide,.surf--feed{grid-column:span 4}
  .surf--thread,.surf--doc{grid-column:span 8}
  .scale2__n{font-size:clamp(46px,13vw,120px)}
}
@media (max-width:940px){
  .herovid__frame{aspect-ratio:16/11}
  .xform__sticky{height:auto;position:relative;padding-block:40px}
  .xform__stage{aspect-ratio:4/5}
  .scases{grid-template-columns:1fr}
}
@media (max-width:680px){
  .wall{columns:2}
  .submetrics{grid-template-columns:1fr;gap:16px}
  .proofrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .beforeafter{grid-template-columns:1fr;gap:20px;text-align:center}
  .ba__link{width:100%;height:44px;transform:rotate(90deg)}
  .surfaces2{grid-template-columns:repeat(4,minmax(0,1fr))}
  .surf--vert,.surf--vert2{grid-column:span 2}
  .surf--wide,.surf--feed,.surf--thread,.surf--doc{grid-column:span 4}
  .scale2__row{grid-template-columns:1fr;gap:8px}
  .scale2__l{text-align:left}
  .layered .proof-frame{width:60%}
}
@media (prefers-reduced-motion:reduce){
  .signalmap .sm-route,.signalmap .sm-node,.sm-trace--lit,.sm-area{
    stroke-dashoffset:0!important;opacity:1!important;transform:none!important}
  .sm-pulse,.access__pulse path{animation:none!important;opacity:.5!important}
  .maskline > span{transform:none!important}
  .xform__sticky{position:relative;height:auto}
}

/* ---------- capability viz additions ---------- */
.v-nodes .v-outs rect{
  fill:rgba(200,202,209,.14);stroke:rgba(200,202,209,.18);stroke-width:1;
  opacity:0;transform:scale(.4);transform-origin:center;transform-box:fill-box;
  transition:opacity .5s var(--ease-land) var(--d,0s),transform .5s var(--ease-land) var(--d,0s);
}
.is-in .v-nodes .v-outs rect{opacity:1;transform:scale(1)}
.v-nodes .v-dim rect{opacity:0;fill:rgba(200,202,209,.07);stroke:rgba(200,202,209,.09)}
.is-in .v-nodes .v-dim rect{opacity:.5}
.v-nodes .v-win{
  fill:url(#gViolet);stroke:none;opacity:0;transform:scale(.4);
  transform-origin:center;transform-box:fill-box;
  filter:drop-shadow(0 0 9px rgba(166,80,255,.85));
  transition:opacity .55s var(--ease-land) var(--d,0s),transform .55s var(--ease-land) var(--d,0s);
}
.is-in .v-nodes .v-win{opacity:1;transform:scale(1)}
.v-nodes .v-halo{fill:rgba(166,80,255,.07);stroke:rgba(166,80,255,.22);stroke-width:1}
.v-nodes .v-orbit circle{fill:rgba(200,202,209,.34)}
.v-plate{fill:rgba(243,243,247,.03);stroke:rgba(200,202,209,.14);stroke-width:1}
.v-line .v-mark{stroke:rgba(166,80,255,.4);stroke-width:1;stroke-dasharray:2 4;
  opacity:0;transition:opacity .5s var(--ease-land) 1.4s}
.is-in .v-line .v-mark{opacity:1}

/* ════════════════════════════════════════════════════════════
   HERO
   The film is the environment. No card, no shell, no device.
   Masked edges dissolve it into Phantom Black so it reads as
   something happening inside the page, not a video placed on it.
   ════════════════════════════════════════════════════════════ */
.hero{position:relative;height:150svh;isolation:isolate;background:var(--black)}
.hero__pin{
  position:sticky;top:0;height:100svh;overflow:hidden;background:var(--black);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(110px,12vw,150px) 0 clamp(48px,5vw,72px);
}

/* ---------- the film ---------- */
/* full-bleed: the film is the hero background, not an element beside the copy */
.hero__film{
  position:absolute;z-index:0;pointer-events:none;
  inset:0;width:100%;height:100%;transform:none;
}
.hero__v,.hero__poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:hue-rotate(-8deg) saturate(1.06) contrast(1.06);
}
.hero__v{opacity:0;transition:opacity .9s linear}
.hero__v.is-live{opacity:1}
.hero__poster{z-index:-1}

/* restrained illumination behind the film — not a purple wash */
.hero__halo{
  position:absolute;z-index:-2;inset:-12% 0 -12% 6%;   /* never past the right edge */
  background:radial-gradient(ellipse 46% 44% at 66% 50%,rgba(100,39,187,.22),transparent 68%);
  filter:blur(8px);
}

/* ---------- the copy ---------- */
.hero__inner{position:relative;z-index:3;width:100%}
.hero__copy{max-width:min(920px,92vw);margin-inline:auto;text-align:center}

.hero__eyebrow{margin-bottom:clamp(20px,2.3vw,30px);justify-content:center}

/* Supply is monospaced — every glyph is .6em wide, so the spec's
   7.5rem ceiling would run ~30% wider than a proportional face and
   overflow the copy column. Scaled to the typeface, per the brief. */
.hero__h1{
  font-size:clamp(20px,2.25vw,33px);
  line-height:1.14;letter-spacing:-.04em;font-weight:500;
  margin-bottom:clamp(18px,2.1vw,26px);
  text-shadow:0 2px 28px rgba(5,5,7,.75);
}
/* white into Signal Purple, the way the original resolves the last line */
.hero__grad{
  background:linear-gradient(98deg,#C79BFF 0%,var(--purple) 42%,#7B34D6 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.hero__lede{
  color:var(--ink-2);max-width:min(76ch,100%);margin-inline:auto;
  font-size:clamp(13.5px,1.02vw,16px);line-height:1.72;
  text-shadow:0 1px 18px rgba(5,5,7,.8);
}
.hero__cta{margin-top:clamp(28px,3.2vw,40px);display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- proof metrics: text columns, thin dividers, no cards ---------- */
.hero__metrics{
  margin-top:clamp(38px,4.6vw,64px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
  max-width:820px;margin-inline:auto;text-align:center;
}
.hero__metrics li{
  display:flex;flex-direction:column;gap:8px;align-items:center;
  padding:clamp(18px,1.9vw,24px) clamp(8px,1.2vw,16px) 0;
  border-left:1px solid var(--line);
}
.hero__metrics li:first-child{border-left:0}
.hero__metrics b{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(19px,1.85vw,27px);letter-spacing:-.04em;line-height:1;
  color:transparent;background:var(--grad-steel);
  -webkit-background-clip:text;background-clip:text;
}
.hero__metrics span:last-child{
  font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.7;
}

/* ---------- entrance: film first, then copy in order ---------- */
.hero__eyebrow,.hero__h1,.hero__lede,.hero__cta,.hero__metrics{
  opacity:0;transform:translateY(22px);filter:blur(6px);
}
.hero__copy{will-change:opacity,transform}
/* the film fades up on load and then simply plays */
.hero__film{opacity:0;transition:opacity 1.2s var(--ease-land)}
.hero.is-ready .hero__film{opacity:1}

/* ---------- responsive ---------- */
@media (max-width:1199px){
  .hero__film{width:min(86vw,1000px);height:auto;top:50%;bottom:auto;transform:translateY(-50%);opacity:.5}
  .hero.is-ready .hero__film{opacity:.55}
  .hero__copy{max-width:min(620px,72vw)}
  .hero__blend{background:
    linear-gradient(90deg,var(--black) 0%,rgba(5,5,7,.9) 14%,rgba(5,5,7,.4) 36%,transparent 60%),
    linear-gradient(180deg,var(--black) 0%,transparent 18%,transparent 78%,var(--black) 100%);}
}
@media (max-width:767px){
  .hero{height:auto}
  .hero__pin{position:relative;height:auto;display:flex;flex-direction:column;align-items:stretch;
        padding:clamp(112px,26vw,140px) 0 clamp(40px,10vw,60px)}
  .hero__inner,.hero__copy{display:contents}
  .hero__eyebrow{order:1}
  .hero__h1{order:2}
  .hero__lede{order:3}
  .hero__cta{order:4}
  .hero__film{order:5;position:relative;inset:auto;transform:none;opacity:1;
              width:100%;height:auto;aspect-ratio:16/9;margin:clamp(30px,8vw,44px) 0 0}
  .hero.is-ready .hero__film{opacity:1}
  .hero__metrics{order:6;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(28px,7vw,40px)}
  .hero__metrics li:nth-child(3),.hero__metrics li:nth-child(4){border-top:1px solid var(--line)}
  .hero__metrics li:nth-child(odd){border-left:0;padding-left:0}
  .hero__eyebrow,.hero__h1,.hero__lede,.hero__cta,.hero__metrics{padding-inline:var(--gut)}
  .hero__v,.hero__poster{object-fit:contain;object-position:center;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);
            mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);}
  .hero__blend{background:linear-gradient(180deg,transparent 70%,var(--black) 100%)}
  .hero__halo{inset:-14% 0}
}
@media (prefers-reduced-motion:reduce){
  .hero__grain{animation:none}
  .hero{height:auto}
  .hero__pin{position:relative;height:auto}
  .hero__v{display:none}
  .hero__poster{z-index:0}
  .hero__scrim{opacity:1}
  .hero__film,.hero__eyebrow,.hero__h1,.hero__lede,.hero__cta,.hero__metrics{
    opacity:1!important;transform:none!important;filter:none!important}
}

/* ════════════════════════════════════════════════════════════
   ENGINE — one source becomes many
   Scroll drives the film. Every label is HTML; nothing is baked
   into the footage. The frame dissolves as the system expands.
   ════════════════════════════════════════════════════════════ */
.eng{position:relative;height:460vh;margin-block:0}
.eng__pin{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--black);
  display:grid;place-items:center}

/* ---------- the film ---------- */
/* full-bleed from the moment it pins: a centred box was what produced the
   hard rectangular edge and the black gap above it */
.eng__stage{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.eng__canvas,.eng__v,.eng__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(var(--ez,1));transform-origin:50% 50%;
  opacity:var(--eop,1);border-radius:var(--erad,0px);
  will-change:transform,opacity}
.eng__canvas{display:block;z-index:1}
.eng__v{display:none}                 /* desktop uses the sequence; mobile swaps these */
.eng__poster{z-index:0}

/* frame loader */
.eng__load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;
  width:min(220px,40vw);height:1px;background:rgba(200,202,209,.14);
  opacity:0;transition:opacity .5s var(--ease-land)}
.eng__load.is-on{opacity:1}
.eng__load span{display:block;height:100%;width:0;background:var(--grad-signal);
  box-shadow:0 0 8px rgba(166,80,255,.8);transition:width .2s linear}
.eng__poster{z-index:-1}
.eng .eng__v{opacity:1}

/* edge treatment: defined frame -> violet processing edge -> no frame */
 /* processing edge only — never a visible frame around the picture */
.eng__frame{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 90px -10px rgba(166,80,255,calc(.34 * var(--proc,0)));
}
/* stage 05 darkening */
.eng__dim{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:var(--black);opacity:calc(.18 * var(--dim,0))}
/* final bleed: edges dissolve into the page instead of ending in a rectangle */
.eng__bleed{position:absolute;inset:0;pointer-events:none;z-index:4;
  opacity:var(--bleed,0);
  background:radial-gradient(ellipse 82% 86% at 50% 46%,transparent 52%,rgba(5,5,7,.55) 86%,var(--black) 100%);}

/* ---------- copy ---------- */
.eng__ui{position:relative;z-index:6;width:100%;height:100%;display:flex;
  flex-direction:column;justify-content:center;pointer-events:none}
/* legibility field: a left-to-right wash so the copy sits inside the picture
   rather than underneath it */
.eng__pin::before,.eng__pin::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none}
.eng__pin::before{
  background:linear-gradient(90deg,var(--black) 0%,rgba(5,5,7,.94) 20%,rgba(5,5,7,.62) 36%,rgba(5,5,7,.16) 52%,transparent 66%);
  opacity:var(--escrim,0);transition:opacity .4s var(--ease-land);
}
.eng__pin::after{
  background:linear-gradient(180deg,var(--black) 0%,transparent 18%,transparent 82%,var(--black) 100%);
}
.eng__copy{position:relative;min-height:clamp(210px,30vh,300px);max-width:min(430px,38vw)}

/* opacity is written from scroll progress, so a chapter holds legibly for a
   long plateau instead of flipping at a threshold */
.eng__act{
  position:absolute;inset:auto auto 0 0;width:100%;
  opacity:var(--o,0);
  transform:translateY(calc((1 - var(--o,0)) * 16px));
  will-change:opacity,transform;
}
.no-scrub .eng__act{transition:opacity .6s var(--ease-land),transform .6s var(--ease-land)}
.no-scrub .eng__act.is-on{--o:1}
.eng__chapter{font-family:var(--f-display);font-size:9.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:.8em;margin-bottom:16px}
.eng__chapter b{color:var(--purple);font-weight:500}
.eng__chapter em{color:var(--ink-4);font-style:normal}
.eng__act h3{font-size:clamp(26px,2.9vw,44px);letter-spacing:-.05em;margin-bottom:16px}
.eng__body{color:var(--ink-2);font-size:clamp(14.5px,1.08vw,16.5px);max-width:34ch;line-height:1.75}

.eng__specs{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.eng__specs li{
  font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:6px 13px;
  background:rgba(243,243,247,.02);
  opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease-land),transform .45s var(--ease-land);
}
.eng__act.is-on .eng__specs li{opacity:1;transform:none}
.eng__act.is-on .eng__specs li:nth-child(1){transition-delay:.10s}
.eng__act.is-on .eng__specs li:nth-child(2){transition-delay:.26s}
.eng__act.is-on .eng__specs li:nth-child(3){transition-delay:.42s}
.eng__act.is-on .eng__specs li:nth-child(4){transition-delay:.58s}

.eng__tally{display:flex;align-items:center;gap:clamp(12px,1.8vw,22px);flex-wrap:wrap;margin-bottom:14px}
.eng__tally{flex-direction:column;align-items:flex-start;gap:10px}
.eng__tally span,.eng__tally b{font-family:var(--f-display);font-weight:500;
  font-size:clamp(22px,2.4vw,36px);letter-spacing:-.045em}
.eng__tally span{color:var(--ink-3)}
.eng__tally b{color:transparent;background:var(--grad-steel);
  -webkit-background-clip:text;background-clip:text}
.eng__arrow{display:block;width:clamp(56px,6vw,96px)}
.eng__arrow svg{width:100%;height:8px;overflow:visible}
.eng__arrow path{fill:none;stroke:url(#gViolet);stroke-width:1.4;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:80;stroke-dashoffset:80;
  transition:stroke-dashoffset .8s var(--ease-land) .2s}
.eng__act.is-on .eng__arrow path{stroke-dashoffset:0}

.eng__reduced{display:none}

/* ---------- mobile: substantially shorter, no scrub, no routes ---------- */
@media (max-width:940px){
  .eng{height:auto;margin-block:clamp(30px,8vw,56px)}
  .eng__pin{position:relative;height:auto;display:block;padding-block:clamp(24px,7vw,44px)}
  .eng__stage{position:relative;top:auto;left:auto;transform:none;width:100%!important}
  .eng__frame,.eng__dim,.eng__bleed{--frame:1;--dim:0;--bleed:0}
  .eng__canvas{display:none}
  .eng__v{display:block}
  .eng__stage{position:relative;aspect-ratio:16/9;height:auto}
  .eng__ui{position:relative;height:auto;padding-block:0;margin-top:clamp(24px,6vw,36px)}
  .eng__copy{position:static;min-height:0;max-width:none;display:flex;flex-direction:column;gap:26px}
  .eng__act{position:static;opacity:1;transform:none;width:auto}
}
@media (prefers-reduced-motion:reduce){
  .eng{height:auto}
  .eng__pin{position:relative;height:auto;padding-block:clamp(30px,7vw,56px)}
  .eng__stage{position:relative;top:auto;left:auto;transform:none;width:100%!important}
  .eng__canvas{display:none}
  .eng__poster{z-index:2;position:relative}
  .eng__copy{display:none}
  .eng__reduced{display:block;text-align:center;margin-top:24px;
    font-family:var(--f-display);font-weight:500;font-size:clamp(16px,2vw,24px);
    letter-spacing:-.03em;color:var(--white)}
}

/* the distribution story picks up where the engine hands off */
.dist__lead{font-size:clamp(23px,2.6vw,38px);letter-spacing:-.048em;
  margin-bottom:clamp(28px,3.4vw,46px);max-width:20ch}

/* the capability ticker must never sit under the hero film */
.hero + .marquee{position:relative;z-index:5;margin-top:0}

/* ════════════════════════════════════════════════════════════
   ENGINE // PLATFORM PANEL
   Arrives at the end of the scrub, over the finished network.
   Marks are monochrome Ice Silver — never brand colours.
   ════════════════════════════════════════════════════════════ */
.eplat{
  position:absolute;z-index:7;right:var(--gut);top:50%;transform:translateY(-50%);
  width:clamp(260px,25vw,340px);pointer-events:none;
  border:1px solid var(--line-2);border-radius:var(--r);
  background:linear-gradient(168deg,rgba(16,16,23,.86),rgba(8,8,12,.9));
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95),inset 0 1px 0 rgba(243,243,247,.05);
  padding:clamp(16px,1.5vw,22px);
  opacity:0;transform:translateY(-50%) translateX(18px);
}

.eplat__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.eplat__head span{font-family:var(--f-display);font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-4)}
.eplat__head b{font-family:var(--f-display);font-weight:500;font-size:11px;
  letter-spacing:.14em;color:var(--purple)}

.eplat__list{display:flex;flex-direction:column}
.eplat__list li{
  display:grid;grid-template-columns:20px 1fr auto;grid-template-rows:auto auto;
  column-gap:12px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateX(12px);
  transition:opacity .5s var(--ease-land),transform .5s var(--ease-land);
  transition-delay:calc(var(--i) * 70ms + 160ms);
}
.eplat__list li:last-child{border-bottom:0;padding-bottom:0}
.eplat.is-on .eplat__list li{opacity:1;transform:none}

.eplat__ico{grid-row:1 / span 2;width:18px;height:18px;fill:var(--silver);opacity:.9}
.eplat__name{font-family:var(--f-display);font-weight:500;font-size:12.5px;
  letter-spacing:.01em;color:var(--white)}
.eplat__fmt{grid-column:2;font-family:var(--f-display);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-4);margin-top:3px}
.eplat__tier{grid-column:3;grid-row:1 / span 2;
  font-family:var(--f-display);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-4);border:1px solid var(--line);border-radius:999px;padding:3px 8px;white-space:nowrap}
.eplat__tier--p{color:var(--purple);border-color:var(--line-lit);background:rgba(166,80,255,.08)}

@media (max-width:1199px){ .eplat{width:clamp(230px,30vw,290px)} }
@media (max-width:940px){ .eplat{display:none} }
/* the phone build drops the engine film, so the surfaces card — the only
   place the distribution platforms are actually named — comes back in flow */
@media (max-width:767px){
  .eng__pin{display:flex;flex-direction:column}
  .eng__ui{order:1}
  .eplat{order:2;display:block;position:static;width:auto;transform:none;opacity:1;
    margin:0 var(--gut) clamp(56px,14vw,84px);pointer-events:auto;
    padding:clamp(18px,5vw,24px)}
  .eplat__list li{opacity:1;transform:none;transition:none;padding:14px 0;align-items:start}
  .eplat__ico{margin-top:3px}
  .eplat__tier{align-self:center}
  /* the widest format label ("Documents / Founder posts") wraps and knocks the
     row off its baseline at the mobile 11px floor — tighten the tracking */
  .eplat__fmt{letter-spacing:.09em}
  .eplat__head{padding-bottom:14px;margin-bottom:8px}
}

/* ════════════════════════════════════════════════════════════
   01 THE NETWORK — split sticky
   Media left with live UI overlays, copy right, layer tracker
   down the edge. Scroll advances all three together.
   ════════════════════════════════════════════════════════════ */
.net{padding:0;height:auto}
.net__intro{padding-block:var(--sec-y) clamp(40px,5vw,72px)}

.net__scroll{position:relative;height:380vh}
.net__pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}

/* ---------- left: media ---------- */
.net__media{position:relative;background:transparent;overflow:visible;display:grid;place-items:center}
/* opacity and scale are written every frame from scroll progress, so the
   crossfade is scrubbed rather than triggered — no transition to fight it */
/* a true 9:16 still, inset from every edge and centred in its column, with
   nothing behind it — no plate, no seam against the copy half. The extra top
   offset keeps the fixed nav off the frame. */
.net__shot{
  position:absolute;left:50%;top:calc(50% + clamp(12px,1.8vh,20px));translate:-50% -50%;margin:0;
  height:min(calc(100% - clamp(150px,17.5vh,200px)), 1400px);
  aspect-ratio:9 / 16;width:auto;
  border-radius:clamp(14px,1.6vw,22px);overflow:visible;
  opacity:var(--o,0);
  transform:scale(calc(1 + .07 * (1 - var(--o,0)))) translateY(calc((1 - var(--o,0)) * var(--dir,0) * 26px));
  will-change:opacity,transform;
}
.no-scrub .net__shot{transition:opacity .8s var(--ease-land),transform 1.2s var(--ease-land)}
.no-scrub .net__shot.is-on{--o:1}
.net__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  border-radius:inherit;box-shadow:0 60px 120px -50px rgba(0,0,0,.95)}
.net__grad{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(200,202,209,.10);
  background:
    radial-gradient(ellipse 80% 56% at 26% 46%,rgba(5,5,7,.40),transparent 74%),
    linear-gradient(180deg,rgba(5,5,7,.30),transparent 22%,transparent 72%,rgba(5,5,7,.34));}
/* placeholder sits behind the image; a real file simply covers it */
.net__ph{
  position:absolute;inset:0;z-index:-1;display:grid;place-content:center;gap:6px;text-align:center;
  background-image:
    linear-gradient(to right,rgba(200,202,209,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(200,202,209,.05) 1px,transparent 1px);
  background-size:34px 34px;background-color:#101018;
  font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);
}
.net__ph b{display:block;color:var(--ink-2);font-weight:400;font-size:10.5px;letter-spacing:.14em}

/* ---------- floating UI overlays ---------- */
.nui{
  position:absolute;z-index:4;padding:13px 15px;border-radius:13px;
  border:1px solid rgba(200,202,209,.26);
  background:linear-gradient(168deg,rgba(18,18,27,.90),rgba(9,9,14,.94));
  backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 34px 70px -28px rgba(0,0,0,.96),
             0 0 0 1px rgba(166,80,255,.16),
             inset 0 1px 0 rgba(243,243,247,.09);
  opacity:var(--o,0);
}
/* the cards overhang the still on purpose — floating above it rather than
   sitting inside it is what stops them fusing with the photograph */
.nui--a{left:calc(-1 * clamp(96px,9.5vw,150px));top:20%;min-width:clamp(170px,13vw,208px)}
.nui--b{right:calc(-1 * clamp(92px,9vw,142px));top:62%;min-width:clamp(154px,11.5vw,188px)}
.net__shot.is-on .nui--a{animation:nfloat 7s ease-in-out infinite}
.net__shot.is-on .nui--b{animation:nfloat 7s ease-in-out infinite -3.5s}
@keyframes nfloat{0%,100%{transform:translateY(-7px)}50%{transform:translateY(7px)}}
.nui__k{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-size:9.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.nui__val{font-family:var(--f-display);font-weight:500;font-size:23px;letter-spacing:-.02em;
  color:var(--white);font-variant-numeric:tabular-nums;margin-bottom:11px}
.nui__bar{display:block;height:3px;border-radius:2px;background:rgba(243,243,247,.10);overflow:hidden}
.nui__bar i{display:block;height:100%;width:40%;border-radius:2px;background:var(--grad-signal)}
.net__shot.is-on .nui__bar i{animation:nbar 3.4s var(--ease-in-out) infinite}
@keyframes nbar{0%{width:12%}55%{width:96%}100%{width:12%}}
.nui__spark{width:100%;height:34px;display:block;overflow:visible}
.nui__spark path{stroke-dasharray:260;stroke-dashoffset:260;filter:drop-shadow(0 0 6px rgba(166,80,255,.7))}
.net__shot.is-on .nui__spark path{animation:nspark 3.6s var(--ease-land) infinite}
@keyframes nspark{0%{stroke-dashoffset:260}55%,100%{stroke-dashoffset:0}}
.nui__rec{width:6px;height:6px;border-radius:50%;background:var(--purple);
  box-shadow:0 0 8px rgba(166,80,255,.9);animation:nrec 1.8s ease-in-out infinite}
@keyframes nrec{0%,100%{opacity:.35}50%{opacity:1}}

/* ---------- right: copy ---------- */
/* the copy column's content box is aligned to the still's top and bottom edges,
   so the two halves share a frame instead of floating independently */
.net__panel{position:relative;background:transparent;display:flex;align-items:stretch;
  /* The panel is exactly half the pin (1fr 1fr), so half the wrap plus one
     gutter — measured from the panel's own width — lands on the very line the
     nav container ends on. Percentages rather than vw, so a classic scrollbar
     cannot shift it off that line. */
  --net-edge:max(var(--gut), calc(100% - var(--wrap) / 2 + var(--gut)));
  /* the rail's column plus breathing room between it and the stack */
  --net-rail-lane:clamp(124px,6.5vw,132px);
  padding:calc(clamp(150px,17.5vh,200px) / 2 + clamp(12px,1.8vh,20px))
          calc(var(--net-edge) + var(--net-rail-lane))
          calc(clamp(150px,17.5vh,200px) / 2 - clamp(12px,1.8vh,20px))
          clamp(20px,2vw,30px)}
.net__stack{position:relative;width:100%;min-height:clamp(300px,42vh,400px);align-self:stretch}
.net__step{position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:space-between;gap:clamp(20px,3vh,40px);
  opacity:var(--o,0);
  transform:translateY(calc((1 - var(--o,0)) * var(--dir,1) * 22px));
  will-change:opacity,transform}
/* ---- top row: layer badge + position in the sequence ---- */
.net__top{display:flex;align-items:center;justify-content:space-between;gap:20px;
  border-bottom:1px solid var(--line);padding-bottom:clamp(14px,1.8vh,22px)}
.net__idx{display:flex;align-items:baseline;gap:7px;font-family:var(--f-display);
  font-variant-numeric:tabular-nums}
.net__idx b{font-weight:500;font-size:clamp(20px,1.9vw,27px);letter-spacing:-.03em;color:var(--white)}
.net__idx span{font-size:9.5px;letter-spacing:.22em;color:var(--ink-4)}
.net__mid{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;min-height:0}
/* ---- bottom row: where the sequence goes next ---- */
.net__next{display:flex;align-items:center;gap:14px;
  border-top:1px solid var(--line);padding-top:clamp(14px,1.8vh,22px);
  font-family:var(--f-display);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase}
.net__next span{color:var(--ink-4)}
.net__next b{font-weight:500;color:var(--ink-2);letter-spacing:.14em}
.net__next i{margin-left:auto;font-style:normal;color:var(--purple);font-size:15px;
  animation:nnext 3.2s var(--ease-in-out) infinite}
@keyframes nnext{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(7px);opacity:1}}
.no-scrub .net__step{transition:opacity .6s var(--ease-land),transform .6s var(--ease-land)}
.no-scrub .net__step.is-on{--o:1}
.net__pill{display:inline-block;font-family:var(--f-display);font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--purple);border:1px solid var(--line-lit);border-radius:999px;
  padding:6px 14px;background:rgba(166,80,255,.08);margin-bottom:clamp(18px,2.4vw,28px)}
.net__step h3{font-size:clamp(34px,4.4vw,66px);letter-spacing:-.055em;margin-bottom:clamp(16px,1.8vw,22px)}
.net__pill{margin-bottom:0}
.net__body{color:var(--ink-2);font-size:clamp(15px,1.14vw,17px);line-height:1.78;max-width:40ch}
.net__tags{display:flex;flex-direction:column;margin-top:0;padding-left:0;
  border-top:1px solid var(--line)}
.net__tags li{position:relative;overflow:hidden;display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);
  padding:clamp(11px,1.5vh,17px) clamp(10px,1vw,16px);
  border-bottom:1px solid var(--line);cursor:default;
  font-family:var(--f-display);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);
  transition:color .4s var(--ease-in-out),background .4s var(--ease-in-out),
             padding-left .5s var(--ease-land)}
.net__tags li i{font-style:normal;font-size:9.5px;letter-spacing:.1em;color:var(--ink-4);
  font-variant-numeric:tabular-nums;transition:color .4s var(--ease-in-out)}
.net__tags li span{position:relative;z-index:1}
/* a violet wipe crosses the row on hover, then it settles lit */
.net__tags li::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent,rgba(166,80,255,.22),transparent);
  translate:-110% 0;transition:translate .62s var(--ease-land)}
.net__tags li::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--grad-signal);scale:1 0;transform-origin:50% 100%;
  transition:scale .45s var(--ease-land)}
.net__tags li:hover{color:var(--white);background:rgba(166,80,255,.06);
  padding-left:clamp(20px,1.9vw,28px)}
.net__tags li:hover i{color:var(--purple)}
.net__tags li:hover::before{translate:110% 0}
.net__tags li:hover::after{scale:1 1}
.net__pill{transition:border-color .4s var(--ease-in-out),background .4s var(--ease-in-out),
  box-shadow .4s var(--ease-in-out)}
.net__step.is-on .net__pill{animation:npill 4.6s var(--ease-in-out) infinite}
@keyframes npill{0%,100%{box-shadow:0 0 0 0 rgba(166,80,255,0)}
  50%{box-shadow:0 0 22px -4px rgba(166,80,255,.55)}}

/* ---------- layer tracker ---------- */
/* a rail the full height of the viewport, so progress through the three
   layers is read at a glance rather than as three small dots */
.net__prog{position:absolute;right:var(--net-edge);
  top:clamp(96px,11vh,132px);bottom:clamp(52px,6.5vh,84px);
  display:flex;align-items:stretch;gap:clamp(14px,1.4vw,20px);pointer-events:none}
.net__tracker{display:flex;flex-direction:column;justify-content:space-between;text-align:right}
.net__tracker li{display:flex;align-items:center;justify-content:flex-end;
  font-family:var(--f-display);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-3);transition:color .45s var(--ease-in-out),opacity .45s var(--ease-in-out);opacity:.75}
.net__tracker li.is-on{color:var(--white);opacity:1}
.net__rail{position:relative;flex:none;width:2px;background:var(--line-2);border-radius:2px}
.net__railfill{position:absolute;left:-1px;top:0;width:3px;border-radius:2px;
  height:calc(var(--np,0) * 100%);
  background:linear-gradient(180deg,rgba(166,80,255,.28),var(--purple));
  box-shadow:0 0 16px rgba(166,80,255,.6)}
/* the head of the fill — the thing the eye tracks */
.net__railfill::after{content:"";position:absolute;left:50%;bottom:0;translate:-50% 50%;
  width:7px;height:7px;border-radius:50%;background:var(--purple);
  box-shadow:0 0 14px 2px rgba(166,80,255,.85)}

@media (max-width:1024px){
  .net__scroll{height:auto}
  .net__pin{position:relative;height:auto;grid-template-columns:1fr}
  .net__media{height:auto;padding:clamp(24px,6vw,40px) var(--gut)}
  .net__shot{position:relative;left:auto;top:auto;height:auto;
    width:min(78%,340px);margin-inline:auto}
  .net__shot:not(:first-child){position:absolute;left:50%;top:50%;translate:-50% -50%}
  .nui--a{left:-14px;top:22%;min-width:158px;padding:12px 14px}
  .nui--b{right:-14px;left:auto;top:56%;min-width:132px;padding:12px 14px}
  .net__panel{padding:clamp(30px,7vw,52px) var(--gut);align-items:stretch}
  .net__stack{min-height:clamp(400px,74vw,520px)}
  .net__step{gap:22px}
  .net__prog{position:relative;right:auto;top:auto;bottom:auto;margin-top:26px;gap:14px}
  .net__tracker{flex-direction:row;justify-content:flex-start;gap:20px}
  .net__tracker li{justify-content:flex-start}
  .net__rail{width:auto;height:1px;flex:1 1 auto;align-self:center}
  .net__railfill{left:0;top:-1px;height:3px;width:calc(var(--np,0) * 100%)}
  .net__railfill::after{left:auto;right:0;bottom:50%;translate:50% 50%}
}
@media (prefers-reduced-motion:reduce){
  .net__shot,.net__step{transition:none;--o:0}
  .net__shot.is-on,.net__step.is-on{--o:1}
  
}

/* ---------- compact HUD overlays ----------
   All three stills already carry their own rich UI, so these add only the
   thing a still cannot: something genuinely live. Small, top-left, clear
   of each image's own composition, and never repeating its numbers. */
.nui__tc{font-family:var(--f-display);font-weight:500;font-size:25px;letter-spacing:-.01em;
  color:var(--white);margin-bottom:11px;font-variant-numeric:tabular-nums}
.nui__lvl{width:100%;height:16px;display:block}
.nui__lvl rect{fill:url(#gViolet);transform-origin:center;transform-box:fill-box;transform:scaleY(.16)}
.net__shot.is-on .nui__lvl rect{animation:nlvl 1.1s ease-in-out infinite;animation-delay:calc(var(--i) * 38ms)}
@keyframes nlvl{0%,100%{transform:scaleY(.16)}50%{transform:scaleY(1)}}

.nui__plats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.nui__plats li{width:100%;aspect-ratio:1;height:auto;border-radius:7px;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(243,243,247,.03);
  opacity:.3;transition:opacity .4s var(--ease-in-out),border-color .4s var(--ease-in-out)}
.nui__plats li svg{width:15px;height:15px;fill:var(--silver)}
.net__shot.is-on .nui__plats li{animation:nplat 4.2s ease-in-out infinite;animation-delay:calc(var(--i) * 260ms)}
@keyframes nplat{0%,72%,100%{opacity:.3;border-color:var(--line)}
  18%,54%{opacity:1;border-color:var(--line-lit)}}

.nui__cycle{display:flex;flex-direction:column;gap:4px}
.nui__cycle b{font-family:var(--f-display);font-weight:500;font-size:23px;letter-spacing:-.02em;color:var(--white)}
.nui__cycle span{font-family:var(--f-display);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-4)}

/* ════════════════════════════════════════════════════════════
   SCALE BAND — replaces the ticker under the hero
   ════════════════════════════════════════════════════════════ */
.band{position:relative;z-index:5;border-bottom:1px solid var(--line);background-color:var(--black);
  background:linear-gradient(180deg,rgba(11,11,17,.7),rgba(5,5,7,.3));
  padding-block:clamp(26px,3.2vw,44px)}
.band__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,3vw,48px)}
.band__grid li{display:flex;flex-direction:column;gap:9px;padding-left:clamp(14px,2vw,28px);
  border-left:1px solid var(--line)}
.band__grid li:first-child{border-left:0;padding-left:0}
.band__grid b{font-family:var(--f-display);font-weight:500;
  font-size:clamp(24px,3vw,44px);letter-spacing:-.05em;line-height:1;
  color:transparent;background:var(--grad-steel);-webkit-background-clip:text;background-clip:text}
.band__grid span{font-family:var(--f-display);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3)}
@media (max-width:767px){
  .band__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .band__grid li:nth-child(odd){border-left:0;padding-left:0}
}

/* ════════════════════════════════════════════════════════════
   02 DISTRIBUTION — sticky text + infographic, film rises over
   ════════════════════════════════════════════════════════════ */
.dist__hold{
  position:sticky;top:0;height:100svh;min-height:620px;z-index:0;overflow:hidden;
  display:grid;align-items:stretch;
  /* top pad clears the fixed nav; bottom is the optical counterweight */
  padding-block:clamp(88px,10.5vh,122px) clamp(44px,5.5vh,72px);
}
/* copy left, diagram right. The infographic is a wide 1240x700, so its height
   is capped by its column width — the column takes the larger share and the
   figure bleeds into the right gutter to buy back the extra height. */
.dist__grid{display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);
  gap:clamp(28px,4vw,60px);align-items:center;min-height:0}
.dist__head{max-width:none;margin-bottom:0;align-self:center}
.dist__fig{margin:0;align-self:center;min-height:0;
  margin-right:calc(-1 * var(--gut))}
.dist__fig .engine__frame{padding:clamp(12px,1.4vw,20px);min-height:0;max-height:100%}
.dist__fig .engine__svg{width:100%;height:auto;max-height:100%;min-height:0}

/* the film section slides up over the pinned pair — the unveil */
.eng{
  position:relative;z-index:3;background:var(--black);
  border-radius:clamp(20px,2.4vw,34px) clamp(20px,2.4vw,34px) 0 0;
  box-shadow:0 -50px 90px -40px rgba(0,0,0,.98),0 -1px 0 rgba(200,202,209,.10);
}
.eng__pin{border-radius:inherit}
.eng__stage{border-radius:inherit}

@media (max-width:1160px){
  .dist__hold{position:relative;height:auto;min-height:0;overflow:visible;align-items:center;padding-block:clamp(50px,7vw,80px)}
  .dist__fig{margin-right:0}
  .dist__head{margin-bottom:0}
  .dist__grid{grid-template-columns:1fr;gap:36px}
  .dist__head{max-width:none}
}


/* ════════════════════════════════════════════════════════════
   03 PROOF — CASE RAIL
   Native horizontal scroll container with snap. Vertical scroll is
   never hijacked: the page scrolls past normally, the rail is swiped,
   dragged, arrowed or keyed.
   ════════════════════════════════════════════════════════════ */
/* the whole section is one viewport: head, control bar and the rail share it,
   and the panel takes whatever height is left */
/* the rail pins and vertical scroll drives horizontal travel — the section is
   exactly as tall as the travel it needs, so it releases the moment it ends */
.proofsec{position:relative;padding-block:clamp(80px,10vh,120px) 0}
.crail{position:relative}
/* the rail owns a full viewport: header scrolls away above it */
.crail__pin{position:sticky;top:0;height:100svh;min-height:640px;overflow:hidden;
  display:flex;flex-direction:column;
  padding-block:clamp(70px,8.5vh,104px) clamp(34px,5vh,64px)}
.proofsec__head{margin-bottom:clamp(30px,4vh,56px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(18px,2.6vw,48px);align-items:end}
.proofsec__head .eyebrow{grid-column:1 / -1}
.proofsec__head .eyebrow{margin-bottom:clamp(8px,1.2vh,14px)}
.proofsec__lede{font-family:var(--f-body);color:var(--ink-2);
  font-size:clamp(13px,1.05vw,16px);align-self:end}

/* ---------- control bar ---------- */
/* ---------- the track ---------- */
.crail__track{display:flex;gap:clamp(14px,1.6vw,24px);
  padding-inline:var(--gut);padding-bottom:6px;
  flex:1 1 auto;min-height:0;align-items:stretch;
  will-change:transform;outline:none}
.crail__track:focus-visible{box-shadow:inset 0 0 0 1px var(--line-lit)}

.cpanel{flex:0 0 auto;width:calc(min(100vw, var(--wrap)) - 2 * var(--gut));
  min-height:0;display:flex;flex-direction:column;
  opacity:.4;transition:opacity .6s var(--ease-in-out)}
.cpanel__head{flex:none;margin-bottom:clamp(26px,3.4vh,44px)}
.cpanel__card{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;
  border:1px solid var(--line);border-radius:clamp(16px,1.6vw,24px);
  background:linear-gradient(168deg,rgba(12,12,19,.9),rgba(5,5,7,.96));
  padding:clamp(17px,1.9vw,26px)}
.cpanel.is-live{opacity:1}
.cpanel__in{flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(20px,2.6vw,46px);align-items:stretch}
.cpanel__copy{min-height:0;display:flex;flex-direction:column;justify-content:center}
.cpanel__proof{min-height:0;display:flex;flex-direction:column;justify-content:center}

/* ---------- left: editorial ---------- */
.cpanel__copy>*{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease-land),transform .6s var(--ease-land)}
.cpanel.is-live .cpanel__copy>*{opacity:1;transform:none}
.cpanel.is-live .cpanel__ix{transition-delay:.05s}
.cpanel.is-live .cpanel__name{transition-delay:.14s}
.cpanel.is-live .cpanel__head{transition-delay:.20s}
.cpanel.is-live .cpanel__p{transition-delay:.28s}
.cpanel.is-live .cpanel__built{transition-delay:.36s}
.cpanel__ix{font-family:var(--f-body);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:clamp(11px,1.6vh,20px)}
.cpanel__ix b{font-weight:500;color:var(--purple)}
.cpanel__ix em{font-style:normal;color:var(--ink-4);margin:0 .45em}
.cpanel__name{font-family:var(--f-display);font-weight:500;
  font-size:clamp(26px,2.8vw,40px);letter-spacing:-.055em;line-height:1;color:var(--white)}
.cpanel__head{font-family:var(--f-display);font-weight:400;
  font-size:clamp(14px,1.2vw,18px);letter-spacing:-.02em;color:var(--ink-2);
  margin-top:clamp(9px,1.2vh,14px)}
.cpanel__p{font-family:var(--f-body);color:var(--ink-3);
  font-size:clamp(12.5px,.95vw,14.5px);line-height:1.65;margin-top:clamp(9px,1.2vh,15px);max-width:44ch}
.cpanel__built{margin-top:clamp(14px,1.9vh,24px);border-top:1px solid var(--line);
  padding-top:clamp(11px,1.4vh,16px)}
.cpanel__builtk{font-family:var(--f-body);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:11px}
.cpanel__built ul{display:flex;flex-wrap:wrap;gap:7px}
.cpanel__built li{font-family:var(--f-body);font-size:11.5px;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;
  transition:color .35s var(--ease-in-out),border-color .35s var(--ease-in-out)}
.cpanel__built li:hover{color:var(--white);border-color:var(--line-lit)}

/* ---------- right: evidence ---------- */
.cpanel__proof{min-height:0;opacity:0;transform:scale(.98);
  transition:opacity .8s var(--ease-land) .30s,transform .8s var(--ease-land) .30s}
.cpanel.is-live .cpanel__proof{opacity:1;transform:none}
.cproof{display:grid;gap:clamp(10px,1.2vw,18px);min-height:0;flex:1 1 auto}

.cmetric b{display:block;font-family:var(--f-display);font-weight:500;letter-spacing:-.05em;
  color:var(--white);font-variant-numeric:tabular-nums;line-height:1;
  font-size:clamp(30px,3.4vw,50px)}
.cmetric span{display:block;font-family:var(--f-body);color:var(--ink-3);
  font-size:clamp(11.5px,.9vw,13.5px);margin-top:9px}
.cmetric b em{font-style:normal;color:var(--purple);margin:0 .12em}
.cmetric--hero b,.cmetric--max b{font-size:clamp(44px,5.6vw,86px)}
.cmetric--sm b{font-size:clamp(22px,2.2vw,32px)}
.cchip{display:inline-flex;align-items:center;gap:8px;margin-top:13px;font-style:normal;
  font-family:var(--f-body);font-size:11.5px;color:var(--white);
  border:1px solid var(--line-lit);border-radius:999px;padding:5px 12px;
  background:rgba(166,80,255,.10)}
.cchip i{width:5px;height:5px;border-radius:50%;background:var(--purple);
  box-shadow:0 0 8px rgba(166,80,255,.9)}
.cchip--q{color:var(--ink-2);background:none;border-color:var(--line)}
.cchip--q i{background:var(--ink-4);box-shadow:none}

.cshot{margin:0;border-radius:clamp(10px,1vw,14px);overflow:hidden;min-height:0;
  display:flex;flex-direction:column;
  border:1px solid var(--line);background:var(--black)}
.cshot .proof-frame{min-height:0;flex:1 1 auto}
.cshot .proof-frame__box{height:100%;min-height:0}
.cshot .proof-frame{margin:0;border:0;border-radius:0}
.cshot .proof-frame__box{border:0;border-radius:0;box-shadow:none;background:var(--black)}
/* proof stays proof: contained, never cropped, never recoloured */
.cshot img{object-fit:contain !important}
.cshot figcaption{font-family:var(--f-body);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-4);padding:11px 14px;border-top:1px solid var(--line)}
.cshot figcaption b{font-family:var(--f-display);font-weight:500;font-size:14px;
  letter-spacing:-.02em;color:var(--white);margin-right:7px}

/* ---------- proof placeholder: branded, never "awaiting capture" ---------- */
.pph{position:relative;aspect-ratio:var(--ar,16/10);overflow:hidden;
  background:linear-gradient(158deg,var(--graphite),#08080d);color:var(--purple);
  display:grid;place-items:center}
.pph--quiet{color:var(--ink-4)}
.pph__grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(to right,rgba(200,202,209,.055) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(200,202,209,.055) 1px,transparent 1px);
  background-size:38px 38px}
.pph__node{position:relative;width:clamp(34px,4vw,52px);height:auto;opacity:.55}
.pph__scan{position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(166,80,255,.85),transparent);
  box-shadow:0 0 12px rgba(166,80,255,.5);
  animation:pphscan 5.5s var(--ease-in-out) infinite}
@keyframes pphscan{0%{transform:translateY(0);opacity:0}
  8%{opacity:1}92%{opacity:1}100%{transform:translateY(calc(var(--h,320px)));opacity:0}}
.pph{--h:100%}
.pph__scan{animation-name:pphscan2}
@keyframes pphscan2{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}

/* ---------- private clients ---------- */
.cpanel--nda{width:min(46vw,620px);display:grid;place-items:center;text-align:center}
.cpanel__in--nda{display:block;max-width:44ch}
.cpanel--nda .cpanel__name{font-size:clamp(22px,2.2vw,32px);margin-top:14px}
.cpanel--nda .cpanel__p{max-width:none;margin-inline:auto}

@media (max-width:1100px){
  .cpanel{width:min(90vw,760px)}
  .cpanel__in{grid-template-columns:1fr;gap:clamp(22px,4vw,34px)}
  .cproof--maurits{grid-template-columns:1fr}
  .cproof--maurits .cmetric--a,.cproof--maurits .cshot--views,
  .cproof--maurits .cmetric--b,.cproof--maurits .cshot--fol{grid-column:1}
  .cstrip{flex-direction:column;align-items:flex-start;gap:14px}
  .cstrip__row{flex:none;width:100%}
  .cba{grid-template-columns:1fr;text-align:center}
  .cba__route svg{transform:rotate(90deg) scaleX(.4)}
  .cpanel--nda{width:min(90vw,620px)}
}
@media (prefers-reduced-motion:reduce){
  .cpanel,.cpanel__copy>*,.cpanel__proof{opacity:1;transform:none;transition:none}
  .pph__scan,.cba__pulse{animation:none;opacity:0}
  .cba__route svg{stroke-dashoffset:0;transition:none}
}

/* ════════════════════════════════════════════════════════════
   02 DISTRIBUTION — the four operating steps
   Restored from the original site. Sits under the film, where the
   process is already shown; this is the plain-language version.
   ════════════════════════════════════════════════════════════ */
/* the tail sits above the pinned pair, same as the film does — otherwise the
   sticky headline and diagram read straight through the translucent cards */
.dist__tail{position:relative;z-index:4;background:var(--black);
  padding-bottom:clamp(40px,5vw,80px)}
.pipe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.4vw,20px);margin-top:clamp(34px,4vw,58px)}
.pipe__card{position:relative;isolation:isolate;border:1px solid var(--line);border-radius:clamp(12px,1.2vw,18px);
  padding:clamp(20px,2.2vw,32px);
  background:linear-gradient(168deg,rgba(12,12,19,.72),rgba(5,5,7,.9));
  transition:border-color .45s var(--ease-in-out),transform .5s var(--ease-land),
             background .45s var(--ease-in-out)}
.pipe__card::after{content:"";position:absolute;left:clamp(20px,2.2vw,32px);right:clamp(20px,2.2vw,32px);
  top:0;height:1px;background:var(--grad-signal);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s var(--ease-land)}
.pipe__card:hover{border-color:var(--line-lit);transform:translateY(-4px);
  background:linear-gradient(168deg,rgba(18,18,28,.82),rgba(6,6,10,.94))}
.pipe__card:hover::after{transform:scaleX(1)}
.pipe__n{font-family:var(--f-display);font-weight:700;
  font-size:clamp(30px,3.2vw,46px);letter-spacing:-.04em;line-height:1;
  color:transparent;-webkit-text-stroke:1.4px var(--purple);
  margin-bottom:clamp(18px,2vw,28px)}
.pipe__card:hover .pipe__n{color:var(--purple);-webkit-text-stroke-color:transparent}
.pipe__t{font-family:var(--f-display);font-weight:500;
  font-size:clamp(16px,1.5vw,21px);letter-spacing:-.03em;color:var(--white);margin-bottom:12px}
.pipe__b{font-family:var(--f-body);color:var(--ink-3);
  font-size:clamp(12.5px,.98vw,14.5px);line-height:1.68}

@media (max-width:900px){
  .pipe{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .pipe{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .pipe__card,.pipe__card::after{transition:none}
}

/* ════════════════════════════════════════════════════════════
   CASE COMPOSITIONS — one shared system, six different shapes
   ════════════════════════════════════════════════════════════ */
.cp{display:grid;gap:clamp(10px,1.2vh,18px);min-height:0;flex:1 1 auto}
.cp__note{font-family:var(--f-body);font-size:11.5px;color:var(--ink-4);font-style:italic}
.cp__foot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);
  border-top:1px solid var(--line);padding-top:clamp(9px,1.2vh,14px)}
.cp__foot--3{grid-template-columns:repeat(3,minmax(0,1fr));grid-column:1 / -1}
.cp__foot--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cp__foot b{display:block;font-family:var(--f-display);font-weight:500;letter-spacing:-.04em;
  font-size:clamp(15px,1.5vw,21px);color:var(--white);line-height:1}
.cp__foot span{display:block;font-family:var(--f-body);font-size:10.5px;color:var(--ink-4);margin-top:6px}
.cp__foot--tg{display:grid;grid-template-rows:auto auto auto;gap:5px}
.cp__foot--tg .proof-frame__box{height:auto;aspect-ratio:1448 / 244;border:0;border-radius:5px;
  box-shadow:none;background:var(--black)}

/* ── 01 Maurits: reach -> follower growth, then the community footer ── */
.cp--stack{grid-template-rows:minmax(0,1fr) auto minmax(0,1fr) auto}
.cp__beat{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(12px,1.6vw,24px);align-items:center;min-height:0}
.cp__route{position:relative;display:block;height:14px}
.cp__route i{position:absolute;left:22%;top:0;bottom:0;width:1px;background:var(--line-2)}
.cp__route i::after{content:"";position:absolute;left:-2px;bottom:0;width:5px;height:5px;
  border-radius:50%;background:var(--purple);box-shadow:0 0 9px rgba(166,80,255,.85);
  opacity:0;transition:opacity .5s var(--ease-in-out) .9s}
.cpanel.is-live .cp__route i::after{opacity:1}

/* ── 02 FG Vogel: before -> after, nothing else competes ── */
.cp--ba{grid-template-columns:minmax(0,1fr) minmax(0,.62fr) minmax(0,1fr);align-items:center}
.cba__f{margin:0;min-height:0;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:clamp(10px,1vw,14px);overflow:hidden;background:var(--black)}
.cba__f figcaption{order:-1;padding:clamp(10px,1.3vh,15px) clamp(12px,1.2vw,18px);
  border-bottom:1px solid var(--line)}
.cba__f figcaption b{display:block;font-family:var(--f-display);font-weight:500;letter-spacing:-.045em;
  font-size:clamp(22px,2.4vw,36px);line-height:1;color:var(--ink-2)}
.cba__f figcaption span{display:block;font-family:var(--f-body);font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-4);margin-top:7px}
.cba__f--to figcaption b{color:var(--white)}
.cba__f .pph{flex:1 1 auto;min-height:0;aspect-ratio:auto}
.cba__link{text-align:center}
.cba__line{position:relative;display:block;height:1px;background:var(--line-2)}
.cba__pulse{position:absolute;left:0;top:50%;translate:-50% -50%;width:7px;height:7px;border-radius:50%;
  background:var(--purple);opacity:0;box-shadow:0 0 12px 2px rgba(166,80,255,.85)}
.cpanel.is-live .cba__pulse{animation:cbapulse 2.9s var(--ease-in-out) 1s infinite}
@keyframes cbapulse{0%{left:0;opacity:0}14%{opacity:1}86%{opacity:1}100%{left:100%;opacity:0}}
.cba__days{font-family:var(--f-body);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--purple);margin-top:11px}

/* ── 03 John Malek: one page fans out into three clips ── */
.cp--fan{grid-template-columns:minmax(0,1.05fr) auto minmax(0,1.15fr);
  grid-template-rows:minmax(0,1fr) auto;align-items:center;gap:clamp(8px,1vw,16px)}
.cfan__src{min-height:0;display:flex;flex-direction:column;gap:clamp(8px,1.2vh,14px)}
.cfan__routes{width:clamp(28px,3.4vw,54px);height:70%;align-self:center;overflow:visible}
.cfan__routes path{stroke-dasharray:140;stroke-dashoffset:140;
  transition:stroke-dashoffset .9s var(--ease-in-out)}
.cpanel.is-live .cfan__routes path:nth-child(1){stroke-dashoffset:0;transition-delay:.55s}
.cpanel.is-live .cfan__routes path:nth-child(2){stroke-dashoffset:0;transition-delay:.68s}
.cpanel.is-live .cfan__routes path:nth-child(3){stroke-dashoffset:0;transition-delay:.81s}
.cfan__out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,14px);min-height:0}
.cfan__out li{min-height:0;display:flex;flex-direction:column;gap:6px;
  border:1px solid var(--line);border-radius:clamp(8px,.9vw,12px);overflow:hidden;
  padding:clamp(9px,1.1vh,13px);background:var(--black);
  opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--ease-land),transform .6s var(--ease-land)}
.cpanel.is-live .cfan__out li:nth-child(1){opacity:1;transform:none;transition-delay:.86s}
.cpanel.is-live .cfan__out li:nth-child(2){opacity:1;transform:none;transition-delay:.99s}
.cpanel.is-live .cfan__out li:nth-child(3){opacity:1;transform:none;transition-delay:1.12s}
.cfan__out b{font-family:var(--f-display);font-weight:500;letter-spacing:-.04em;line-height:1;
  font-size:clamp(14px,1.4vw,20px);color:var(--ink-2)}
.cfan__out .is-top b,.cfan__out li.is-top b{font-size:clamp(19px,2vw,28px);color:var(--white)}
.cfan__out span{font-family:var(--f-body);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-4)}
.cfan__out .pph{flex:1 1 auto;min-height:0;aspect-ratio:auto;border-radius:6px}
.cp--fan .cp__note{grid-column:1 / -1}

/* ── 04 RobTheBank: discreet, infrastructure-led ── */
.cp--priv{grid-template-rows:auto auto minmax(0,1fr)}
.cpriv__k{display:inline-flex;align-items:center;gap:9px;justify-self:start;
  font-family:var(--f-body);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.cpriv__k i{width:5px;height:5px;border-radius:50%;background:var(--purple);
  box-shadow:0 0 8px rgba(166,80,255,.85)}
.cpriv__map{display:grid;grid-template-columns:auto auto minmax(0,1.4fr);align-items:center;
  gap:clamp(8px,1vw,16px);min-height:0}
.cpriv__src{border:1px solid var(--line);border-radius:clamp(10px,1vw,14px);
  padding:clamp(12px,1.5vw,20px);background:rgba(243,243,247,.02);text-align:center}
.cpriv__src b{display:block;font-family:var(--f-display);font-weight:500;font-size:clamp(13px,1.3vw,18px);
  letter-spacing:-.03em;color:var(--white)}
.cpriv__src span{display:block;font-family:var(--f-body);font-size:9.5px;color:var(--ink-4);margin-top:6px}
.cpriv__routes{width:clamp(26px,3vw,48px);height:64%;align-self:center;overflow:visible}
.cpriv__routes path{stroke-dasharray:140;stroke-dashoffset:140;opacity:.7;
  transition:stroke-dashoffset .9s var(--ease-in-out)}
.cpanel.is-live .cpriv__routes path:nth-child(1){stroke-dashoffset:0;transition-delay:.55s}
.cpanel.is-live .cpriv__routes path:nth-child(2){stroke-dashoffset:0;transition-delay:.68s}
.cpanel.is-live .cpriv__routes path:nth-child(3){stroke-dashoffset:0;transition-delay:.81s}
.cpriv__out{display:grid;gap:clamp(7px,.9vh,11px);min-height:0}
.cpriv__out li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:center;
  gap:clamp(9px,1.1vw,15px);min-height:0;
  border:1px solid var(--line);border-radius:clamp(8px,.9vw,12px);overflow:hidden;
  padding:clamp(8px,1vh,12px);background:var(--black);
  opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease-land),transform .6s var(--ease-land)}
.cpanel.is-live .cpriv__out li:nth-child(1){opacity:1;transform:none;transition-delay:.86s}
.cpanel.is-live .cpriv__out li:nth-child(2){opacity:1;transform:none;transition-delay:.99s}
.cpanel.is-live .cpriv__out li:nth-child(3){opacity:1;transform:none;transition-delay:1.12s}
.cpriv__out b{font-family:var(--f-display);font-weight:500;letter-spacing:-.04em;
  font-size:clamp(14px,1.4vw,20px);color:var(--white);grid-row:1}
.cpriv__out span{font-family:var(--f-body);font-size:10px;color:var(--ink-4);grid-column:2}
.cpriv__out .pph{grid-column:1 / -1;grid-row:2;min-height:0;aspect-ratio:auto;height:100%;border-radius:6px}

/* ── 05 Jonathan Low: one founder, three pages ── */
.cp--eco{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:center}
.ceco__lead{display:flex;flex-direction:column;gap:clamp(10px,1.4vh,18px)}
.ceco__pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,14px);min-height:0}
.ceco__pages li{min-height:0;display:flex;flex-direction:column;gap:5px;
  border:1px solid var(--line);border-radius:clamp(8px,.9vw,12px);overflow:hidden;
  padding:clamp(9px,1.1vh,13px);background:var(--black);
  opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--ease-land),transform .6s var(--ease-land)}
.cpanel.is-live .ceco__pages li:nth-child(1){opacity:1;transform:none;transition-delay:.72s}
.cpanel.is-live .ceco__pages li:nth-child(2){opacity:1;transform:none;transition-delay:.85s}
.cpanel.is-live .ceco__pages li:nth-child(3){opacity:1;transform:none;transition-delay:.98s}
.ceco__k{font-family:var(--f-body);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4)}
.ceco__pages b{font-family:var(--f-display);font-weight:500;letter-spacing:-.04em;line-height:1;
  font-size:clamp(16px,1.7vw,24px);color:var(--white)}
.ceco__pages .pph{flex:1 1 auto;min-height:0;aspect-ratio:auto;border-radius:6px}

/* ── 06 Crown88: the largest number in the rail ── */
.cp--scale{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  grid-template-rows:minmax(0,1fr) auto;align-items:center;column-gap:clamp(16px,2vw,32px)}
.cscale__lead{align-self:center}
.cscale__n{display:block;font-family:var(--f-display);font-weight:500;letter-spacing:-.06em;line-height:.88;
  font-size:clamp(58px,7.6vw,132px);color:var(--white);font-variant-numeric:tabular-nums}
.cscale__l{font-family:var(--f-display);font-size:clamp(13px,1.3vw,18px);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);margin-top:10px}
.cscale__d{font-family:var(--f-body);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--purple);margin-top:9px}
.cp--scale .cshot{grid-row:1;grid-column:2}
.cp--scale .cp__foot{grid-column:1 / -1}

@media (max-width:1100px){
  .crail{height:auto !important}
  .crail__pin{position:relative;height:auto;min-height:0;overflow:visible;padding-block:clamp(70px,12vw,96px) clamp(30px,6vw,48px)}
  .crail__track{overflow-x:auto;overflow-y:hidden;transform:none !important;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .crail__track::-webkit-scrollbar{display:none}
  .cpanel{width:min(92vw,760px);scroll-snap-align:center}
  .cp--ba,.cp--fan,.cp--eco,.cp--scale{grid-template-columns:1fr}
  .cfan__routes,.cpriv__routes{display:none}
  .cpriv__map{grid-template-columns:1fr}
  .cp__beat{grid-template-columns:1fr}
  .cp__foot{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .cba__pulse{animation:none;opacity:0}
  .cfan__routes path,.cpriv__routes path{stroke-dashoffset:0;transition:none}
  .cfan__out li,.cpriv__out li,.ceco__pages li{opacity:1;transform:none;transition:none}
}

/* ---- Maurits fits the panel: every capture takes the height its grid row
   gives it, and `contain` keeps the screenshot whole at any size ---- */
.cp--stack{grid-template-rows:minmax(0,1fr) auto minmax(0,1fr) auto auto}
.cp__beat{min-height:0}
.cp__beat .cshot{height:100%;min-height:0;overflow:hidden}
.cp__beat .cshot .proof-frame{height:100%;min-height:0}
.cp__beat .cshot .proof-frame__box{height:100%;min-height:0;aspect-ratio:auto}
.cp__beat .cshot img{height:100%;width:100%;object-fit:contain}
.cstrip{margin-top:clamp(8px,1.2vh,14px);border-top:1px solid var(--line);flex:0 0 auto;
  padding-top:clamp(8px,1.1vh,12px);display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.cstrip__k{font-family:var(--f-body);font-size:11.5px;color:var(--ink-3);flex:1 1 auto}
.cstrip__k b{font-family:var(--f-display);font-weight:500;font-size:14px;letter-spacing:-.03em;
  color:var(--white);margin-right:7px}
.cstrip__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  flex:0 0 auto;width:min(38%,300px)}
.cstrip__row li{position:relative;height:56px;overflow:hidden;border-radius:7px;
  border:1px solid var(--line);background:var(--black)}
.cstrip__row .proof-frame,.cstrip__row .proof-frame__box{height:100%;min-height:0;
  border:0;border-radius:0;box-shadow:none;background:var(--black);aspect-ratio:auto}
.cstrip__row img{height:100%;width:100%;object-fit:contain}
.cstrip__row span{position:absolute;left:5px;bottom:5px;z-index:3;
  font-family:var(--f-display);font-weight:500;font-size:9.5px;letter-spacing:-.02em;color:var(--white);
  padding:2px 6px;border-radius:5px;background:rgba(5,5,7,.78);
  border:1px solid rgba(200,202,209,.16)}

/* ---- FG Vogel: real profile proof both sides, clips as the supporting row ---- */
.cba__f .proof-frame{flex:1 1 auto;min-height:0}
.cba__f .proof-frame__box{height:100%;min-height:0;aspect-ratio:auto;
  border:0;border-radius:0;box-shadow:none;background:var(--black)}
.cba__f img{height:100%;width:100%;object-fit:contain}
.cp__foot--clips li{min-height:0}
.cp__foot--clips .has-shot{display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto;column-gap:clamp(9px,1vw,14px);align-items:center}
.cp__foot--clips .has-shot .proof-frame{grid-row:1 / span 2;width:clamp(34px,3.2vw,46px);
  height:clamp(56px,5.4vw,76px);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.cp__foot--clips .has-shot .proof-frame__box{height:100%;aspect-ratio:auto;
  border:0;border-radius:0;box-shadow:none;background:var(--black)}
.cp__foot--clips .has-shot img{height:100%;width:100%;object-fit:cover}
.cp__foot--clips .has-shot b{align-self:end}
.cp__foot--clips .has-shot span{align-self:start}

/* ---- John Malek: real fanpage + three real clips ---- */
.cfan__out li .proof-frame{flex:1 1 auto;min-height:0;border-radius:6px;overflow:hidden}
.cfan__out li .proof-frame__box{height:100%;min-height:0;aspect-ratio:auto;
  border:0;border-radius:0;box-shadow:none;background:var(--black)}
.cfan__out li img{height:100%;width:100%;object-fit:contain}
.cfan__src .cshot{min-height:0;display:flex;flex-direction:column}
.cfan__src .cshot .proof-frame{flex:1 1 auto;min-height:0}
.cfan__src .cshot .proof-frame__box{height:100%;min-height:0;aspect-ratio:auto;
  border:0;border-radius:0;box-shadow:none;background:var(--black)}
.cfan__src .cshot img{height:100%;width:100%;object-fit:contain}

/* ---------- reference rail chrome: ghost index, dotted rule, thin track ----- */
.cpanel__n{font-family:var(--f-display);font-weight:500;flex:none;
  font-size:clamp(18px,1.8vw,26px);letter-spacing:.02em;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--line-2);
  transition:color .5s var(--ease-in-out),-webkit-text-stroke-color .5s var(--ease-in-out)}
.cpanel.is-live .cpanel__n{color:var(--white);-webkit-text-stroke-color:transparent}
.cpanel__rule{position:relative;display:block;flex:none;height:1px;
  margin-top:clamp(10px,1.3vh,16px);
  background-image:radial-gradient(circle,var(--line-2) 1px,transparent 1px);
  background-size:5px 1px;background-repeat:repeat-x}
.cpanel__rule::before{content:"";position:absolute;left:0;top:50%;translate:0 -50%;
  width:5px;height:5px;border-radius:50%;background:var(--line-2);
  transition:background .5s var(--ease-in-out),box-shadow .5s var(--ease-in-out)}
.cpanel.is-live .cpanel__rule::before{background:var(--purple);box-shadow:0 0 9px rgba(166,80,255,.9)}
.cpanel__rule i{position:absolute;left:0;top:0;height:1px;width:calc(var(--k,0) * 100%);
  background:linear-gradient(90deg,var(--purple),rgba(166,80,255,.14))}

@media (prefers-reduced-motion:reduce){
  .cpanel__n{color:var(--white);-webkit-text-stroke-color:transparent}
}

/* the card head costs every panel ~45px; RobTheBank was the tightest ---- */
.cp--priv{gap:clamp(7px,.9vh,12px)}
.cp--priv .cpriv__k{padding:5px 11px;font-size:9.5px}
.cp--priv .cmetric--lead span{margin-top:6px;font-size:11px}
.cpriv__out{gap:clamp(5px,.7vh,9px)}
.cpriv__out li{padding:clamp(6px,.8vh,10px)}
.cpriv__src{padding:clamp(10px,1.2vw,16px)}
.cp--priv .cpriv__map{gap:clamp(6px,.8vw,12px)}

/* ---- Jonathan Low: the ecosystem capture is the proof, numbers beside it ---- */
.cp--eco{grid-template-columns:minmax(0,1fr) minmax(0,.78fr);align-items:center}
.ceco__nums{margin-top:clamp(12px,1.8vh,22px)}
.ceco__shot{min-height:0;display:flex;flex-direction:column;max-height:100%}
.ceco__shot .proof-frame{flex:1 1 auto;min-height:0}
.ceco__shot .proof-frame__box{height:100%;min-height:0;aspect-ratio:auto;
  border:0;border-radius:0;box-shadow:none;background:var(--black)}
.ceco__shot img{height:100%;width:100%;object-fit:contain}
/* ---- RobTheBank: three real surfaces ---- */
.cpriv__out li .proof-frame{grid-column:1 / -1;grid-row:2;min-height:0;height:100%;
  border-radius:6px;overflow:hidden}
.cpriv__out li .proof-frame__box{height:100%;min-height:0;aspect-ratio:auto;
  border:0;border-radius:0;box-shadow:none;background:var(--black)}
.cpriv__out li img{height:100%;width:100%;object-fit:contain}

/* ---- alignment pass: nothing cropped, every column able to shrink ---- */
/* centred grid items size to content, so the captures could not shrink and
   blew the panel open — stretch and let min-height:0 do its job */
.cpriv__map{align-items:stretch;min-height:0}
.cpriv__out{min-height:0;align-content:stretch}
.cpriv__out li{min-height:0;overflow:hidden}
.cpriv__src{align-self:center}
.cp--priv{grid-template-rows:auto auto minmax(0,1fr);min-height:0}
/* the FG clip thumbs were the last `cover` left in the section */
.cp__foot--clips .has-shot img{object-fit:contain !important}
.cp--scale .cp__foot--clips .has-shot,.cp--scale .has-shot{display:grid;
  grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:clamp(9px,1vw,14px);align-items:center}
.cp--scale .has-shot .proof-frame{grid-row:1 / span 2;width:clamp(46px,4.4vw,66px);
  height:clamp(34px,3.2vw,46px);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.cp--scale .has-shot .proof-frame__box{height:100%;aspect-ratio:auto;border:0;border-radius:0;
  box-shadow:none;background:var(--black)}
.cp--scale .has-shot img{height:100%;width:100%;object-fit:contain}
/* the combined clipping-pages frame carries channel names and view counts,
   so it needs the wider column to stay legible */
.cp--eco{grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}
.ceco__shot{align-self:stretch}

/* ════════════════════════════════════════════════════════════
   04 CAPABILITIES — bento
   Six functions at three different weights: the flagship holds a
   tall cell, two mid cells sit beside it, three even cells close.
   ════════════════════════════════════════════════════════════ */
.caps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(12px,1.3vw,20px);align-items:stretch}
.cap{grid-column:span 2}
/* the flagship is an <a> and the rest are <article>, so this has to be
   nth-child, not nth-of-type */
.caps > :nth-child(1){grid-column:1 / span 3;grid-row:1 / span 2}
.caps > :nth-child(2){grid-column:4 / span 3;grid-row:1}
.caps > :nth-child(3){grid-column:4 / span 3;grid-row:2}
.caps > :nth-child(4){grid-column:1 / span 2;grid-row:3}
.caps > :nth-child(5){grid-column:3 / span 2;grid-row:3}
.caps > :nth-child(6){grid-column:5 / span 2;grid-row:3}

/* ---------- motion graphics ---------- */
.cap__viz{margin-top:auto;padding-top:clamp(18px,2vw,30px)}
.cap__viz svg{width:100%;height:clamp(56px,6vw,84px);display:block;overflow:visible}
.cap__viz .v-edge path{fill:none;stroke:var(--line-2);stroke-width:1;
  stroke-dasharray:180;stroke-dashoffset:180}
.cap.is-in .cap__viz .v-edge path{animation:vdraw 1.5s var(--ease-in-out) forwards}
.cap.is-in .cap__viz .v-edge path:nth-child(2){animation-delay:.1s}
.cap.is-in .cap__viz .v-edge path:nth-child(3){animation-delay:.2s}
.cap.is-in .cap__viz .v-edge path:nth-child(4){animation-delay:.3s}
@keyframes vdraw{to{stroke-dashoffset:0}}
.cap__viz circle{fill:var(--ink-4);opacity:0;transform:scale(.5);transform-origin:center;transform-box:fill-box}
.cap.is-in .cap__viz circle{animation:vpop .5s var(--ease-land) forwards;animation-delay:calc(.35s + var(--d,0s))}
@keyframes vpop{to{opacity:1;transform:scale(1)}}
.cap__viz .v-src{fill:var(--purple);filter:drop-shadow(0 0 6px rgba(166,80,255,.75))}
.cap__viz .v-end{fill:var(--silver)}
/* a signal travels the edges once the graphic has drawn */
.cap.is-in .cap__viz .v-edge path{stroke:var(--line-2)}
.cap__viz .v-pulse{fill:var(--purple);opacity:0}
.cap.is-in .cap__viz .v-pulse{animation:vtravel 3.2s var(--ease-in-out) 1.5s infinite}
@keyframes vtravel{0%{opacity:0;offset-distance:0%}12%{opacity:1}88%{opacity:1}100%{opacity:0;offset-distance:100%}}
.cap:hover .cap__viz .v-src{filter:drop-shadow(0 0 11px rgba(166,80,255,1))}

@media (max-width:1024px){
  .caps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .caps > *{grid-column:auto / span 1 !important;grid-row:auto !important}
  .caps > :nth-child(1){grid-column:1 / -1 !important}
}
@media (max-width:640px){
  .caps{grid-template-columns:1fr}
  .caps > *{grid-column:1 / -1 !important}
}
@media (prefers-reduced-motion:reduce){
  .cap__viz .v-edge path{stroke-dashoffset:0;animation:none}
  .cap__viz circle{opacity:1;transform:none;animation:none}
  .cap__viz .v-pulse{animation:none;opacity:0}
}

/* ---- RobTheBank: cells cut to the captures' own ratios, so each sits in
   its frame like a puzzle piece rather than being letterboxed ---- */
.cp--priv{grid-template-rows:auto auto minmax(0,1fr)}
.cpriv__grid{display:grid;min-height:0;
  width:100%;height:100%;
  /* shares solved from the captures' own aspects (0.82 / 2.23 / 2.53) so each
     cell is the shape of its image and nothing letterboxes */
  grid-template-columns:minmax(0,0.820fr) minmax(0,1.185fr);
  grid-template-rows:minmax(0,0.532fr) minmax(0,0.468fr);
  gap:clamp(8px,1vw,14px)}
.cpriv__cell{margin:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:clamp(8px,.9vw,12px);background:var(--black);
  opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease-land),transform .6s var(--ease-land)}
.cpanel.is-live .cpriv__cell:nth-child(1){opacity:1;transform:none;transition-delay:.58s}
.cpanel.is-live .cpriv__cell:nth-child(2){opacity:1;transform:none;transition-delay:.70s}
.cpanel.is-live .cpriv__cell:nth-child(3){opacity:1;transform:none;transition-delay:.82s}
.cpriv__cell--tall{grid-column:1;grid-row:1 / span 2}
.cpriv__cell--wide{grid-column:2}
.cpriv__cell .proof-frame{flex:1 1 auto;min-height:0}
.cpriv__cell .proof-frame__box{height:100%;min-height:0;aspect-ratio:auto;
  border:0;border-radius:0;box-shadow:none;background:var(--black)}
.cpriv__cell img{height:100%;width:100%;object-fit:contain}
.cpriv__cell figcaption{flex:none;font-family:var(--f-body);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-4);padding:8px 11px;border-top:1px solid var(--line)}
.cpriv__cell figcaption b{font-family:var(--f-display);font-weight:500;font-size:12.5px;
  letter-spacing:-.02em;color:var(--white);margin-right:6px}
@media (max-width:1100px){
  .cpriv__grid{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .cpriv__cell--tall,.cpriv__cell--wide{grid-column:1;grid-row:auto}
}

/* ---- Crown88: cells cut to the captures' own aspects (1.56 / 1.41) ---- */
.cp--scale .cshot--fit .proof-frame__box{aspect-ratio:1.56;height:auto;max-height:100%}
.cp--scale .cshot--fit{align-self:center;max-height:100%}
.cp--scale .has-shot .proof-frame{width:clamp(52px,5vw,74px);height:auto;aspect-ratio:1.41}
.cp--scale .has-shot .proof-frame__box{aspect-ratio:1.41;height:auto}

/* ════════════════════════════════════════════════════════════
   CASE DATA — the numbers carry the panel, the captures corroborate
   ════════════════════════════════════════════════════════════ */
/* dominant metrics, materially larger */
.cmetric b{font-size:clamp(34px,3.9vw,58px);letter-spacing:-.055em}
.cmetric--lead b{font-size:clamp(30px,3.4vw,50px)}
.cmetric--hero b,.cmetric--max b{font-size:clamp(48px,6.4vw,104px)}
.cmetric span{font-size:clamp(12.5px,1vw,15px);margin-top:11px;color:var(--ink-2)}
.cchip{margin-top:15px;font-size:12px;padding:6px 14px}

/* supporting stat rows — were too small to register as data */
.cp__foot{border-top:1px solid var(--line);padding-top:clamp(13px,1.7vh,20px);
  gap:clamp(14px,2vw,30px)}
.cp__foot b{font-size:clamp(22px,2.4vw,34px);letter-spacing:-.05em}
.cp__foot span{font-size:11px;margin-top:7px;color:var(--ink-3)}
.cstat b{font-size:clamp(22px,2.3vw,32px)}
.cfan__out b{font-size:clamp(16px,1.6vw,23px)}
.cfan__out li.is-top b{font-size:clamp(24px,2.6vw,38px)}
.ceco__pages b{font-size:clamp(19px,2vw,28px)}
.cpriv__cell figcaption b{font-size:clamp(15px,1.5vw,21px)}
.cba__f figcaption b{font-size:clamp(26px,2.9vw,44px)}

/* ---- Maurits: two metric+capture rows, a wide band, then the stat row ---- */
.cp--stack{grid-template-rows:minmax(0,1fr) minmax(0,1fr) auto auto;gap:clamp(12px,1.7vh,24px)}
.cp__beat{grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(18px,2.4vw,38px);align-items:center}
.cp__beat .cmetric{align-self:center}
.cp--stack .cp__route{display:none}
/* the Telegram capture is a 5.9:1 banner — it reads as a band, not a card */
.cshot--band{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:clamp(14px,2vw,26px);border:1px solid var(--line);border-radius:clamp(8px,.9vw,12px);
  overflow:hidden;background:var(--black);flex:none}
.cshot--band .proof-frame{min-height:0}
.cshot--band .proof-frame__box{aspect-ratio:1448 / 244;height:auto;
  border:0;border-radius:0;box-shadow:none;background:var(--black)}
.cshot--band img{width:100%;height:100%;object-fit:contain}
.cshot--band figcaption{border:0;padding-right:clamp(14px,1.8vw,24px);white-space:nowrap;
  font-family:var(--f-body);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.cshot--band figcaption b{font-family:var(--f-display);font-weight:500;
  font-size:clamp(20px,2.1vw,30px);letter-spacing:-.045em;color:var(--white);
  margin-right:9px;display:inline-block}

/* ---- supporting stats are data too: give them real size and a shared line ---- */
.cp__foot{gap:clamp(18px,2.6vw,44px);padding-top:clamp(16px,2vh,26px)}
.cp__foot li{display:flex;flex-direction:column;justify-content:flex-end}
.cp__foot b{font-size:clamp(28px,3vw,44px);letter-spacing:-.055em;line-height:.95}
.cp__foot span{font-size:11.5px;margin-top:9px;color:var(--ink-3);letter-spacing:.02em}

/* ---- FG Vogel: equal-height frames so the before/after captions align, and
   clip thumbs big enough to actually read ---- */
.cp--ba{grid-template-rows:minmax(0,1fr) auto;align-items:stretch}
.cba__f{align-self:stretch}
.cba__link{align-self:center}
.cp__foot--clips{grid-template-columns:repeat(3,minmax(0,1fr))}
.cp__foot--clips .has-shot{grid-template-columns:auto minmax(0,1fr);align-items:end}
.cp__foot--clips .has-shot .proof-frame{grid-row:1 / span 2;
  width:clamp(54px,5.2vw,78px);height:clamp(86px,8.2vw,122px);align-self:center}
.cp__foot--clips .has-shot b{align-self:end}
.cp__foot--clips .has-shot span{align-self:start}

/* ---- keep the hierarchy honest: the lead number must out-rank its support ---- */
.cba__f figcaption b{font-size:clamp(34px,3.8vw,56px)}      /* FG before / after */
.cpriv__cell figcaption b{font-size:clamp(19px,2vw,28px)}   /* Rob surface figures */
.cp--ba .cp__foot b{font-size:clamp(24px,2.5vw,36px)}       /* sits under a 56px lead */

/* ---- John Malek: the distributed clips are the payoff, so they take the
   larger column and fill it; all three read at one size ---- */
.cp--fan{grid-template-columns:minmax(0,.92fr) auto minmax(0,1.34fr);align-items:stretch}
.cfan__src{justify-content:center}
.cfan__out{align-items:stretch;gap:clamp(10px,1.2vw,18px)}
.cfan__out li{justify-content:flex-start;padding:clamp(11px,1.3vh,16px)}
.cfan__out b,.cfan__out li.is-top b{font-size:clamp(20px,2.1vw,30px);color:var(--white)}
.cfan__out li.is-top{border-color:var(--line-lit);background:rgba(166,80,255,.05)}
.cfan__out li.is-top span{color:var(--purple)}
.cfan__out .pph,.cfan__out li .proof-frame{flex:1 1 auto;min-height:0}
.cfan__routes{height:52%}
.cshot--fit figcaption{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Jonathan: the stat row was collapsing, number and label colliding ---- */
.cstat{display:grid;gap:clamp(12px,1.6vh,22px)}
.cstat--row{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,30px)}
.cstat li{display:flex;flex-direction:column;border-top:1px solid var(--line);
  padding-top:clamp(11px,1.4vh,16px)}
.cstat b{display:block;line-height:.95;letter-spacing:-.05em}
.cstat span{display:block;margin-top:9px;font-size:11.5px;color:var(--ink-3)}
.ceco__nums{margin-top:clamp(16px,2.2vh,28px)}
.ceco__lead{gap:clamp(8px,1.2vh,14px)}

/* ---- Crown88: the numeral's side bearing made it read inset against its
   label even though the boxes align exactly — optical correction ---- */
.cscale__n{margin-left:-.045em}
.cscale__l{letter-spacing:.2em}
.cscale__lead{display:flex;flex-direction:column;justify-content:center}
/* footer: number first, proof thumb after, and the two stats sit together */
.cp--scale .cp__foot--2{grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:min(100%,640px)}
.cp--scale .has-shot{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.cp--scale .has-shot b{grid-column:1;grid-row:1}
.cp--scale .has-shot span{grid-column:1;grid-row:2}
.cp--scale .has-shot .proof-frame{grid-column:2;grid-row:1 / span 2;margin-left:clamp(10px,1.2vw,18px)}
/* the panel had a hollow middle — let the proof row take the room */
.cp--scale{grid-template-rows:minmax(0,1fr) auto;row-gap:clamp(16px,2.4vh,32px)}
.cp--scale .cshot--fit{align-self:center}

/* ---- flagship spec: label above value, left aligned, rows distributed to
   fill the card. Right-aligned values were wrapping into ragged second
   lines and leaving the card bottom hollow. ---- */
.cap--flag{align-items:stretch}
.cap__main{justify-content:space-between}
.cap__spec{height:100%;justify-content:space-between;
  border-left:1px solid var(--line-2);padding-left:clamp(22px,2.6vw,36px)}
.cap__spec > div{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:clamp(12px,1.5vh,18px) 0;border-bottom:1px solid var(--line)}
.cap__spec > div:first-child{padding-top:0}
.cap__spec > div:last-child{border-bottom:0;padding-bottom:0}
.cap__spec dt{font-size:9.5px;letter-spacing:.24em;color:var(--ink-4);white-space:nowrap}
.cap__spec dd{margin:0;font-family:var(--f-display);font-weight:500;
  font-size:clamp(15px,1.35vw,19px);letter-spacing:-.025em;color:var(--white);
  text-align:left;white-space:nowrap}

/* ---- signature: the name's descenders were touching the role line ---- */
.access__sig div{gap:6px;line-height:1.15}
.access__sig b{line-height:1.2}
.access__sig span{line-height:1.25}

/* ════════════════════════════════════════════════════════════
   No empty space: every image cell carries its capture's aspect
   ════════════════════════════════════════════════════════════ */
/* ---- John Malek: clips are square crops, so the cells are square ---- */
.cfan__out{align-items:start}
.cfan__out li{height:auto;padding:clamp(10px,1.2vh,15px)}
.cfan__out li .proof-frame{flex:none;width:100%}
.cfan__out li .proof-frame__box{aspect-ratio:1;height:auto;min-height:0}
.cfan__out li img{width:100%;height:100%;object-fit:cover}

/* ---- FG Vogel: each profile frame is the shape of its own capture, so the
   black bands above and below the screenshots disappear ---- */
.cba__f{align-self:start}
.cba__f .proof-frame{flex:none;width:100%}
.cba__f .proof-frame__box{height:auto;min-height:0}
.cba__f:nth-of-type(1) .proof-frame__box{aspect-ratio:1046 / 844}
.cba__f--to .proof-frame__box{aspect-ratio:1022 / 1034}
.cba__f img{width:100%;height:100%;object-fit:cover}

/* ---- FG footer: one row height, numbers on a shared line ---- */
.cp__foot--clips{align-items:stretch}
.cp__foot--clips li{justify-content:center}
.cp--ba .cp__foot b{font-size:clamp(26px,2.7vw,38px)}

/* ---- Maurits: each beat's cell takes the shape of its own capture, so the
   image fills it edge to edge instead of floating in black ---- */
.cp__beat{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.cp__beat .cshot{height:100%;width:100%}
.cp__beat .cshot .proof-frame{height:100%}
.cp__beat .cshot .proof-frame__box{height:100%;width:100%;min-height:0}
.cp--stack .cp__beat .proof-frame__box{aspect-ratio:4 / 3}
.cp__beat .cshot img{width:100%;height:100%;object-fit:cover}

/* ---- Jonathan: the capture carries its own frame, so ours was doubled up ---- */
.ceco__shot{border:0;border-radius:0;background:none}
.ceco__shot .proof-frame__box{border:0;border-radius:0;box-shadow:none;background:none}

/* ---- last two cells still showing bands ---- */
/* Jonathan: size the box to the capture and centre it — no crop, no bands */
.ceco__shot .proof-frame__box{aspect-ratio:855 / 1085;height:auto;width:auto;
  max-height:100%;max-width:100%;margin-inline:auto}
.ceco__shot .proof-frame{display:flex;align-items:center;justify-content:center}
/* Rob's profile: fill the tall cell, a few percent off the top and bottom of a
   profile screenshot costs nothing */
.cpriv__cell--tall img{object-fit:cover}

/* ---- RobTheBank: the captures carry their own frames, and cover was cutting
   the left edge off the profile ---- */
.cpriv__cell{border:0;background:none;border-radius:0}
.cpriv__cell .proof-frame__box{border:0;border-radius:0;box-shadow:none;background:none}
.cpriv__cell--tall img{object-fit:contain}
.cpriv__cell img{object-fit:contain}
/* size the tall cell to the profile's own shape so contain neither crops nor bands */
.cpriv__cell--tall .proof-frame__box{aspect-ratio:576 / 700;height:auto;width:auto;
  max-height:100%;max-width:100%;margin-inline:auto}
.cpriv__cell--tall .proof-frame{display:flex;align-items:center;justify-content:center}
.cpriv__cell figcaption{padding-left:0;padding-right:0}

/* ---- 02 Distribution: copy and figure share a top edge ---- */
.dist__grid{align-items:start}
.dist__head{align-self:start}
.dist__fig{align-self:start}
.dist__fig .engine__cap{margin-top:0}

/* ---- flagship spec: values were oversized and nowrap pushed them into the
   card's right padding ---- */
.cap__spec{padding-right:clamp(4px,1vw,16px)}
.cap__spec dd{font-size:clamp(13px,1.05vw,15.5px);white-space:normal;
  letter-spacing:-.02em;line-height:1.3}
.cap__spec dt{font-size:9px;letter-spacing:.22em}
.cap__spec > div{gap:6px;padding:clamp(10px,1.3vh,15px) 0}

/* ════════════════════════════════════════════════════════════
   John Malek — rebuilt: two proof frames over a row of clips.
   The old three tall cards left each square floating in a column
   twice its height.
   ════════════════════════════════════════════════════════════ */
.cp--fan{grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto auto;gap:clamp(10px,1.4vh,18px)}
.cfan__pair{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,0.79fr);
  gap:clamp(10px,1.2vw,18px);min-height:0}
.cfan__frame{margin:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:clamp(8px,.9vw,12px);background:var(--black)}
.cfan__frame .proof-frame{flex:1 1 auto;min-height:0}
.cfan__frame .proof-frame__box{height:100%;min-height:0;aspect-ratio:auto;
  border:0;border-radius:0;box-shadow:none;background:var(--black)}
.cfan__frame img{width:100%;height:100%;object-fit:contain}
.cfan__frame figcaption{flex:none;border-top:1px solid var(--line);
  padding:8px 11px;font-family:var(--f-body);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfan__frame figcaption b{font-family:var(--f-display);font-weight:500;
  font-size:clamp(15px,1.5vw,21px);letter-spacing:-.03em;color:var(--white);margin-right:7px}

/* the three clips read as one row of squares, numbers above */
.cfan__out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.2vw,18px);align-items:start;min-height:0}
.cfan__out li{display:grid;grid-template-rows:auto auto auto;gap:5px;height:auto;
  padding:clamp(9px,1vh,13px);border:1px solid var(--line);
  border-radius:clamp(8px,.9vw,12px);background:var(--black);overflow:hidden}
.cfan__out li .proof-frame{width:100%;flex:none}
.cfan__out li .proof-frame__box{aspect-ratio:1;height:auto;width:100%;
  border:0;border-radius:6px;box-shadow:none;background:var(--black)}
.cfan__out li img{width:100%;height:100%;object-fit:cover}
.cp--fan .cp__note{grid-column:1;justify-self:start}
@media (max-width:1100px){
  .cfan__pair{grid-template-columns:1fr}
}

/* ---- John: frames take the shape of their captures, and the clip row is
   capped so the frames get the height they need ---- */
.cfan__pair{grid-template-columns:auto auto;justify-content:start}
.cfan__frame .proof-frame{display:flex;align-items:center;justify-content:center}
.cfan__frame .proof-frame__box{height:100%;width:auto}
.cfan__pair > .cfan__frame:nth-child(1) .proof-frame__box{aspect-ratio:1200 / 1053}
.cfan__pair > .cfan__frame:nth-child(2) .proof-frame__box{aspect-ratio:900 / 1146}
.cfan__out{max-width:min(100%,560px)}
.cfan__out li{padding:clamp(7px,.9vh,11px)}
.cfan__out b{font-size:clamp(17px,1.8vw,25px)}
.cfan__out span{font-size:9px}
/* "Top clip" is a longer label than "Clip", so the first card ran taller */
.cfan__out{align-items:stretch}
.cfan__out li{grid-template-rows:auto auto minmax(0,1fr)}
.cfan__out li span{min-height:1.2em}

/* ---- clip cells must stay exactly square: a 1fr row was compressing them
   and cutting the view badge off the bottom ---- */
.cfan__out li{grid-template-rows:auto auto auto;align-content:start}
.cfan__out li .proof-frame{width:100%;height:auto}
.cfan__out li .proof-frame__box{aspect-ratio:1;height:auto;width:100%;min-height:0}
.cfan__out li img{width:100%;height:100%;object-fit:contain}

/* ---- every remaining cell pinned to its capture's exact ratio ---- */
/* each beat carries its own capture's ratio — a shared 1254/705 letterboxed
   both of them (1250x758 and 1400x788 are not the same shape) */
.cp--stack .cp__beat:nth-of-type(1) .proof-frame__box{aspect-ratio:1250 / 1002}
.cp--stack .cp__beat:nth-of-type(2) .proof-frame__box{aspect-ratio:1400 / 788}
/* The row stretched the figure and forced the box to 100% height, which
   defeats aspect-ratio (a block's width:auto fills rather than deriving from
   the ratio). Since .cshot draws a 1px frame, any slack read as a black band
   inside it — so the figure hugs its capture instead of filling the row. */
.cp--stack .cp__beat .cshot{align-self:start;height:auto}
.cp--stack .cp__beat .proof-frame{height:auto;display:block}
.cp--stack .cp__beat .proof-frame__box{width:100%;height:auto;min-height:0}
.cp--stack .cp__beat .proof-frame__box img{width:100%;height:100%;object-fit:contain}
.cp__foot--clips li:nth-child(1) .proof-frame__box{aspect-ratio:876 / 1370}
.cp__foot--clips li:nth-child(2) .proof-frame__box{aspect-ratio:632 / 1058}
.cp__foot--clips .has-shot .proof-frame{height:auto}
.cpriv__cell--wide:nth-of-type(2) .proof-frame__box{aspect-ratio:1300 / 583}
.cpriv__cell--wide:nth-of-type(3) .proof-frame__box{aspect-ratio:1300 / 514}

/* ════════════════════════════════════════════════════════════
   John Malek — the clipper post is portrait, so it takes the whole
   right column; the fanpage and two square clips fill the left.
   ════════════════════════════════════════════════════════════ */
/* the right column is sized to what the capture needs to stand full-height at
   its own ratio (0.785); anything narrower letterboxes it, anything wider
   starves the dashboard and clips beside it */
.cp--fan{grid-template-columns:minmax(0,1fr) clamp(270px,24vw,430px);
  grid-template-rows:minmax(0,1fr) auto;column-gap:clamp(16px,1.8vw,26px)}
/* both columns end on a shared baseline — centring each independently left
   the clipper caption hanging 49px below the clip cards */
/* both columns fill the panel top to bottom: the metric sits level with the
   clipper's top edge, and the clip cards' floor is the caption's floor */
/* This panel carries less than the others, so top-aligning left ~380px dead at
   the floor. Centring splits the leftover evenly while the internal gaps stay
   tight — the spacing complaint was the gaps, not the balance. */
.cfan__left{grid-column:1;grid-row:1;display:flex;flex-direction:column;
  justify-content:center;min-height:0;gap:clamp(14px,1.8vh,22px)}
.cfan__left .cfan__out{flex:none;min-height:0}
.cfan__left .cmetric--lead{margin-bottom:0}
.cfan__tall{grid-column:2;grid-row:1}
.cp--fan .cfan__out{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
.cp--fan .cp__note{grid-column:1 / -1;grid-row:2;justify-self:start}
@media (max-width:1100px){
  .cp--fan{grid-template-columns:1fr;grid-template-rows:auto auto auto auto}
  .cfan__tall{grid-column:1;grid-row:auto}
}
/* an auto column sized to the tall image's intrinsic width and starved the
   left column to zero — give it a bounded share instead */
.cp--fan{align-items:stretch}
.cfan__left{gap:clamp(14px,2vh,26px)}
/* dashboard: bare capture, no frame chrome */
.cfan__dash{margin:0;min-width:0}
.cfan__dash .proof-frame{margin:0;border:0;border-radius:0}
.cfan__dash .proof-frame__box{width:100%;height:auto;aspect-ratio:1170 / 196;
  border:0;border-radius:8px;box-shadow:none;background:transparent;overflow:hidden}
.cfan__dash img{width:100%;height:100%;object-fit:contain;display:block}
/* clipper: bare capture filling the right column, data beneath */
/* capture and its figure flow together from the top — pinning the data to the
   column floor opened a void under the capture */
.cfan__tall{margin:0;min-height:0;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(10px,1.4vh,16px);border:0;border-radius:0;background:none;overflow:visible}
.cfan__tall .proof-frame{flex:0 0 auto;min-height:0;margin:0;border:0;border-radius:0}
.cfan__tall .proof-frame__box{width:100%;height:auto;aspect-ratio:900 / 1146;max-height:100%;
  border:0;border-radius:10px;box-shadow:none;background:transparent;overflow:hidden}
.cfan__tall img{width:100%;height:100%;object-fit:contain;display:block}
.cfan__tall figcaption{flex:none;border:0;padding:0;
  font-family:var(--f-body);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--silver)}
.cfan__tall figcaption b{font-family:var(--f-display);font-weight:500;font-size:clamp(20px,2.1vw,30px);
  letter-spacing:-.03em;color:var(--white);margin-right:.4em;text-transform:none}

.u-narrow{display:none}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE (<= 767px) — simplified build.
   Scroll-driven film and the wide topology diagram carry no meaning at
   phone width, so they are removed outright and their copy is promoted
   to a plain vertical read. The hero film goes full-bleed behind
   left-aligned copy instead of stacking below it.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:767px){

  /* ── HERO: film behind, copy left ── */
  .hero{height:auto}
  .hero__pin{position:relative;height:auto;display:block;min-height:100svh;
    padding:clamp(126px,32vw,168px) 0 clamp(54px,14vw,78px)}
  .hero__inner{display:block;position:relative;z-index:3}
  .hero__copy{display:block;max-width:none;text-align:left;padding-inline:var(--gut)}
  .hero__eyebrow,.hero__h1,.hero__lede,.hero__cta{padding-inline:0;text-align:left}
  .hero__film{order:0;position:absolute;inset:0;z-index:0;margin:0;
    width:100%;height:100%;aspect-ratio:auto;transform:none;opacity:1}
  .hero.is-ready .hero__film{opacity:1}
  /* Fill the screen. `contain` drew the film as a 375x211 band inside an
     812px section, which reads as a cropped strip; `cover` fills edge to edge
     and takes the crop from the sides, centred on the composition. */
  .hero__v,.hero__poster{object-fit:cover;object-position:50% 50%;
    -webkit-mask-image:none;mask-image:none}
  .hero__halo{display:none}
  .hero__scrim{background:rgba(5,5,7,.34)}
  .hero__blend{background:linear-gradient(180deg,
    rgba(5,5,7,.72) 0%,rgba(5,5,7,.30) 16%,rgba(5,5,7,.34) 34%,
    rgba(5,5,7,.86) 50%,var(--black) 70%)}
  .hero__h1{font-size:clamp(30px,8.6vw,40px);line-height:1.06;letter-spacing:-.05em}
  .hero__eyebrow{display:block;letter-spacing:.16em;line-height:1.8}
  .hero__eyebrow em{margin-inline:.5em}
  .hero__lede{font-size:15px;line-height:1.62;max-width:34ch}
  .hero__cta{flex-direction:column;align-items:stretch;gap:12px}

  /* ── 01 NETWORK: the scroll stills go; the three layers read as text ── */
  .net__media{display:none}
  .net__scroll{height:auto}
  .net__pin{position:relative;height:auto;display:block;grid-template-columns:1fr}
  .net__panel{display:block;padding:clamp(34px,9vw,54px) var(--gut)}
  .net__stack{position:static;min-height:0}
  .net__step{position:static;inset:auto;opacity:1;transform:none;
    padding-bottom:clamp(30px,8vw,44px);margin-bottom:clamp(30px,8vw,44px);
    border-bottom:1px solid var(--line)}
  .net__step:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
  .net__step h3{font-size:clamp(28px,8vw,38px)}
  .net__prog{display:none}

  /* ── alignment: the reveal scales blocks to .985, which pulls a 335px
       column inward ~3px and leaves every heading and paragraph sitting off
       the gutter while it animates. Vertical motion only here, so left edges
       never move. ── */
  .rv,.rv--h,.rv--c,.rv--d,.rv--n{transform:translateY(22px) scale(1)}
  .rv.is-in{transform:none}
  /* the case-study header never collapsed: its lede was stranded in a 146px
     second column at x=210 */
  .proofsec__head{grid-template-columns:minmax(0,1fr);gap:clamp(10px,3vw,16px);align-items:start}
  .proofsec__lede{align-self:start}

  /* ── 02 copy: the visuals are fewer here, so anything the diagram, the
       format list or the platform card already says comes out ── */
  .u-wide{display:none}
  .u-narrow{display:inline}
  .dist__kicker{display:none}          /* restates the 02 // Distribution eyebrow */
  .eng__act[data-act="3"] .eng__body{display:none}  /* the 12+ tally says it */

  /* ── 02 DISTRIBUTION: the topology diagram carries the section ── */
  .dist__fig{display:block;margin:clamp(26px,7vw,38px) 0 0;width:100%}
  .dist__fig .engine__frame{padding:clamp(10px,3vw,16px)}
  .dist__fig .engine__svg{width:100%;height:auto;max-height:none}
  /* the diagram's own labels come back — they are the point of it */
  .dist__fig .engine__svg text,.dist__fig .engine__svg tspan{display:initial}
  .dist__hold{position:relative;height:auto;min-height:0;overflow:visible;
    padding-block:clamp(70px,16vw,96px) clamp(14px,4vw,22px)}
  .dist__grid{grid-template-columns:1fr}
  .dist__aura{display:none}

  /* ── 02b ENGINE: not scrubbed here, but the film still plays — it is the
       section's only visual, stacked full-width and never cropped ── */
  .eng{border-radius:0;box-shadow:none;margin-block:0}
  /* one gutter for the whole section, so film, acts and the platform card
     all share a single left edge */
  .eng__pin{position:relative;height:auto;overflow:visible;
    display:flex;flex-direction:column;
    padding:clamp(10px,3vw,18px) var(--gut) 0}
  .eng__ui{order:1}
  .eplat{order:2}
  .eng__pin::before,.eng__pin::after{display:none}
  .eng__stage{display:none}
  .eng__canvas{display:none}
  .eng__v,.eng__poster{display:block;position:absolute;inset:0;
    width:100%;height:100%;object-fit:contain;background:var(--black)}
  .eng__frame,.eng__dim,.eng__bleed{display:none}
  .eng__ui{position:relative;height:auto;display:block;width:auto;
    padding:clamp(30px,8vw,46px) 0 clamp(46px,12vw,72px)}
  .eng__copy{position:static;min-height:0;max-width:none}
  .eng__act{position:static;inset:auto;width:auto;opacity:1;transform:none;
    padding-bottom:clamp(28px,7vw,40px);margin-bottom:clamp(28px,7vw,40px);
    border-bottom:1px solid var(--line)}
  .eng__act:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
  .eng__act h3{font-size:clamp(26px,7.6vw,36px)}
  .eng__specs li,.eng__arrow path{opacity:1;transform:none;stroke-dashoffset:0}

  /* ── hero film must cover the section, not just the pin ── */
  .hero{padding-top:0}

  /* ── 4. platform card: flush with the copy, not inset ── */
  .eplat{display:block;position:relative;inset:auto;transform:none;
    width:100% !important;max-width:none !important;
    margin:clamp(22px,6vw,34px) 0 0 !important}
  .eplat__list li{padding-inline:0}

  /* ── 5 + 6. case panels: every proof grid collapses to one column, so
       numbers, labels and captures stop overlapping each other ── */
  .cpanel__in .cp{grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:none;row-gap:clamp(18px,5vw,28px)}
  .cp > *{grid-column:1 !important}
  .cp__foot{grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:clamp(16px,4.5vw,24px) clamp(14px,4vw,20px)}
  .cp__foot--tg{grid-template-columns:minmax(0,1fr) !important}
  .cp__foot span{margin-top:5px;line-height:1.45}
  .cstat,.cstat--row,.ceco__nums{grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:clamp(12px,3.5vw,18px);width:100%}
  .ceco__lead,.ceco__shot,.cpriv__grid{width:100%}
  /* stacked cells inherit a fixed height from the desktop row, which overrides
     the declared aspect-ratio and letterboxes the capture. Let each frame take
     its own image's ratio instead. */
  .cpanel .cp__beat,.cpanel .cp__beat .proof-frame{height:auto !important;min-height:0;align-self:start}
  .cpanel .cp__beat .proof-frame__box,.cpanel .cshot .proof-frame__box{
    height:auto !important;min-height:0;aspect-ratio:auto !important}
  .cpanel .cp__beat img,.cpanel .cshot img{width:100%;height:auto !important;display:block}
  .cstat li span,.ceco__nums li span{line-height:1.45;margin-top:4px}
  /* the clip thumbnails ride beside their number; the placement is fine,
     the thumbnail is simply too wide for a half-width cell here */
  .cp__foot--clips .has-shot,.cp--scale .has-shot{
    column-gap:clamp(8px,2.5vw,12px);align-items:center}
  .cp__foot--clips .has-shot .proof-frame,.cp--scale .has-shot .proof-frame{
    width:clamp(32px,8.5vw,42px);max-width:100%;margin-left:0}

  /* ── legibility floor: no label under 11px, no body copy under 15px ── */
  .eyebrow,.eyebrow *,.eng__chapter,.eng__chapter *,.lockup__sub,
  .cpanel__ix,.cshot figcaption,.cfan__out span,.cfan__tall figcaption,
  .net__pill,.cpanel__builtk,.cp__note,.band__grid span,.cmetric span,
  .cap__idx,.cap__tag,.cba__days,.cpriv__k,.cscale__d,.dist__kicker,
  .eplat__fmt,.eplat__tier,.proof-frame__ph span,.proof-frame__ph b,
  .foot dt,.foot dd,.foot nav a,.foot__grid nav h4,.foot__base span,
  .btn,.cap__cta b,.cap__spec dt,.cap__spec dd,.cba__f figcaption span,
  .eng__specs li,.net__tags li i,.net__tags li span,.net__idx span,
  .proof span{font-size:11px !important}
  .sechead__body p,.dist__sub,.cpanel__p,.net__step p,.eng__body,
  .foot__note p,.prin__body{font-size:15px;line-height:1.62}
  /* diagram micro-labels sit in scaled viewBoxes — a 9.5px label inside a
     1240-unit box renders near 3px here, so the labels come off entirely */
  .cap__fig text,.cap__fig tspan{display:none}

  /* ── 03 CASE STUDIES: a swipe rail nested in vertical scroll is a
       discovery trap on a phone, so the six cases simply stack ── */
  .crail__track{flex-direction:column;overflow:visible;padding:0 var(--gut);
    gap:clamp(26px,7vw,40px);width:100%}
  .crail__track .cpanel{width:100%;flex:0 0 auto;height:auto;min-height:0}
  .cpanel__card{height:auto;min-height:0}
  .cpanel__in{height:auto;min-height:0}
  .cp{min-height:0}
  /* the John Malek panel is a two-column composition; on a phone it is
     simply a stack, so the grid placement is dropped entirely */
  .cp--fan{display:flex;flex-direction:column;gap:clamp(16px,4vw,24px)}
  .cp--fan .cfan__left,.cp--fan .cfan__tall,.cp--fan .cp__note{
    grid-column:auto;grid-row:auto}
  .cfan__tall{order:2;justify-content:flex-start}
  .cp--fan .cp__note{order:3}

  /* ── 03 case content: 17px of card padding and zero paragraph
       separation read as cramped; open the whole panel up ── */
  .cpanel__card{padding:clamp(22px,6vw,28px)}
  .cpanel__in{gap:clamp(30px,8vw,42px)}
  .cpanel__ix{margin-bottom:10px}
  .cpanel__name{margin-bottom:10px}
  .cpanel__head{margin-bottom:clamp(18px,5vw,24px)}
  .cpanel__copy .cpanel__p + .cpanel__p{margin-top:clamp(12px,3.4vw,16px)}
  .cpanel__built{margin-top:clamp(22px,6vw,28px);padding-top:clamp(18px,5vw,22px)}
  .cpanel__built ul{gap:9px}
  .cp{gap:clamp(18px,5vw,24px)}
  .cmetric--lead{margin-bottom:clamp(6px,2vw,10px)}
  .cp__note{margin-top:clamp(10px,3vw,14px)}
  .cfan__out{gap:clamp(12px,3.4vw,16px)}
  .cfan__out li{padding:clamp(12px,3.4vw,15px);gap:7px}

  /* ── tap targets ── */
  /* the burger menu already carries Request Access; two CTAs collide here */
  .nav__actions .btn--sm{display:none}
  .btn{min-height:52px;padding-inline:22px}
  .nav__link,.nav__menu a,.foot nav a{min-height:44px;display:flex;align-items:center}
  .lockup{min-height:44px;display:inline-flex;align-items:center}
}