/* Magnetic LLC — conversion hero */

:root{
  --bg:#000000;
  --surface:#0e0e0f;
  --ink:#f3ecde;          /* cream */
  --cream:#efe7d6;
  --dim:#aca69c;
  --faint:#87827b;
  --line:rgba(255,255,255,.085);
  --glass:rgba(255,255,255,.035);
  /* Accents are derived from the navbar: cream action colour, cream ink,
     hairline borders, a soft cream glow. No second hue anywhere. */
  --accent:#efe7d6;            /* = --cream, the action colour in the nav pill */
  --accent-ink:#f3ecde;        /* = --ink, display type */
  --accent-line:rgba(239,231,214,.42);
  --accent-fill:rgba(239,231,214,.10);
  --accent-glow:rgba(239,231,214,.26);
  --yes:#86ad91;               /* muted sage, low chroma so it sits beside cream */
  --no:#c4776e;                /* muted clay */
  /* type: 7 text steps + 3 display sizes. Was 25 ad-hoc sizes. */
  --t-label:10px;    /* tracked caps */
  --t-micro:12px;    /* fine print */
  --t-small:14px;    /* secondary body */
  --t-body:16px;     /* primary body */
  --t-lead:18px;     /* list rows, questions */
  --t-h3:22px;       /* step + card titles */
  --t-fig:28px;      /* countable figures */
  /* space: 4px base, no value off the grid */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s7:32px; --s8:40px;
  --s9:48px; --s10:56px; --s11:72px; --s12:96px;
  /* motion: four tiers, two easings. Exits run one tier down. No bounce. */
  --m-instant:90ms; --m-fast:140ms; --m-base:200ms; --m-slow:300ms;
  --e-std:cubic-bezier(.2,0,0,1);
  --e-exit:cubic-bezier(.4,0,1,1);
  --r-pill:999px;
  --r-card:20px;
  --r-inner:13px;
  --r-bar:7px;
  --display:"Figtree","Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"SF Pro Display",Helvetica,Arial,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
  --vsl-ratio:2 / 1;   /* reference card shape; set to 16 / 9 for an uncropped 16:9 master */
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html,body{min-height:100%;overflow-x:hidden;max-width:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
body.modal-open{overflow:hidden}

img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

/* ─────────────────────────────  background scene  ───────────────────────── */

.scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}

.streaks{display:none}
.beam{display:none}

.vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(70% 45% at 50% 40%,rgba(255,248,232,.045) 0%,rgba(255,248,232,0) 70%),
    radial-gradient(120% 60% at 50% 100%,rgba(239,231,214,.05) 0%,rgba(0,0,0,0) 65%);
}

/* ─────────────────────────────  nav  ───────────────────────── */

