/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --paper:#FCFCFC;
  --paper-2:#F5F5F3;
  --surface:#F1F1EF;
  --surface-2:#EDEDEA;
  --ink:#08070E;
  --ink-2:#0C0B16;          /* dark cards, hint of CC purple */
  --ink-3:#131120;
  --muted:#6E6E77;
  --muted-2:#9A9AA2;
  --line:#E6E6E2;
  --dash:rgba(140,140,150,.30);
  --gold:#F4B41A;
  --purple:#1B154D;

  --on-dark:#FFFFFF;
  --on-dark-70:rgba(255,255,255,.70);
  --on-dark-55:rgba(255,255,255,.55);
  --on-dark-38:rgba(255,255,255,.38);
  --on-dark-line:rgba(255,255,255,.13);

  --f:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --maxw:1180px;
  --gut:clamp(18px,4vw,40px);
  --nav-h:60px;
  --r-lg:28px;
  --r-md:16px;
  --ease:cubic-bezier(.22,1,.36,1);

  /* hero film pacing. The clip is 4.0s, so 1200px of scroll is 300px per second
     of film. Raise this to slow the scrub down, lower it to speed it up. It is an
     absolute distance on purpose: a vh multiple would run at a different speed on
     every screen size. */
  --hero-scroll:1200px;
}

/* ============================================================
   BOOT SCREEN
   The hero film is scrubbed, so it has to be fully in memory before the
   hero means anything. This holds the page until it is.

   It is built to fail open. It renders only when the inline script added
   .booting, so a visitor without JS never meets it, and bootBail takes it
   off the screen on its own if the script stops before finishing. A loader
   that can get stuck is worse than a slow hero.
   ============================================================ */
.boot{display:none}
/* the scroll lock goes on body, never on html. With html at overflow:hidden,
   body's overflow-x stops propagating to the viewport and body becomes a
   clipping box, and WebKit keeps it one after .booting is gone. Every real
   scroll (finger, wheel, trackpad) then skips the hero's sticky pin, so the
   stage slides off and leaves a screen of black hero behind it. Scripted
   scrolls still pinned, which hid it. Safari on iPhone and Mac, 26 Sep to
   7 Oct 2026. */
html.booting:not(.boot-done) body{overflow:hidden}
html.booting .boot{
  display:flex;position:fixed;inset:0;z-index:999;align-items:center;justify-content:center;
  background:#050409;color:#fff;
  animation:bootBail .01s linear 9s forwards;
}
html.booting.boot-done .boot{
  animation:none;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .6s var(--ease),visibility .6s;
}
@keyframes bootBail{to{opacity:0;visibility:hidden;pointer-events:none}}
/* the delay is the point: a cached load finishes before this ever appears,
   so a returning visitor sees no loader at all */
.boot-in{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px;
  animation:bootIn .45s var(--ease) .25s both}
@keyframes bootIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.boot-mark{width:34px;height:34px;border-radius:8px}
.boot-word{margin:14px 0 0;font-size:14px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.82)}
.boot-rail{margin-top:26px;width:min(240px,62vw);height:2px;border-radius:2px;
  background:rgba(255,255,255,.14);overflow:hidden}
.boot-rail i{display:block;height:100%;width:0;border-radius:2px;background:var(--gold);
  box-shadow:0 0 14px rgba(244,180,26,.75);transition:width .35s var(--ease)}
.boot-sub{margin:16px 0 0;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.40)}
@media(prefers-reduced-motion:reduce){
  .boot-in{animation:bootIn .01s linear both}
  @keyframes bootIn{to{opacity:1;transform:none}}
  .boot-rail i{transition:none}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f);font-weight:500;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* clip where supported: unlike hidden it never makes body a scroll
     container, so the hero's sticky pin holds whatever html is doing */
  overflow-x:hidden;overflow-x:clip;
}
body.locked{overflow:hidden}
a,button{-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--gold);color:#000}

.wrap{max-width:var(--maxw);margin:0 auto;position:relative;z-index:2;padding:0 var(--gut);
  padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}

/* ============================================================
   DASHED RAILS  (the framing device)
   ============================================================ */
.rails{position:fixed;inset:0;z-index:1;pointer-events:none;display:flex;justify-content:center}
.rails span{
  width:min(var(--maxw),100%);height:100%;
  border-left:1px dashed var(--dash);
  border-right:1px dashed var(--dash);
}
@media(max-width:720px){.rails{display:none}}

/* ============================================================
   TYPE
   ============================================================ */
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.06;text-wrap:balance}
p{margin:0}
.eyebrow{font-size:clamp(14px,1.3vw,16px);font-weight:500;color:var(--muted-2);letter-spacing:-.01em;margin-bottom:14px}
.h-xl{font-size:clamp(36px,5.6vw,66px)}
.h-lg{font-size:clamp(32px,4.6vw,54px)}
.h-md{font-size:clamp(26px,3.1vw,38px);letter-spacing:-.03em}
.h-sm{font-size:clamp(20px,2.1vw,26px);letter-spacing:-.025em}
.lede{font-size:clamp(16px,1.35vw,19px);font-weight:500;line-height:1.52;color:var(--muted);letter-spacing:-.011em;text-wrap:pretty}
.lede-d{color:var(--on-dark-55)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  height:44px;padding:0 10px 0 20px;border-radius:999px;
  font-size:15px;font-weight:600;letter-spacing:-.012em;white-space:nowrap;
  transition:transform .35s var(--ease),background .25s ease,color .25s ease,opacity .25s ease;
}
.btn .chev{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;
  transition:transform .35s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:hover .chev{transform:translateX(3px)}
.btn svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#221F36}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:#F0F0EE}
.btn-ghost{background:var(--surface);color:var(--ink)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-ghost-d{background:rgba(255,255,255,.10);color:#fff;border:1px solid var(--on-dark-line)}
.btn-ghost-d:hover{background:rgba(255,255,255,.17)}
.btn-text{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 14px;font-size:15px;font-weight:600;letter-spacing:-.012em;opacity:.72;transition:opacity .25s ease}
.btn-text:hover{opacity:1}
.btn-play{padding-left:14px}
.btn-play .ico{width:20px;height:20px;flex:none;display:grid;place-items:center}
.btn-play .ico svg{width:17px;height:17px;fill:currentColor;stroke:none}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:16px;top:calc(16px + env(safe-area-inset-top,0px));left:0;right:0;z-index:60;
  padding:0 var(--gut);pointer-events:none;
  padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.nav-pill{
  max-width:var(--maxw);margin:0 auto;pointer-events:auto;
  height:var(--nav-h);border-radius:999px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 10px 0 22px;
  background:transparent;box-shadow:0 0 0 0 rgba(0,0,0,0);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),color .4s var(--ease),backdrop-filter .4s var(--ease);
  color:#fff;
}
.nav.solid .nav-pill{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 1px 2px rgba(10,9,18,.06),0 10px 30px rgba(10,9,18,.08);
  color:var(--ink);
}
.brand{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:700;letter-spacing:-.035em;flex:none}
.brand img{width:23px;height:23px;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:500;letter-spacing:-.012em}
.nav-links a{opacity:.85;transition:opacity .2s ease}
.nav-links a:hover{opacity:1}
.nav .btn{height:40px;font-size:14.5px}
.nav.solid .btn-dark{background:var(--ink);color:#fff}
.nav:not(.solid) .btn-dark{background:#fff;color:var(--ink)}
.nav:not(.solid) .btn-dark:hover{background:#EDEDEA}

/* services dropdown */
.drop{position:relative}
.drop-t{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.drop-t svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.drop:hover .drop-t svg{transform:rotate(180deg)}
.drop-menu{
  position:absolute;top:calc(100% + 16px);left:50%;transform:translate(-50%,8px);
  min-width:240px;padding:8px;border-radius:18px;background:#fff;color:var(--ink);
  box-shadow:0 2px 6px rgba(10,9,18,.07),0 18px 44px rgba(10,9,18,.13);
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.drop:hover .drop-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop-menu::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:18px}
.drop-menu a{display:block;padding:10px 14px;border-radius:12px;font-size:14.5px;font-weight:500;opacity:1;transition:background .2s ease}
.drop-menu a:hover{background:var(--surface)}
.drop-menu a span{display:block;font-size:12.5px;color:var(--muted-2);font-weight:400;margin-top:1px}

/* burger + mobile sheet */
.burger{display:none;width:40px;height:40px;border-radius:50%;place-items:center}
.burger i{display:block;width:17px;height:1.7px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease),opacity .2s ease}
.burger i+i{margin-top:5px}
.nav.open .burger i:nth-child(1){transform:translateY(3.4px) rotate(45deg)}
.nav.open .burger i:nth-child(2){opacity:0}
.nav.open .burger i:nth-child(3){transform:translateY(-3.4px) rotate(-45deg)}
.sheet{
  position:fixed;inset:0;z-index:55;background:var(--paper);
  padding:calc(var(--nav-h) + 48px) var(--gut) 40px;
  padding-top:calc(var(--nav-h) + 48px + env(safe-area-inset-top,0px));
  padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));
  padding-left:max(var(--gut),env(safe-area-inset-left,0px));
  padding-right:max(var(--gut),env(safe-area-inset-right,0px));
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
.sheet.on{opacity:1;visibility:visible;transform:none}
.sheet a{font-size:28px;font-weight:700;letter-spacing:-.035em;padding:14px 0;border-bottom:1px solid var(--line)}
.sheet .btn{margin-top:28px;align-self:flex-start;height:50px;font-size:16px}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:calc(100vh + var(--hero-scroll));height:calc(100svh + var(--hero-scroll));background:#050409;color:#fff}
.hero-stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:calc(var(--nav-h) + 40px);
}

/* --- film --- */
.film{position:absolute;inset:0;z-index:0;overflow:hidden}
/* the poster stands in for the film until the clip is in memory. It is 36KB
   against the film's megabytes, so it paints almost at once and the hero is
   never a black rectangle, even if everything after this fails. */
.film-poster{position:absolute;inset:0;background:#050409 url(/hero-poster.webp) center/cover no-repeat;
  opacity:1;transition:opacity .8s var(--ease)}
.film.ready .film-poster{opacity:0}
.film-fallback{position:absolute;inset:0;
  background:
    radial-gradient(110% 85% at 70% 30%,rgba(244,180,26,.15) 0%,rgba(244,180,26,.05) 30%,transparent 62%),
    radial-gradient(95% 75% at 16% 84%,rgba(27,21,77,.55) 0%,transparent 72%),
    #050409;
}
.film video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s var(--ease);will-change:transform,opacity;
}
.film.ready video{opacity:1}
.film-grade{position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(4,3,9,.62) 0%,rgba(4,3,9,.20) 34%,rgba(0,0,0,0) 62%,rgba(4,3,9,.34) 100%),
    radial-gradient(at 62% 36%,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(4,3,9,.60) 100%),
    linear-gradient(180deg,rgba(4,3,9,.62) 0%,rgba(4,3,9,.16) 18%,rgba(4,3,9,.42) 46%,rgba(4,3,9,.80) 72%,rgba(4,3,9,.96) 100%);
}
.film-rail{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.10);z-index:4}
.film-rail i{display:block;height:100%;width:0;background:var(--gold);box-shadow:0 0 14px rgba(244,180,26,.7)}
.film-tools{position:absolute;right:var(--gut);bottom:clamp(96px,14vh,150px);z-index:4;display:flex;gap:8px}
.film-tools button{
  height:38px;padding:0 15px;border-radius:999px;font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  background:rgba(255,255,255,.10);color:#fff;border:1px solid var(--on-dark-line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:inline-flex;align-items:center;gap:7px;transition:background .25s ease,transform .3s var(--ease);
}
.film-tools button:hover{background:rgba(255,255,255,.19);transform:translateY(-2px)}
.film-tools svg{width:13px;height:13px;fill:currentColor}
@media(max-width:999px){.film-tools{display:none}}

