/* ==========================================================================
   ClipPlayMedia — design system
   Concept: the site is a film, not a page. It cuts, it doesn't dissolve.

   Type    — Anton (title cards) · Instrument Sans (text) · Space Mono (slates)
   Ground  — projector black #0e0c0b (warm, never #000) on warm bone #ece7df
   Accent  — salmon #f0523d, once per screen
   Motion  — transform + opacity only. Nothing else animates. Ever.
   ========================================================================== */

:root{
  /* core */
  --ink:#0e0c0b;
  --ink-2:#161211;
  --ink-3:#1e1917;
  --bone:#ece7df;
  --bone-2:#f4f0e8;
  --salmon:#e8392b;
  --salmon-deep:#b8291d;

  /* on dark */
  --fg:var(--bone);
  --dim:rgba(236,231,223,.6);
  --faint:rgba(236,231,223,.34);
  --hairline:rgba(236,231,223,.14);
  --hairline-strong:rgba(236,231,223,.26);

  /* on light */
  --ink-dim:rgba(14,12,11,.62);
  --ink-hairline:rgba(14,12,11,.14);

  /* type */
  --f-display:'Anton','Anton alt','Anton alt2',impact,sans-serif;
  --f-text:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;
  --f-mono:'Space Mono',ui-monospace,monospace;

  /* fluid scale */
  --step--1:clamp(.8rem,.77rem + .15vw,.9rem);
  --step-0:clamp(1rem,.95rem + .25vw,1.15rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.5rem);
  --step-2:clamp(1.6rem,1.35rem + 1.2vw,2.4rem);
  --step-3:clamp(2.2rem,1.7rem + 2.5vw,3.8rem);
  --step-4:clamp(3rem,2rem + 5vw,6.2rem);
  --step-5:clamp(3.8rem,2.4rem + 7.5vw,8.5rem);

  /* rhythm */
  --gutter:clamp(1.25rem,4vw,4rem);
  --sec-y:clamp(4.5rem,9vw,8.5rem);
  --maxw:88rem;
  --radius:14px;
  --radius-lg:22px;

  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.45,0,.15,1);
  --dur:.7s;

  /* glass */
  --glass-dark:rgba(14,12,11,.44);
  --glass-light:rgba(236,231,223,.55);

  /* legacy tokens — older saved drafts still resolve */
  --black:#0e0c0b;--white:#ece7df;--accent:#fb2e21;
  --lightblue:#79b8e8;--blue1:#2e7bc9;--blue2:#4b96dd;
  --slate:#202931;--maroon:#40140f;
}


/* ---------------------------------------------------------------- fonts */
/* Anton loads late; its default stand-ins are far wider (sans-serif +32%,
   Impact +6%), which clipped headlines on first paint. size-adjust squeezes
   the stand-in to Anton's measured width so nothing reflows or gets cut. */