.nav{position:fixed;top:0;left:0;right:0;z-index:40;padding:24px 20px 0}
.navbar{
  position:relative;
  margin:0 auto;
  max-width:1198px;
  height:52px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 6px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(14,14,15,.72);
  -webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.5);
}
.nav-seg{
  display:flex;align-items:center;gap:11px;
  height:52px;padding:0 24px;
  font-size:12px;line-height:16px;font-weight:600;letter-spacing:.13em;
  color:var(--dim);
  transition:color .18s ease;
}
.nav-seg svg{fill:currentColor;flex:none}
.nav-seg:hover{color:var(--ink)}
.nav-menu{border-right:1px solid var(--line)}
.nav-cta{
  border-left:0;
  align-self:center;
  margin:0 5px 0 0;height:42px;padding:0 22px;border-radius:999px;
  background:var(--cream);color:#0a0a0a;
  font-family:var(--display);font-weight:700;letter-spacing:.06em;
  box-shadow:0 0 26px rgba(239,231,214,.18);
}
.nav-cta:hover{color:#0a0a0a;background:#fbf6ea}
.nav-logo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;
}
.orb{
  display:block;
  font-family:var(--display);
  font-size:20px;line-height:24px;font-weight:700;letter-spacing:-.035em;
  color:var(--ink);
  white-space:nowrap;
}
.orb::after{display:none;
  content:"";position:absolute;left:18%;top:10%;width:44%;height:30%;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0));
  filter:blur(1.5px);
}
.orb-m{
  position:relative;z-index:2;
  font-size:19px;font-weight:800;letter-spacing:-.02em;
  color:#04122f;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

.menu-panel{
  margin:10px auto 0;max-width:1198px;
  display:flex;flex-direction:column;gap:2px;
  padding:10px;
  border-radius:20px;
  border:1px solid var(--line);
  background:rgba(12,12,13,.92);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.menu-panel a{
  padding:13px 16px;border-radius:13px;
  font-size:15px;color:rgba(255,255,255,.82);
}
.menu-panel a:hover{background:rgba(255,255,255,.06);color:var(--ink)}

/* ─────────────────────────────  hero  ───────────────────────── */

.hero{
  position:relative;z-index:10;
  height:100svh;
  max-height:100svh;
  padding:round(clamp(112px,11.4svh,124px),1px) 20px round(clamp(24px,2.6svh,36px),1px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
}

.eyebrow{
  flex:none;
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin:0 0 round(min(1.9svh,26px),1px);
  font-size:11px;line-height:12px;font-weight:600;letter-spacing:.26em;
  color:var(--faint);
}
.eyebrow::before,.eyebrow::after{
  content:"";width:58px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22));
}
.eyebrow::after{background:linear-gradient(270deg,transparent,rgba(255,255,255,.22))}

.ticker{
  flex:none;
  display:inline-flex;align-items:center;gap:14px;
  padding:4px 20px 4px 4px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
}
.ticker-tag{
  padding:6px 17px;border-radius:999px;line-height:18px;
  font-size:13.5px;font-weight:600;letter-spacing:-.005em;color:#fff;
  background:var(--cream);color:#0a0a0a;
  box-shadow:0 6px 20px rgba(239,231,214,.14);
}
.ticker-text{font-size:13.5px;line-height:18px;font-weight:500;color:var(--dim)}

.headline{
  flex:none;
  margin:round(min(1.6svh,20px),1px) 0 0;
  display:flex;flex-direction:column;
  font-size:clamp(30px, min(5.85vw, 7.0svh), 84px);
  line-height:.90;
  line-height:round(.90em,1px);
  font-weight:700;
  letter-spacing:-.022em;
  font-family:var(--display);
  color:var(--ink);
}
/* one clause per line wherever it fits; when it cannot, balance the wrap so the
   line lengths stay even instead of leaving a one-word orphan */
.headline span{white-space:nowrap;text-wrap:balance}

.sub{
  flex:none;
  margin:round(min(1.4svh,18px),1px) 0 0;
  max-width:60ch;
  font-size:clamp(14px, 1.22vw, 17.5px);
  line-height:1.52;
  line-height:round(1.52em,1px);
  font-weight:450;
  color:var(--dim);
}

/* ── video ── */

.vsl{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  width:100%;
  margin:round(min(2.4svh,32px),1px) 0 0;
  display:flex;align-items:center;justify-content:center;
}
.vsl-glow{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1020px,116vw);height:min(560px,70%);
  background:radial-gradient(60% 60% at 50% 55%,rgba(239,231,214,.16),rgba(239,231,214,.05) 55%,transparent 75%);
  filter:blur(52px);
  z-index:0;
}
.vsl-frame{
  position:relative;z-index:1;
  flex:none;                 /* never let the flex line shrink the card off-ratio */
  height:100%;width:auto;
  max-width:100%;
  max-height:min(384px,46vw);
  aspect-ratio:var(--vsl-ratio);
  border-radius:21px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 30px 80px rgba(0,0,0,.7);
}
.vsl-screen{
  position:relative;
  width:100%;height:100%;
  border-radius:21px;
  overflow:hidden;
  background:#0b0d12;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.vsl-screen video{width:100%;height:100%;object-fit:cover;display:block}
.play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;
  width:clamp(52px,6.1vw,70px);aspect-ratio:1;
  border-radius:50%;
  background:rgba(239,231,214,.85);
  border:0;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .22s cubic-bezier(.22,1,.36,1),background .22s ease;
}
.play svg{fill:#0a0a0a;width:42%;height:42%;margin-left:6%}
.play:hover{background:#fbf6ea;transform:translate(-50%,-50%) scale(1.07)}
.vsl.playing .play{opacity:0;pointer-events:none}

/* ── cta ── */

.cta{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  flex:none;
  margin:round(min(2.0svh,28px),1px) 0 0;
  min-width:328px;height:56px;padding:0 34px;
  border-radius:999px;
  font-family:var(--display);
  font-size:19px;line-height:24px;font-weight:700;letter-spacing:-.01em;color:#0a0a0a;
  border:0;
  background:var(--cream);
  box-shadow:0 0 30px rgba(239,231,214,.26),0 8px 24px rgba(0,0,0,.6);
  transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s ease;
}
.cta:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 14px 36px rgba(3,10,35,.7),
    0 0 46px rgba(239,231,214,.6);
}
.cta:active{transform:translateY(0)}
.cta-arrow{flex:none;transition:transform .22s cubic-bezier(.22,1,.36,1)}
.cta:hover .cta-arrow{transform:translateX(3px)}
.cta-sm{min-width:0;width:100%;height:52px;font-size:17px;margin-top:22px}

/* ── proof ── */

.proof{
  flex:none;
  display:flex;align-items:center;gap:13px;
  margin:round(min(1.4svh,18px),1px) 0 0;
}
.faces{display:flex}
.faces img{
  width:30px;height:30px;border-radius:50%;
  object-fit:cover;
  border:2px solid #000;
  margin-left:-9px;
}
.faces img:first-child{margin-left:0}
.proof p{margin:0;font-size:14.5px;line-height:20px;color:var(--dim)}
.proof strong{color:var(--ink);font-weight:700}
.proof span{color:var(--dim)}

/* ────────────────────────  bottom legal shell  ──────────────────────── */

.rail{position:relative;z-index:20;padding:0 20px}

/* ───────────────────  no-video lander (direct.html)  ─────────────────── */

/* Same hero, no VSL. `.gap` takes the video's place as the one flexible child,
   so the copy sits in the upper half, the CTA falls to thumb height, and every
   text row still lands on a whole pixel. */
.gap{flex:1 1 auto;min-height:0}

body.no-vsl .headline{font-size:clamp(34px, min(6.6vw, 13svh), 92px)}
body.no-vsl .sub{max-width:72ch;font-size:clamp(15px, 1.34vw, 19px)}
/* The block is centred as one unit, so `.gap` is a fixed breath, not a spring.
   Centring can leave the rows on a .5 offset (nothing here flexes to swallow an
   odd remainder), so the cream CTA carries a 1px cream ring: it fills the
   antialiased edge and the fill reads solid either way.
   See [[fractional-offsets-soften-text]]. */
body.no-vsl .gap{flex:none;height:round(min(4svh,34px),1px)}
body.no-vsl .cta{box-shadow:0 0 0 1px var(--cream),0 0 30px rgba(239,231,214,.26),0 8px 24px rgba(0,0,0,.6)}

@media (max-width:760px){
  body.no-vsl .headline{font-size:clamp(30px,10.4vw,52px)}
  body.no-vsl .sub{font-size:16px;max-width:40ch}
  body.no-vsl .gap{height:26px}
}

/* ─────────────────────────────  apply modal  ───────────────────────── */

.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px}
.modal-scrim{position:absolute;inset:0;background:rgba(3,4,7,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.modal-card{
  position:relative;
  width:min(520px,100%);
  max-height:min(86svh,760px);
  overflow-y:auto;
  padding:32px 30px 30px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(14,16,22,.94);
  -webkit-backdrop-filter:blur(26px) saturate(140%);
  backdrop-filter:blur(26px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 40px 100px rgba(0,0,0,.7);
  text-align:left;
}
.modal-x{position:absolute;right:18px;top:14px;font-size:27px;line-height:1;color:var(--faint)}
.modal-x:hover{color:#fff}
.modal-kicker{margin:0;font-size:10px;font-weight:700;letter-spacing:.24em;color:var(--faint)}
.modal-card h2{margin:10px 0 22px;font-family:var(--display);font-size:25px;font-weight:700;letter-spacing:-.025em;line-height:1.18}
.q{border:0;padding:0;margin:0 0 18px}
.q legend{padding:0;margin:0 0 9px;font-size:13px;font-weight:600;color:var(--dim)}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices label{position:relative;cursor:pointer}
.choices input{position:absolute;opacity:0;width:0;height:0}
.choices span{
  display:block;padding:9px 15px;border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  font-size:13.5px;color:rgba(255,255,255,.82);
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.choices label:hover span{border-color:rgba(255,255,255,.2);color:#fff}
.choices input:checked+span{
  border-color:rgba(239,231,214,.85);
  background:rgba(239,231,214,.18);
  color:#fff;
  box-shadow:0 0 0 1px rgba(239,231,214,.5),0 6px 18px rgba(239,231,214,.25);
}
.choices input:focus-visible+span{outline:2px solid var(--cream);outline-offset:2px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:12px;color:var(--faint)}
.field input{
  height:44px;padding:0 13px;border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  color:#fff;font-size:14.5px;font-family:inherit;
}
.field input:focus{outline:none;border-color:rgba(239,231,214,.8);background:rgba(239,231,214,.09)}
.form-error{margin:14px 0 0;font-size:13px;color:#ff7a7a}
.thanks ol{margin:18px 0 0;padding-left:20px;color:var(--dim);font-size:14.5px;line-height:1.65}
.thanks li{margin-bottom:8px}

/* ─────────────────────────────  responsive  ───────────────────────── */

@media (min-height:1000px){
  /* tall viewports get the reference-exact display size */
  .headline{font-size:clamp(30px, min(5.85vw, 7.9svh), 84px)}
}

@media (max-width:760px){
  html,body{overflow-x:hidden;max-width:100%}
  .beam-a{top:58%;height:110px}
  .beam-a::after{filter:blur(38px);opacity:.55}
  .beam-a::before{height:10px;opacity:.7}
  .beam-b{top:70%;height:150px}
  .beam-b::after{filter:blur(60px);opacity:.42}
  .beam-b::before{opacity:.3}
  .beam-c{opacity:.7}
  .nav{padding:14px 14px 0}
  .navbar{height:48px;padding:0 4px}
  .nav-seg{height:48px;padding:0 15px;font-size:11px;gap:8px}
  .nav-seg span{display:none}
  .nav-cta span{display:inline;font-size:11px}
  .nav-cta .nav-long{display:none}
  .nav-cta{height:38px;margin-right:4px;padding:0 15px;gap:7px}
  .nav-menu{padding:0 18px}
  .orb{font-size:17px}
  .hero{padding:100px 14px 66px;justify-content:center}
  .eyebrow{margin-bottom:12px}
  .ticker{padding:3px 15px 3px 3px;gap:10px}
  .ticker-tag{padding:6px 13px;font-size:12px}
  .ticker-text{font-size:12px}
  .headline{margin-top:16px;font-size:clamp(26px,8.2vw,42px);letter-spacing:-.03em}
  /* phones are too narrow for the long clause — let it wrap, balanced */
  .headline span{white-space:normal}
  .sub{margin-top:12px;font-size:14.5px;max-width:46ch}
  .vsl{margin-top:16px;--vsl-ratio:16 / 9}
  /* the cap lives on the card, never on .vsl — .vsl has to stay the one element
     that swallows the leftover height, or the text rows land on half pixels */
  .vsl-frame{max-height:min(300px,54vw)}
  .cta{margin-top:20px;min-width:0;width:100%;max-width:none;height:54px;font-size:17px}
  .proof{margin-top:14px;gap:10px}
  .proof p{font-size:13px}
  .faces img{width:26px;height:26px}
  .fields{grid-template-columns:1fr}
  .modal-card{padding:26px 20px 24px}
  .modal-card h2{font-size:21px}
}

/* short phones (SE, 8, mini): the headline eats the band, so let the card keep
   the full column width and crop vertically instead of shrinking off to one side */
@media (max-width:760px) and (max-height:710px){
  .headline{font-size:clamp(23px,7.2vw,34px)}
  .vsl-frame{width:100%;height:auto;max-height:100%}
}

@media (prefers-reduced-transparency:reduce){
  .navbar,.legal-hero,.ticker,.modal-card,.menu-panel{
    -webkit-backdrop-filter:none;backdrop-filter:none;background:#0e1016;
  }
  .vsl-frame{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.14)}
  .play{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.55)}
  .modal-scrim{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(3,4,7,.92)}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms !important;animation-duration:.001ms !important}
}

/* logo mark + legal (added 2026-09-20) */

.consent{margin:14px 2px 0;font-size:11px;line-height:16px;color:var(--faint);text-align:left}
.consent a{color:var(--cream);text-decoration:underline}
.menu-legal{margin:8px 8px 2px;font-size:11px;line-height:15px;color:rgba(255,255,255,.42)}

/* legal strip pinned to the foot of the hero */
.legal{
  flex:none;
  padding:9px 20px calc(9px + env(safe-area-inset-bottom));
  text-align:center;
}
.legal-hero{
  margin:0 auto;max-width:1198px;
  border-top:1px solid var(--line);
  border-radius:16px 16px 0 0;
  background:rgba(12,12,13,.86);
  -webkit-backdrop-filter:blur(26px);
  backdrop-filter:blur(26px);
  pointer-events:auto;
}
.legal-row{
  margin:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 9px;
  font-size:11px;line-height:15px;color:var(--faint);
}
.legal-row a{color:var(--dim);text-decoration:none}
.legal-row a:hover{color:var(--ink);text-decoration:underline}
.legal-sep{opacity:.4}

@media (max-width:760px){
  .legal-hero{padding:8px 14px calc(8px + env(safe-area-inset-bottom))}
  .legal-row{font-size:9.5px;line-height:13px;gap:3px 7px}
}

/* hero subhead + body (Magnetic x Apex, 2026-09-21) */
.sub-lead{color:var(--ink);font-weight:600;font-size:clamp(16px,1.7vw,21px);max-width:none;line-height:1.4}
.hero-body{flex:none;margin:12px 0 0;max-width:46ch;font-size:clamp(13.5px,1.15vw,16px);line-height:1.55;font-weight:450;color:var(--dim)}

/* ═══════════════════════════════════════════════════════════════════════
   LONG PAGE — Magnetic × Apex (rebuilt 2026-09-21)

   Every section is a different object. Surface alternates black / panel,
   alignment alternates left / centre, and no two sections share a form:
   statement, three hairline lists, a numbered rail, a picker, a zigzag
   track, a month band, an edge-to-edge split, prose, a table, wide case
   rows, three numerals, an accordion, a close.
   Mobile first; the desktop rules only widen what is already there.
   ═══════════════════════════════════════════════════════════════════ */

.page{position:relative;z-index:10}

.wrap{width:100%;max-width:1198px;margin:0 auto;padding:0 var(--s5)}
.wrap-mid{max-width:880px}
.wrap-tight{max-width:640px}
.center{text-align:center}

.sec{position:relative;padding:var(--s11) 0}
.sec-panel{
  background:#000;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* ── shared type scale, used at three sizes so the page has a rhythm ── */

.tag{
  display:flex;align-items:center;gap:var(--s3);
  margin:0 0 var(--s4);
  font-size:var(--t-label);line-height:12px;font-weight:600;letter-spacing:.26em;
  color:var(--faint);
}
.tag::before{content:"";width:26px;height:1px;flex:none;background:rgba(255,255,255,.28)}
.tag-c{justify-content:center}
.tag-c::after{content:"";width:26px;height:1px;flex:none;background:rgba(255,255,255,.28)}

.xl,.lg,.md{
  margin:0;
  font-family:var(--display);
  font-weight:700;
  color:var(--ink);
  letter-spacing:-.034em;
  text-wrap:balance;
}
.xl{font-size:clamp(32px,8.6vw,52px);line-height:round(1.04em,1px);max-width:15ch}
.lg{font-size:clamp(28px,7.2vw,42px);line-height:round(1.08em,1px)}
.md{font-size:clamp(25px,6.2vw,34px);line-height:round(1.12em,1px);letter-spacing:-.03em}
.center .xl,.center .lg,.center .md{margin-inline:auto}

.body{margin:var(--s4) 0 0;max-width:50ch;font-size:var(--t-body);line-height:round(1.62em,1px);font-weight:450;color:var(--dim);text-wrap:pretty}
.body-c{margin-inline:auto}
.fineprint{margin:var(--s4) 0 0;font-size:var(--t-micro);line-height:16px;color:var(--faint)}

/* reveal */
.r{opacity:1;transform:none}
html.js .r{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
html.js .r.in{opacity:1;transform:none}

/* ── 1 · statement ─────────────────────────────────────────────────── */

.sec-statement{padding-top:var(--s12)}
.statement-body{margin:var(--s6) 0 0;display:grid;gap:var(--s3)}
.statement-body p{margin:0;font-size:var(--t-body);line-height:round(1.55em,1px);color:var(--dim);max-width:44ch}

.pair{margin:var(--s9) 0 0;border-top:1px solid var(--line)}
.pair-row{display:flex;gap:var(--s4);padding:var(--s6) 0;border-bottom:1px solid var(--line)}
.pair-mark{
  flex:none;display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(239,231,214,.3);
  font-family:var(--display);font-size:var(--t-body);font-weight:700;color:var(--cream);
}
.pair-row h3{margin:var(--s1) 0 0;font-family:var(--display);font-size:var(--t-lead);line-height:round(1.2em,1px);font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.pair-row p{margin:var(--s2) 0 0;font-size:var(--t-small);line-height:round(1.58em,1px);color:var(--dim);max-width:52ch}

.rule-line{
  margin:var(--s8) 0 0;padding:var(--s6) 0 0;
  border-top:1px solid var(--line);
  font-size:var(--t-body);line-height:round(1.55em,1px);color:rgba(243,236,222,.86);
}
.rule-line span{display:block;max-width:40ch}

/* ── 2 / 4 / 12 · header column + body column ──────────────────────── */



/* ── 3 · numbered rail ─────────────────────────────────────────────── */

.steprail{
  position:relative;
  margin:var(--s8) 0 0;padding:0 0 0 var(--s9);
  list-style:none;
}
.steprail::before{
  content:"";position:absolute;left:19px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.22) 12%,rgba(255,255,255,.22) 88%,rgba(255,255,255,.04));
}
.steprail li{position:relative;padding:0 0 var(--s7)}
.steprail li:last-child{padding-bottom:0}
.steprail-n{
  position:absolute;left:-52px;top:0;
  display:grid;place-items:center;
  width:39px;height:26px;
  background:var(--bg);
  font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;color:var(--faint);
  font-variant-numeric:tabular-nums;
}
.sec-panel .steprail-n{background:#08080a}
.steprail h3{margin:0;font-family:var(--display);font-size:clamp(20px,5vw,25px);line-height:round(1.15em,1px);font-weight:700;letter-spacing:-.028em;color:var(--ink)}
.steprail p{margin:var(--s2) 0 0;max-width:48ch;font-size:var(--t-small);line-height:round(1.58em,1px);color:var(--dim)}

/* ── 7 · edge-to-edge split ────────────────────────────────────────── */


/* ── 8 · prose ─────────────────────────────────────────────────────── */

.prose{margin:var(--s6) 0 0;font-size:var(--t-lead);line-height:round(1.66em,1px);color:var(--dim);text-wrap:pretty}
.prose em{font-style:normal;font-weight:600;color:rgba(243,236,222,.95)}
.prose-dim{margin-top:var(--s5);font-size:var(--t-small);color:var(--faint)}

/* ── 9 · fit table ─────────────────────────────────────────────────── */

.fit{width:100%;margin:var(--s7) 0 0;border-collapse:collapse;text-align:left}
.fit tr{border-bottom:1px solid var(--line)}
.fit tr:first-child{border-top:1px solid var(--line)}
.fit td{padding:var(--s3) 0;font-size:var(--t-body);line-height:round(1.45em,1px);color:rgba(243,236,222,.88);vertical-align:top}
.fit td:first-child{
  width:64px;padding-right:14px;
  font-size:var(--t-label);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding-top:var(--s4);
}
.fit-y{color:var(--cream)}
.fit-n{color:rgba(255,255,255,.26)}
.fit tr:has(.fit-n) td:last-child{color:var(--faint)}
.fit-gap td{padding-top:var(--s7)}

/* ── 10 · case cards: a logo, two lines, three figures ─────────────── */

.cases{margin:var(--s7) 0 0;display:grid;gap:var(--s3)}
.case{
  padding:var(--s5) var(--s5) var(--s5);
  border:1px solid var(--line);border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008));
  transition:border-color .28s ease,transform .28s cubic-bezier(.22,1,.36,1);
}
.case:hover{border-color:rgba(239,231,214,.24);transform:translateY(-2px)}
.case-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding-bottom:var(--s4);margin-bottom:var(--s4);
  border-bottom:1px solid var(--line);
}
.case-logo{
  height:22px;width:auto;max-width:150px;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.85;
}
.case-trade{
  margin:0;flex:none;
  font-size:var(--t-label);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);text-align:right;
}
.case-line{
  margin:0 0 var(--s3);
  font-size:var(--t-small);line-height:round(1.5em,1px);color:var(--dim);
}
.case-line span{
  display:block;margin-bottom:var(--s1);
  font-size:var(--t-label);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.3);
}
.figs{
  margin:var(--s5) 0 0;padding-top:var(--s4);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);
}
.figs div{min-width:0}
.figs dt{
  margin:0;
  font-family:var(--display);
  font-size:var(--t-fig);line-height:1;font-weight:700;letter-spacing:-.04em;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.figs dd{
  margin:var(--s2) 0 0;
  font-size:var(--t-label);line-height:round(1.3em,1px);letter-spacing:.04em;
  color:var(--faint);
}
.case-note{
  margin:var(--s5) 0 0;max-width:52ch;
  font-size:var(--t-micro);line-height:round(1.5em,1px);color:rgba(255,255,255,.34);
}

/* ── 11 · three numerals ───────────────────────────────────────────── */


/* ── 12 · faq ──────────────────────────────────────────────────────── */

.faq{margin:var(--s7) auto 0;max-width:780px;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}

/* ── 13 · close ────────────────────────────────────────────────────── */

.sec-final{padding:var(--s12) 0 var(--s12)}
.sec-final::before{
  content:"";position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  width:min(820px,120vw);height:400px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(239,231,214,.1),transparent 70%);
  filter:blur(64px);pointer-events:none;z-index:-1;
}
.xl-final{max-width:16ch}
.cta-final{display:inline-flex;margin:var(--s7) 0 0}