/* --- scroll guide: the hero only makes sense once you scroll, so it says so,
   pulses until the first scroll, and plays the film for you if clicked --- */
.cue{
  position:absolute;left:50%;bottom:clamp(88px,12vh,120px);transform:translateX(-50%);z-index:5;
  display:inline-flex;align-items:center;gap:12px;height:50px;padding:0 22px 0 15px;border-radius:999px;
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:#fff;white-space:nowrap;cursor:pointer;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(4,3,9,.35);
  animation:cuepulse 2.6s ease-out 1.4s infinite;
  transition:background .25s ease,opacity .3s ease;
}
.cue:hover{background:rgba(255,255,255,.21)}
.cue:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.cue .mouse{position:relative;width:20px;height:31px;border-radius:11px;border:2px solid rgba(255,255,255,.9);flex:none}
.cue .mouse i{position:absolute;left:50%;top:6px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:var(--gold);animation:wheel 1.6s var(--ease) infinite}
.cue .arrow{display:none;width:14px;height:14px;fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;animation:bob 1.5s ease-in-out infinite}
.cue-m{display:none}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{transform:translateY(0);opacity:0}}
@keyframes bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@keyframes cuepulse{
  0%{box-shadow:0 10px 30px rgba(4,3,9,.35),0 0 0 0 rgba(244,180,26,.55)}
  70%,100%{box-shadow:0 10px 30px rgba(4,3,9,.35),0 0 0 18px rgba(244,180,26,0)}
}
/* phones: no mouse, no film to scrub, so a plain "Scroll" with a bouncing arrow */
@media(max-width:999px){
  .cue{height:42px;padding:0 16px 0 14px;gap:8px;font-size:13.5px;bottom:94px}   /* just above the marquee */
  .cue .mouse,.cue-d{display:none}
  .cue .arrow,.cue-m{display:block}
}

/* --- hero layout --- */
.hero-in{
  display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;
  gap:clamp(20px,3vw,30px);padding-bottom:clamp(34px,5vh,60px);
  text-shadow:0 1px 26px rgba(4,3,9,.55);position:relative;z-index:3;
}
.hero h1{max-width:15ch}
/* the supporting line is a word sweep: as the film scrubs, a gold lens runs
   through the sentence, each word swells as it passes and stays gold behind it.
   No panel; a dark halo on the letters keeps them readable on bright frames */
.hero-aside{will-change:transform,opacity}
.hero-aside .lede{max-width:52ch}
.sweep{
  font-size:clamp(20px,1.85vw,26px);font-weight:600;letter-spacing:-.022em;line-height:1.34;
  color:rgba(255,255,255,.94);
  text-shadow:0 1px 2px rgba(4,3,9,.55),0 2px 22px rgba(4,3,9,.62);
}
.sweep .w{display:inline-block;transform-origin:50% 88%;will-change:transform,color}
.hero-cta{display:flex;align-items:center;gap:6px;margin-top:30px;flex-wrap:wrap;justify-content:center}

/* staged entrance: the page is alive before anyone scrolls */
.hero-lead h1,.hero-cta,.hero-aside{
  opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.hero.lit .hero-lead h1{opacity:1;transform:none;transition-delay:.06s}
.hero.lit .hero-cta{opacity:1;transform:none;transition-delay:.30s}
.hero.lit .hero-aside{opacity:1;transform:none;transition-delay:.18s}

/* elements the scroll choreography drives get their transition removed */
.hero.moved .hero-lead h1,.hero.moved .hero-cta,.hero.moved .hero-aside{transition:none}

@media(min-width:1000px){
  .hero-in{
    grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
    align-items:end;justify-items:stretch;text-align:left;
    gap:clamp(36px,5.5vw,84px);padding-bottom:clamp(96px,13vh,150px);
  }
  .hero h1{max-width:none;font-size:clamp(46px,5.35vw,72px)}
  .hero-cta{justify-content:flex-start;margin-top:36px}
  .hero-aside .lede{max-width:34ch}
}
/* phones pin and scrub like desktop, over a shorter run: a thumb covers ground
   faster than a wheel, so the same 1200px would feel like a wall. The copy
   holds and leaves with the stage, and the film runs on through the exit
   (site.js), so a phone is never parked on an emptied, darkened screen */
@media(max-width:999px){
  :root{--hero-scroll:560px}
  .hero-aside{justify-self:center}
  .hero-in{padding-bottom:84px}   /* room for the scroll guide above the marquee */
}
@media(prefers-reduced-motion:reduce){
  .hero{height:auto}
  .hero-stage{position:static;height:auto;min-height:100vh;min-height:100svh}
  .cue,.cue .mouse i,.cue .arrow{animation:none}
  .hero-lead h1,.hero-cta,.hero-aside{opacity:1;transform:none}
}

/* marquee */
.marq{position:relative;z-index:3;overflow:hidden;padding:26px 0 30px;padding-bottom:calc(30px + env(safe-area-inset-bottom,0px));-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marq-t{display:flex;width:max-content;animation:slide 42s linear infinite}
.marq-t>div{display:flex;align-items:center;gap:clamp(40px,5.2vw,72px);padding-right:clamp(40px,5.2vw,72px)}
.marq span{
  font-size:clamp(15px,1.5vw,19px);font-weight:700;letter-spacing:-.02em;white-space:nowrap;
  color:rgba(255,255,255,.44);transition:color .3s ease;
}
.marq:hover .marq-t{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============================================================
   LOGO WALL
   ============================================================ */
.wall{padding:0 0 clamp(80px,9vw,130px)}
.wall-top{text-align:center;padding:clamp(56px,7vw,86px) 0 clamp(34px,4vw,48px);font-size:clamp(16px,1.6vw,19px);font-weight:500;color:var(--muted);letter-spacing:-.015em}
.wall-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px dashed var(--dash);border-left:1px dashed var(--dash)}
.cell{
  position:relative;min-height:clamp(128px,13vw,178px);
  border-right:1px dashed var(--dash);border-bottom:1px dashed var(--dash);
  display:grid;place-items:center;padding:24px 14px 36px;text-align:center;
}
.cell b{
  font-size:clamp(14px,1.55vw,21px);font-weight:700;letter-spacing:-.028em;color:#14131C;
  opacity:.82;transition:opacity .3s ease,color .3s ease;line-height:1.15;
}
.cell:hover b{opacity:1}
.cell .tag{
  position:absolute;left:0;right:0;bottom:16px;font-size:12.5px;font-weight:500;
  color:var(--muted-2);letter-spacing:-.008em;
}
.cell.lt b{letter-spacing:.14em;font-weight:600;text-transform:uppercase;font-size:clamp(12px,1.15vw,14.5px)}
.cell.bk b{font-weight:800;letter-spacing:-.045em}
@media(max-width:560px){.wall-grid{grid-template-columns:repeat(2,1fr)}.cell{min-height:112px}.cell .tag{bottom:12px;font-size:12px}}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.sec{padding:clamp(70px,8vw,116px) 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:clamp(38px,4.4vw,58px)}
.sec-head .btn{flex:none;margin-bottom:6px}
@media(max-width:760px){.sec-head{flex-direction:column;align-items:flex-start;gap:22px}.sec-head .btn{margin-bottom:0}}

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.cards{display:grid;gap:clamp(14px,1.6vw,22px)}
.cards-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px)}
@media(max-width:820px){.cards-2{grid-template-columns:1fr}}

.card{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--ink-2);color:#fff;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-start;
  min-height:clamp(420px,44vw,560px);
  padding:clamp(30px,3.4vw,50px);
}
.card-media{position:absolute;inset:0;z-index:-2}
.card-media img{width:100%;height:100%;object-fit:cover;opacity:.46;transform:scale(1.03);transition:transform 1.1s var(--ease),opacity .6s ease}
.card:hover .card-media img{transform:scale(1.07);opacity:.54}
.card-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(8,7,14,.90) 0%,rgba(8,7,14,.66) 34%,rgba(8,7,14,.82) 72%,rgba(8,7,14,.96) 100%),
    linear-gradient(90deg,rgba(8,7,14,.72) 0%,rgba(8,7,14,.30) 44%,rgba(8,7,14,0) 74%);
}
.card-lead{max-width:34ch}
.card h3{margin-bottom:18px}
.card .lede{color:var(--on-dark-55);max-width:44ch}
.card-foot{margin-top:auto;padding-top:38px}
.metric{display:flex;align-items:baseline;justify-content:space-between;gap:20px;font-size:14.5px;letter-spacing:-.012em}
.metric .lbl{color:var(--on-dark-55);font-weight:500}
.metric .val{font-weight:700;font-size:17px;letter-spacing:-.025em}
.bar{margin-top:12px;height:4px;border-radius:99px;background:rgba(255,255,255,.13);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--gold);transition:width 1.5s var(--ease)}
.card .btn{margin-top:26px;align-self:flex-start}
.cards-2 .card{min-height:clamp(400px,40vw,500px)}
.cards-2 .card h3{font-size:clamp(23px,2.4vw,30px)}

/* ============================================================
   STATS BAND
   ============================================================ */
.band{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:clamp(80px,10vw,150px) 0}
.band-bg{position:absolute;inset:0;z-index:0}
.band-bg img{width:100%;height:100%;object-fit:cover;opacity:.42;transform:scale(1.04)}
.band-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,7,14,.94) 0%,rgba(8,7,14,.74) 45%,rgba(8,7,14,.97) 100%)}
.band h2{text-align:center;margin-bottom:clamp(54px,6.5vw,96px)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(40px,5vw,64px);text-align:center}
.stat b{display:block;font-size:clamp(42px,6.4vw,78px);font-weight:700;letter-spacing:-.045em;line-height:1}
.stat p{margin-top:16px;font-size:clamp(14.5px,1.25vw,17px);color:var(--on-dark-55);letter-spacing:-.012em;max-width:22ch;margin-left:auto;margin-right:auto;line-height:1.45}
@media(max-width:760px){.stats{grid-template-columns:1fr;gap:48px}}