@font-face{
  font-family:'Anton alt';
  src:local('Impact'),local('Haettenschweiler');
  size-adjust:94.7%;
  ascent-override:100%;descent-override:22%;line-gap-override:0%;
}
@font-face{
  font-family:'Anton alt2';
  src:local('Arial Bold'),local('Arial'),local('Helvetica');
  size-adjust:75.5%;
  ascent-override:132%;descent-override:29%;line-gap-override:0%;
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:6rem}
@media (prefers-reduced-motion:no-preference){
  html:has(:target){scroll-behavior:smooth}
}
body{
  background:var(--ink);color:var(--fg);
  font-family:var(--f-text);font-size:var(--step-0);font-weight:400;
  line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
video{display:block}
::selection{background:var(--salmon);color:var(--ink)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- layers */
/* Film grain — matched to the footage so flat surfaces sit in the same
   emulsion as the images. Fixed, non-interactive, always on top of paint. */
.grain{
  position:fixed;inset:-40px;z-index:2000;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.82'%20numOctaves='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='220'%20height='220'%20filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The cut — a hard edit between acts. site.js flashes this for ~5 frames
   when the page crosses a [data-cut] boundary. */
.cutflash{
  position:fixed;inset:0;z-index:2500;pointer-events:none;background:#000;
  opacity:0;
}
.cutflash.hit{transition:none;opacity:1}
.cutflash.out{transition:opacity .18s ease-out;opacity:0}

/* ---------------------------------------------------------------- shell */
.shell{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
section{position:relative}

/* ---------------------------------------------------------------- type */
.display{
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  line-height:.92;letter-spacing:.005em;
}
/* the Anton voice is italic, everywhere it speaks */
.display,.topbar .brand,.f-word,.wrow .name,.frow h3,.casehead h2,.case h2,
.kchip .n,.giantnum,.stat .n,.gstat .n,.kpi .n,.c2end,.metricbox .mtitle,
.t2node h4,.trow .yr,.beat h3,.pcol .phead h2,.oband .otrack,.bigword,
.testi .name,.meters .mv,.qcard::before{font-style:italic}
.d-xl{font-size:min(var(--step-5),10.4vw)}
.d-lg{font-size:min(var(--step-4),8.4vw)}
.d-md{font-size:min(var(--step-3),6.8vw)}
.d-sm{font-size:min(var(--step-2),5vw)}
.accent{color:var(--salmon)}

/* Slate — the mono metadata layer. Location, year, format. Everywhere. */
.slate{
  font-family:var(--f-mono);font-size:var(--step--1);font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
}
.slate .dot{color:var(--salmon)}
.eyebrow{
  font-family:var(--f-mono);font-size:var(--step--1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--salmon);margin-bottom:1.4rem;display:block;
}
.lede{font-size:var(--step-1);line-height:1.6;color:var(--fg);max-width:46ch}
.body-dim{color:var(--dim)}

/* Underlined sentence link — the low-pressure CTA */
.tlink{
  display:inline-block;font-weight:600;border-bottom:1.5px solid var(--salmon);
  padding-bottom:.15em;transition:opacity .25s var(--ease);
}
.tlink:hover{opacity:.6}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  background:var(--salmon);color:var(--ink);
  font-family:var(--f-text);font-weight:700;font-size:var(--step-0);
  padding:.95em 1.9em;border-radius:999px;border:0;cursor:pointer;
  transition:transform .3s var(--ease),background .3s var(--ease);
  will-change:transform;
}
.btn:hover{background:var(--bone);transform:translateY(-2px)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.6em;
  background:transparent;color:var(--fg);
  font-weight:600;font-size:var(--step-0);
  padding:.9em 1.8em;border-radius:999px;border:1.5px solid var(--hairline-strong);
  cursor:pointer;transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.btn-ghost:hover{border-color:var(--fg);transform:translateY(-2px)}

/* =====================================================================
   THE PILL — detached liquid-glass nav (ported from the Twin Fins build)

   Two states. At the top of the page the bar is transparent — everything
   in it is bone with a tight dark halo doing the scrim's job. Once the
   page scrolls it detaches into a rounded glass pill:

   1. The fill transmits (~a third ink) and reads through heavy blur +
      saturation, like a droplet over the page.
   2. Its edge is a lens — 1px inner highlight up top, a darker 1px lip
      below. That's where a real bevel catches and loses light.
   3. A displacement-map lens (#cpm-lens) bends the page along the rim
      before the blur frosts it — actual refraction, Chromium only;
      Safari falls back to the plain frost via -webkit-backdrop-filter.
   4. It samples what's beneath it (site.js, luminance) and flips between
      smoked and bone glass so it stays legible over anything.
   ===================================================================== */
.navwrap{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;justify-content:center;
  padding:clamp(.7rem,1.5vw,1.1rem) var(--gutter);
  pointer-events:none;
  transform:translateY(-130%);opacity:0;
  transition:transform .9s var(--ease-soft),opacity .9s var(--ease-soft);
}
.navwrap.on{transform:none;opacity:1}
/* gradient shadow doing the scrim's job before the glass pill exists */
.navwrap::before{
  content:"";position:absolute;left:0;right:0;top:0;height:13rem;z-index:-1;
  background:linear-gradient(to bottom,rgba(10,8,7,.96),rgba(10,8,7,.6) 45%,rgba(10,8,7,.2) 75%,transparent);
  opacity:1;transition:opacity .7s var(--ease-soft);pointer-events:none;
}
.navwrap.stuck::before{opacity:0}
.lensdefs{position:absolute;width:0;height:0;overflow:hidden}

.topbar{
  pointer-events:auto;position:relative;isolation:isolate;
  width:min(100%,78rem);
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:.5rem .55rem .5rem 1.25rem;
  border-radius:999px;
  color:var(--bone);
  text-shadow:0 1px 3px rgba(0,0,0,.65),0 2px 18px rgba(0,0,0,.5);
  transition:background .7s var(--ease-soft),color .7s var(--ease-soft),
    box-shadow .7s var(--ease-soft),text-shadow .7s var(--ease-soft),
    width .7s var(--ease-soft);
}
.topbar>*{position:relative;z-index:1}

/* specular sheen — only visible once the pill exists */
.topbar::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .6s var(--ease);
  background:linear-gradient(115deg,transparent 4%,rgba(255,255,255,.24) 14%,rgba(255,255,255,.04) 26%,transparent 40%);
}
.navwrap.stuck .topbar::after{opacity:1}

/* stuck: smoked glass (default, over dark) — the pill narrows as it forms */
.navwrap.stuck .topbar{
  width:min(100%,66rem);
  text-shadow:none;
  background:linear-gradient(160deg,rgba(14,12,11,.5) 0%,rgba(14,12,11,.34) 45%,rgba(14,12,11,.46) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(1.8) brightness(1.05);
  backdrop-filter:url(#cpm-lens) blur(5px) saturate(1.8) brightness(1.05);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.16),
    inset 0 -1px 0 0 rgba(0,0,0,.28),
    0 14px 38px -20px rgba(0,0,0,.7);
}
/* stuck over a light surface: bone glass, ink type */
.navwrap.stuck .topbar.light{
  color:var(--ink);
  background:linear-gradient(160deg,rgba(236,231,223,.5) 0%,rgba(236,231,223,.34) 45%,rgba(236,231,223,.46) 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.36),
    inset 0 -1px 0 0 rgba(14,12,11,.1),
    0 14px 38px -20px rgba(14,12,11,.45);
}

/* mark + wordmark lockup */
.topbar .brand{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.05rem,2vw,1.4rem);letter-spacing:.02em;line-height:1;
  text-transform:uppercase;white-space:nowrap;
}
.topbar .brand b{color:var(--salmon);font-weight:400}
.topbar .brand .btext{white-space:nowrap;letter-spacing:.02em}
.topbar .brand img{height:clamp(30px,3.2vw,42px);width:auto;transition:filter .7s var(--ease-soft);filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.navwrap.stuck .topbar.light .brand img{filter:invert(1) brightness(.25)}

.topbar .links{display:flex;gap:clamp(.9rem,2.2vw,2rem);align-items:center}
.topbar .links a{
  font-weight:600;font-size:var(--step--1);letter-spacing:.05em;text-transform:uppercase;
  opacity:.85;transition:opacity .25s;position:relative;padding:.3em 0;
}
.topbar .links a:hover{opacity:1}
.topbar .links a.active{opacity:1}
.topbar .links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--salmon);
}
.topbar .cta{
  background:var(--salmon);color:var(--ink);font-weight:700;font-size:var(--step--1);
  padding:.75em 1.5em;border-radius:999px;transition:background .3s var(--ease);
  white-space:nowrap;text-shadow:none;
}
.topbar .cta:hover{background:var(--bone)}
.navwrap.stuck .topbar.light .cta:hover{background:var(--ink);color:var(--bone)}

@media(max-width:900px){.topbar .links{display:none}}

/* ---------------------------------------------------------------- reveal */
[data-anim]{opacity:0;transform:translateY(26px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);transition-delay:var(--d,0s);will-change:transform,opacity}
[data-anim].in{opacity:1;transform:none}
[data-anim="fade"]{transform:none}
[data-anim="left"]{transform:translateX(-32px)}
[data-anim="right"]{transform:translateX(32px)}
[data-anim="left"].in,[data-anim="right"].in{transform:none}

/* split-text word masks (site.js wraps words) */
.wmask{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .2em .1em .04em;margin:0 -.2em -.1em -.04em}
.wmask .w{display:inline-block;transform:translateY(120%);transition:transform .8s var(--ease);transition-delay:var(--wd,0s);will-change:transform}
.split.in .wmask .w{transform:translateY(0)}
.split.done .wmask{overflow:visible}

@media (prefers-reduced-motion:reduce){
  [data-anim],[data-anim].in{opacity:1;transform:none;transition:none}
  .wmask .w{transform:none;transition:none}
  .cutflash{display:none}
}

/* ---------------------------------------------------------------- hero */
.filmhero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.filmhero .media{position:absolute;inset:0;z-index:0}
.filmhero .media video,.filmhero .media img{width:100%;height:100%;object-fit:cover}
.filmhero .scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(to top,rgba(14,12,11,.92) 0%,rgba(14,12,11,.35) 38%,rgba(14,12,11,.18) 60%,rgba(14,12,11,.42) 100%)}
.filmhero .inner{position:relative;z-index:2;width:100%;padding:0 var(--gutter) clamp(3rem,7vh,5.5rem)}
.filmhero .toprow{
  position:absolute;top:calc(1.2rem + clamp(48px,5vw,64px));left:var(--gutter);right:var(--gutter);
  z-index:2;display:flex;justify-content:space-between;gap:1rem;
}
.hero-cue{
  position:absolute;right:var(--gutter);bottom:clamp(3rem,7vh,5.5rem);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  writing-mode:vertical-rl;
}
.hero-cue::before{content:"";width:1px;height:52px;background:linear-gradient(var(--salmon),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){.hero-cue::before{animation:none}}

/* ---------------------------------------------------------------- stats */
.statrow{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
.stat{padding:clamp(1.6rem,3vw,2.6rem) 1rem;text-align:center;border-right:1px solid var(--hairline)}
.stat:last-child{border-right:0}
.stat .n{font-family:var(--f-display);font-size:var(--step-3);line-height:1;display:block;margin-bottom:.5rem}
.stat .l{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* ---------------------------------------------------------------- work index
   Each row is a card that lights up in the client's own accent on hover:
   the right edge illuminates and their mark rides in on the gradient. */
.windex{border-top:1px solid var(--hairline)}
.wrow{
  position:relative;display:block;overflow:hidden;
  padding:clamp(1.6rem,3.4vw,2.8rem) clamp(1rem,2vw,1.6rem);
  border-bottom:1px solid var(--hairline);
  transition:padding-left .45s var(--ease),background-color .5s var(--ease);
  --brand:var(--salmon);
}
.wrow .wleft{position:relative;z-index:3;display:block}
.wrow:hover{padding-left:clamp(1.6rem,3vw,2.6rem)}
/* the illuminated edge + gradient wash, painted in the client's colour */
.wrow::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent 30%,color-mix(in srgb,var(--brand) 12%,transparent) 72%,color-mix(in srgb,var(--brand) 34%,transparent) 100%);
  transition:opacity .5s var(--ease);
}
.wrow::after{
  content:"";position:absolute;top:0;bottom:0;right:0;width:3px;z-index:2;
  background:var(--brand);transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .55s var(--ease);
}
.wrow:hover::before{opacity:1}
.wrow:hover::after{transform:scaleY(1)}

.wrow .rowhead{position:relative;z-index:3;display:flex;align-items:baseline;gap:clamp(.9rem,2vw,1.6rem)}
.wrow .num{font-family:var(--f-mono);color:var(--brand);font-size:var(--step--1);transition:color .4s var(--ease)}
.wrow .name{
  font-family:var(--f-display);font-size:var(--step-3);text-transform:uppercase;line-height:1;
  transition:color .35s var(--ease);
}
.wrow:hover .name{color:var(--brand)}
/* metadata now lives under the title, not off on the right rail */
.wrow .meta{position:relative;z-index:3;margin-top:.7rem;padding-left:calc(var(--step--1) + clamp(.9rem,2vw,1.6rem))}
.wrow .meta .big{font-weight:700;font-size:var(--step-0);display:block}
.wrow .meta .slate{font-size:.7rem}

/* the live loop rides in at the right edge on hover — row keeps its height.
   Layering: video z1 (beneath the gradient wash z2), client mark z3 (on top,
   clean — no gradient over the logo). .rowend is just the anchor box; it must
   NOT transform, so its children keep stacking against the row itself. */
.wrow .rowend{position:absolute;top:12%;bottom:12%;right:clamp(1rem,3vw,2.6rem);aspect-ratio:16/9;pointer-events:none}
.wrow .rowvid{
  position:absolute;inset:0;z-index:1;
  border-radius:var(--radius);overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  opacity:0;transform:translateX(26px);
  transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.wrow:hover .rowvid{opacity:1;transform:none}
.wrow .rowvid video{width:100%;height:100%;object-fit:cover}
.wrow .rowmark{
  position:absolute;inset:0;margin:auto;z-index:3;
  max-height:58%;max-width:72%;width:auto;object-fit:contain;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.55));
  opacity:0;transform:translateX(26px);
  transition:opacity .5s var(--ease) .05s,transform .6s var(--ease) .05s;
}
.wrow:hover .rowmark{opacity:1;transform:none}
@media (hover:none){.wrow .rowend{display:none}}
@media(max-width:700px){.wrow .rowend{top:22%;bottom:22%}}

/* ---------------------------------------------------------------- reel */
.reelband{padding:var(--sec-y) 0;background:var(--ink)}
.reelframe{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:#000;box-shadow:0 40px 90px rgba(0,0,0,.55)}
.reelframe video{width:100%;aspect-ratio:16/9;object-fit:cover}
.reelframe .rslate{
  position:absolute;left:1.2rem;bottom:1rem;z-index:2;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(236,231,223,.85);text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.reelframe .rctl{
  position:absolute;right:1.1rem;bottom:.9rem;z-index:2;
  width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(236,231,223,.5);
  background:rgba(14,12,11,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--bone);cursor:pointer;font-size:.9rem;display:grid;place-items:center;
  transition:border-color .25s,transform .25s var(--ease);
}
.reelframe .rctl:hover{border-color:var(--bone);transform:scale(1.06)}

/* ---------------------------------------------------------------- light band */
.band-light{background:var(--bone);color:var(--ink)}
.band-light .slate{color:rgba(14,12,11,.55)}
.band-light .lede,.band-light p{color:rgba(14,12,11,.8)}
.band-light .display{color:var(--ink)}
.band-light .hairline{border-color:var(--ink-hairline)}

/* method steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(1.5rem,3vw,3rem)}
.step{border-top:2px solid var(--ink);padding-top:1.4rem}
.band-light .step h3{font-family:var(--f-display);font-size:var(--step-2);text-transform:uppercase;margin:.2rem 0 .8rem}
.step .k{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.16em;color:var(--salmon)}
.step p{font-size:var(--step--1);line-height:1.75}

/* ---------------------------------------------------------------- marquee */
.mq{overflow:hidden;padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
/* double-wide variant: two counter-scrolling rows, logos at 2x */
.mq--xl{padding:clamp(2.4rem,5vw,4rem) 0;display:flex;flex-direction:column;gap:clamp(2rem,4vw,3.2rem)}
.mq--xl .mq-track img{height:clamp(72px,9.5vw,124px)}
.mq-track.rev{animation-direction:reverse}
.mq-track{display:flex;gap:clamp(3rem,6vw,5.5rem);width:max-content;animation:mq 42s linear infinite;align-items:center}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-track img{
  height:clamp(40px,5.2vw,64px);width:auto;object-fit:contain;
  filter:grayscale(1) brightness(4) contrast(.6);opacity:.6;
  mix-blend-mode:lighten; /* solid-black grounds melt into the band */
  transition:filter .4s var(--ease),opacity .4s var(--ease);
}
/* marks that arrive dark-on-white get flipped first, then normalised */
.mq-track img.inv{filter:invert(1) grayscale(1) brightness(2.4) contrast(.7)}
.mq-track img:hover{filter:none;opacity:1}
@media (prefers-reduced-motion:reduce){.mq{overflow-x:auto}.mq-track{animation:none}}

/* ---------------------------------------------------------------- end card */
.endcard{padding:calc(var(--sec-y)*1.3) 0;text-align:center;background:var(--ink)}
.endcard .display{margin-bottom:2.2rem}

/* ---------------------------------------------------------------- footer */
footer.site{background:var(--ink-2);border-top:1px solid var(--hairline);padding:clamp(3rem,6vw,5rem) 0 2rem}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(2rem,5vw,4rem);margin-bottom:clamp(2.5rem,5vw,4rem)}
.f-word{font-family:var(--f-display);font-size:var(--step-3);text-transform:uppercase;line-height:.95}
.f-word .accent{color:var(--salmon)}
.f-col h4{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:1.1rem;font-weight:400}
.f-col a,.f-col span{display:block;padding:.28em 0;color:var(--dim);font-size:var(--step--1);transition:color .25s}
.f-col a:hover{color:var(--bone)}
.f-social{display:flex;gap:.8rem;margin-top:1.2rem}
.f-social a{width:40px;height:40px;border:1px solid var(--hairline-strong);border-radius:50%;display:grid;place-items:center;transition:border-color .25s,transform .25s var(--ease)}
.f-social a:hover{border-color:var(--salmon);transform:translateY(-2px)}
.f-social svg{width:16px;height:16px;fill:var(--bone)}
.f-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--hairline);padding-top:1.6rem}
.f-bottom .slate{font-size:.68rem}

/* ---------------------------------------------------------------- page hero (subpages) */
.pagehero{position:relative;min-height:72svh;display:flex;align-items:flex-end;overflow:hidden}
.pagehero .media{position:absolute;inset:0}
.pagehero .media video,.pagehero .media img{width:100%;height:100%;object-fit:cover}
.pagehero .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,12,11,.94),rgba(14,12,11,.3) 55%,rgba(14,12,11,.5))}
.pagehero .inner{position:relative;z-index:2;width:100%;padding:9rem var(--gutter) clamp(2.5rem,5vh,4rem)}