/* ── sticky apply bar ──────────────────────────────────────────────
   A row, not a pill: the capacity line carries the same scarcity the hero
   ticker states, and the button repeats the one ask. */

.sticky{
  position:fixed;left:0;right:0;
  bottom:0;z-index:60;
  padding:10px 20px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:rgba(6,7,10,.88);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  opacity:0;transform:translateY(100%);
  transition:opacity .3s ease,transform .3s cubic-bezier(.22,1,.36,1);
}
.sticky.show{opacity:1;transform:none}
.sticky-row{
  width:100%;max-width:1198px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
}
.sticky-text{font-size:var(--t-small);line-height:1.3;color:var(--dim)}
.cta-sticky{min-width:0;height:48px;padding:0 var(--s6);font-size:var(--t-body)}
@media (max-width:760px){
  .sticky-text{display:none}
  .cta-sticky{flex:1 1 auto;height:52px}
}
body.has-sticky .sec-foot{padding-bottom:var(--s12)}

/* anchors clear the fixed navbar */
html{scroll-behavior:smooth}
.page section[id]{scroll-margin-top:var(--s12)}

/* ══════════════  desktop expansion  ══════════════ */

@media (min-width:700px){
  .sec{padding:104px 0}
  .sec-statement{padding-top:120px}
  .wrap{padding:0 var(--s7)}
  .statement-body{grid-template-columns:1fr 1fr;gap:var(--s7)}
  .pair-row{gap:var(--s6);padding:var(--s7) 0}
  .rule-line{
    display:flex;align-items:center;gap:var(--s5);
    padding-top:0;border-top:0;margin-top:var(--s9);
  }
  .rule-line::before,.rule-line::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
  .rule-line span{flex:0 1 auto;max-width:40ch;text-align:center}
  .cases{grid-template-columns:repeat(3,1fr);gap:var(--s3)}
  .case{padding:var(--s6) var(--s6) var(--s6)}
  .figs dt{font-size:var(--t-fig)}
  .fit td{font-size:var(--t-body)}
  .fit td:first-child{width:86px}
}