/* ============================================================
   CASE STUDIES
   ============================================================ */
.case{padding-bottom:clamp(60px,7vw,100px)}
.case+.case{padding-top:clamp(30px,4vw,60px)}
.case .eyebrow{margin-bottom:16px}
.case h3{max-width:20ch}
.case .lede{max-width:62ch;margin-top:22px}
.case .btn{margin-top:30px}
.kpis{
  display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(40px,4.6vw,62px);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#FAFAF9;
}
.kpi{padding:20px clamp(18px,2.2vw,26px);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.kpi:nth-child(2n){border-right:0}
.kpi:nth-child(n+3){border-bottom:0}
.kpi span{display:block;font-size:14.5px;color:var(--muted-2);font-weight:500;letter-spacing:-.01em}
.kpi b{display:block;margin-top:4px;font-size:clamp(16px,1.5vw,18px);font-weight:700;letter-spacing:-.025em}
@media(max-width:560px){.kpis{grid-template-columns:1fr}.kpi{border-right:0}.kpi:nth-child(3){border-bottom:1px solid var(--line)}}

/* media frame */
.frame{
  margin-top:clamp(28px,3.4vw,44px);background:var(--surface-2);border-radius:var(--r-lg);
  padding:clamp(22px,3.6vw,58px);
}
.frame-main{position:relative;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 2px 6px rgba(10,9,18,.06),0 24px 60px rgba(10,9,18,.14);aspect-ratio:16/9}
.frame-main img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.frame-main:hover img{transform:scale(1.025)}
.frame-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(10px,1.4vw,18px);margin-top:clamp(12px,1.6vw,20px)}
.thumb{position:relative;border-radius:11px;overflow:hidden;background:#fff;aspect-ratio:16/9;box-shadow:0 1px 3px rgba(10,9,18,.06),0 10px 24px rgba(10,9,18,.08)}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.thumb:hover img{transform:scale(1.045)}
.play{
  position:absolute;inset:0;display:grid;place-items:center;cursor:pointer;
  background:linear-gradient(180deg,rgba(8,7,14,.10),rgba(8,7,14,.34));
  transition:background .3s ease;
}
.play:hover{background:linear-gradient(180deg,rgba(8,7,14,.05),rgba(8,7,14,.24))}
.play i{
  width:clamp(44px,4.6vw,64px);height:clamp(44px,4.6vw,64px);border-radius:50%;
  background:rgba(255,255,255,.94);display:grid;place-items:center;
  box-shadow:0 8px 28px rgba(0,0,0,.28);transition:transform .35s var(--ease);
}
.play:hover i{transform:scale(1.08)}
.play svg{width:40%;height:40%;fill:var(--ink);margin-left:8%}
.thumb .play i{width:clamp(30px,3vw,42px);height:clamp(30px,3vw,42px)}
.frame-cap{margin-top:16px;font-size:13.5px;color:var(--muted-2);letter-spacing:-.008em;text-align:center}

/* ============================================================
   REEL
   ============================================================ */
.reel h2{margin-bottom:26px}
.reel .lede{max-width:58ch}
.reel .btn{margin-top:30px}

/* ============================================================
   FAQ
   ============================================================ */
.faq h2{text-align:center;margin-bottom:clamp(38px,4.4vw,56px)}
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.q{background:var(--surface);border-radius:14px;overflow:hidden;transition:background .3s ease}
.q:hover{background:var(--surface-2)}
.q-t{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px clamp(18px,2.2vw,26px);text-align:left;font-size:clamp(15px,1.35vw,16.5px);font-weight:500;letter-spacing:-.015em}
.q-t .ic{flex:none;width:18px;height:18px;position:relative;opacity:.42;transition:transform .4s var(--ease),opacity .3s ease}
.q-t .ic::before,.q-t .ic::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px}
.q-t .ic::before{width:13px;height:1.7px;transform:translate(-50%,-50%)}
.q-t .ic::after{width:1.7px;height:13px;transform:translate(-50%,-50%);transition:transform .4s var(--ease),opacity .3s ease}
.q.on .q-t .ic{opacity:.8;transform:rotate(90deg)}
.q.on .q-t .ic::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}
.q-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.q.on .q-b{grid-template-rows:1fr}
.q-b>div{overflow:hidden}
.q-b p{padding:0 clamp(18px,2.2vw,26px) 22px;font-size:15.5px;font-weight:400;line-height:1.6;color:var(--muted);max-width:64ch;letter-spacing:-.008em}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-bg img{opacity:.50;filter:blur(7px) saturate(1.15);transform:scale(1.10)}
.cta-bg::after{background:radial-gradient(ellipse at 50% 50%,rgba(8,7,14,.78) 0%,rgba(8,7,14,.90) 55%,rgba(8,7,14,.98) 100%)}
.cta{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:clamp(90px,11vw,160px) 0;text-align:center}
.cta .lede{max-width:46ch;margin:22px auto 0;color:var(--on-dark-55)}
.cta .btn{margin-top:34px}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{position:relative;overflow:hidden;background:#07060D;color:#fff;padding:clamp(70px,8vw,110px) 0 0}
.foot .brand{font-size:clamp(22px,2.4vw,28px)}
.foot .brand img{width:clamp(26px,2.6vw,32px);height:clamp(26px,2.6vw,32px)}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-meta{margin-top:26px;display:flex;flex-direction:column;gap:9px;font-size:15.5px;color:var(--on-dark-55);letter-spacing:-.012em}
.foot-meta a:hover{color:#fff}
.socials{display:flex;gap:8px;margin-top:26px}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid var(--on-dark-line);display:grid;place-items:center;transition:background .25s ease,transform .3s var(--ease)}
.socials a:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.socials svg{width:15px;height:15px;fill:#fff;opacity:.82}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:clamp(56px,6.5vw,90px);position:relative;z-index:2}
.foot-cols h2{font-size:16px;font-weight:600;letter-spacing:-.02em;margin-bottom:22px}
.foot-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.foot-cols a{font-size:15.5px;color:var(--on-dark-55);letter-spacing:-.012em;transition:color .25s ease}
.foot-cols a:hover{color:#fff}
.ghost{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  font-size:clamp(90px,17vw,232px);font-weight:800;letter-spacing:-.06em;line-height:.78;
  color:rgba(255,255,255,.034);white-space:nowrap;pointer-events:none;z-index:1;
}
.foot-bot{position:relative;z-index:2;margin-top:clamp(90px,13vw,190px);padding:26px 0 28px;text-align:center;font-size:14px;color:var(--on-dark-38);letter-spacing:-.01em}
@media(max-width:640px){.foot-cols{grid-template-columns:1fr 1fr;gap:30px}}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb{position:fixed;inset:0;z-index:90;background:rgba(6,5,11,.90);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;padding:var(--gut);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.lb.on{opacity:1;visibility:visible}
.lb-in{width:min(1080px,100%);aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 40px 120px rgba(0,0,0,.6);transform:scale(.97);transition:transform .4s var(--ease)}
.lb.on .lb-in{transform:none}
.lb iframe{width:100%;height:100%;border:0;display:block}
.lb-x{position:absolute;top:22px;right:24px;top:calc(22px + env(safe-area-inset-top,0px));right:calc(24px + env(safe-area-inset-right,0px));width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;transition:background .25s ease}
.lb-x:hover{background:rgba(255,255,255,.22)}
.lb-x svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}

/* ============================================================
   REVEAL
   ============================================================ */
.rv{opacity:0;transform:translateY(20px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}

@media(max-width:940px){
  .nav-links{display:none}
  .nav .btn-dark{display:none}
  .burger{display:grid}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .rv{opacity:1;transform:none}
}

/* ============================================================
   SERVICE PAGES
   ============================================================ */
.phero{
  position:relative;overflow:hidden;background:#050409;color:#fff;
  padding:calc(var(--nav-h) + clamp(96px,15vh,170px)) 0 clamp(70px,10vh,120px);
}
.phero-bg{position:absolute;inset:0;z-index:0}
.phero-bg img{width:100%;height:100%;object-fit:cover;opacity:.40;filter:blur(5px) saturate(1.1);transform:scale(1.10)}
.phero-bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(4,3,9,.90) 0%,rgba(4,3,9,.62) 42%,rgba(4,3,9,.48) 72%,rgba(4,3,9,.70) 100%),
    linear-gradient(180deg,rgba(4,3,9,.80) 0%,rgba(4,3,9,.50) 38%,rgba(4,3,9,.94) 100%);
}
.phero .eyebrow{color:var(--on-dark-38)}
.phero h1{max-width:16ch}
.phero .lede{max-width:52ch;margin-top:24px;color:var(--on-dark-55)}
.phero .btn{margin-top:34px}

/* work grid */
.workgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,20px)}
.workgrid.two{grid-template-columns:repeat(2,1fr)}
/* vertical cards for shorts and reels */
.workgrid.shorts{grid-template-columns:repeat(4,1fr)}
.workgrid.shorts .wk-media{aspect-ratio:9/16}
.workgrid.shorts .wk-body{padding:14px 16px 16px}
.workgrid.shorts .wk-body b{font-size:14.5px;line-height:1.3}
.workgrid.shorts .wk-body span{font-size:13px}
.workgrid.shorts .play i{width:clamp(34px,3.2vw,46px);height:clamp(34px,3.2vw,46px)}
@media(max-width:900px){.workgrid.shorts{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.workgrid.shorts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.workgrid,.workgrid.two{grid-template-columns:repeat(2,1fr)}
/* vertical cards for shorts and reels */
.workgrid.shorts{grid-template-columns:repeat(4,1fr)}
.workgrid.shorts .wk-media{aspect-ratio:9/16}
.workgrid.shorts .wk-body{padding:14px 16px 16px}
.workgrid.shorts .wk-body b{font-size:14.5px;line-height:1.3}
.workgrid.shorts .play i{width:clamp(34px,3.2vw,46px);height:clamp(34px,3.2vw,46px)}
@media(max-width:900px){.workgrid.shorts{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.workgrid.shorts{grid-template-columns:repeat(2,1fr)}}}
@media(max-width:560px){.workgrid,.workgrid.two{grid-template-columns:1fr}}
.wk{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--surface-2);
  box-shadow:0 1px 3px rgba(10,9,18,.06),0 12px 30px rgba(10,9,18,.08)}
.wk-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0B0A16}
.wk-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.wk:hover .wk-media img{transform:scale(1.045)}
.wk-body{padding:18px clamp(16px,1.8vw,22px) 20px;background:#fff}
.wk-body b{display:block;font-size:16px;font-weight:700;letter-spacing:-.025em}
.wk-body span{display:block;margin-top:4px;font-size:14px;color:var(--muted-2);letter-spacing:-.008em}

/* proof strip */
.proof{background:var(--surface);border-radius:var(--r-lg);padding:clamp(28px,4vw,52px)}
.proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(24px,3vw,40px);margin-top:clamp(24px,3vw,36px)}
@media(max-width:760px){.proof-grid{grid-template-columns:1fr;gap:26px}}
.proof-grid div b{display:block;font-size:clamp(28px,3.4vw,42px);font-weight:700;letter-spacing:-.04em;line-height:1}
.proof-grid div span{display:block;margin-top:10px;font-size:15px;color:var(--muted);letter-spacing:-.01em;max-width:26ch}
.proof .note{margin-top:clamp(24px,3vw,34px);font-size:14.5px;color:var(--muted-2);letter-spacing:-.008em}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px dashed var(--dash)}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{padding:clamp(26px,3.2vw,40px) clamp(18px,2.2vw,30px) clamp(34px,4vw,54px);
  border-right:1px dashed var(--dash);border-bottom:1px dashed var(--dash)}