/* ---------------------------------------------------------------- case studies */
.case{padding:var(--sec-y) 0;border-bottom:1px solid var(--hairline)}
.casehead{display:flex;align-items:baseline;gap:1.4rem;margin-bottom:.8rem}
.casehead .num,.case .num{font-family:var(--f-mono);color:var(--salmon);font-size:var(--step-0)}
.casehead h2,.case h2{font-family:var(--f-display);font-size:var(--step-3);text-transform:uppercase;line-height:.95}
.caseslate{margin-bottom:2.4rem;display:block}
.case-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.case-grid .media img,.case-grid .media video{width:100%;border-radius:var(--radius-lg);object-fit:cover}
.case p{color:var(--dim);margin-bottom:1.2rem;max-width:56ch}
.case p strong{color:var(--fg)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;margin:1.8rem 0}
.kpi{background:var(--ink-2);padding:1.2rem 1rem}
.kpi .n{font-family:var(--f-display);font-size:var(--step-2);display:block;line-height:1}
.kpi .l{font-family:var(--f-mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* drag-to-compare */
.compare{position:relative;aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;user-select:none;touch-action:none;box-shadow:0 40px 80px rgba(0,0,0,.5)}
.compare .lay{position:absolute;inset:0}
.compare .lay.after{clip-path:inset(0 0 0 var(--cut,50%))}
.compare .chip{
  position:absolute;top:1rem;z-index:5;font-family:var(--f-mono);font-size:.65rem;
  letter-spacing:.14em;text-transform:uppercase;padding:.45em .9em;border-radius:999px;
  background:rgba(14,12,11,.55);color:var(--bone);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(236,231,223,.2);
}
.compare .chip.b{left:1rem}
.compare .chip.a{right:1rem}
.compare .handle{
  position:absolute;top:0;bottom:0;left:var(--cut,50%);z-index:6;width:2px;
  background:var(--salmon);cursor:ew-resize;
}
.compare .handle::after{
  content:"⟨ ⟩";display:grid;place-items:center;position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
  background:var(--salmon);color:var(--ink);font-size:.7rem;font-weight:700;letter-spacing:-.05em;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.compare .handle:focus-visible{outline:2px solid var(--bone);outline-offset:4px}

/* ---------------------------------------------------------------- photo grids (reskinned fluid engine) */
.gsec{position:relative;background:var(--ink)}
.gbg{position:absolute;inset:0;z-index:0;overflow:hidden}
.gbg video,.gbg img{width:100%;height:100%;object-fit:cover;display:block}
.gbg::after{content:"";position:absolute;inset:0;background:rgba(10,8,7,var(--ov,0))}
.fgrid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(26,1fr);grid-auto-rows:calc((min(92vw,1380px) - 275px)/26);gap:11px;max-width:1500px;margin:0 auto;padding:3vw 4vw}
.fgrid img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--radius)}
.fgrid h2{
  align-self:center;justify-self:center;text-align:center;
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,5.5vw,5.2rem);line-height:.95;color:var(--fg);
  text-shadow:0 2px 28px rgba(0,0,0,.5);
}
.gsec--plain{background:var(--ink)}
.gsec--slate{background:var(--ink-2)}
.gsec--maroon{background:#241210}
.gcap{position:relative;z-index:2;max-width:1500px;margin:0 auto;padding:0 4vw 2.5rem}

.testi{position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.testi .gbg::after{background:rgba(10,8,7,var(--tov,.62))}
.testi .inner{position:relative;z-index:2;max-width:760px;padding:3rem 6vw}
.testi .name{font-family:var(--f-display);text-transform:uppercase;font-size:var(--step-2);line-height:1.1;margin-bottom:1.6rem}
.testi .quote{font-size:var(--step-1);font-style:italic;line-height:1.7;color:rgba(236,231,223,.92)}
.testi .slate{margin-bottom:1rem}

/* ---------------------------------------------------------------- call sheet (book) */
.sheet{border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden;background:var(--ink-2)}
.sheet-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.2rem 1.6rem;border-bottom:1px dashed var(--hairline-strong)}
.beats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(1.5rem,3vw,2.5rem);margin:var(--sec-y) 0}
.beat{border-top:2px solid var(--salmon);padding-top:1.2rem}
.beat h3{font-family:var(--f-display);text-transform:uppercase;font-size:var(--step-1);margin:.3rem 0 .6rem}
.beat .k{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;color:var(--salmon)}
.beat p{color:var(--dim);font-size:var(--step--1)}
.book-card{border-radius:var(--radius-lg);overflow:hidden;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.book-card iframe{display:block;width:100%;height:1100px;border:0}

/* ---------------------------------------------------------------- responsive */
@media(max-width:900px){
  .case-grid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .wrow{grid-template-columns:auto 1fr}
  .wrow .meta{grid-column:2;text-align:left;margin-top:.4rem}
  .topbar nav{display:none}
}
@media(max-width:860px){
  .fgrid{grid-template-columns:repeat(13,1fr);grid-auto-rows:auto;padding:10vw 6vw}
  .fgrid h2{grid-column:1/-1 !important;grid-row:auto !important;padding:1rem 0}
  .fgrid img{grid-column:1/-1 !important;grid-row:auto !important;height:auto;aspect-ratio:4/5;margin-bottom:.5rem}
  .testi{min-height:78vh}
}
@media(max-width:600px){
  .f-grid{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--hairline)}
  .stat:last-child{border-bottom:0}
  .statrow{grid-template-columns:1fr 1fr}
  .book-card iframe{height:1250px}
}