@media (min-width:1000px){
  .cases{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);overflow:visible;margin-inline:0;padding:0}
  .case{flex:none;padding:var(--s6)}
  /* narrow sections keep the page grid; only their content is measured */
  .wrap-mid:not(.center),.wrap-tight:not(.center){max-width:1198px}
  .sec-rail .md,.sec-fit .md,.sec-prose .xl{margin-left:0}
  .fit{max-width:740px}
  .prose{max-width:58ch}
  .tl{max-width:900px}
  .sec{padding:128px 0}
  .sec-statement{padding-top:148px}
  .sec-final{padding:140px 0 124px}
  .xl{font-size:clamp(46px,4.6vw,64px)}
  .lg{font-size:clamp(36px,3.6vw,46px)}
  .md{font-size:clamp(30px,3vw,38px)}

  /* header column beside the body column */


  .steprail{padding-left:64px}
  .steprail::before{left:23px}
  .steprail-n{left:-64px;width:47px}
  .steprail li{padding-bottom:var(--s8)}

  body.has-sticky footer.rail{padding-bottom:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .r{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   DRAWN OBJECTS + BLUE ACCENT (2026-09-21)
   Blue is the only accent and it never becomes a background fill: it marks
   numbers, live state, connectors and the thing that is already built.
   Cream stays the reading colour and the button.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0 · stat bar ──────────────────────────────────────────────────── */

.statbar{border-bottom:1px solid var(--line);background:#000}
/* one hairline between cells, never a doubled or dangling edge: the grid
   gap IS the rule, drawn by the container's own background */
.statbar-in{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--line);
  border-left:1px solid var(--line);border-right:1px solid var(--line);
}
.stat{padding:var(--s5) var(--s4) var(--s5);background:#000}
.stat-n{
  margin:0;
  font-family:var(--display);
  font-size:clamp(30px,8.4vw,42px);line-height:1;font-weight:700;letter-spacing:-.04em;
  color:var(--accent);
}
.stat-n em{font-style:normal;font-size:.56em;letter-spacing:-.02em;opacity:.7}
.stat-k{margin:var(--s2) 0 0;font-size:var(--t-micro);line-height:round(1.35em,1px);letter-spacing:.02em;color:var(--faint)}

/* ── 1 · thesis funnel ─────────────────────────────────────────────── */

.funnel{margin:var(--s8) 0 0;display:grid;gap:0;border-top:1px solid var(--line)}

/* ── 3 · system rail: cream line, cream numerals ───────────────────── */

.steprail::before{
  background:linear-gradient(180deg,rgba(239,231,214,0),var(--accent-line) 12%,var(--accent-line) 88%,rgba(239,231,214,0));
}
.steprail-n{color:var(--accent)}

/* ── 6 · month gantt ──────────────────────────────────────────────── */

.tl{margin:var(--s8) 0 0}
.tl svg{display:block;width:100%;height:auto;overflow:visible}
.tl .tl-wide{display:none}

/* phone-sized month band: same idea, drawn in CSS so the labels stay legible */
.tl-small{position:relative;padding:var(--s5) 0 0}
.tl-small-cap{position:absolute;left:46%;top:0;margin:0;transform:translateX(-50%)}
.tl-small-cap span{font-size:var(--t-label);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.tl-small::after{
  content:"";position:absolute;left:46%;top:18px;bottom:34px;width:1px;
  background:repeating-linear-gradient(180deg,var(--accent) 0 3px,transparent 3px 7px);
}
.tl-small-row{position:relative;padding:0 0 var(--s4)}
.tl-small-bar{
  display:block;height:30px;border-radius:var(--r-bar);
  margin-left:var(--x);width:var(--w);
}
.tl-a{background:rgba(255,255,255,.055);border:1px solid var(--line)}
.tl-b{background:var(--accent);border:1px solid var(--accent)}
.tl-c{background:rgba(255,255,255,.02);border:1px dashed rgba(255,255,255,.12)}
.tl-small-row b{
  position:absolute;left:0;top:0;height:30px;
  display:flex;align-items:center;padding-left:12px;
  font-family:var(--display);font-size:var(--t-small);font-weight:700;letter-spacing:-.01em;color:var(--ink);
}
.tl-small-row:nth-child(3) b{left:46%;color:#0b0b0d}
.tl-small-row:nth-child(4) b{left:auto;right:0;padding:0 var(--s3) 0 0;justify-content:flex-end}
.tl-small-ghost{color:rgba(255,255,255,.3) !important}
.tl-small-row i{display:block;margin:var(--s2) 0 0;font-style:normal;font-size:var(--t-micro);line-height:round(1.35em,1px);color:var(--faint)}
.tl-small-row:nth-child(3) i{margin-left:46%}
.tl-small-foot{margin:var(--s1) 0 0;font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.tl-grid line{stroke:rgba(255,255,255,.07);stroke-width:1}
.tl-today{stroke:rgba(239,231,214,.6);stroke-width:1;stroke-dasharray:3 4}
.tl-cap{fill:var(--faint);font-family:var(--sans);font-size:var(--t-label);font-weight:700;letter-spacing:.2em}
.tl-cap-b{fill:rgba(239,231,214,.8)}
.tl-bar-a{fill:rgba(255,255,255,.055);stroke:var(--line)}
.tl-bar-b{fill:var(--accent);stroke:none}
.tl-bar-c{fill:rgba(255,255,255,.02);stroke:rgba(255,255,255,.07);stroke-dasharray:4 4}
.tl-name{fill:var(--ink);font-family:var(--display);font-size:var(--t-small);font-weight:700;letter-spacing:-.01em}
.tl-name-b{fill:#0b0b0d}
.tl-ghost{fill:rgba(255,255,255,.26)}
.tl-note{fill:var(--faint);font-family:var(--sans);font-size:var(--t-label)}
.tl-span line{stroke:rgba(255,255,255,.2);stroke-width:1}

.tl-steps{
  margin:var(--s6) 0 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:var(--s2);
}
.tl-steps li{
  padding:var(--s2) var(--s3);border-radius:var(--r-pill);
  border:1px solid var(--line);
  font-size:var(--t-label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
}
.tl-steps li:last-child{border-color:var(--accent-line);color:var(--accent)}

/* ── 7 · venn ──────────────────────────────────────────────────────── */


/* ── 8 · escalation ladder ─────────────────────────────────────────── */

.ladder{margin:var(--s7) 0 0;padding:0;list-style:none;display:grid;gap:var(--s2)}
.ladder li{
  display:flex;align-items:center;gap:var(--s3);
  margin-left:calc(var(--i) * 9px);
}
.ladder-bar{
  flex:none;height:26px;border-radius:var(--r-bar);
  width:calc(30px + var(--i) * 13px);
  background:linear-gradient(90deg,rgba(239,231,214,calc(.16 + var(--i) * .13)),rgba(239,231,214,calc(.05 + var(--i) * .08)));
  border:1px solid rgba(239,231,214,calc(.22 + var(--i) * .1));
}
.ladder b{font-size:var(--t-small);line-height:round(1.3em,1px);font-weight:500;color:rgba(243,236,222,calc(.62 + var(--i) * .055))}
.ladder li:last-child .ladder-bar{box-shadow:0 0 20px var(--accent-glow)}
.ladder li:last-child b{font-weight:600}

/* ── 9 · fit marks ─────────────────────────────────────────────────── */

.fit-y{color:var(--accent)}
.fit tr:has(.fit-y) td:last-child{color:rgba(243,236,222,.92)}

/* ── 10 · case placeholder reads as pending, not as proof ──────────── */

.case-n{color:var(--accent)}

/* ── 11 · numerals ─────────────────────────────────────────────────── */


/* ── 12 · faq ──────────────────────────────────────────────────────── */


/* ── 13 · close ────────────────────────────────────────────────────── */

.sec-final::before{
  background:radial-gradient(50% 50% at 50% 50%,rgba(239,231,214,.2),transparent 70%);
}
.cta-final{box-shadow:0 0 34px rgba(239,231,214,.34),0 8px 26px rgba(0,0,0,.6)}
.cta-final:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 14px 36px rgba(0,0,0,.7),0 0 52px rgba(239,231,214,.6)}

/* the tag rule picks up the accent */
.tag::before,.tag-c::after{background:linear-gradient(90deg,transparent,var(--accent-line))}
.tag-c::before{background:linear-gradient(90deg,transparent,var(--accent-line))}
.tag-c::after{background:linear-gradient(270deg,transparent,var(--accent-line))}

/* ══ desktop ══ */

@media (min-width:700px){
  .statbar-in{grid-template-columns:repeat(4,1fr)}
  .stat{padding:var(--s7) var(--s6) var(--s6)}
  .tl .tl-wide{display:block}
  .tl .tl-small{display:none}
  .ladder li{gap:var(--s4);margin-left:calc(var(--i) * 18px)}
  .ladder-bar{width:calc(56px + var(--i) * 26px);height:30px}
  .tl-steps li{padding:var(--s2) var(--s4);font-size:var(--t-label)}
}

@media (min-width:1000px){
  .stat-n{font-size:clamp(38px,3.6vw,46px)}
}

@media (prefers-reduced-transparency:reduce){
}

/* ═══════════════════════════════════════════════════════════════════════
   INFRASTRUCTURE REEL · FIT MARKS · CLIENT ROSTER (2026-09-21)
   ═══════════════════════════════════════════════════════════════════ */

/* ── self-advancing reel ───────────────────────────────────────────── */

.reel{
  --row:52px;
  position:relative;
  margin:var(--s8) auto 0;
  max-width:560px;
  height:calc(var(--row) * 3);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 66%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 66%,transparent 100%);
}
.reel-mark{
  position:absolute;left:8px;top:50%;margin-top:-10px;z-index:2;
  color:var(--accent);
  opacity:.9;
  pointer-events:none;
}
.reel-list{
  margin:0;padding:var(--row) 0 0;list-style:none;
  transform:translateY(calc(var(--i,0) * var(--row) * -1));
  transition:transform .62s cubic-bezier(.4,0,.15,1);
  will-change:transform;
}
.reel-list li{
  display:flex;align-items:center;justify-content:center;
  height:var(--row);
  margin:0 var(--s9);
  border:1px solid transparent;border-radius:var(--r-inner);
  font-family:var(--display);
  font-size:var(--t-lead);line-height:round(1.2em,1px);font-weight:600;letter-spacing:-.02em;
  color:rgba(172,166,156,.4);
  text-align:center;
  transition:color .42s ease,border-color .42s ease,background .42s ease;
}
.reel-list li.is-on{
  color:var(--ink);
  border-color:var(--accent-line);
  background:rgba(239,231,214,.08);
}

/* ── fit: green ticks, red crosses, the nos struck out ─────────────── */

.fit td:first-child{width:44px;padding-top:var(--s4);padding-right:12px;letter-spacing:normal}
.fit-m{line-height:0}
.fit-m svg{display:block;stroke:currentColor}
.is-yes .fit-m{color:var(--yes)}
.is-no .fit-m{color:var(--no)}
.is-yes td:last-child{color:rgba(243,236,222,.92)}
.is-no td:last-child{color:var(--faint)}
.is-no s{
  text-decoration:line-through;
  text-decoration-color:rgba(196,119,110,.72);
  text-decoration-thickness:1.5px;
}

/* ── client roster ─────────────────────────────────────────────────── */

.logos{
  margin:var(--s7) 0 0;padding:var(--s6) 0 0;list-style:none;
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s6) var(--s4);align-items:center;
}
.logos li{display:grid;place-items:center;min-width:0}
.logos img{
  max-width:100%;
  height:26px;width:auto;object-fit:contain;
  /* every mark is normalised to one cream weight so the row reads as a set
     rather than six competing brand palettes */
  filter:brightness(0) invert(1);
  opacity:.5;
  transition:opacity .24s ease;
}
.logos li:hover img{opacity:.92}

@media (min-width:700px){
  .reel{--row:60px;max-width:640px}
  .reel-list li{font-size:var(--t-lead);margin:0 var(--s10)}
  .reel-mark{left:20px}
  .logos{grid-template-columns:repeat(6,1fr);gap:var(--s5);padding-top:var(--s7)}
  .logos img{height:30px}
  .fit td:first-child{width:52px}
}

@media (prefers-reduced-motion:reduce){
  .reel-list{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE RHYTHM (2026-09-22)
   On a phone every section had collapsed to the same silhouette — a single
   column of kicker, headline, body, stack — so the page read as one long
   scroll. These give the phone its own variety: a dense two-up grid, a
   swipe rail, and a padding rhythm that is not a metronome.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width:999px){

  /* rhythm: dense sections come faster, the three "moments" keep their air */
  .sec{padding:var(--s10) 0}
  .sec-statement,.sec-ahead,.sec-final{padding:var(--s11) 0}


  /* the case cards become a swipe rail: one card tall, not three */
  .cases{
    display:flex;gap:var(--s3);
    margin-inline:calc(var(--s5) * -1);
    padding:0 var(--s5) var(--s1);
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .cases::-webkit-scrollbar{display:none}
  .case{flex:0 0 84%;scroll-snap-align:center}
  .case:hover{transform:none}
  /* the clipped peek card reads as a hint, not as a broken card */
  .sec-cases .wrap{position:relative}
  .sec-cases .wrap::after{
    content:"";position:absolute;right:0;bottom:0;
    width:var(--s5);height:100%;
    background:linear-gradient(90deg,transparent,var(--bg));
    pointer-events:none;
  }
  .case-note::before{
    content:"Swipe for more";
    display:block;margin-bottom:var(--s2);
    font-size:var(--t-label);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:rgba(255,255,255,.22);
  }

  /* the rail was the third 1,000px column in a row */
  .steprail li{padding-bottom:var(--s6)}
  .steprail p{margin-top:var(--s1)}

  /* the thesis pair rows carried desktop air on a phone */
  .pair-row{padding:var(--s5) 0;gap:var(--s4)}
  .pair-mark{width:32px;height:32px}
  .logos{gap:var(--s6) var(--s4)}

@media (max-width:699px){
  /* 15 short names read better two-up than as one 1,100px column */
}
}

/* ═══════════════════════════════════════════════════════════════════════
   FUNNEL · FAQ · MOTION (2026-09-22)
   Motion tiers follow the clipflow-clone UX system: 90/140/200/300ms,
   standard easing in, exit easing out, nothing bounces. Movement that does
   not explain a relationship does not ship.
   ═══════════════════════════════════════════════════════════════════ */

/* ── thesis funnel: the taper is the argument ──────────────────────── */

.funnel{margin:var(--s8) 0 0;max-width:720px}
.funnel svg{display:block;width:100%;height:auto}
.fn-a,.fn-b,.fn-c{stroke:var(--line);stroke-width:1}
.fn-a{fill:rgba(255,255,255,.028)}
.fn-b{fill:rgba(255,255,255,.05)}
.fn-c{fill:var(--accent-fill);stroke:var(--accent-line)}
.fn-l{
  fill:rgba(243,236,222,.62);
  font-family:var(--sans);font-size:var(--t-label);font-weight:700;letter-spacing:.2em;
}
.fn-l-on{fill:var(--ink)}
.fn-n{fill:var(--faint);font-family:var(--sans);font-size:var(--t-micro)}
.fn-rule line{stroke:var(--line);stroke-width:1}
.fn-n-on{fill:rgba(243,236,222,.8)}

/* ── infrastructure: the reel sits under its headline, not a screen away ─ */

.sec-pick .body{margin-bottom:0}
.reel{margin-top:var(--s7)}

/* ── faq ───────────────────────────────────────────────────────────── */

.faq{margin:var(--s8) auto 0;max-width:820px;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa-q{
  position:relative;
  display:flex;align-items:center;gap:var(--s4);
  width:100%;padding:var(--s5) var(--s4) var(--s5) var(--s3);
  text-align:left;cursor:pointer;
  border-radius:var(--r-inner);
  transition:background var(--m-instant) var(--e-std);
}
.qa-q:hover{background:rgba(255,255,255,.028)}
.qa-q:focus-visible{outline:1px solid var(--accent);outline-offset:-2px}
.qa-i{
  flex:none;
  font-size:var(--t-label);font-weight:700;letter-spacing:.16em;
  color:rgba(255,255,255,.26);
  font-variant-numeric:tabular-nums;
  transition:color var(--m-fast) var(--e-std);
}
.qa-t{
  flex:1 1 auto;
  font-family:var(--display);
  font-size:var(--t-lead);line-height:round(1.34em,1px);font-weight:600;letter-spacing:-.018em;
  color:rgba(243,236,222,.88);
  transition:color var(--m-fast) var(--e-std);
}
.qa-x{
  position:relative;flex:none;width:18px;height:18px;
  transition:transform var(--m-base) var(--e-std);
}
.qa-x::before,.qa-x::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--dim);
  transition:background var(--m-fast) var(--e-std);
}
.qa-x::before{width:14px;height:1.5px;margin:-.75px 0 0 -7px}
.qa-x::after{width:1.5px;height:14px;margin:-7px 0 0 -.75px}

.qa.is-open .qa-q{background:rgba(255,255,255,.035)}
.qa.is-open .qa-i{color:var(--accent)}
.qa.is-open .qa-t{color:var(--ink)}
.qa.is-open .qa-x{transform:rotate(135deg)}
.qa.is-open .qa-x::before,.qa.is-open .qa-x::after{background:var(--accent)}

/* 0fr → 1fr is the one height animation that works without measuring */
.qa-p{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--m-base) var(--e-exit);
}
.qa.is-open .qa-p{
  grid-template-rows:1fr;
  transition-timing-function:var(--e-std);
}
.qa-p > div{overflow:hidden}
.qa-p p{
  margin:0;padding:0 var(--s8) var(--s5) calc(var(--s3) + var(--s4) + 26px);
  font-size:var(--t-small);line-height:round(1.66em,1px);color:var(--dim);
  opacity:0;transform:translateY(-4px);
  transition:opacity var(--m-fast) var(--e-std),transform var(--m-fast) var(--e-std);
}
.qa.is-open .qa-p p{opacity:1;transform:none;transition-delay:60ms}

/* ── one motion vocabulary for everything that already moved ───────── */

.card,.case,.logos img,.chips li,.rows li,.pick,.stat{
  transition-duration:var(--m-fast);
  transition-timing-function:var(--e-std);
}

@media (min-width:700px){
  .faq{margin-top:var(--s9)}
  .qa-q{padding:var(--s6) var(--s5) var(--s6) var(--s4)}
  .qa-t{font-size:var(--t-h3)}
  .qa-p p{padding-left:calc(var(--s4) + var(--s4) + 30px);font-size:var(--t-body)}
  .funnel{margin-top:var(--s9)}
}

@media (prefers-reduced-motion:reduce){
  .qa-p,.qa-x,.qa-p p{transition:none}
}


/* ═══════════════════════════════════════════════════════════════════════
   CLIPCUT STRUCTURE (2026-09-22)
   The page now runs in the reference's order: hero (learn / apply side by
   side) → roster + counts → thesis → what we build → the machine →
   case studies → fit → questions → apply → terms. Every block that ends a
   beat repeats the same ask, so the button is never more than a screen away.
   ═══════════════════════════════════════════════════════════════════════ */

.skip{
  position:absolute;left:-9999px;top:0;z-index:90;
  padding:10px 16px;border-radius:0 0 var(--r-bar) 0;
  background:var(--cream);color:#0a0a0a;font-size:var(--t-small);font-weight:600;
}
.skip:focus{left:0}

/* ── hero: two numbered columns ──────────────────────────────────── */

.hero-row{
  flex:1 1 auto;min-height:0;
  width:100%;max-width:1198px;margin:round(min(2.2svh,28px),1px) auto 0;
  display:flex;align-items:stretch;gap:var(--s7);
}
.hero-col{display:flex;flex-direction:column;min-width:0;min-height:0}
.hero-col-vsl{flex:1 1 auto}
.hero-col-apply{flex:0 0 320px}
.col-head{
  flex:none;margin:0 0 var(--s3);
  display:flex;align-items:center;gap:var(--s2);
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);text-align:left;
}
.col-head b{color:var(--cream);font-weight:700}
.hero-row .vsl{margin:0}

.apply-card{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--s6) var(--s5);
  border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--glass);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  text-align:left;
}
.apply-steps{list-style:none;margin:0;padding:0;counter-reset:ap}
.apply-steps li{
  position:relative;padding:0 0 var(--s4) var(--s7);counter-increment:ap;
}
.apply-steps li:last-child{padding-bottom:0}
.apply-steps li::before{
  content:counter(ap);position:absolute;left:0;top:0;
  width:22px;height:22px;border-radius:999px;
  display:grid;place-items:center;
  border:1px solid var(--accent-line);
  font-size:11px;font-weight:700;color:var(--cream);
}
.apply-steps b{display:block;font-family:var(--display);font-size:var(--t-small);font-weight:700;color:var(--ink)}
.apply-steps span{display:block;margin-top:2px;font-size:var(--t-micro);line-height:1.45;color:var(--dim)}
.apply-note{margin:var(--s3) 0 0;font-size:11px;line-height:1.4;color:var(--faint);text-align:center}

@media (max-width:999px){
  .hero{height:auto;max-height:none}
  .hero-row{flex-direction:column;gap:var(--s6)}
  .hero-col-apply{flex:none}
  .hero-col-vsl .vsl{flex:none;aspect-ratio:var(--vsl-ratio)}
}

/* ── proof strip: roster marquee over the counts ─────────────────── */

.sec-proofstrip{position:relative;z-index:10;border-top:1px solid var(--line)}
.marquee{
  overflow:hidden;padding:var(--s7) 0;
  border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{
  display:flex;align-items:center;gap:var(--s12);width:max-content;
  animation:roster 46s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.roster-item{flex:none;display:block}
.marquee-track img{
  height:26px;width:auto;display:block;
  filter:grayscale(1) brightness(1.7);opacity:.66;
}
@keyframes roster{to{transform:translateX(-33.333%)}}
@media (min-width:760px){.marquee-track img{height:32px}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* the counts sit inside the strip, so the roster and the numbers read as
   one proof block instead of two stacked bars */
.sec-proofstrip .statbar{border-bottom:1px solid var(--line);border-top:0}

/* ── the repeated ask ────────────────────────────────────────────── */

.cta-block{margin:var(--s10) 0 0;display:flex;justify-content:center}
.sec-rail .cta-block,.sec-ahead .cta-block,.sec-prose .cta-block{margin-top:var(--s9)}

/* ── terms ───────────────────────────────────────────────────────── */

.sec-terms{padding:var(--s10) 0 var(--s9);border-top:1px solid var(--line)}
.disclaimer{margin:0 0 var(--s4);font-size:var(--t-micro);line-height:round(1.6em,1px);color:var(--faint)}
.disclaimer:last-child{margin-bottom:0}
.disclaimer b{color:var(--dim);font-weight:600}

/* ═══════════════════════════════════════════════════════════════════════
   SIX BEATS (2026-09-22)
   hero → roster → everything we do → case studies → fit check → FAQ → foot.
   Every beat ends with the same button. Nothing else on the page.
   ═══════════════════════════════════════════════════════════════════════ */

.sub-free{
  flex:none;margin:round(min(.9svh,10px),1px) 0 0;
  font-size:clamp(13px,1.15vw,16px);line-height:1.45;font-weight:450;
  color:var(--faint);
}

/* the shoot-day step is the one that costs us, so it reads loudest */
.steprail li.is-featured h3{color:#fff}
.steprail li.is-featured .steprail-n{
  color:#0a0a0a;background:var(--cream);border-color:var(--cream);
}

/* ── case studies ────────────────────────────────────────────────── */

.sec-cases .md{margin-bottom:var(--s10)}
.case-row{
  display:grid;grid-template-columns:1fr;gap:var(--s7);
  padding:var(--s9) 0;border-top:1px solid var(--line);
  align-items:center;
}
.case-who{
  margin:0 0 var(--s3);font-size:var(--t-label);letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);
}
.case-quote{
  margin:0;font-family:var(--display);
  font-size:clamp(23px,5.4vw,31px);line-height:round(1.14em,1px);
  font-weight:700;letter-spacing:-.03em;color:var(--ink);
}
.case-row p:not(.case-who){
  margin:var(--s4) 0 0;max-width:52ch;
  font-size:var(--t-small);line-height:round(1.6em,1px);color:var(--dim);
}

.shot-frame{
  border:1px solid var(--line);border-radius:var(--r-inner);
  background:#0b0b0d;overflow:hidden;
}
.shot-bar{
  padding:9px var(--s4);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.03);
  font-size:11px;letter-spacing:.01em;color:var(--faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.shot-logo{
  aspect-ratio:16 / 10;display:grid;place-items:center;padding:var(--s7);
}
/* every mark normalises to one optical height, so a 32px square logo does
   not sit next to a 150px wordmark */
.shot-logo img{height:44px;width:auto;max-width:72%;object-fit:contain;opacity:.9}
.shot-logo-self span{
  font-family:var(--display);font-size:21px;font-weight:700;
  letter-spacing:-.03em;color:var(--ink);
}

.case-grid{
  display:grid;grid-template-columns:1fr;gap:var(--s7);
  padding:var(--s9) 0 0;border-top:1px solid var(--line);
}
.case-body h3{
  margin:var(--s5) 0 0;font-family:var(--display);font-size:var(--t-h3);
  line-height:round(1.18em,1px);font-weight:700;letter-spacing:-.028em;color:var(--ink);
}
.case-body p{margin:var(--s2) 0 0;font-size:var(--t-small);line-height:round(1.58em,1px);color:var(--dim)}
.case-note{margin:var(--s8) 0 0;font-size:var(--t-micro);line-height:1.6;color:var(--faint)}

@media (min-width:860px){
  .case-row{grid-template-columns:1.1fr .9fr;gap:var(--s11)}
  /* the media card is a card, not a wall: cap it so the row does not turn
     into a cavern next to four lines of copy */
  .case-media{width:100%;max-width:420px;margin-left:auto}
  .case-flip .case-media{margin:0 auto 0 0}
  .case-flip .case-copy{order:2}
  .case-grid{grid-template-columns:repeat(3,1fr);gap:var(--s8)}
}

/* ── fit check ───────────────────────────────────────────────────── */

.who-list{
  margin:var(--s8) 0 0;padding:0;list-style:none;
  border-top:1px solid var(--line);
}
.who-list li{
  position:relative;padding:var(--s5) 0 var(--s5) var(--s8);
  border-bottom:1px solid var(--line);
  font-size:var(--t-lead);line-height:round(1.45em,1px);color:var(--ink);
}
.who-list li::before{
  content:"";position:absolute;left:var(--s3);top:calc(var(--s5) + .55em);
  width:7px;height:7px;border-radius:999px;background:var(--cream);
}
.who-close{margin:var(--s7) 0 0;font-size:var(--t-body);line-height:1.6;color:var(--dim);text-align:center}

/* ── foot ────────────────────────────────────────────────────────── */

.sec-foot{padding:var(--s11) 0 var(--s12);border-top:1px solid var(--line)}
.sec-foot .legal-row{
  margin:var(--s9) 0 0;padding-top:var(--s6);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  font-size:var(--t-micro);color:var(--faint);
}
.legal-brand{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:var(--t-small);color:var(--ink);margin-right:var(--s2);
}

/* ── client logo wall + uniform logo treatment (2026-09-22, Andrew) ── */
.marquee-track img{filter:brightness(0) invert(1);opacity:.5}
.sec-clients .logo-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;max-width:820px;margin:36px auto 0}
.sec-clients .logo-cell{display:grid;place-items:center;background:#000;padding:38px 22px;min-height:128px}
.sec-clients .logo-cell img{max-width:78%;max-height:44px;width:auto;height:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.6;transition:opacity .2s ease}
.sec-clients .logo-cell:hover img{opacity:1}
.apply-card-simple{display:flex;flex-direction:column;align-items:stretch;gap:14px;justify-content:center}
.cta-lg{height:64px;font-size:19px}
@media (max-width:600px){
  .sec-clients .logo-wall{grid-template-columns:repeat(2,1fr);max-width:440px}
  .sec-clients .logo-cell{padding:28px 16px;min-height:104px}
  .sec-clients .logo-cell img{max-height:34px;max-width:82%}
}

/* ── hard overflow containment (2026-09-22, kill the side-scroll for good) ── */
html,body{overflow-x:clip;max-width:100vw}
*{min-width:0}
.hero-row{max-width:100%}
@media (max-width:760px){
  .hero-col,.hero-col-apply,.hero-col-vsl{flex:0 0 auto!important;width:100%;max-width:100%}
  .vsl,.vsl-frame{max-width:100%}
  .nav{padding-left:14px;padding-right:14px}
}

/* ═══════════════════════════════════════════════════════════════════════
   DESKTOP LAYOUT (2026-09-23)
   Two defects on a wide screen: the hero row lost its width cap to the
   overflow fix above (`.hero-row{max-width:100%}` overrode 1198px), so the
   apply card ran off the right edge; and the service rail sat in a narrow
   left column with half the screen empty beside it.
   ═══════════════════════════════════════════════════════════════════════ */

/* keep the side-scroll fix AND the cap: whichever is smaller wins */
.hero-row{max-width:min(1198px,100%)}

@media (min-width:1000px){
  /* the card hugs its content and centres against the video instead of
     stretching into a 600px empty box */
  /* #2 keeps its label level with #1; only the card floats to the middle */
  .hero-col-apply{flex:0 0 340px}
  .apply-card{flex:0 0 auto;margin-block:auto}

  /* service: header column, rail column, ask across the bottom */
  .sec-rail .wrap-mid{
    max-width:1180px;
    display:grid;
    grid-template-columns:minmax(280px,360px) 1fr;
    /* rows 1-3 hug the header; row 4 is the slack the tall rail creates, so
       the three header lines stay stacked together instead of spreading */
    grid-template-rows:auto auto auto 1fr;
    column-gap:var(--s12);
    align-items:start;
  }
  .sec-rail .tag{grid-column:1;grid-row:1;margin-top:6px}
  .sec-rail .md{grid-column:1;grid-row:2;margin-top:var(--s4)}
  .sec-rail .body-left{grid-column:1;grid-row:3;max-width:34ch}
  .sec-rail .steprail{grid-column:2;grid-row:1 / span 4;margin:0}
  .sec-rail .cta-block{grid-column:1 / -1;grid-row:5;margin-top:var(--s10)}
  .sec-rail .steprail p{max-width:58ch}
  .sec-rail .steprail li{padding-bottom:var(--s8)}
}

/* ═══════════════════════════════════════════════════════════════════════
   UI PASS (2026-09-23) — standard VSL order: offer → video → the ask
   directly under it → proof. The two-column hero put a lone button in an
   empty card that the button overflowed; the video is the page, so it
   centres and the CTA sits where the eye lands when the play button ends.
   ═══════════════════════════════════════════════════════════════════════ */

.sub-lead span{display:block;margin-top:4px;font-weight:450;font-size:.84em;color:var(--dim)}
.hero .vsl{margin:round(min(2.6svh,30px),1px) 0 0}
.cta-hero{margin-top:round(min(2.6svh,28px),1px);min-width:360px;height:60px}
.hero .proof{margin-top:round(min(1.8svh,18px),1px)}

/* proof beat sits directly under the hero */
.sec-clients{padding-top:var(--s11)}
@media (min-width:1000px){.sec-clients{padding:96px 0 112px}}
.logo-lockup{display:inline-flex;align-items:center;gap:10px}
.sec-clients .logo-lockup img{height:34px;max-height:none;width:auto}
.logo-lockup span{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:.04em;color:#fff;opacity:.6;white-space:nowrap}
.sec-clients .logo-cell:hover .logo-lockup span{opacity:1}
.sec-clients .logo-cell img{opacity:.72}

/* readable secondary copy: 14px #aca69c on black was too small and too dim */
.steprail p{font-size:15.5px;color:#bdb7ac}
.body{color:#bdb7ac}
.qa-i{color:var(--dim)}

/* fit list: a centred column under a centred heading, not a full-bleed table */
.who-narrow{max-width:720px;margin-left:auto;margin-right:auto}
.who-close{max-width:720px;margin-left:auto;margin-right:auto}

/* sticky bar is a phone affordance; desktop already has the nav button */
@media (min-width:761px){.sticky{display:none}}

@media (max-width:760px){
  .cta-hero{min-width:0;width:100%;height:58px;margin-top:16px}
  .hero .proof{flex-wrap:wrap;justify-content:center;text-align:center}
  .sub-lead span{font-size:.9em}
  .logo-lockup span{font-size:15px}
  .sec-clients .logo-lockup img{height:26px}
}
@media (max-width:999px){
  .hero .vsl{flex:none;width:100%;max-width:768px}
  .hero .vsl-frame{width:100%;height:auto;max-height:none}
}
/* the card's 80px drop shadow sits on z-index 1 and was greying the button under it */
.cta-hero,.hero .proof{position:relative;z-index:2}
@media (max-width:760px){.sec-clients{padding-top:var(--s6)}}
.steprail p{text-wrap:pretty}

/* ── scroll cue: phones only, bottom centre of the first screen ── */
.scroll-cue{display:none}
@media (max-width:760px){
  .scroll-cue{
    position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));z-index:55;
    display:grid;place-items:center;width:38px;height:38px;margin-left:-19px;
    border-radius:999px;border:1px solid var(--line);
    background:rgba(14,14,15,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    color:var(--cream);
    animation:cue-bob 1.8s cubic-bezier(.45,0,.55,1) infinite;
    transition:opacity .25s ease,visibility .25s;
  }
  .scroll-cue.gone{opacity:0;visibility:hidden;pointer-events:none}
}
@keyframes cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.scroll-cue{animation:none}}