.step:last-child{border-right:0}
@media(max-width:900px){.step:nth-child(2n){border-right:0}}
@media(max-width:560px){.step{border-right:0}}
.step em{display:block;font-style:normal;font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}
.step b{display:block;margin-top:16px;font-size:clamp(19px,2vw,23px);font-weight:700;letter-spacing:-.03em}
.step p{margin-top:12px;font-size:15.5px;font-weight:400;line-height:1.6;color:var(--muted);letter-spacing:-.008em}

/* service cross-links */
.xlinks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.5vw,20px)}
@media(max-width:760px){.xlinks{grid-template-columns:1fr}}
.xlink{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(24px,3vw,34px);border-radius:var(--r-md);background:var(--surface);
  transition:background .25s ease,transform .35s var(--ease)}
.xlink:hover{background:var(--surface-2);transform:translateY(-2px)}
.xlink b{display:block;font-size:clamp(19px,2vw,23px);font-weight:700;letter-spacing:-.03em}
.xlink span{display:block;margin-top:5px;font-size:15px;color:var(--muted);letter-spacing:-.01em}
.xlink i{flex:none;width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center}
.xlink i svg{width:12px;height:12px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}


/* ============================================================
   CASE CARDS + TESTIMONIAL
   ============================================================ */
a.wk{display:block;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
a.wk:hover{transform:translateY(-3px);box-shadow:0 2px 6px rgba(10,9,18,.07),0 22px 48px rgba(10,9,18,.13)}
.wk-body .wk-tag{
  margin-top:0;font-size:12px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold);
}
.wk-body .wk-tag + b{margin-top:11px;font-size:clamp(17px,1.55vw,20px);line-height:1.22;letter-spacing:-.028em}
.wk-body .wk-go{
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  color:var(--ink);font-weight:600;font-size:14.5px;letter-spacing:-.012em;
}
.wk-body .wk-go i{
  width:24px;height:24px;border-radius:50%;background:var(--surface);
  display:grid;place-items:center;flex:none;
  transition:transform .35s var(--ease),background .25s ease;
}
.wk-body .wk-go i svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
a.wk:hover .wk-go i{transform:translateX(3px);background:var(--gold)}

.testi-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,22px);align-items:stretch}
@media(max-width:900px){.testi-two{grid-template-columns:1fr}}
.testi-one{display:block}

.tcard{
  background:var(--surface);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;
}
.tcard .frame-main{
  margin-bottom:clamp(22px,2.6vw,32px);
  box-shadow:0 2px 6px rgba(10,9,18,.07),0 18px 40px rgba(10,9,18,.12);
}
.tcard blockquote{
  margin:0;font-size:clamp(19px,1.95vw,25px);font-weight:600;
  letter-spacing:-.03em;line-height:1.32;text-wrap:balance;
}
.tcard.tq blockquote{font-size:clamp(22px,2.6vw,33px);line-height:1.26}
.tcard.tq.wide{text-align:center;padding:clamp(34px,4.6vw,64px) clamp(24px,5vw,90px)}
.tcard.tq.wide blockquote{font-size:clamp(25px,3.4vw,44px);letter-spacing:-.035em}
.tcard.tq.wide .tmark{margin-left:auto;margin-right:auto}
.tcard.tq.wide .testi-by{align-items:center}
.tcard.tq.wide .testi-by a{align-self:center}

.tmark{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:#fff;margin-bottom:clamp(18px,2.2vw,26px);flex:none;align-self:flex-start;
  box-shadow:0 1px 3px rgba(10,9,18,.08);
}
.tmark svg{width:19px;height:19px;fill:#0A66C2;display:block}

.tcard .testi-by{
  margin-top:auto;padding-top:clamp(20px,2.4vw,28px);
  display:flex;flex-direction:column;gap:3px;
}
.by-row{display:flex;align-items:center;gap:13px}
.by-row > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.by-pic{
  width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--surface-2);box-shadow:0 1px 3px rgba(10,9,18,.14),0 0 0 3px #fff;
}
.tcard.tq.wide .by-row{justify-content:center}
.tcard.tq.wide .by-row > div{align-items:center}
.testi-by b{font-size:16px;font-weight:700;letter-spacing:-.022em}
.testi-by span{font-size:14.5px;color:var(--muted-2);letter-spacing:-.008em}
.testi-by a{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;align-self:flex-start;
  font-size:14.5px;font-weight:600;letter-spacing:-.012em;color:var(--ink);
}
.testi-by a .chev{
  width:22px;height:22px;border-radius:50%;background:#fff;display:grid;place-items:center;
  transition:transform .3s var(--ease),background .25s ease;
}
.testi-by a .chev svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.testi-by a:hover .chev{transform:translateX(3px);background:var(--gold)}

.phero .eyebrow a{color:var(--on-dark-55);transition:color .2s ease}
.phero .eyebrow a:hover{color:#fff}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;font-weight:500;letter-spacing:-.01em;margin-bottom:18px;color:var(--on-dark-55)}
.crumbs a{color:var(--on-dark-55);transition:color .2s ease}
.crumbs a:hover{color:#fff}
.crumbs i{font-style:normal;opacity:.6}
.crumbs [aria-current]{color:rgba(255,255,255,.86)}


/* ============================================================
   NAV DROPDOWN GROUPS + OFFER GRID + CHIPS
   ============================================================ */
.drop-menu.wide{min-width:520px;display:grid;grid-template-columns:1.25fr .95fr;gap:6px;padding:14px}
.drop-group{
  margin:4px 0 8px;padding:0 14px;font-size:11px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2);
}
.drop-col + .drop-col{border-left:1px solid var(--line);padding-left:8px}

.steps.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.steps.three{grid-template-columns:1fr}.steps.three .step{border-right:0}}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips span{
  padding:7px 13px;border-radius:999px;font-size:13px;font-weight:500;letter-spacing:-.01em;
  background:rgba(255,255,255,.09);border:1px solid var(--on-dark-line);color:var(--on-dark-70);
}

/* ============================================================
   ROCKET CURSOR
   ============================================================ */
html.has-rocket,
html.has-rocket *{cursor:none !important}
.rocket{
  position:fixed;left:0;top:0;z-index:120;pointer-events:none;
  width:26px;height:34px;margin:-17px 0 0 -13px;
  opacity:0;transition:opacity .25s ease;will-change:transform;
}
.rocket.on{opacity:1}
.rocket-b{display:block;width:100%;height:100%;transform-origin:50% 50%;
  transition:transform .22s var(--ease)}
.rocket.hot .rocket-b{transform:scale(1.28)}
.rocket.fire .rocket-b{transform:scale(.86)}
.rocket svg{display:block;width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 2px 7px rgba(4,3,9,.4))}
.rocket .body{fill:var(--gold);stroke:#1B154D;stroke-width:1.4;stroke-linejoin:round}
.rocket .fin{fill:#1B154D}
.rocket .port{fill:#FFF;stroke:#1B154D;stroke-width:1.1}
.rocket .flame{fill:#FFF;opacity:0;transform-origin:50% 78%;transform:scaleY(.4)}
.rocket.thrust .flame{opacity:.95;transform:scaleY(1);transition:transform .12s ease,opacity .12s ease}

/* ring that appears over anything clickable */
.rocket-ring{
  position:fixed;left:0;top:0;z-index:119;pointer-events:none;
  width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  border:1.5px solid rgba(244,180,26,.75);
  opacity:0;transform:scale(.5);will-change:transform;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.rocket-ring.on{opacity:1;transform:scale(1)}

/* exhaust particles */
.rocket-dot{
  position:fixed;left:0;top:0;z-index:118;pointer-events:none;
  width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:var(--gold);opacity:0;will-change:transform,opacity;
}

@media(hover:none),(pointer:coarse){html.has-rocket,html.has-rocket *{cursor:auto !important}.rocket,.rocket-ring,.rocket-dot{display:none}}
@media(prefers-reduced-motion:reduce){html.has-rocket,html.has-rocket *{cursor:auto !important}.rocket,.rocket-ring,.rocket-dot{display:none}}


/* ============================================================
   FOOTER PILLARS
   The two service pillars are the point of the footer, so they
   get a gold rule that draws in, and a spark that keeps moving
   along the Distribution one.
   ============================================================ */
.foot-cols .pillar h2{position:relative;padding-bottom:15px}
.foot-cols .fcol:not(.pillar) h2{padding-bottom:0}
.rule{
  position:absolute;left:0;bottom:0;display:block;height:2px;width:100%;
  border-radius:2px;background:rgba(255,255,255,.13);overflow:hidden;
}
.rule::before{
  content:"";position:absolute;inset:0;border-radius:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.05s var(--ease),box-shadow .3s ease;
}
.rule::after{
  content:"";position:absolute;inset:0;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 100%);
  background-size:38% 100%;background-repeat:no-repeat;background-position:-45% 0;
}
.foot-cols.in .pillar:nth-child(1) .rule::before{transform:scaleX(1);transition-delay:.18s}
.foot-cols.in .pillar:nth-child(2) .rule::before{transform:scaleX(1);transition-delay:.42s}
.foot-cols.in .pillar .rule::after{opacity:1;animation:spark 4.6s ease-in-out infinite}
.foot-cols.in .pillar:nth-child(2) .rule::after{animation-delay:1.1s}
@keyframes spark{
  0%,8%{background-position:-45% 0}
  58%,100%{background-position:145% 0}
}
.foot-cols .pillar:hover .rule::before{box-shadow:0 0 14px rgba(244,180,26,.75)}
.foot-cols .pillar li{transition:transform .4s var(--ease)}
.foot-cols .pillar:hover li{transform:translateX(3px)}
.foot-cols .pillar:hover li:nth-child(2){transition-delay:.04s}
.foot-cols .pillar:hover li:nth-child(3){transition-delay:.08s}

@media(prefers-reduced-motion:reduce){
  .rule::before{transform:scaleX(1) !important;transition:none}
  .rule::after{display:none}
  .foot-cols .pillar:hover li{transform:none}
}


/* creator collaboration cards: three across, link out to Instagram */
.workgrid.shorts.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.workgrid.shorts.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.workgrid.shorts.three{grid-template-columns:1fr}}
.wk.collab .wk-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,7,14,.30) 0%,rgba(0,0,0,0) 34%);
  pointer-events:none;
}
.ig-badge{
  position:absolute;top:12px;right:12px;z-index:2;
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(4,3,9,.3);
  transition:transform .3s var(--ease);
}
.ig-badge svg{width:17px;height:17px;fill:#0A0912;display:block}
.wk.collab:hover .ig-badge{transform:scale(1.1)}
.workgrid.shorts.three .wk-body b{font-size:16px}
.workgrid.shorts.three .wk-body span{font-size:13.5px}

/* people wall: the play mark moves to the corner, matching the Instagram badge,
   so faces and burned-in captions stay clear; the whole frame stays clickable */
.workgrid.featured .play{place-items:start end;padding:12px;background:linear-gradient(180deg,rgba(8,7,14,.30) 0%,rgba(0,0,0,0) 34%)}
.workgrid.featured .play:hover{background:linear-gradient(180deg,rgba(8,7,14,.40) 0%,rgba(0,0,0,0) 42%)}
.workgrid.featured .play i{width:32px;height:32px;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(4,3,9,.3)}
.workgrid.featured .play svg{width:13px;height:13px;margin-left:2px}
.workgrid.featured .wk-body b{font-size:15.5px;line-height:1.25}

/* a written testimonial set beside the work it was written about */
.tcard.tv{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,3.6vw,56px);align-items:center}
.tcard.tv .frame-main{margin-bottom:0}
.tcard.tv .tv-body{display:flex;flex-direction:column;min-width:0}
.tcard.tv .testi-by{margin-top:0}
@media(max-width:820px){.tcard.tv{grid-template-columns:1fr}}