/* =====================================================================
   DRASTIC KIT — type as image, brand takeovers, bleeding filmstrips
   ===================================================================== */

/* full-width wordmark cropped by the hero's bottom edge */
.bigword{
  position:absolute;left:0;right:0;bottom:.3em;z-index:2;pointer-events:none;
  font-family:var(--f-display);text-transform:uppercase;line-height:1;
  text-align:center;white-space:nowrap;font-size:min(12.4vw,calc(100vw / 6.1));letter-spacing:-.005em;
}
.bigword b{color:var(--salmon);font-weight:400}

/* outline ticker band — giant hollow type rolling between acts */
.oband{overflow:hidden;padding:1.1rem 0;border-block:1px solid var(--hairline)}
.oband .otrack{
  display:flex;gap:3.2rem;width:max-content;align-items:baseline;
  animation:mq 32s linear infinite;
  font-family:var(--f-display);text-transform:uppercase;line-height:1;
  font-size:clamp(2.6rem,6vw,5.5rem);
  color:transparent;-webkit-text-stroke:1.5px rgba(236,231,223,.45);
}
.oband .otrack .fill{color:var(--salmon);-webkit-text-stroke:0}
.oband:hover .otrack{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.oband{overflow-x:auto}.oband .otrack{animation:none}}

/* filmstrip — offset, tilted, bleeding off both edges */
.filmstrip{overflow:hidden;padding:calc(var(--sec-y)*.7) 0}
.fs-track{display:flex;gap:clamp(1rem,2vw,1.8rem);width:max-content;margin-left:-5vw}
.fs-cell{width:clamp(200px,23vw,400px);flex:none}
.fs-cell:nth-child(even){margin-top:clamp(2rem,5vw,4.5rem)}
.fs-cell:nth-child(3n){transform:rotate(-1.2deg)}
.fs-cell:nth-child(3n+1){transform:rotate(.9deg)}
.fs-cell img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.fs-cell .slate{display:block;margin-top:.6rem;font-size:.62rem}