/* ============================================================
   PILLAR IDENTITY
   Brand Storytelling (01) is gold on paper. Distribution (02)
   is gold on CC purple, marked by a ripple: one point, spreading.
   ============================================================ */
.pill-tag{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;
  padding:7px 14px 7px 11px;border-radius:999px;
  font-size:13px;font-weight:600;letter-spacing:.01em;line-height:1;
  background:var(--surface);color:var(--ink);
}
.pill-tag i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--gold);box-shadow:0 0 0 4px rgba(244,180,26,.20)}
.pill-tag.dist i{background:#fff;animation:beacon 2.8s ease-out infinite}
@keyframes beacon{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}70%,100%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}
.phero .pill-tag,.dist-panel .pill-tag{background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(255,255,255,.14)}

/* the Distribution room on the home page */
.dist-panel{
  position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-lg);
  background:radial-gradient(120% 95% at 88% 18%,#30277F 0%,var(--purple) 46%,#110D33 100%);
  color:#fff;padding:clamp(32px,4.6vw,72px);
}
.dist-head{max-width:560px}
.dist-panel .lede{color:rgba(255,255,255,.66);max-width:46ch;margin-top:20px}
.dist-panel .btn{margin-top:30px}
.dist-cells{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,16px);margin-top:clamp(40px,5vw,72px)}
.dcell{
  display:flex;flex-direction:column;gap:6px;padding:clamp(18px,2vw,26px);border-radius:var(--r-md);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .3s ease,transform .35s var(--ease),border-color .3s ease;
}
.dcell:hover{background:rgba(255,255,255,.10);border-color:rgba(244,180,26,.45);transform:translateY(-2px)}
.dcell em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--gold)}
.dcell b{font-size:clamp(17px,1.5vw,19px);font-weight:700;letter-spacing:-.025em}
.dcell span{font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.62)}
@media(max-width:820px){.dist-cells{grid-template-columns:1fr}}

.ripple{position:absolute;z-index:-1;pointer-events:none;width:min(820px,82%);aspect-ratio:1;right:-16%;top:50%;transform:translateY(-58%)}
.ripple .ring{fill:none;stroke:rgba(255,255,255,.10);stroke-width:1}
.ripple .spoke{stroke:rgba(244,180,26,.32);stroke-width:1;stroke-dasharray:3 6}
.ripple .core,.ripple .node{fill:var(--gold)}
.ripple .far{fill:rgba(255,255,255,.55)}
.ripple .pulse{fill:none;stroke:rgba(244,180,26,.6);stroke-width:1.5;transform-origin:300px 300px;animation:ripple 5s cubic-bezier(.22,1,.36,1) infinite}
@keyframes ripple{0%{transform:scale(.15);opacity:0}12%{opacity:1}100%{transform:scale(5);opacity:0}}
@media(max-width:820px){
  .ripple{width:150%;right:-98%;top:-26%;transform:none;opacity:.55}
  .ripple .node,.ripple .far,.ripple .spoke,.ripple .core{display:none}
}

/* the Distribution service page opens in the same room */
.phero.dist{background:var(--purple)}
.phero.dist .phero-bg img{opacity:.18;filter:blur(6px) saturate(.7)}
.phero.dist .phero-bg::after{background:
  radial-gradient(90% 120% at 88% 12%,rgba(64,52,170,.55) 0%,rgba(27,21,77,0) 62%),
  linear-gradient(180deg,rgba(17,13,51,.72) 0%,rgba(27,21,77,.40) 45%,rgba(17,13,51,.96) 100%)}
.phero.dist .ripple{z-index:1;right:-10%;width:min(760px,70%);top:46%}
@media(max-width:820px){.phero.dist .ripple{width:150%;right:-98%;top:-10%}}

/* nav: the same colour code on the dropdown groups */
.drop-group::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;vertical-align:1px;background:var(--gold)}
.drop-group.dist::before{background:var(--purple);box-shadow:0 0 0 3px rgba(27,21,77,.14)}

@media(prefers-reduced-motion:reduce){.ripple .pulse{animation:none;opacity:0}.pill-tag.dist i{animation:none}}

/* the Brand Storytelling room on the home page: gold, framed like a viewfinder,
   so the two pillars read as two rooms even on a fast scroll */
.story-panel{
  position:relative;isolation:isolate;border-radius:var(--r-lg);
  background:radial-gradient(120% 90% at 8% 0%,#FFD35A 0%,var(--gold) 44%,#E4A00B 100%);
  padding:clamp(32px,4.6vw,72px);
}
.story-panel .sec-head{margin-bottom:clamp(28px,3.4vw,46px)}
.story-panel .pill-tag{background:rgba(8,7,14,.08);border:1px solid rgba(8,7,14,.12);color:var(--ink)}
.story-panel .pill-tag i{background:var(--ink);box-shadow:0 0 0 4px rgba(8,7,14,.10)}
.story-panel .card{box-shadow:0 2px 8px rgba(70,45,0,.16),0 22px 48px rgba(70,45,0,.22)}
.vf{position:absolute;z-index:1;width:26px;height:26px;border:0 solid rgba(8,7,14,.5);pointer-events:none}
.vf.tl{top:16px;left:16px;border-top-width:2px;border-left-width:2px;border-top-left-radius:7px}
.vf.tr{top:16px;right:16px;border-top-width:2px;border-right-width:2px;border-top-right-radius:7px}
.vf.bl{bottom:16px;left:16px;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:7px}
.vf.br{bottom:16px;right:16px;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:7px}
@media(max-width:560px){.vf{display:none}.story-panel,.dist-panel{padding:26px 18px}}

/* two kinds of reels on a case study, each with its own header */
.reel-group + .reel-group{margin-top:clamp(48px,6vw,80px);padding-top:clamp(40px,5vw,64px);border-top:1px dashed var(--dash)}
.reel-group-head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(12px,3vw,48px);align-items:end;margin-bottom:clamp(22px,2.6vw,32px)}
.reel-group-head p{color:var(--muted);font-size:clamp(15px,1.2vw,17px);line-height:1.5;max-width:52ch}
@media(max-width:760px){.reel-group-head{grid-template-columns:1fr}}