/* giant numerals — fill / outline alternating */
.giantstats{display:flex;flex-wrap:wrap;gap:1.5rem clamp(2rem,5vw,4.5rem);align-items:baseline}
.gstat .n{font-family:var(--f-display);font-size:clamp(3.6rem,9vw,8.5rem);line-height:.9;display:block}
.gstat:nth-child(even) .n{color:transparent;-webkit-text-stroke:2px var(--bone)}
.gstat .l{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* brand takeover — a case study that adopts the client's world */
.tko{position:relative;overflow:hidden;padding:calc(var(--sec-y)*.8) 0}
.tko-head{display:flex;gap:1.1rem;align-items:baseline;margin-bottom:1.1rem}
.tko-head .num{font-family:var(--f-mono);color:var(--salmon);font-size:var(--step-0)}
.bmark{
  position:absolute;top:clamp(1.2rem,3vw,2.2rem);left:clamp(1.2rem,3vw,2.2rem);z-index:3;
  max-height:clamp(70px,10vw,132px);max-width:min(60vw,440px);width:auto;object-fit:contain;
  filter:drop-shadow(0 8px 28px rgba(0,0,0,.55));
}
/* dark-on-transparent marks ride a white plate, like the sticker they are */
.bmark--plate{background:#fff;padding:clamp(.6rem,1.2vw,1rem) clamp(.9rem,1.6vw,1.4rem);border-radius:12px;max-height:clamp(84px,11vw,140px)}
.tko-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(1.6rem,4vw,3.5rem);margin-top:clamp(1.6rem,3vw,2.6rem);align-items:start}
.tko-grid p{opacity:.85;max-width:52ch;margin-bottom:1rem}
.tko-grid p strong{opacity:1}
.pstrip2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pstrip2 img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.pstrip2 img:nth-child(even){margin-top:clamp(1rem,2.5vw,2rem)}
@media(max-width:800px){.tko-grid{grid-template-columns:1fr}}
.tko--tsc{background:linear-gradient(to top,#0a2110,#1f5c31)}
.tko--gse{background:linear-gradient(to top,#03060b,#132c47)}
.tko--tf{background:linear-gradient(to top,#0c151c,#264251);color:#eee9d7}
.tko .shell{position:relative;z-index:1}
.tko-banner{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:56svh;display:flex;align-items:flex-end}
/* banner intro: the frame wipes open (overrides the generic reveal) */
[data-anim].tko-banner{opacity:1;transform:none;clip-path:inset(0 0 100% 0 round var(--radius-lg));transition:clip-path 1.15s var(--ease-soft)}
[data-anim].tko-banner.in{clip-path:inset(0 0 0% 0 round var(--radius-lg))}
@media (prefers-reduced-motion:reduce){[data-anim].tko-banner{clip-path:none;transition:none}}
.tko-banner>video,.tko-banner>img.bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tko-banner .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.74),rgba(0,0,0,.1) 58%)}
.tko-banner .binner{position:relative;z-index:2;width:100%;padding:clamp(1.4rem,3vw,2.4rem);display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
.clientmark{max-height:clamp(80px,11vw,150px);max-width:min(70vw,520px);width:auto;object-fit:contain;filter:drop-shadow(0 6px 24px rgba(0,0,0,.5))}
.giantnum{font-family:var(--f-display);line-height:.85;font-size:clamp(4.5rem,15vw,13rem);letter-spacing:-.01em}
.giantnum.outline{color:transparent;-webkit-text-stroke:2.5px var(--bone)}

/* glass kpi chips — the nav's material, reused as accents */
.kchips{display:flex;gap:.8rem;flex-wrap:wrap}
.kchip{
  background:rgba(10,8,7,.48);border:1px solid rgba(255,255,255,.16);border-radius:14px;
  padding:.75rem 1.05rem;
  -webkit-backdrop-filter:blur(10px) saturate(1.5);backdrop-filter:blur(10px) saturate(1.5);
}
.kchip .n{font-family:var(--f-display);font-size:var(--step-2);line-height:1;display:block}
.kchip .l{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75}

.pstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.pstrip img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.tko .tcopy{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1.5rem,4vw,3.5rem);margin-top:2.2rem}
.tko .tcopy p{opacity:.82;max-width:56ch;margin-bottom:1rem}
.tko .tcopy p strong{opacity:1}
@media(max-width:800px){.pstrip{grid-template-columns:repeat(2,1fr)}.tko .tcopy{grid-template-columns:1fr}}

/* founder footnote — a pill, not a chapter */
.fnote{
  display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;
  border:1px solid var(--hairline);border-radius:32px;padding:1.2rem 2rem 1.2rem 1.2rem;
}
.fnote img{width:92px;height:92px;border-radius:50%;object-fit:cover;flex:none}
.fnote .ftext{flex:1;min-width:260px}
.fnote .ftext p{color:var(--dim);font-size:var(--step--1);margin-top:.3rem}


/* =====================================================================
   METRICS — every client gets their numbers drawn, not typed
   ===================================================================== */
.metricbox{
  margin-top:clamp(1.6rem,3vw,2.4rem);
  padding:clamp(1.2rem,2.6vw,2rem);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);
  background:rgba(0,0,0,.22);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.metricbox .mhead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.metricbox .mtitle{font-family:var(--f-display);text-transform:uppercase;font-size:var(--step-2);line-height:1}
.mchip{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;
  padding:.5em 1em;border-radius:999px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
}
[data-anim].metricbox{opacity:1;transform:none;transition:none}



/* ---- TSC: the growth chart — a finance line that draws itself ---- */
.c2{width:100%;height:auto;display:block;font-family:var(--f-mono)}
.c2grid line{stroke:rgba(255,255,255,.12);stroke-width:1}
.c2grid line:first-child{stroke:rgba(255,255,255,.35);stroke-width:2}
.c2txt text{fill:rgba(236,231,223,.55);font-size:13px;letter-spacing:.05em}
.c2line{
  stroke:#e8392b;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(232,57,43,.7));
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 2s var(--ease-soft) .15s;
}
.chart2.in .c2line{stroke-dashoffset:0}
.c2fill{opacity:0;transition:opacity .9s var(--ease) 1.35s}
.chart2.in .c2fill{opacity:1}
.c2dot{
  fill:#ff5a4a;filter:drop-shadow(0 0 10px rgba(232,57,43,.95));
  transform:scale(0);transform-box:fill-box;transform-origin:center;
  transition:transform .45s var(--ease) 1.95s;
}
.chart2.in .c2dot{transform:scale(1)}
.c2end{
  fill:#ffffff;font-family:var(--f-display);font-size:27px;letter-spacing:.02em;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));
  opacity:0;transition:opacity .5s var(--ease) 2.1s;
}
.chart2.in .c2end{opacity:1}

/* ---- GSE: fill meters — three lines, zero noise ---- */
.meters .mrow{
  display:grid;grid-template-columns:minmax(130px,auto) 1fr auto;gap:clamp(.9rem,2.5vw,1.6rem);
  align-items:center;padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.08);
}
.meters .mrow:last-child{border-bottom:0;padding-bottom:.2rem}
.meters .ml{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.meters .mv{font-family:var(--f-display);font-size:var(--step-1);white-space:nowrap}
.meters .mbar{height:10px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.meters .mbar i{
  display:block;height:100%;width:var(--w,100%);border-radius:inherit;
  background:linear-gradient(90deg,#2f89b8,#9adcf5);
  box-shadow:0 0 14px rgba(91,192,232,.5);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s var(--ease-soft) var(--d,0s);
}
.meters.in .mbar i{transform:scaleX(1)}
@media(max-width:640px){.meters .mrow{grid-template-columns:1fr auto}.meters .mbar{grid-column:1/-1}}

/* ---- TF: the retainer track — line lives with the beats, not the title ---- */
.t2{position:relative;padding-top:.4rem}
.t2line{position:absolute;top:calc(.4rem + 8px);left:9px;right:9px;height:2px;background:rgba(238,233,215,.18);overflow:hidden;border-radius:2px}
.t2line i{display:block;height:100%;background:#75c1b3;box-shadow:0 0 10px rgba(117,193,179,.7);transform:scaleX(0);transform-origin:left;transition:transform 1.5s var(--ease-soft) .1s}
.track2.in .t2line i{transform:scaleX(1)}
.t2nodes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,2vw,1.4rem);position:relative}
.t2node .dot{
  display:block;width:18px;height:18px;border-radius:50%;background:#75c1b3;
  box-shadow:0 0 0 5px rgba(117,193,179,.16),0 0 12px rgba(117,193,179,.6);
  transform:scale(0);transition:transform .45s var(--ease) var(--d,0s);
}
.track2.in .t2node .dot{transform:scale(1)}
.t2node h4{
  font-family:var(--f-display);text-transform:uppercase;font-size:var(--step-1);line-height:1;
  margin:.9rem 0 .35rem;
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease) calc(var(--d,0s) + .15s),transform .5s var(--ease) calc(var(--d,0s) + .15s);
}
.t2node p{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;line-height:1.6;
  opacity:0;transition:opacity .5s var(--ease) calc(var(--d,0s) + .3s);
}
.track2.in .t2node h4{opacity:1;transform:none}
.track2.in .t2node p{opacity:.65}
@media(max-width:700px){.t2nodes{grid-template-columns:1fr 1fr;row-gap:1.6rem}.t2line{display:none}}

@media (prefers-reduced-motion:reduce){
  .c2line,.c2fill,.c2dot,.c2end,.meters .mbar i,.t2line i,.t2node .dot,.t2node h4,.t2node p{
    transition:none;transform:none;opacity:1;stroke-dashoffset:0;
  }
}

/* TSC brand roll — the sponsors the audience earned */
.brandroll{margin-top:clamp(2rem,4vw,3rem)}
.mq--roll{border-color:rgba(255,255,255,.16);padding:clamp(1.2rem,2.5vw,1.8rem) 0}
.mq--roll .mq-track{animation-duration:30s}
.mq--roll .mq-track img{height:clamp(44px,6vw,72px);filter:grayscale(1) brightness(6) contrast(.55);opacity:.85}
.mq--roll .mq-track img:hover{filter:none;opacity:1}

/* full-bleed section background video, sitting under the takeover gradient */
.tko-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.tko-bg video{width:100%;height:100%;object-fit:cover}
.tko-bg::after{content:"";position:absolute;inset:0}
.tko--tf{background:#0c151c}
.tko--tf .tko-bg::after{background:linear-gradient(to top,rgba(12,21,28,.96),rgba(30,52,64,.86))}

/* ---- the flight map — Atlanta HQ, routes drawing outward ---- */
.flightmap{padding:clamp(1rem,2vw,1.6rem)}
.fmap{width:100%;height:auto;display:block;font-family:var(--f-mono)}
.fgridlines line{stroke:rgba(236,231,223,.06);stroke-width:1}
.fstate{opacity:0;transition:opacity .45s var(--ease)}
.fstate circle{fill:rgba(236,231,223,.4)}
.fstate text{fill:rgba(236,231,223,.45);font-size:11px;letter-spacing:.1em;text-anchor:middle}
.flightmap.in .fstate{opacity:1}
.flightmap.in .fstate:nth-child(2n){transition-delay:.12s}
.flightmap.in .fstate:nth-child(3n){transition-delay:.24s}
.flightmap.in .fstate:nth-child(4n){transition-delay:.36s}
.flightmap.in .fstate:nth-child(5n){transition-delay:.48s}
.froute{
  stroke:var(--salmon);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
  filter:drop-shadow(0 0 6px rgba(240,82,61,.6));
  transition:stroke-dashoffset 1.4s var(--ease-soft) .5s;
}
.froute.r2{transition-delay:.75s}
.froute.r3{transition-delay:1s}
.froute.r4{transition-delay:1.25s}
.flightmap.in .froute{stroke-dashoffset:0}
.fhalo{opacity:0;transition:opacity 1s var(--ease) .3s}
.flightmap.in .fhalo{opacity:1}
.fpin{transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform .5s var(--ease) .25s}
.fpin-home{fill:var(--salmon)}
.fpin-sat{fill:rgba(236,231,223,.85);transition-delay:1.7s}
.fpin-sat.s2{transition-delay:2s}
.flightmap.in .fpin{transform:scale(1)}
.fpulse{
  stroke:var(--salmon);stroke-width:2;opacity:0;
  transform-box:fill-box;transform-origin:center;
}
.flightmap.in .fpulse{animation:fpulse 2.6s var(--ease) 1s infinite}
@keyframes fpulse{
  0%{transform:scale(1);opacity:.8}
  70%{transform:scale(3.2);opacity:0}
  100%{transform:scale(3.2);opacity:0}
}
.ftxt text{fill:rgba(236,231,223,.6);font-size:13px;letter-spacing:.12em;opacity:0;transition:opacity .6s var(--ease) 1.6s}
.ftxt text.big{fill:var(--bone);font-size:15px;letter-spacing:.14em}
.flightmap.in .ftxt text{opacity:1}
.fmeta{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1rem}
@media (prefers-reduced-motion:reduce){
  .fdots circle,.froute,.fhalo,.fpin,.ftxt text{transition:none;transform:none;opacity:1;stroke-dashoffset:0}
  .fpulse,.flightmap.in .fpulse{animation:none;opacity:0}
}

/* =====================================================================
   THE BOARD — counters that count, ticks that draw, one tint per number
   ===================================================================== */
.board{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:1px;background:var(--hairline);
  border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden;
}
@media(max-width:960px){
  .board{grid-template-columns:repeat(2,1fr)}
  .bstat:last-child{grid-column:1/-1}
}
.bstat{
  --acc:var(--bone);
  position:relative;background:var(--ink);padding:clamp(1.6rem,3.2vw,2.8rem) clamp(1rem,2vw,1.6rem);
  transition:background .4s var(--ease);
}
.bstat:hover{background:color-mix(in srgb,var(--acc) 7%,var(--ink))}
.bstat .n{
  font-family:var(--f-display);font-style:italic;font-size:clamp(2.8rem,6.5vw,5.6rem);
  line-height:.95;display:block;color:var(--acc);
}
.bstat .tick{
  display:block;height:3px;width:100%;margin:.9rem 0 .8rem;border-radius:2px;
  background:var(--acc);opacity:.85;
  transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease-soft) calc(var(--d,0s) + .35s);
}
.bstat.in .tick{transform:scaleX(1)}
.bstat .l{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}


/* thesis: the words that matter get their own colour, swept in */
.thesis{position:relative;overflow:hidden;border-bottom:1px solid var(--hairline-strong)}
.thesis .shell{position:relative;z-index:2;max-width:var(--maxw)}
.thesis .lede{max-width:46ch}
.thesiswrap{display:grid;grid-template-columns:1fr auto;gap:clamp(2rem,5vw,4rem);align-items:center}
.hl{position:relative;white-space:nowrap;font-weight:700}
.hl::after{
  content:"";position:absolute;left:-.22em;right:-.3em;bottom:-.12em;height:1.06em;z-index:-1;
  border-radius:.5em .9em .4em 1em / .9em .4em 1em .5em;
  opacity:.62;
  transform:scaleX(0) skewX(-7deg);transform-origin:left center;
  transition:transform .55s var(--ease-soft) var(--d,0s);
  filter:blur(.5px);
}
.lede .hl{color:var(--fg)}
.hl-g::after{background:#5cff9d}
.hl-b::after{background:#4fd8ff}
.hl-s::after{background:#ff6a3d}
[data-anim].in ~ * .hl::after{transform:scaleX(1)}
.thesis .lede.in .hl::after{transform:scaleX(1) skewX(-7deg)}

/* the seal — rotating film badge, play-mark core */
.seal{width:clamp(120px,14vw,180px);flex:none}
.seal svg{width:100%;height:auto;display:block;overflow:visible}
.sealtext{fill:rgba(236,231,223,.55);font-family:var(--f-mono);font-size:12.5px;letter-spacing:.32em}
.seal defs+text, .seal text{transform-box:fill-box}
.seal svg text{transform-origin:80px 80px;animation:sealspin 16s linear infinite}
@keyframes sealspin{to{transform:rotate(360deg)}}
.sealcore path{transform-box:fill-box;transform-origin:center;transition:transform .6s var(--ease) .4s;transform:scale(0)}
.seal.in .sealcore path{transform:scale(1)}
@media(max-width:800px){.thesiswrap{grid-template-columns:1fr}.seal{margin-top:1rem}}
@media (prefers-reduced-motion:reduce){
  .seal svg text{animation:none}
  .bstat .tick,.hl::after,.sealcore path{transition:none;transform:none}
}

/* the country itself — faint, drawn once on arrival */
.fusa{
  stroke:rgba(236,231,223,.25);stroke-width:1.5;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 2.2s var(--ease-soft) .1s;
}
.flightmap.in .fusa{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.fusa{stroke-dashoffset:0;transition:none}}

/* rotating brand gallery — full-bleed to the page edge, texture not headline */
.rotogal{
  position:absolute;right:0;top:5%;bottom:clamp(210px,26vw,330px);z-index:1;
  width:min(38vw,580px);
  border-radius:var(--radius-lg) 0 0 var(--radius-lg);overflow:hidden;opacity:.5;
}
.rotogal img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s var(--ease);
}
.rotogal img.on{opacity:1}
.rotogal::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(to right,rgba(14,12,11,.9),rgba(14,12,11,.2) 55%),
             linear-gradient(to top,rgba(14,12,11,.7),transparent 45%);
}
@media(max-width:800px){.rotogal{position:relative;inset:auto;width:100%;aspect-ratio:16/9;border-radius:0;opacity:.45;margin-top:1.5rem}}

/* thesis outro: bare bar graph on a blinking gradient grid */
.freq{position:relative;height:clamp(160px,22vw,300px);margin-top:clamp(3rem,6vw,4.5rem)}
[data-anim].freq{transform:none}
.fgrid2{
  position:absolute;inset:-18% 0 0;pointer-events:none;opacity:0;
  background:
    linear-gradient(rgba(236,231,223,.08) 1px,transparent 1px) 0 100%/100% 12.5%,
    linear-gradient(90deg,rgba(236,231,223,.08) 1px,transparent 1px) 0 0/4.167% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 35%,transparent 95%);
  mask-image:linear-gradient(to top,#000 35%,transparent 95%);
}
.freq.in .fgrid2,.flightmap.in .fgrid2{
  animation:gridblink .85s var(--ease) .1s forwards, gridlive 7s steps(1) 1.2s infinite;
}
@keyframes gridblink{
  0%{opacity:0}18%{opacity:.9}30%{opacity:.12}48%{opacity:1}62%{opacity:.35}100%{opacity:1}
}
/* the occasional dropped frame, forever */
@keyframes gridlive{
  0%{opacity:1}88%{opacity:1}90%{opacity:.5}92%{opacity:.95}95%{opacity:.65}97%{opacity:1}100%{opacity:1}
}
.fgrid2--full{position:absolute;inset:0;-webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 45%,transparent 85%);mask-image:radial-gradient(ellipse at 50% 45%,#000 45%,transparent 85%)}
.fbars{
  position:absolute;inset:0;display:flex;align-items:flex-end;gap:clamp(6px,1.2vw,14px);
  border-bottom:2px solid var(--hairline-strong);
}
.fbars i{
  flex:1;height:var(--h,40%);border-radius:4px 4px 0 0;
  background:linear-gradient(to top,rgba(236,231,223,.22),rgba(236,231,223,.7));
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .8s var(--ease) var(--d,0s);
}
.freq.in .fbars i{transform:scaleY(1)}
.fbars i.cg{background:linear-gradient(to top,rgba(87,208,124,.35),#57d07c)}
.fbars i.cb{background:linear-gradient(to top,rgba(91,192,232,.35),#5bc0e8)}
.fbars i.cs{background:linear-gradient(to top,rgba(232,57,43,.4),#e8392b);box-shadow:0 0 26px rgba(232,57,43,.35)}
@media (prefers-reduced-motion:reduce){
  .fgrid2,.freq.in .fgrid2{animation:none;opacity:1}
  .fbars i{transition:none;transform:none}
}

/* thesis trend — the same red line the Beltline chart earns, bare on the grid */
.trend{position:absolute;inset:0;width:100%;height:100%}
.trend .tline{
  vector-effect:non-scaling-stroke;
  stroke:#e8392b;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(232,57,43,.7));
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 2s var(--ease-soft) .2s;
}
.freq.in .trend .tline{stroke-dashoffset:0}
.trend .tfill{opacity:0;transition:opacity .9s var(--ease) 1.5s}
.freq.in .trend .tfill{opacity:1}
.trend .tdot{
  fill:#ff5a4a;filter:drop-shadow(0 0 10px rgba(232,57,43,.95));
  transform:scale(0);transform-box:fill-box;transform-origin:center;
  transition:transform .45s var(--ease) 2s;
}
.freq.in .trend .tdot{transform:scale(1)}
.fbars{display:none}

/* the drifting field — MKBHD-wallpaper energy, generated by site.js */
.starfield{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.starfield i{
  position:absolute;display:block;background:rgba(236,231,223,.5);
  opacity:0;
}
.starfield i.sdot{
  width:3px;height:3px;border-radius:50%;
  animation:stwinkle var(--dur,12s) ease-in-out var(--bd,0s) infinite;
}
.starfield i.sdash{
  height:1px;background:linear-gradient(90deg,rgba(236,231,223,.05),rgba(236,231,223,.5),rgba(236,231,223,.05));
  animation:syin var(--dur,5s) var(--ease-soft) var(--bd,0s) infinite;
}
.starfield i.sdash.rev{animation-name:syang}
/* yin-yang dashes: the line grows out of a point, then collapses into
   its own leading edge — over and over, like the reference */
@keyframes syin{
  0%{transform:scaleX(0);transform-origin:left center;opacity:0}
  8%{opacity:var(--o,.4)}
  46%{transform:scaleX(1);transform-origin:left center}
  50%{transform:scaleX(1);transform-origin:right center}
  92%{opacity:var(--o,.4)}
  100%{transform:scaleX(0);transform-origin:right center;opacity:0}
}
@keyframes syang{
  0%{transform:scaleX(0);transform-origin:right center;opacity:0}
  8%{opacity:var(--o,.4)}
  46%{transform:scaleX(1);transform-origin:right center}
  50%{transform:scaleX(1);transform-origin:left center}
  92%{opacity:var(--o,.4)}
  100%{transform:scaleX(0);transform-origin:left center;opacity:0}
}
/* dots breathe — never static */
@keyframes stwinkle{
  0%,100%{opacity:.05;transform:scale(.8)}
  35%{opacity:var(--o,.4);transform:scale(1)}
  60%{opacity:calc(var(--o,.4) * .3)}
  80%{opacity:var(--o,.4)}
}

/* the map, rebuilt on the real outline */
.fstage{
  position:relative;aspect-ratio:1536/1024;z-index:1;
  opacity:0;transform:translateY(-110px) scale(.76);
  transition:transform 1.5s var(--ease-soft) .05s,opacity 1.1s var(--ease) .05s;
  will-change:transform;
}
.flightmap.in .fstage{opacity:1;transform:translateY(0) scale(1.05)}
.flightmap .fmeta{opacity:0;transform:translateY(18px);transition:transform .9s var(--ease-soft) .5s,opacity .8s var(--ease) .5s}
.flightmap.in .fmeta{opacity:1;transform:none}
.fusaimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.16;pointer-events:none}
.fstage .fmap{position:absolute;inset:0;width:100%;height:100%}
.flightmap{position:relative;overflow:hidden}
.flightmap .fmeta{position:relative;z-index:2}
/* a comet running the border, forever */
.ftrace{
  stroke:rgba(246,243,237,.95);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(246,243,237,.8));
  stroke-dasharray:.06 .94;stroke-dashoffset:1;opacity:0;
  transition:opacity .8s var(--ease) .4s;
}
.flightmap.in .ftrace{animation:comet 5s linear .4s 1, traceout .8s var(--ease) 5.3s forwards}
.ftrace{opacity:1;transition:none}
@keyframes comet{from{opacity:1}to{stroke-dashoffset:-1;opacity:1}}
@keyframes traceout{to{opacity:0}}

/* the full border flickers to life, holds a breath, then fades for good */
.foutline{
  stroke:rgba(246,243,237,.85);stroke-width:2;stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(246,243,237,.55));
  opacity:0;
}
.flightmap.in .foutline{animation:outlineflash 2.6s var(--ease) .2s forwards}
@keyframes outlineflash{
  0%{opacity:0}6%{opacity:.9}12%{opacity:.1}20%{opacity:1}28%{opacity:.25}
  38%{opacity:.95}60%{opacity:.8}100%{opacity:0}
}

/* the country itself flickers in like the grid */
.fusaimg{opacity:0}
.flightmap.in .fusaimg{animation:pngflick 1.4s var(--ease) .15s forwards}
@keyframes pngflick{
  0%{opacity:0}14%{opacity:.14}24%{opacity:.03}40%{opacity:.18}55%{opacity:.08}100%{opacity:.16}
}

/* space moving inside the borders */
.sspace rect,.sspace circle{transform-box:fill-box;fill:rgba(236,231,223,.55)}
.sspace rect.ss{opacity:0;animation:syin var(--dur,5s) var(--ease-soft) var(--bd,0s) infinite}
.sspace rect.rev{animation-name:syang}
.sspace circle.st{opacity:0;animation:stwinkle var(--dur,12s) ease-in-out var(--bd,0s) infinite}
.fstate text{font-size:20px}
.ftxt text{font-size:24px}
.ftxt text.big{font-size:28px}
@media (prefers-reduced-motion:reduce){
  .starfield i{animation:none;opacity:.35}
  .freq.in .fgrid2,.flightmap.in .fgrid2{animation:none;opacity:1}
  .flightmap.in .foutline{animation:none;opacity:0}
  .fstage,.flightmap.in .fstage,.flightmap .fmeta,.flightmap.in .fmeta{transition:none;transform:none;opacity:1}
  .fusaimg,.flightmap.in .fusaimg{animation:none;opacity:.16}
  .flightmap.in .ftrace{animation:none;opacity:0}
  .sspace rect.ss,.sspace rect.rev,.sspace circle.st{animation:none;opacity:.3}
  .flightmap.in .ftrace{animation:none;stroke-dasharray:none;stroke-dashoffset:0;opacity:.5}
}