/* "seen": two eyes sit exactly over its two e's and open as the sweep passes */
.sweep .seen .ee{position:relative;display:inline-block}
.sweep .seen .eyes{
  position:absolute;left:-.04em;right:-.04em;top:.77em;height:.54em;transform:translateY(-50%);
  display:flex;justify-content:space-between;align-items:center;opacity:0;pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(4,3,9,.55));
}
.sweep .seen .eyes i{width:.52em;height:.52em;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 .08em currentColor;display:grid;place-items:center}
.sweep .seen .eyes b{width:.23em;height:.23em;border-radius:50%;background:#08070E}

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

/* ---------- insights articles ---------- */
.phero .art-h1{max-width:22ch;font-size:clamp(34px,5.2vw,64px)}
.art-meta{margin-top:26px;font-size:14.5px;color:var(--on-dark-55)}
.art-meta b{color:rgba(255,255,255,.86);font-weight:600}
.art .art-stats{margin-bottom:clamp(40px,5vw,64px)}
.prose{max-width:720px;margin:0 auto;font-size:clamp(17px,1.3vw,18.5px);line-height:1.7;color:#24232c}
.prose h2{font-size:clamp(24px,2.4vw,32px);margin:clamp(44px,5vw,60px) 0 16px;line-height:1.15}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 20px}
.prose ol,.prose ul{margin:0 0 22px;padding-left:1.25em}
.prose li{margin:0 0 14px;padding-left:4px}
.prose li::marker{color:var(--muted);font-weight:600}
.prose b{color:var(--ink);font-weight:700}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(8,7,14,.25)}
.author{display:flex;gap:16px;align-items:flex-start;margin:clamp(48px,6vw,72px) 0 0;padding:24px;border-radius:18px;background:var(--surface,#F1F1EF)}
.author img{width:44px;height:44px;border-radius:10px;flex:none}
.author p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.author .author-name{color:var(--ink);font-weight:700;font-size:16px}
.author .author-role{margin-bottom:8px}
.sources{margin-top:36px;font-size:14.5px;color:var(--muted)}
.sources h2{font-size:16px;margin:0 0 12px;letter-spacing:-.02em}
.sources li{margin:0 0 8px}
.sources a{color:var(--muted)}
.art-cover{margin:0 0 clamp(32px,4vw,52px)}
.art-cover img{width:100%;height:auto;border-radius:var(--r-lg,22px);box-shadow:0 20px 50px rgba(10,9,18,.14)}
.art-cover .credit{margin-top:10px;font-size:12px;line-height:1.5;color:var(--muted)}
.art-cover .credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.wk-media img[src^="/covers/"]{object-fit:cover}

/* ---------- guides & landing pages ---------- */
.quick{margin:0 0 clamp(34px,4vw,48px);padding:22px 24px;border-radius:18px;background:var(--surface,#F1F1EF);border-left:4px solid var(--gold,#F4B41A)}
.quick .quick-k{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.quick p{margin:0 0 10px}.quick p:last-child{margin-bottom:0}
.quick ul{margin:6px 0 0}
.prose h3{font-size:clamp(19px,1.7vw,22px);margin:30px 0 10px;line-height:1.25;letter-spacing:-.02em}
.vrow{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:8px 0 24px}
.vcard{margin:0;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(10,9,18,.06),0 8px 24px rgba(10,9,18,.06)}
.vcard .wk-media{aspect-ratio:16/9}
.vcard .wk-media img{object-fit:cover}
.vcard figcaption{padding:12px 14px 14px}
.vcard figcaption b{display:block;font-size:15px;line-height:1.3;color:var(--ink)}
.vcard figcaption span{display:block;margin-top:4px;font-size:13px;color:var(--muted);line-height:1.45}
.prose > .vcard{margin:8px 0 24px}
.wk-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* beat strips and beat-by-beat breakdowns on examples pages (14 Oct 2026) */
.prose ul.beats{display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;padding:0;margin:4px 0 16px}
.prose ul.beats li{display:flex;align-items:center;gap:6px;margin:0;padding:0}
.prose ul.beats li span{display:inline-block;font-size:12.5px;font-weight:600;line-height:1;padding:7px 11px;border-radius:999px;background:var(--surface,#F1F1EF);color:var(--ink);white-space:nowrap}
.prose ul.beats li:not(:last-child)::after{content:"\2192";font-size:12px;color:var(--muted)}
.prose details.bbb{margin:4px 0 30px;border:1px solid var(--line,#E6E6E2);border-radius:14px;background:#fff;padding:0 16px}
.prose details.bbb summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:12px 0;font-size:15px;font-weight:600;color:var(--ink)}
.prose details.bbb summary::-webkit-details-marker{display:none}
.prose details.bbb summary::after{content:"+";font-size:18px;font-weight:400;color:var(--muted)}
.prose details.bbb[open] summary::after{content:"\2212"}
.prose details.bbb ol{margin:0 0 16px;padding-left:1.25em}
.prose details.bbb li{margin:0 0 8px;font-size:15px;line-height:1.5}
.tbl{overflow-x:auto;margin:6px 0 26px;border-radius:14px;border:1px solid var(--line,#E6E6E2)}
.tbl table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;min-width:520px}
.tbl caption{caption-side:bottom;text-align:left;padding:10px 14px;font-size:13px;color:var(--muted)}
.tbl th{text-align:left;font-weight:700;background:var(--surface,#F1F1EF);padding:11px 14px;color:var(--ink);white-space:nowrap}
.tbl td{padding:11px 14px;border-top:1px solid var(--line,#E6E6E2);vertical-align:top}
.callout{margin:6px 0 26px;padding:18px 20px;border-radius:16px;background:#FFF8E6;border:1px solid #F4D27A;font-size:16px;line-height:1.6}
.callout.us{background:#F3F1FF;border-color:#CFC8F2}
.callout p{margin:0 0 8px}.callout p:last-child{margin:0}
.faq-plain{margin-top:clamp(40px,5vw,60px)}
.faq-plain .faq-item{padding:16px 0;border-top:1px solid var(--line,#E6E6E2)}
.faq-plain .faq-item h3{margin:0 0 6px;font-size:17.5px}
.faq-plain .faq-item p{margin:0}
.lprose{max-width:780px;margin:0 auto}
.lsec{margin:0 0 clamp(34px,4vw,48px)}
.lsec h2{font-size:clamp(24px,2.4vw,32px);margin:0 0 14px;line-height:1.15}
.co{padding:18px 0;border-top:1px solid var(--line,#E6E6E2)}
.co h3{margin:0 0 4px}
.co .co-meta{font-size:14px;color:var(--muted);margin:0 0 8px}
.co .co-k{font-weight:700;color:var(--ink)}
.prose h3.co-group{margin:clamp(30px,3.6vw,44px) 0 4px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media(max-width:640px){.vrow{grid-template-columns:1fr}}

/* ---- "Where Content Cabinet fits" card, under a guide's short answer (10 Oct 2026) ---- */
.fit{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);margin:0 0 clamp(36px,4.4vw,52px);border-radius:22px;overflow:hidden;background:var(--ink-2);color:#fff;box-shadow:0 18px 50px rgba(8,7,14,.14)}
.fit-media{position:relative;display:block;background:#000;min-height:220px}
.fit-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform 1s var(--ease),opacity .4s ease}
.fit-media:hover img{transform:scale(1.04);opacity:1}
.fit-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,7,14,0) 52%,rgba(8,7,14,.78))}
.fit-play{position:absolute;left:50%;top:50%;z-index:1;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 8px 28px rgba(0,0,0,.35);transition:transform .35s var(--ease)}
.fit-media:hover .fit-play{transform:scale(1.08)}
.fit-play svg{width:40%;height:40%;fill:var(--ink);margin-left:8%}
.fit-cap{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;font-size:13px;line-height:1.35;color:var(--on-dark-70);letter-spacing:-.005em}
.fit-cap b{color:#fff;font-weight:700}
.fit-body{padding:clamp(22px,2.6vw,30px)}
.prose .fit p{color:var(--on-dark-70);margin:0 0 12px;font-size:clamp(15.5px,1.2vw,16.5px);line-height:1.6}
.prose .fit .fit-k{display:flex;align-items:center;gap:9px;margin:0 0 10px;font-size:14px;font-weight:600;letter-spacing:-.01em;color:#fff}
.fit-k i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(244,180,26,.8);flex:none}
.prose .fit a{text-decoration:none}
.fit-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.fit-btns .btn-ghost-d{padding:0 20px}
.prose .fit .fit-note{margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--on-dark-55)}
@media(max-width:760px){.fit{grid-template-columns:1fr}.fit-media{min-height:0;aspect-ratio:16/9}}
.hero-note{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--on-dark-55);max-width:44ch;letter-spacing:-.008em}

/* ---- call bar: follows the reader once they are past the opening screen ---- */
.cbar{position:fixed;left:50%;bottom:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:50;
  display:flex;align-items:center;gap:14px;max-width:calc(100% - 24px);padding:7px 7px 7px 20px;border-radius:999px;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 14px 44px rgba(8,7,14,.18),0 0 0 1px rgba(8,7,14,.06);color:var(--ink);
  opacity:0;visibility:hidden;transform:translate(-50%,130%);pointer-events:none;
  transition:transform .55s var(--ease),opacity .35s ease,visibility 0s linear .55s}
.cbar.on{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto;
  transition:transform .55s var(--ease),opacity .35s ease,visibility 0s}
.cbar-t{display:flex;align-items:center;gap:9px;min-width:0;margin:0;font-size:15px;font-weight:600;letter-spacing:-.012em}
.cbar-t i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(244,180,26,.8);flex:none}
.cbar-t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbar .btn{flex:none;height:42px;font-size:14.5px}
.cbar-x{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--muted);transition:background .25s ease}
.cbar-x:hover{background:var(--surface)}
.cbar-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.sheet.on ~ .cbar,.lb.on ~ .cbar{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:640px){
  .cbar{left:10px;right:10px;max-width:none;bottom:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));gap:10px;padding:6px 6px 6px 16px;transform:translateY(130%)}
  .cbar.on{transform:none}
  .cbar-t{flex:1;font-size:14px}
  .cbar .btn{height:40px;padding:0 8px 0 15px;font-size:14px}
  .cbar-x{width:28px;height:28px}
}
@media(max-width:400px){.cbar-t{display:none}.cbar{justify-content:space-between}}
@media(prefers-reduced-motion:reduce){.cbar,.cbar.on{transition:opacity .2s ease,visibility 0s}}

/* ---- brief: the second way in, after the 20-minute call (10 Oct 2026) ---- */
.hero-btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.hero-btns .btn-ghost-d{padding:0 20px}
.cta-alt{margin:16px 0 0;font-size:15px;color:var(--on-dark-55);letter-spacing:-.01em}
.cta-alt a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(244,180,26,.7)}
.cta-alt a:hover{text-decoration-color:var(--gold)}
.cbar-alt{flex:none;font-size:14px;font-weight:600;color:var(--muted);letter-spacing:-.01em;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(8,7,14,.2);white-space:nowrap}
.cbar-alt:hover{color:var(--ink)}
@media(max-width:640px){.cbar-alt{display:none}}
.xlink-main{background:var(--ink);color:#fff}
.xlink-main:hover{background:#221F36}
.xlink-main span{color:var(--on-dark-55)}
.contact-mail{margin:16px 0 0;font-size:15px;color:var(--muted);letter-spacing:-.01em}
.contact-mail a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(8,7,14,.25)}

.bf{padding:0;border:0;border-radius:24px;background:var(--paper);color:var(--ink);width:min(580px,calc(100% - 24px));max-width:none;max-height:calc(100% - 24px);
  box-shadow:0 30px 90px rgba(6,5,11,.45);overflow:auto;overscroll-behavior:contain}
.bf::backdrop{background:rgba(6,5,11,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* the dialog itself only fades: a transform on it would make it the containing block for the
   rocket cursor's fixed elements while they ride inside it (site.js), so .bf-in does the slide */
.bf[open]{animation:bfFade .3s ease}
.bf[open] .bf-in{animation:bfIn .45s var(--ease)}
@keyframes bfFade{from{opacity:0}to{opacity:1}}
@keyframes bfIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.bf-in{position:relative;padding:clamp(24px,4vw,34px)}
.bf-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--muted);background:var(--surface);transition:background .25s ease}
.bf-x:hover{background:var(--surface-2);color:var(--ink)}
.bf-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.bf-k{display:flex;align-items:center;gap:9px;margin:0 0 10px;font-size:14px;font-weight:600;color:var(--muted);letter-spacing:-.01em}
.bf-k i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(244,180,26,.8);flex:none}
.bf-h{margin:0 44px 8px 0;font-size:clamp(24px,3vw,30px);font-weight:700;letter-spacing:-.035em;line-height:1.1}
.bf-sub{margin:0 0 22px;font-size:15.5px;line-height:1.55;color:var(--muted);letter-spacing:-.01em}
.bf-sub a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold)}
.bf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bf-f{display:block;margin:0 0 14px}
.bf-f span,.bf-when legend{display:block;margin:0 0 6px;font-size:14px;font-weight:600;letter-spacing:-.01em}
.bf-f em,.bf-when em{font-style:normal;font-weight:500;color:var(--muted-2)}
.bf-f input,.bf-f textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;font-weight:500;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;letter-spacing:-.01em;transition:border-color .2s ease,box-shadow .2s ease}
.bf-f input{height:48px}
.bf-f textarea{resize:vertical;min-height:110px;line-height:1.5}
.bf-f input:focus,.bf-f textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(244,180,26,.28)}
.bf-f textarea::placeholder{color:var(--muted-2)}
.bf-when{border:0;padding:0;margin:2px 0 16px;min-width:0}
.bf-when label{display:inline-flex;margin:0 6px 6px 0;cursor:pointer}
.bf-when input{position:absolute;opacity:0;width:1px;height:1px}
.bf-when label span{display:block;padding:9px 14px;border-radius:999px;background:var(--surface);font-size:14px;font-weight:600;letter-spacing:-.01em;transition:background .2s ease,color .2s ease}
.bf-when label:hover span{background:var(--surface-2)}
.bf-when input:checked + span{background:var(--ink);color:#fff}
.bf-when input:focus-visible + span{box-shadow:0 0 0 3px rgba(244,180,26,.45)}
.bf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bf-err{margin:0 0 12px;font-size:14.5px;line-height:1.5;color:#B4231A;font-weight:600}
.bf-err:empty{display:none}
.bf-err a{color:inherit;text-decoration:underline}
.bf-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bf-actions .btn[disabled]{opacity:.6;cursor:progress;transform:none}
.bf-fine{margin:14px 0 0;font-size:13px;color:var(--muted-2)}
.bf-fine a{text-decoration:underline;text-underline-offset:2px}
.bf-done .bf-sub{margin-bottom:20px}
@media(max-width:560px){.bf-row{grid-template-columns:1fr;gap:0}.bf{border-radius:20px}}
@media(prefers-reduced-motion:reduce){.bf[open],.bf[open] .bf-in{animation:none}}
/* rocket cursor over the brief form: text fields get the native I-beam, the rocket steps aside;
   the dimmed backdrop hides the native cursor like the rest of the page */
html.has-rocket textarea,
html.has-rocket input:not([type=radio]):not([type=checkbox]){cursor:text !important}
html.has-rocket .bf::backdrop{cursor:none}
.rocket.typing{opacity:0}

/* ============================================================
   PHONES: the call, the brief and the fit card, tuned for thumbs (10 Oct 2026)
   ============================================================ */
/* hero buttons share one top margin, so a wrapped pair does not double the gap */
.hero-btns{margin-top:34px}
.hero-btns .btn{margin-top:0}
.cbar-alt .a-mid,.cbar-alt .a-short{display:none}
.bf-h:focus{outline:none}
@keyframes bfUp{from{transform:translateY(48px)}to{transform:none}}
/* a tap leaves :hover stuck on touch screens; buttons should not stay lifted */
@media(hover:none){.btn:hover{transform:none}.btn:hover .chev{transform:none}}

@media(max-width:560px){
  /* page heroes: the call full width on top, the brief under it */
  .hero-btns{flex-direction:column;align-items:stretch;gap:10px;max-width:440px}
  .hero-btns .btn{justify-content:center;height:52px;font-size:16px}
  .hero-note{font-size:13.5px}

  /* fit card: a compact film row in place of the 16:9 still, full-width buttons */
  .fit{border-radius:20px}
  .fit-media{display:flex;align-items:center;gap:14px;min-height:0;aspect-ratio:auto;padding:16px 16px 0;background:transparent}
  .fit-media::after{display:none}
  .fit-media img{position:relative;inset:auto;flex:none;width:112px;height:70px;border-radius:12px;opacity:1}
  .fit-media:hover img{transform:none}
  .fit-play{left:72px;top:51px;width:34px;height:34px;margin:-17px 0 0 -17px}
  .fit-cap{position:static;font-size:13.5px;line-height:1.4;color:var(--on-dark-70)}
  .fit-body{padding:14px 16px 18px}
  .fit-btns{flex-direction:column;gap:8px;margin-top:16px}
  .fit-btns .btn{justify-content:center;height:50px;font-size:15.5px}
  .prose .fit .fit-note{font-size:13px;margin-top:12px}

  /* closing band: the call at a thumb-friendly width, a real tap target for the brief */
  .cta .btn{width:100%;max-width:360px;justify-content:center;height:52px;font-size:16px}
  .cta-alt{margin-top:6px}
  .cta-alt a{display:inline-block;padding:13px 6px}
  .contact-mail a{display:inline-block;padding:10px 0}
}

@media(max-width:640px){
  /* call bar: the call takes the room, the brief and the close button get full tap targets */
  .cbar{padding:6px;gap:2px}
  .cbar-t{display:none}
  .cbar .btn{flex:1;justify-content:center;height:46px;padding:0 10px 0 16px;font-size:15px}
  .cbar-alt{display:inline-flex;align-items:center;height:46px;padding:0 10px;font-size:14.5px;color:var(--ink);text-decoration-color:rgba(8,7,14,.25)}
  .cbar-alt .a-long{display:none}
  .cbar-alt .a-mid{display:inline}
  .cbar-x{width:44px;height:46px;border-radius:999px}
}

@media(max-width:640px),(pointer:coarse) and (max-height:520px){
  /* brief form: a full-height sheet sized to what the keyboard leaves visible
     (site.js keeps --vvh/--vvt in step with visualViewport), with Send pinned to its foot */
  .bf{inset:auto 0 auto 0;margin:0;width:100%;max-width:100%;max-height:none;border-radius:22px 22px 0 0;
    top:calc(var(--vvt,0px) + 8px + env(safe-area-inset-top,0px));
    height:calc(100% - 8px - env(safe-area-inset-top,0px));
    height:calc(var(--vvh,100dvh) - 8px - env(safe-area-inset-top,0px));
    box-shadow:0 -12px 40px rgba(6,5,11,.3);scroll-padding-bottom:96px}
  .bf[open] .bf-in{animation:bfUp .42s var(--ease)}
  .bf-in{min-height:100%;box-sizing:border-box;display:flex;flex-direction:column;padding:22px 18px 0}
  .bf-form:not([hidden]){display:flex;flex-direction:column;flex:1}
  .bf-done:not([hidden]){display:flex;flex-direction:column;justify-content:center;flex:1;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
  .bf-x{top:10px;right:10px;width:44px;height:44px}
  .bf-h{margin-right:46px;font-size:26px}
  .bf-sub{margin-bottom:18px;font-size:15px}
  .bf-row{grid-template-columns:1fr;gap:0}
  .bf-when label span{padding:12px 16px}
  .bf-err,.bf-fine{order:1}
  .bf-fine{margin:0 0 16px}
  .bf-actions{order:2;position:sticky;bottom:0;z-index:2;margin:auto -18px 0;padding:12px 18px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));background:var(--paper);box-shadow:0 -1px 0 var(--line)}
  .bf-actions .btn{flex:1;justify-content:center;height:52px;font-size:16px}
  .bf-done .bf-actions{position:static;order:0;margin:4px 0 0;padding:0;box-shadow:none;background:none;flex-direction:column;align-items:stretch}
  .bf-done .bf-actions .btn{flex:none}
}
/* a phone held sideways: the same sheet, kept to a readable width */
@media(pointer:coarse) and (max-height:520px) and (min-width:641px){.bf{left:calc(50% - 320px);right:calc(50% - 320px);width:auto;max-width:none}}
@media(max-width:359px){.cbar-alt .a-mid{display:none}.cbar-alt .a-short{display:inline}}
@media(pointer:coarse){.bf-x{width:44px;height:44px}.bf-when label span{padding:12px 16px}}
@media(prefers-reduced-motion:reduce){.bf[open] .bf-in{animation:none}}
/* a wide grid whose last row holds a single film: centre it, so the row reads as a choice */
@media(min-width:901px){.workgrid.end-centre > .wk:last-child:nth-child(3n+1){grid-column:2}}

/* ============================================================
   FREE TOOLS AND TEMPLATES (10 Oct 2026)
   ============================================================ */
/* script length calculator */
.slc{margin:0 0 clamp(36px,4.4vw,52px);padding:clamp(18px,2.4vw,26px);border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 40px rgba(8,7,14,.06)}
.slc-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.prose .slc-l{display:block;margin:0 0 6px;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.slc-row .slc-l{margin:0}
.slc select{font:inherit;font-size:16px;font-weight:600;color:var(--ink);height:44px;padding:0 38px 0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2308070E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/12px;-webkit-appearance:none;appearance:none;cursor:pointer}
.prose .slc-fits{margin:12px 0 18px;font-size:15px;line-height:1.55;color:var(--muted)}
.slc textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;line-height:1.55;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-height:150px;resize:vertical}
.slc textarea:focus,.slc select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(244,180,26,.28)}
.slc-out{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:14px}
.slc-stat{padding:12px 12px 10px;border-radius:14px;background:var(--surface)}
.slc-stat b{display:block;font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.slc-stat span{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:var(--muted)}
.slc-stat.on{background:var(--ink)}
.slc-stat.on b{color:#fff}
.slc-stat.on span{color:var(--on-dark-55)}
.prose .slc-verdict{margin:14px 0 0;font-size:15.5px;line-height:1.55;font-weight:600;color:var(--ink)}
@media(max-width:640px){.slc-out{grid-template-columns:repeat(2,minmax(0,1fr))}.slc-stat:first-child{grid-column:1/-1}}

/* template block, copy and download */
.tpl{margin:0 0 18px;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 14px 40px rgba(8,7,14,.06)}
.tpl-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 14px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.prose .tpl-k{display:flex;align-items:center;gap:9px;margin:0;font-size:14px;font-weight:600;color:var(--ink)}
.tpl-k i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(244,180,26,.8)}
.tpl-btns{display:flex;flex-wrap:wrap;gap:8px}
.tpl-btns .btn{height:40px;padding:0 18px;font-size:14.5px}
.tpl-text{margin:0;padding:18px 20px;max-height:460px;overflow:auto;white-space:pre-wrap;font:500 14.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#24232c;background:#fff}
.prose .tpl-send{margin:0 0 clamp(36px,4.4vw,52px);font-size:15.5px;color:var(--muted)}
.prose .tpl-send a{font-weight:600;color:var(--ink);text-decoration-color:var(--gold)}
/* filled-in examples */
.exs{display:grid;gap:12px;margin:18px 0 8px}
.ex{padding:18px 20px;border-radius:18px;background:var(--surface)}
.prose .ex-k{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--muted)}
.prose .ex h3{margin:0 0 10px;font-size:19px}
.prose .ex ul{margin:0;padding-left:1.1em}
.prose .ex li{margin:0 0 8px;font-size:15.5px;line-height:1.55}
@media(max-width:560px){.tpl-head{padding:12px 14px}.tpl-btns{width:100%}.tpl-btns .btn{flex:1;justify-content:center}}
/* SEBI disclaimer generator (10 Oct 2026) */
.sdg-sel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sdg-sel select{width:100%}
.sdg-out{margin:18px 0 22px;padding:18px 20px;border-radius:18px;background:var(--surface)}
.prose .sdg-k{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--muted)}
.prose .sdg-warn{margin:0 0 8px;font-size:clamp(18px,2vw,21px);line-height:1.45;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.prose .sdg-src{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--muted)}
.sdg-btns{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.sdg-btns .btn{height:40px;padding:0 18px;font-size:14.5px}
.prose .sdg-list{margin:0;padding-left:1.1em}
.prose .sdg-list li{margin:0 0 8px;font-size:15.5px;line-height:1.55}
.prose .sdg-list li:last-child{margin-bottom:0}
.sdg-res{margin-top:14px}
.prose .sdg-sum{margin:0 0 10px;font-size:15.5px;line-height:1.5;font-weight:600;color:var(--ink)}
.prose .sdg-flags{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.prose .sdg-flags li{margin:0;padding:12px 14px 12px 16px;border-radius:14px;background:var(--surface);border-left:4px solid var(--gold);font-size:15px;line-height:1.5}
.prose .sdg-flags li.ok{border-left-color:#2f9e5b}
.prose .sdg-flags li.bad{border-left-color:#d64545}
.sdg-flags mark{background:rgba(244,180,26,.3);color:var(--ink);padding:0 4px;border-radius:4px}
.prose .sdg-note{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
@media(max-width:640px){.sdg-sel{grid-template-columns:1fr}.sdg-out{padding:16px}.sdg-btns .btn{flex:1;justify-content:center}}

/* nav: a third column for who we work with */
.drop-menu.wide{min-width:760px;grid-template-columns:1.15fr .9fr 1fr}
.drop-group.ind::before{background:var(--ink)}
/* the phone menu scrolls on short screens; the specialisms sit in a compact row */
.sheet{overflow-y:auto;overscroll-behavior:contain}
.sheet .sheet-k{margin:22px 0 8px;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:-.005em}
.sheet-pills{display:flex;flex-wrap:wrap;gap:8px}
.sheet .sheet-pills a{font-size:15px;font-weight:600;letter-spacing:-.01em;padding:11px 16px;border:0;border-radius:999px;background:var(--surface)}

/* storyboard maker (10 Oct 2026): frames, timing check, animatic, print */
.sb-ctl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 18px}
.sb-ctl select{width:100%}
.sb-ctl input{width:100%;box-sizing:border-box;height:44px;padding:0 14px;font:inherit;font-size:16px;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px}
.sb-ctl input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(244,180,26,.28)}
.prose .sb-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.prose .sb-grid.r916,.prose .sb-grid.r45,.prose .sb-grid.r11{grid-template-columns:repeat(4,minmax(0,1fr))}
.prose .sb-grid>li{margin:0;padding:10px;border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:6px;min-width:0}
.sb-top{display:flex;align-items:center;gap:6px;font-size:13px;line-height:1}
.sb-top b{margin-right:auto;font-weight:700;color:var(--ink)}
.sb-sec{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--muted)}
.sb-sec input{width:58px;height:30px;box-sizing:border-box;padding:0 6px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);text-align:center;background:#fff;border:1px solid var(--line);border-radius:8px}
.sb-x{width:28px;height:28px;flex:none;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.sb-x:hover{background:#fff;color:var(--ink)}
.sb-pic{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;padding:10px;box-sizing:border-box;border:1.5px dashed #c6c6cd;border-radius:10px;background:#fff;overflow:hidden;cursor:pointer;text-align:center;font-size:12.5px;line-height:1.35;color:var(--muted);transition:border-color .2s}
.sb-pic:hover{border-color:var(--ink)}
.sb-grid.r916 .sb-pic{aspect-ratio:9/16}
.sb-grid.r45 .sb-pic{aspect-ratio:4/5}
.sb-grid.r11 .sb-pic{aspect-ratio:1/1}
.sb-pic.has{padding:0;border-style:solid;border-color:var(--line)}
.sb-pic img{display:block;width:100%;height:100%;object-fit:cover}
.sb-pic input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.sb-pic:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(244,180,26,.28)}
.sb-rm{align-self:flex-start;padding:0;border:0;background:none;font:inherit;font-size:12px;color:var(--muted);text-decoration:underline;cursor:pointer}
.sb-f textarea,.sb-f input[type=text]{width:100%;box-sizing:border-box;min-height:0;margin:0;padding:7px 9px;font:inherit;font-size:13.5px;line-height:1.4;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;resize:vertical}
.sb-f textarea:focus,.sb-f input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(244,180,26,.28)}
.prose .sb-fit{margin:0;min-height:16px;font-size:12px;line-height:1.35;color:var(--muted)}
.prose .sb-fit.bad{color:#c03535;font-weight:600}
.sb-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:16px 0 12px}
.sb-bar .btn,.sb-btns .btn{height:40px;padding:0 18px;font-size:14.5px}
.prose .sb-sum{margin:0;font-size:14.5px;line-height:1.45;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.prose .sb-flags:empty{margin:0}
.prose .sb-flags{margin:0 0 4px}
.sb-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
@media(min-width:1000px){.prose .sb{width:min(1100px,calc(100vw - 2 * var(--gut)));margin-left:calc((100% - min(1100px,calc(100vw - 2 * var(--gut)))) / 2);box-sizing:border-box}}
@media(max-width:860px){.prose .sb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.prose .sb-grid.r916,.prose .sb-grid.r45,.prose .sb-grid.r11{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.sb-f textarea,.sb-f input[type=text],.sb-sec input{font-size:16px}.sb-ctl{grid-template-columns:1fr}.prose .sb-grid{grid-template-columns:1fr}.prose .sb-grid.r916,.prose .sb-grid.r45,.prose .sb-grid.r11{grid-template-columns:repeat(2,minmax(0,1fr))}.sb-bar .btn,.sb-btns .btn{flex:1 1 auto;justify-content:center}}

/* printable sheets */
.sbd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 clamp(36px,4.4vw,52px)}
.prose a.sbd-c{display:flex;flex-direction:column;gap:6px;padding:10px 10px 14px;border-radius:16px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:box-shadow .2s,transform .2s}
.prose a.sbd-c:hover{box-shadow:0 14px 34px rgba(8,7,14,.1);transform:translateY(-2px)}
.sbd-c img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;box-sizing:border-box;padding:8px;border-radius:10px;background:var(--surface)}
.sbd-c b{font-size:15px;line-height:1.3;font-weight:700}
.sbd-c span{font-size:13px;line-height:1.45;color:var(--muted)}
.sbd-c em{margin-top:auto;padding-top:4px;font-style:normal;font-size:13.5px;font-weight:700;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
@media(max-width:760px){.sbd{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* animatic player */
.sba{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(8,7,14,.97)}
.sba-in{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(980px,100%)}
.sba-stage{position:relative;overflow:hidden;border-radius:14px;background:#16151d;aspect-ratio:16/9;width:min(100%,calc((100vh - 220px) * 16 / 9))}
.sba-stage.r916{aspect-ratio:9/16;width:min(100%,calc((100vh - 220px) * 9 / 16))}
.sba-stage.r45{aspect-ratio:4/5;width:min(100%,calc((100vh - 220px) * 4 / 5))}
.sba-stage.r11{aspect-ratio:1/1;width:min(100%,calc(100vh - 220px))}
.sba-pic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8%;text-align:center;font-size:clamp(15px,2.2vw,22px);line-height:1.4;color:rgba(255,255,255,.72)}
.sba-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.sba-txt{display:none;position:absolute;left:50%;bottom:9%;transform:translateX(-50%);max-width:84%;width:max-content;margin:0;padding:8px 14px;border-radius:10px;background:rgba(8,7,14,.78);color:#fff;font-size:clamp(14px,2vw,22px);line-height:1.3;font-weight:700;text-align:center}
.sba-txt.on{display:block}
.sba-stage.r916 .sba-txt{bottom:37%}
.sba-vo{margin:0;min-height:2.9em;max-width:760px;text-align:center;color:#fff;font-size:clamp(15px,1.8vw,18px);line-height:1.45}
.sba-bar{width:min(760px,100%);height:4px;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden}
.sba-bar i{display:block;width:0;height:100%;background:var(--gold)}
.sba-ctl{display:flex;align-items:center;gap:8px;width:min(760px,100%)}
.sba-ctl button{height:40px;min-width:44px;padding:0 14px;border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.sba-ctl button:hover{background:rgba(255,255,255,.22)}
.sba-ctl .sba-pp{min-width:112px;background:#fff;color:var(--ink)}
.sba-t{margin-left:auto;font-size:14px;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:560px){.sba{padding:10px}.sba-ctl{gap:6px}.sba-ctl button{padding:0 10px}.sba-ctl .sba-pp{min-width:92px}.sba-t{font-size:12px}}

/* print a board: only the clean copy goes to the printer */
.sbp{display:none}
@media print{
  html.sb-printing,html.sb-printing body{background:#fff!important}
  html.sb-printing body>*:not(.sbp){display:none!important}
  html.sb-printing .sbp{display:block;font-family:var(--f);color:#08070E;background:#fff}
  .sbp-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid #08070E}
  .sbp-h b{font-size:16pt;font-weight:700}
  .sbp-h span{font-size:8.5pt;color:#555}
  .sbp-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px}
  .sbp.r916 .sbp-g,.sbp.r45 .sbp-g,.sbp.r11 .sbp-g{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sbp-g li{margin:0;padding:0;break-inside:avoid;page-break-inside:avoid;font-size:7.5pt;line-height:1.35}
  .sbp-pic{aspect-ratio:16/9;overflow:hidden;border:1px solid #999;border-radius:3px;background:#fff}
  .sbp.r916 .sbp-pic{aspect-ratio:9/16}.sbp.r45 .sbp-pic{aspect-ratio:4/5}.sbp.r11 .sbp-pic{aspect-ratio:1/1}
  .sbp-pic img{display:block;width:100%;height:100%;object-fit:cover}
  .sbp-g p{margin:0 0 2px}
  .sbp-g .sbp-n{margin:4px 0 2px;font-size:8pt}
  .sbp-g p i{margin-right:2px;font-style:normal;font-weight:700;font-size:6.5pt;letter-spacing:.05em;text-transform:uppercase;color:#666}
  .sbp-f{margin:10px 0 0;font-size:7pt;color:#777}
}