/* ==========================================================================
   FLOKA STUDIOS
   World: the grading suite and the contact sheet.
   Every unit of content is a frame, a strip, or a cut. No cards.
   Shape lock: radius 0 everywhere. Colour: Committed (teal owns fields).
   Gold has exactly one role: the marker.
   ========================================================================== */

/* --- self-hosted faces (OFL-1.1, licences in assets/fonts/LICENSES) ------
   Anybody carries a real width axis, which is why it matches the wide
   geometric FLOKA lockup. Chivo sets text. JetBrains Mono is reserved for
   measurement: aspect ratios, frame numbers, regions, durations. */
@font-face{font-family:"Anybody";src:url(/assets/fonts/anybody-var.woff2) format("woff2-variations");
  font-weight:100 900;font-stretch:50% 150%;font-style:normal;font-display:swap}
@font-face{font-family:"Chivo";src:url(/assets/fonts/chivo-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Chivo";src:url(/assets/fonts/chivo-400i.woff2) format("woff2");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Chivo";src:url(/assets/fonts/chivo-500.woff2) format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Chivo";src:url(/assets/fonts/chivo-600.woff2) format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jbmono-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jbmono-500.woff2) format("woff2");
  font-weight:500;font-style:normal;font-display:swap}

:root{
  /* --- surfaces ------------------------------------------------------- */
  --paper:#E7E8E4;          /* grey-card print surface, cool neutral     */
  --paper-2:#DCDED8;        /* second step, same family                  */
  --ink:#0B0C0E;            /* graded black                              */
  --ink-2:#15181A;

  /* --- the committed colour ------------------------------------------- */
  --teal:#0F8E7E;           /* field fill                                */
  --teal-dp:#0A5F55;        /* field fill, text-safe behind white        */
  --teal-blk:#06231F;       /* the dark act                              */
  --teal-blk-2:#092C27;
  --teal-lit:#39D9BC;       /* trace on dark only                        */

  /* --- the marker (one role: in-point / active / current) -------------
     Gold on dark, deep ochre on light, so the marker always clears 3:1. */
  --gold:#F2B01E;
  --mark:#7D5806;

  /* --- text ----------------------------------------------------------- */
  --t-ink:#0B0C0E;
  --t-sub:#4C5450;          /* secondary on paper, AA verified           */
  --t-bone:#E7E8E4;         /* on dark                                   */
  --t-teal-sub:#BFD8D2;     /* secondary on a teal field, AA verified   */
  --t-bone-sub:#9FB0AB;     /* secondary on dark, AA verified            */
  --hair:rgba(11,12,14,.22);      /* decorative rule                   */
  --hair-lt:rgba(231,232,228,.26);
  --hair-ui:#767C78;              /* control boundary, 3.46:1 on paper  */

  /* --- faces ----------------------------------------------------------- */
  --d:"Anybody","Archivo","Helvetica Neue",Arial,sans-serif;
  --b:"Chivo","Helvetica Neue",Arial,sans-serif;
  --m:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* --- scale ----------------------------------------------------------- */
  --fr:18px;                /* frame inset                               */
  --gut:clamp(1.1rem,4vw,3.2rem);
  --max:1560px;
  --act:clamp(5rem,11vh,9rem);  /* vertical act spacing                  */
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--t-ink);
  font-family:var(--b);font-size:clamp(1rem,.95rem + .22vw,1.1rem);
  line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.nav-open{overflow:hidden}
img,svg,video{display:block;max-width:100%;height:auto}

/* --- browser surfaces: themed, not default -------------------------- */
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--teal-dp);outline-offset:3px}
.dark :focus-visible,.nav-ov :focus-visible{outline-color:var(--teal-lit)}
html{scrollbar-color:var(--teal-dp) var(--paper-2);scrollbar-width:thin}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
.num,time,.mono{font-variant-numeric:tabular-nums}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);
  color:var(--t-bone);padding:.7rem 1.1rem;font:500 .85rem/1 var(--m)}
.skip:focus{left:.6rem;top:.6rem}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:min(62rem,100%);margin-inline:auto}

/* ==========================================================================
   TYPE
   ========================================================================== */
.dsp{
  font-family:var(--d);font-weight:800;
  font-stretch:125%;
  text-transform:uppercase;line-height:.88;letter-spacing:-.03em;
  margin:0;min-width:0;overflow-wrap:break-word;
}
/* text-wrap:balance fights an authored <br>: it re-breaks the segments to even
   them out, which turns a deliberate two-line headline into three or four.
   Headlines here set their own breaks, so balancing is opt-in, not default. */
.dsp-balance{text-wrap:balance}
/* A headline that sets its own breaks keeps them: <br> still breaks under
   nowrap, so the authored lines are exactly the rendered lines. Below the
   phone breakpoint the type is small enough that natural wrapping is safer. */
.dsp-hold{white-space:nowrap}
@media (max-width:560px){.dsp-hold{white-space:normal}}
.dsp-xl{font-size:clamp(2.7rem,8.4vw,8.4rem)}
.dsp-l {font-size:clamp(1.75rem,5.6vw,5.2rem)}
.dsp-m {font-size:clamp(1.5rem,3.5vw,3.1rem);line-height:.94}
.dsp-s {font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.05;letter-spacing:-.015em;
  font-weight:700;font-stretch:112%}

h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.015em;line-height:1.14}
h2{font-size:clamp(1.3rem,2vw,1.75rem)}
h3{font-size:clamp(1.05rem,1.3vw,1.2rem)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(1.06rem,1rem + .5vw,1.4rem);line-height:1.52;max-width:40ch;color:var(--t-ink)}
.body{max-width:68ch}
.sub{color:var(--t-sub)}
.dark .sub{color:var(--t-bone-sub)}
.teal .sub,.ledger-f .sub{color:var(--t-teal-sub)}
.meta{font:500 .7rem/1.5 var(--m);letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-sub);margin:0}
.dark .meta{color:var(--t-bone-sub)}
.teal .meta,.ledger-f .meta{color:var(--t-teal-sub)}
.mt1{margin-top:.7rem}.mt2{margin-top:1.5rem}.mt3{margin-top:2.6rem}
.mb2{margin-bottom:1.6rem}.mb3{margin-bottom:2.8rem}

/* ==========================================================================
   THE FRAME  — the one container in this system
   Corner marks in gold, edge-code strip with perforations, mono metadata bar.
   ========================================================================== */
.fr{position:relative;border:1px solid var(--hair);background:transparent}
.fr::before,.fr::after{
  content:"";position:absolute;width:13px;height:13px;pointer-events:none;
  border-color:var(--mark);border-style:solid;border-width:0;
}
.fr::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.fr::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.fr>.c2,.fr>.c3{position:absolute;width:13px;height:13px;pointer-events:none;
  border-color:var(--mark);border-style:solid;border-width:0}
.fr>.c2{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px}
.fr>.c3{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px}
.dark .fr,.teal .fr{border-color:var(--hair-lt)}
.dark .fr::before,.dark .fr::after,.dark .fr>.c2,.dark .fr>.c3,
.teal .fr::before,.teal .fr::after,.teal .fr>.c2,.teal .fr>.c3{border-color:var(--gold)}

/* edge code: the perforated strip down the left of a frame */
.fr-edge{
  position:absolute;left:0;top:0;bottom:0;width:34px;display:none;
  border-right:1px solid var(--hair);
  background:repeating-linear-gradient(to bottom,
    transparent 0 9px,rgba(11,12,14,.14) 9px 19px,transparent 19px 28px);
  background-clip:content-box;padding-block:.9rem 10.5rem;
}
.fr-edge span{
  position:absolute;bottom:1.1rem;left:50%;transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl;font:500 .62rem/1 var(--m);letter-spacing:.3em;
  text-transform:uppercase;color:var(--t-sub);white-space:nowrap;
}
.dark .fr-edge,.teal .fr-edge{border-right-color:var(--hair-lt);
  background:repeating-linear-gradient(to bottom,
    transparent 0 9px,rgba(231,232,228,.15) 9px 19px,transparent 19px 28px);
  background-clip:content-box}
.dark .fr-edge span,.teal .fr-edge span{color:var(--t-teal-sub)}
@media (min-width:900px){.fr-edge{display:block}}

/* mono metadata bar sitting on a frame's bottom edge */
.fr-pin{display:flex;flex-direction:column}
.fr-pin>.fr-bar{margin-top:auto}
.fr-bar{
  display:flex;gap:1.4rem;align-items:baseline;justify-content:space-between;
  border-top:1px solid var(--hair);padding:.6rem .9rem;
  font:500 .66rem/1.4 var(--m);letter-spacing:.17em;text-transform:uppercase;
  color:var(--t-sub);
}
.dark .fr-bar{border-top-color:var(--hair-lt);color:var(--t-bone-sub)}
.teal .fr-bar{border-top-color:var(--hair-lt);color:var(--t-teal-sub)}
.fr-bar b{font-weight:500;color:inherit;min-width:0}
.fr-bar b:last-child{text-align:right}
@media (max-width:420px){
  /* The frame bar's mono metadata was .6rem, which renders at 9.6px on a phone:
     readable on a monitor, not in a hand. Nothing on the site now sets text
     below 11px at phone widths. */
  .fr-bar{gap:.7rem;padding:.55rem .7rem;font-size:.72rem;letter-spacing:.06em}
}

/* ==========================================================================
   COLOUR BARS — the brand's own divider. Replaces the hairline rule.
   ========================================================================== */
.bars{display:flex;height:6px;width:100%;overflow:hidden}
.bars i{flex:1}
.bars i:nth-child(1){background:var(--teal-dp)}
.bars i:nth-child(2){background:var(--teal)}
.bars i:nth-child(3){background:var(--teal-lit)}
.bars i:nth-child(4){background:var(--paper-2)}
.bars i:nth-child(5){background:var(--gold)}
.bars i:nth-child(6){background:var(--ink)}
.bars-tall{height:12px}

/* ==========================================================================
   HEADER  — one line, 68px, + MENU overlay (pinned by the brief)
   ========================================================================== */
.hdr{position:fixed;inset:0 0 auto;z-index:70;height:68px;
  transition:background .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent}
.hdr-in{height:68px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.hdr.stuck{background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(14px);border-bottom-color:var(--hair)}
body.on-dark .hdr.stuck{background:color-mix(in srgb,var(--teal-blk) 88%,transparent);
  border-bottom-color:var(--hair-lt)}
body.nav-open .hdr{background:transparent;border-bottom-color:transparent;backdrop-filter:none}

.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand-orb{width:26px;height:26px}
.brand-word{height:15px;width:auto}
.lk-light{display:none}
body.on-dark .lk-dark{display:none}
body.on-dark .lk-light{display:block}

.menu-btn{
  appearance:none;background:none;border:0;cursor:pointer;color:inherit;
  display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 0;
  font:500 .72rem/1 var(--m);letter-spacing:.2em;text-transform:uppercase;
}
.menu-btn .x{position:relative;width:11px;height:11px;flex:none}
.menu-btn .x::before,.menu-btn .x::after{content:"";position:absolute;background:currentColor;
  transition:transform .4s var(--ease)}
.menu-btn .x::before{left:0;right:0;top:5px;height:1px}
.menu-btn .x::after{top:0;bottom:0;left:5px;width:1px}
.menu-btn[aria-expanded="true"] .x::after{transform:rotate(90deg)}
.hdr-right{display:flex;align-items:center;gap:1.1rem}
/* Below the breakpoint the bar carries the brand and the menu only; the
   hero CTA and the overlay's contact row take over. */
.hdr .hdr-cta{display:none;white-space:nowrap}
@media (min-width:880px){.hdr .hdr-cta{display:inline-flex}}
body.on-dark .hdr{color:var(--t-bone)}

/* --- nav overlay ---------------------------------------------------- */
.nav-ov{position:fixed;inset:0;z-index:65;background:var(--teal-blk);
  color:var(--t-bone);display:grid;grid-template-rows:68px 1fr auto;
  clip-path:inset(0 0 100% 0);transition:clip-path .62s var(--ease);
  visibility:hidden}
.nav-ov.open{clip-path:inset(0 0 0 0);visibility:visible}
.nav-ov-in{align-self:center;padding-block:1.5rem;overflow-y:auto}
.nav-list{list-style:none;margin:0;padding:0}
.nav-list li{border-top:1px solid var(--hair-lt)}
.nav-list li:last-child{border-bottom:1px solid var(--hair-lt)}
.nav-list a{display:flex;align-items:baseline;gap:1.2rem;padding:.5rem 0;
  text-decoration:none;font-family:var(--d);font-weight:800;
  font-stretch:118%;text-transform:uppercase;
  font-size:clamp(1.3rem,3.6vw,2.7rem);line-height:1.08;letter-spacing:-.02em;
  color:var(--t-bone);transition:color .3s var(--ease),padding-left .4s var(--ease)}
.nav-list a:hover,.nav-list a:focus-visible{color:var(--teal-lit);padding-left:.7rem}
.nav-list a[aria-current]{color:var(--gold)}
.nav-list .d{font:500 .66rem/1 var(--m);letter-spacing:.2em;color:var(--t-bone-sub);
  margin-left:auto;text-transform:uppercase;flex:none}
@media (max-width:700px){.nav-list .d{display:none}}
.nav-foot{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;padding:1.1rem 0 1.5rem;
  border-top:1px solid var(--hair-lt);font:500 .7rem/1.6 var(--m);
  letter-spacing:.1em;text-transform:uppercase;color:var(--t-bone-sub)}
.nav-foot a{color:var(--t-bone)}

/* ==========================================================================
   BUTTONS  — sharp, one shape, one primary intent label
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.92rem 1.5rem;border:1px solid var(--ink);background:transparent;
  color:var(--t-ink);text-decoration:none;cursor:pointer;
  font:500 .76rem/1 var(--m);letter-spacing:.16em;text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease),transform .12s var(--ease);
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:active{transform:translateY(1px)}
.btn-fill{background:var(--teal-dp);border-color:var(--teal-dp);color:#fff}
.btn-fill:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.dark .btn,.teal .btn{border-color:var(--t-bone);color:var(--t-bone)}
.dark .btn:hover,.teal .btn:hover{background:var(--t-bone);color:var(--ink)}
.dark .btn-fill,.teal .btn-fill{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.dark .btn-fill:hover,.teal .btn-fill:hover{background:var(--t-bone);border-color:var(--t-bone)}
.btn .mk{width:6px;height:6px;background:var(--mark);flex:none}
.btn-fill .mk{background:#fff}
.dark .btn .mk,.teal .btn .mk{background:var(--gold)}
.dark .btn-fill .mk,.teal .btn-fill .mk{background:var(--ink)}
.btns{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}

.lnk{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font:500 .76rem/1 var(--m);letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding:.78rem 0 .72rem;min-height:44px;
  transition:gap .3s var(--ease)}
.lnk:hover{gap:.9rem}
.lnk svg{width:14px;height:14px;flex:none}

/* ==========================================================================
   HERO  — the viewport is one frame. The display line runs the full width
   of the frame; the orb and the metadata sit in the lower band.
   ========================================================================== */
.hero{padding:calc(68px + var(--fr)) var(--fr) var(--fr)}
.hero-fr{position:relative;min-height:calc(100svh - 68px - var(--fr)*2);
  display:flex;flex-direction:column}
.hero-body{flex:1;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(1.5rem,4.5vh,3.4rem);position:relative;z-index:2;isolation:isolate;
  padding:clamp(1.6rem,4vh,3rem) clamp(1.2rem,3vw,2.6rem)}
@media (min-width:900px){
  .hero-body{padding-left:calc(34px + clamp(1.2rem,2.4vw,2.4rem))}
  .hero-fr>.fr-bar{padding-left:calc(34px + clamp(1.2rem,2.4vw,2.4rem))}
}

.hero-h{font-size:clamp(2.6rem,8.6vw,8.2rem)}
.hero-btm{display:grid;gap:clamp(1.4rem,3vw,2.5rem);align-items:end;
  grid-template-columns:1fr}
@media (min-width:820px){
  .hero-btm{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
}
.hero-sub{font-size:clamp(1.02rem,.95rem + .45vw,1.26rem);line-height:1.5;
  max-width:34ch;color:var(--t-ink)}
.hero-r{display:none}
@media (min-width:820px){.hero-r{display:block}}
.orb-wrap{aspect-ratio:1;width:clamp(150px,19vw,252px);margin-left:auto}
/* The emblem turns in place, like a reel. Slow and linear so it reads as a
   constant, not an effect, and it starts only after the frame has opened so
   it never competes with the hero's entrance. Transform only. */
.orb-wrap img{transform-origin:50% 50%}
@media (prefers-reduced-motion:no-preference){
  .orb-wrap img{animation:turn 38s linear 1.3s infinite;will-change:transform}
}
@keyframes turn{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.orb-wrap img{width:100%}
/* The waveform runs the width of the lower band; the orb sits on its end. */
.scope{position:absolute;bottom:0;left:0;width:100%;max-width:none;
  height:clamp(110px,21vh,215px);z-index:-1;pointer-events:none}
.scope path{fill:none;stroke:var(--teal);stroke-width:1.1;
  vector-effect:non-scaling-stroke;stroke-linecap:round}
.scope{opacity:.34}
@media (min-width:820px){.scope{opacity:.46}}
.dark .scope path,.teal .scope path{stroke:var(--teal-lit)}
/* The water keeps moving: each layer slides by exactly one of its own
   periods, so the wave is continuous with no seam, and the three speeds
   read as depth rather than as one sliding graphic. */
@media (prefers-reduced-motion:no-preference){
  .scope g{animation:flow var(--s) linear infinite;will-change:transform}
}
@keyframes flow{from{transform:translateX(0)}to{transform:translateX(calc(-1*var(--p)))}}
.orb-wrap{position:relative;z-index:2}
.dark .scope path,.teal .scope path{stroke:var(--teal-lit)}

/* --- the one orchestrated moment: the frame opens ------------------- */
@media (prefers-reduced-motion:no-preference){
  .hero-fr::before,.hero-fr::after,.hero-fr>.c2,.hero-fr>.c3{
    opacity:0;animation:mark .5s var(--ease) .12s forwards}
  .hero-fr>.c2{animation-delay:.21s}.hero-fr>.c3{animation-delay:.30s}
  .hero-fr::after{animation-delay:.39s}
  .hero-fr .fr-edge{clip-path:inset(100% 0 0 0);animation:strip .8s var(--ease) .18s forwards}
  .hero-h{clip-path:inset(0 100% 0 0);animation:wipe .95s var(--ease) .3s forwards}
  .hero-btm>div:nth-child(1){opacity:0;animation:lift .8s var(--ease) .64s forwards}
  .hero-btm>div:nth-child(2){opacity:0;animation:lift .9s var(--ease) .76s forwards}
  .hero-fr .fr-bar{opacity:0;animation:lift .7s var(--ease) .9s forwards}
}
@keyframes mark{to{opacity:1}}
@keyframes strip{to{clip-path:inset(0 0 0 0)}}
@keyframes wipe{to{clip-path:inset(0 0% 0 0)}}
@keyframes lift{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ==========================================================================
   ACTS & FIELDS
   ========================================================================== */
.act{padding-block:var(--act)}
.act-sm{padding-block:calc(var(--act)*.62)}
.paper2{background:var(--paper-2)}
.dark{background:var(--teal-blk);color:var(--t-bone)}
.teal{background:var(--teal-dp);color:var(--t-bone)}
.dark h1,.dark h2,.dark h3,.teal h1,.teal h2,.teal h3{color:var(--t-bone)}
.dark .lead,.teal .lead,.dark .hero-sub{color:var(--t-bone)}

/* --- ledger: a split where one half is a colour field --------------- */
.ledger{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:980px){.ledger{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}}
.ledger>*{padding:clamp(1.6rem,3.4vw,3.4rem)}
.ledger-f{background:var(--teal-dp);color:var(--t-bone);display:flex;
  flex-direction:column;justify-content:space-between;gap:2rem}
.answer{font-size:clamp(1.02rem,.98rem + .35vw,1.22rem);line-height:1.58;max-width:62ch}
.answer strong{font-weight:600}
/* Emphasis is weight in the same face, never a second family. 600 is a real
   cut that ships with the site; bold would make the browser fake one. */
strong,b{font-weight:600}
.lead strong{font-weight:600}

/* --- the slate: a camera report, not a stats bar -------------------- */
.slate{width:100%;border-collapse:collapse;font-size:.95rem}
.slate caption{text-align:left;font:500 .68rem/1.5 var(--m);letter-spacing:.2em;
  text-transform:uppercase;color:var(--t-teal-sub);padding-bottom:1.1rem}
.slate th,.slate td{text-align:left;padding:.62rem 0;border-bottom:1px solid var(--hair-lt);
  vertical-align:baseline}
.slate th{font:500 .66rem/1.5 var(--m);letter-spacing:.17em;text-transform:uppercase;
  color:var(--t-teal-sub);width:40%;font-weight:500;padding-right:1rem}
@media (max-width:560px){
  .slate th{width:44%;letter-spacing:.1em;font-size:.62rem;padding-right:.7rem}
  .slate td{font-size:clamp(.95rem,3.6vw,1.1rem)}
}
.slate td{font-family:var(--d);font-weight:700;font-stretch:112%;
  font-size:clamp(1rem,1.3vw,1.3rem);text-transform:uppercase;letter-spacing:-.01em}
.slate tr:last-child th,.slate tr:last-child td{border-bottom:0}

/* --- contact sheet: one row of aspect-locked frames, snap scrolled -- */
.sheet:focus-visible{outline:2px solid var(--teal-dp);outline-offset:3px}
/* A contact sheet is a grid of frames, not a single strip. Every frame is on
   the page at once: nothing is hidden behind a horizontal scroll, which is a
   thing people simply do not find. The 1px gaps show the sheet's own rule
   through, so it reads as one sheet rather than as separate cards. */
.sheet{display:grid;gap:1px;background:var(--hair);
  grid-template-columns:1fr;border:1px solid var(--hair)}
@media (min-width:620px){.sheet{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.sheet{grid-template-columns:repeat(3,1fr)}}
.cell{background:var(--paper);padding:clamp(1.2rem,1.8vw,1.7rem);
  display:flex;flex-direction:column;gap:.8rem;min-height:clamp(13rem,19vw,17rem);
  text-decoration:none;color:inherit;position:relative;
  transition:background .35s var(--ease)}
.cell:nth-child(even){background:var(--paper-2)}
@media (min-width:1040px){
  .cell:nth-child(even){background:var(--paper)}
  .cell:nth-child(2n+2):nth-child(-n+3),.cell:nth-child(4),.cell:nth-child(6){background:var(--paper-2)}
}
.cell:hover,.cell:focus-visible{background:#DFE1DB}
.dark .cell,.teal .cell{background:var(--teal-blk)}
.dark .cell:nth-child(even),.teal .cell:nth-child(even){background:var(--teal-blk-2)}
.cell .fn{font:500 .66rem/1 var(--m);letter-spacing:.2em;color:var(--t-sub)}
.cell h3{font-family:var(--d);font-weight:700;font-stretch:115%;
  text-transform:uppercase;font-size:clamp(1.05rem,1.45vw,1.35rem);line-height:1.04;
  letter-spacing:-.015em}
.cell p{font-size:.93rem;color:var(--t-sub);margin:0}
.cell .go{margin-top:auto;display:flex;align-items:center;gap:.5rem;
  font:500 .66rem/1 var(--m);letter-spacing:.17em;text-transform:uppercase}
.cell .go svg{width:13px;height:13px;transition:transform .35s var(--ease)}
.cell:hover .go svg{transform:translateX(5px)}
.cell::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--mark);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease)}
.cell:hover::after,.cell:focus-visible::after{transform:scaleX(1)}

/* --- kinetic type: the one moving text band on a page -------------- */
.ghost{position:absolute;left:0;right:0;overflow:hidden;pointer-events:none;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ghost-trk{display:flex;width:max-content;gap:2.5rem;
  animation:slide 44s linear infinite;will-change:transform}
.ghost span{font-family:var(--d);font-weight:800;font-stretch:140%;
  text-transform:uppercase;font-size:clamp(4rem,15vw,15rem);line-height:.8;
  letter-spacing:-.04em;color:transparent;
  -webkit-text-stroke:1px rgba(231,232,228,.17);white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ghost-trk{animation:none}}

/* --- the timeline rail: order is real information here ------------- */
.rail{position:relative;display:grid;gap:0;counter-reset:step}
@media (min-width:860px){.rail{grid-template-columns:repeat(4,1fr)}}
.rail>div{position:relative;padding:2.2rem clamp(1rem,1.6vw,1.6rem) 1.6rem;
  border-top:1px solid var(--hair)}
@media (min-width:860px){.rail>div+div{border-left:1px solid var(--hair)}}
@media (max-width:859px){.rail>div+div{border-top:1px solid var(--hair)}}
.dark .rail>div{border-color:var(--hair-lt)}
.rail>div::before{content:"";position:absolute;top:-1px;left:0;width:26px;height:3px;
  background:var(--mark)}
.dark .rail>div::before,.teal .rail>div::before{background:var(--gold)}
.rail .tc{font:500 .66rem/1 var(--m);letter-spacing:.2em;color:var(--t-sub);
  display:block;margin-bottom:.7rem}
.rail .tc:empty{display:none}
.dark .rail .tc{color:var(--t-bone-sub)}
.rail h3{font-family:var(--d);font-weight:700;font-stretch:115%;
  text-transform:uppercase;font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.04}
.rail p{font-size:.93rem;margin:.6rem 0 0;color:var(--t-sub)}
.dark .rail p{color:var(--t-bone-sub)}

/* --- the register: grouped rows, sparse rules (replaces spec tables) */
/* The register answers to the width of the column it sits in, not the window,
   because it appears both full-bleed and inside a narrow sidebar. */
.reg-wrap{container-type:inline-size}
.reg{display:grid;gap:0;column-gap:clamp(1.6rem,4vw,5rem);
  grid-template-columns:1fr}
@container (min-width:620px){.reg{grid-template-columns:repeat(2,1fr)}}
@container (min-width:1000px){.reg{grid-template-columns:repeat(var(--cols,2),1fr)}}
/* An odd count would otherwise end on a lone item; the last one takes the row. */
@container (min-width:620px) and (max-width:999px){
  .reg[data-odd]>div:last-child{grid-column:1/-1}
}
@container (min-width:1000px){
  .reg[data-span]>div:last-child{grid-column:1/-1}
}
.reg>div{display:grid;grid-template-columns:1fr;gap:.35rem;
  padding:1.15rem 0;border-bottom:1px solid var(--hair)}
@media (min-width:560px){
  .reg>div{grid-template-columns:7.5rem 1fr;gap:0 1.1rem}
  .reg p{grid-column:2}
}
.dark .reg>div{border-bottom-color:var(--hair-lt)}
.reg .k{font:500 .66rem/1.7 var(--m);letter-spacing:.17em;text-transform:uppercase;
  color:var(--t-sub);padding-top:.15rem}
.dark .reg .k{color:var(--t-bone-sub)}
.reg h3{font-size:1.02rem;font-weight:600}
.reg p{font-size:.93rem;color:var(--t-sub);margin:.3rem 0 0}
.dark .reg p{color:var(--t-bone-sub)}

/* --- film slot: an honest empty frame awaiting a real still -------- */
.slot{position:relative;background:var(--paper-2);overflow:hidden;
  display:flex;align-items:flex-end}
.dark .slot,.teal .slot{background:rgba(231,232,228,.055)}
.slot-239{aspect-ratio:2.39/1}
.slot-32{aspect-ratio:3/2}
.slot-45{aspect-ratio:4/5}
.slot img,.slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot-note{position:relative;z-index:2;width:100%;padding:.75rem .9rem;
  display:flex;justify-content:space-between;gap:1rem;
  font:500 .64rem/1.4 var(--m);letter-spacing:.17em;text-transform:uppercase;
  color:var(--t-sub);border-top:1px solid var(--hair)}
.dark .slot-note{color:var(--t-bone-sub);border-top-color:var(--hair-lt)}
.teal .slot-note{color:var(--t-teal-sub);border-top-color:var(--hair-lt)}
.slot-x{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom right,transparent calc(50% - .5px),var(--hair) 50%,transparent calc(50% + .5px)),
    linear-gradient(to bottom left, transparent calc(50% - .5px),var(--hair) 50%,transparent calc(50% + .5px));
  opacity:.5}

/* --- FAQ (AEO): no cards, sparse rules ----------------------------- */
.faq{border-top:1px solid var(--hair)}
.dark .faq,.teal .faq{border-top-color:var(--hair-lt)}
.faq details{border-bottom:1px solid var(--hair)}
.dark .faq details,.teal .faq details{border-bottom-color:var(--hair-lt)}
.faq summary{cursor:pointer;list-style:none;padding:1.25rem 2.6rem 1.25rem 0;
  position:relative;font-family:var(--d);
  font-weight:700;font-stretch:112%;text-transform:uppercase;
  font-size:clamp(.98rem,1.2vw,1.14rem);line-height:1.14;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.3rem;top:1.55rem;
  width:12px;height:12px;
  background:linear-gradient(var(--mark),var(--mark)) center/12px 2px no-repeat,
             linear-gradient(var(--mark),var(--mark)) center/2px 12px no-repeat;
  transition:transform .35s var(--ease)}
.faq details[open] summary::after{
  background:linear-gradient(var(--mark),var(--mark)) center/12px 2px no-repeat}
.dark .faq summary::after,.teal .faq summary::after{
  background:linear-gradient(var(--gold),var(--gold)) center/12px 2px no-repeat,
             linear-gradient(var(--gold),var(--gold)) center/2px 12px no-repeat}
.dark .faq details[open] summary::after,.teal .faq details[open] summary::after{
  background:linear-gradient(var(--gold),var(--gold)) center/12px 2px no-repeat}
.faq summary::after{transition:background-size .3s var(--ease)}
.faq .a{padding:0 0 1.5rem;max-width:68ch}
.faq .a p{font-size:.98rem;color:var(--t-sub)}
.dark .faq .a p{color:var(--t-bone-sub)}
.teal .faq .a p{color:var(--t-teal-sub)}

/* --- form ----------------------------------------------------------- */
.field{display:grid;gap:.45rem;margin-bottom:1.15rem}
.field label{font:500 .68rem/1.4 var(--m);letter-spacing:.17em;text-transform:uppercase}
.field input,.field select,.field textarea{
  font-family:var(--b);font-size:1rem;padding:.8rem .9rem;color:var(--t-ink);
  background:var(--paper);border:1px solid var(--t-sub);border-radius:0;width:100%}
.field input::placeholder,.field textarea::placeholder{color:var(--t-sub);opacity:1}
.field .hint{font-size:.82rem;color:var(--t-sub)}
.field .err{font-size:.82rem;color:#8A1B10;font-weight:600}
.dark .field input,.dark .field select,.dark .field textarea{
  background:rgba(231,232,228,.05);border-color:var(--t-bone-sub);color:var(--t-bone)}
.dark .field input::placeholder,.dark .field textarea::placeholder{color:var(--t-bone-sub)}

/* --- footer --------------------------------------------------------- */
.ftr{background:var(--ink);color:var(--t-bone);padding:var(--act) 0 2rem}
.ftr-top{display:grid;gap:2.4rem;grid-template-columns:1fr}
@media (min-width:760px){.ftr-top{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}}
.ftr-brand img{width:min(190px,54vw);margin-bottom:1rem}
.ftr h2{font:500 .68rem/1.5 var(--m);letter-spacing:.2em;text-transform:uppercase;
  color:var(--t-bone-sub);margin-bottom:.9rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ftr a{color:var(--t-bone);text-decoration:none}
.ftr a:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.ftr .sm{font-size:.9rem;color:var(--t-bone-sub)}
.ftr-btm{margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--hair-lt);
  display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;
  font:500 .66rem/1.7 var(--m);letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-bone-sub)}
.ftr-btm a{color:var(--t-bone-sub);text-decoration:underline}

/* --- crumbs --------------------------------------------------------- */
.crumbs{display:flex;gap:.6rem;align-items:center;margin-bottom:1.6rem;
  font:500 .66rem/1 var(--m);letter-spacing:.17em;text-transform:uppercase;
  color:var(--t-sub)}
.crumbs a{color:var(--t-sub)}

/* --- quiet lift on scroll (the only scroll motion) ----------------- */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* --- work filter ---------------------------------------------------- */
.filt{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:2rem}
.filt button{appearance:none;cursor:pointer;background:transparent;
  border:1px solid var(--hair-ui);color:var(--t-sub);padding:.5rem .9rem;
  font:500 .68rem/1 var(--m);letter-spacing:.15em;text-transform:uppercase;
  transition:all .3s var(--ease)}
.filt button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.empty{padding:3rem 0;text-align:center;color:var(--t-sub)}

/* --- a statement set inside a frame, in place of a missing still ---- */
.say{padding:clamp(1.6rem,3.4vw,2.8rem)}
.say p{font-family:var(--d);font-weight:700;font-stretch:112%;text-transform:uppercase;
  font-size:clamp(1.15rem,2vw,1.85rem);line-height:1.06;letter-spacing:-.018em;margin:0}
.say .by{font:500 .66rem/1.5 var(--m);letter-spacing:.17em;text-transform:uppercase;
  color:var(--t-bone-sub);margin-top:1.1rem;display:block}

/* --- the map sits on its own dark ground so the live states read ---- */
.map-fr{background:var(--teal-blk);padding:clamp(1.2rem,2.6vw,2.2rem)}

/* --- a wide display column: never capped in ch ---------------------- */
.col-wide{max-width:min(100%,50rem)}
.col-mid{max-width:min(100%,34rem)}

/* --- the tagline lockup, set as the studio's sign-off stamp --------- */
.stamp{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.stamp img{width:min(300px,78%)}
.stamp span{font:500 .66rem/1.5 var(--m);letter-spacing:.2em;text-transform:uppercase;
  color:var(--t-sub)}
.dark .stamp span,.teal .stamp span{color:var(--t-bone-sub)}
.close-in{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;
  padding:clamp(3rem,8vw,5.5rem) clamp(1.4rem,5vw,4rem);grid-template-columns:1fr}
.close-in>*,.ledger>*,.hero-btm>*,.hero-body>*{min-width:0}
@media (min-width:900px){.close-in{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}}

/* --- inner-page hero: the same frame, pitched lower -------------- */
.hero-page .hero-fr{min-height:min(78svh,660px)}
.hero-page .hero-h{font-size:clamp(2.35rem,6.6vw,6.2rem)}
.hero-page .crumbs{margin-bottom:0}
@media (prefers-reduced-motion:no-preference){
  .hero-page .crumbs{opacity:0;animation:lift .6s var(--ease) .3s forwards}
}

/* --- engagement frames: a row of framed plans ---------------------- */
.plans{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:1fr}
@media (min-width:820px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{display:flex;flex-direction:column}
.plan-in{padding:clamp(1.3rem,2vw,1.8rem);display:flex;flex-direction:column;gap:.8rem;flex:1}
.plan h3{margin:0}
.plan p{margin:0;font-size:.93rem}
.plan ul{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.5rem;font-size:.92rem}
.plan li{padding-left:1.1rem;position:relative;color:var(--t-bone-sub)}
.plan li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  background:var(--gold)}

/* --- people: the same framed unit as an engagement ----------------- */
.people{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:1fr}
@media (min-width:820px){.people{grid-template-columns:repeat(3,1fr)}}
.person{display:flex;flex-direction:column}
.person-in{padding:clamp(1.3rem,2vw,1.8rem);display:flex;flex-direction:column;gap:.7rem;flex:1}
.person h3{margin:0}
.person p{margin:0;font-size:.93rem}
.person ul{list-style:none;margin:.3rem 0 0;padding:0;display:grid;gap:.45rem;font-size:.9rem}
.person li{padding-left:1.1rem;position:relative;color:var(--t-bone-sub)}
.person li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  background:var(--gold)}

/* --- work index: framed entries, each awaiting its still ----------- */
.works{display:grid;gap:clamp(1rem,2vw,1.6rem);grid-template-columns:1fr;margin-top:1rem}
@media (min-width:640px){.works{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.works{grid-template-columns:repeat(3,1fr)}}
.work{display:flex;flex-direction:column;background:var(--paper)}
.work:nth-child(even){background:var(--paper-2)}
.work-in{padding:clamp(1.1rem,1.8vw,1.5rem);flex:1}
.work h2{margin:0}
.work .meta{margin:0}
.work .sub{font-size:.92rem;margin:0}
.work[hidden]{display:none}
.slot-169{aspect-ratio:16/9}

/* --- the brief form, framed like everything else ------------------ */
.contact-grid{display:grid;gap:clamp(1.6rem,4vw,3.2rem);grid-template-columns:1fr}
@media (min-width:980px){.contact-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
.brief{display:flex;flex-direction:column;background:var(--paper-2)}
.brief-in{padding:clamp(1.4rem,2.6vw,2.4rem)}
.brief h2{margin:0}
.two{display:grid;gap:0 1.1rem;grid-template-columns:1fr}
@media (min-width:620px){.two{grid-template-columns:1fr 1fr}}
.field textarea{resize:vertical;min-height:7rem;font-family:var(--b)}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--t-ink) 50%),
                   linear-gradient(135deg,var(--t-ink) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(1.25em),calc(100% - 13px) calc(1.25em);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.4rem}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  border-color:var(--teal-dp)}
.field [aria-invalid="true"]{border-color:#8A1B10;border-width:2px}
.btn[aria-busy="true"]{opacity:.7;pointer-events:none}

/* --- target size: every standalone link clears 24px --------------- */
.nav-foot a,.ftr ul a,.ftr-btm a,.crumbs a{
  display:inline-flex;align-items:center;min-height:26px}
.ftr ul{gap:.3rem}
.ftr ul a{padding-block:.2rem}
.nav-foot{gap:.2rem 1.6rem}
.crumbs{gap:.5rem;align-items:center}
.sheet .cell,.filt button{min-height:40px}

/* --- the sheet's scrub controls ------------------------------------
   The pan is a deliberate device, so it gets a deliberate affordance:
   a frame counter, a scrub rail and step buttons, all keyboard operable. */
/* When every frame already fits, the controls have nothing to do. */

/* ==========================================================================
   LOOPING REEL BAND
   16:9 on desktop, 9:16 on phones, which means two cuts rather than one
   cropped. The player is built on scroll, so the page never pays for
   YouTube's script up front.
   ========================================================================== */
.reel-band{padding-block:calc(var(--act)*.55)}
.reel-frame{position:relative;display:flex;flex-direction:column;
  max-width:min(100%,1280px);margin-inline:auto}
.reel-stage{position:relative;aspect-ratio:9/16;background:var(--paper-2);
  overflow:hidden;display:flex;align-items:center;justify-content:center}
@media (min-width:721px){.reel-stage{aspect-ratio:16/9}}
.dark .reel-stage,.teal .reel-stage{background:rgba(231,232,228,.055)}
.reel-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

.reel-empty{position:relative;z-index:2;margin:0;max-width:34ch;text-align:center;
  padding:1.2rem;font:500 .72rem/1.7 var(--m);letter-spacing:.08em;
  text-transform:uppercase;color:var(--t-sub)}
.dark .reel-empty,.teal .reel-empty{color:var(--t-bone-sub)}
.reel-fallback{position:relative;z-index:2;font:500 .72rem/1 var(--m);
  letter-spacing:.14em;text-transform:uppercase}

.reel-dim{font-weight:500}
.reel-sound{appearance:none;cursor:pointer;background:transparent;color:inherit;
  border:1px solid var(--hair-ui);margin-left:1rem;padding:.3rem .7rem;
  font:500 .64rem/1 var(--m);letter-spacing:.16em;text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease)}
.reel-sound:hover{background:var(--ink);color:var(--paper)}
.dark .reel-sound,.teal .reel-sound{border-color:var(--hair-lt)}
.dark .reel-sound:hover,.teal .reel-sound:hover{background:var(--t-bone);color:var(--ink)}

/* Reduced motion: nothing starts by itself, the visitor presses play. */
.reel-play{position:absolute;inset:0;z-index:3;display:none;
  align-items:center;justify-content:center;gap:.7rem;cursor:pointer;
  appearance:none;background:transparent;border:0;color:inherit;width:100%;
  font:500 .72rem/1 var(--m);letter-spacing:.16em;text-transform:uppercase}
.reel-play[hidden]{display:none}
.reel-play i{display:grid;place-items:center;width:58px;height:58px;
  border:1px solid currentColor;flex:none}
.reel-play svg{width:18px;height:18px;fill:currentColor;margin-left:3px}
.reel-frame[data-needs-play] .reel-play{display:flex}

/* The middle engagement carries the marker rule, the same device the contact
   sheet uses for the active frame. No extra words, no invented claim. */
.plan[data-featured]{position:relative}
.plan-mark{position:absolute;left:-1px;right:-1px;top:-1px;height:3px;
  background:var(--gold);pointer-events:none}

/* ==========================================================================
   MERIDIAN DASHBOARD
   The product keeps its own interface language; the site hosts it inside a
   frame rather than restyling it. Channel colours validated on the white
   card surface, and every channel carries its initial and name as well.
   ========================================================================== */
.mx{padding:0;background:#F1F3F5;overflow:hidden}
.md{--b:#E2E8F0;--ink:#0F172A;--mut:#556070;--card:#fff;--good:#047857;
  font-family:var(--b-sans,"Chivo",system-ui,sans-serif);color:var(--ink);
  padding:clamp(.8rem,1.4vw,1.1rem);display:grid;gap:clamp(.7rem,1.2vw,1rem);
  font-size:clamp(.78rem,.72rem + .16vw,.9rem);line-height:1.45}

.md-top{background:var(--card);border:1px solid var(--b);border-radius:14px;
  padding:.85rem 1rem;display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;
  align-items:center;justify-content:space-between}
.md-brand{display:flex;align-items:center;gap:.7rem;min-width:0}
.md-mark{width:38px;height:38px;flex:none;border-radius:10px;background:var(--ink);
  color:#fff;display:grid;place-items:center}
.md-mark svg{width:20px;height:20px}
.md-title b{display:block;font-size:1.22em;font-weight:600;letter-spacing:-.01em;line-height:1.1}
.md-title sup{font-size:.5em;font-weight:600;vertical-align:super;margin-left:.1em}
.md-title i{display:block;font-style:normal;color:var(--mut);font-size:.84em;margin-top:.1rem}
.md-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.md-chip{border:1px solid var(--b);border-radius:999px;padding:.38rem .75rem;
  font-size:.82em;color:var(--ink);white-space:nowrap}
.md-chip-mono{font-family:var(--m);font-size:.76em;letter-spacing:.02em;color:var(--mut)}
.md-chip-live{display:inline-flex;align-items:center;gap:.45rem}
.md-chip-live i{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none}

.md-kpis{display:grid;gap:.6rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.md-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1180px){.md-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}}
.md-kpi{background:var(--card);border:1px solid var(--b);border-radius:14px;
  padding:.85rem .9rem;min-width:0}
.md-kpi-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.md-kpi-dark .md-k{color:#94A3B8}
.md-k{display:block;font-size:.73em;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mut)}
.md-num{display:block;font-size:2em;font-weight:600;letter-spacing:-.02em;
  line-height:1.08;margin-top:.3rem;font-variant-numeric:tabular-nums}
.md-note{display:block;color:var(--mut);font-size:.84em;margin-top:.3rem}
.md-up{display:inline-flex;align-items:center;gap:.22rem;margin-top:.3rem;
  color:var(--good);font-size:.84em;font-weight:600}
.md-up svg{width:11px;height:11px;fill:currentColor;flex:none}
.md-stack{display:flex;gap:2px;height:7px;margin-top:.7rem;border-radius:3px;overflow:hidden}
.md-stack i{display:block;height:100%}
.md-legend{list-style:none;margin:.55rem 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:.2rem .7rem;font-size:.76em;color:#CBD5E1}
.md-legend li{display:flex;align-items:center;gap:.3rem}
.md-legend i{width:8px;height:8px;border-radius:2px;flex:none}
.md-inline{color:var(--mut);margin:0}

.md-cols-wrap{display:grid;gap:.6rem;grid-template-columns:1fr;align-items:start}
@media (min-width:720px){.md-cols-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){.md-cols-wrap{grid-template-columns:repeat(4,minmax(0,1fr))}}
.md-col{background:var(--card);border:1px solid var(--b);border-radius:14px;
  padding:.9rem;display:grid;gap:.75rem;align-content:start;min-width:0}

.md-chead{display:flex;align-items:center;gap:.55rem}
.md-badge{width:26px;height:26px;flex:none;border-radius:7px;color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.82em}
.md-cname{min-width:0;flex:1}
.md-cname b{display:block;font-size:1.08em;font-weight:600;line-height:1.15}
.md-cname i{display:block;font-style:normal;color:var(--mut);font-size:.8em}
.md-pill{flex:none;border-radius:999px;padding:.2rem .55rem;font-size:.7em;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.md-live{background:#D1FAE5;color:#065F46}
.md-proj-tag{background:#FEF3C7;color:#92400E}
.md-proj-pill{background:#EDE9FE;color:#5B21B6}

.md-pair{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.md-mini{border:1px solid var(--b);border-radius:11px;padding:.6rem .65rem;min-width:0}
.md-mini b{display:block;font-size:1.55em;font-weight:600;line-height:1.1;margin-top:.2rem;
  font-variant-numeric:tabular-nums}
.md-warm{background:#FFFBEB;border-color:#FDE68A}

.md-block{display:grid;gap:.5rem}
.md-bhead{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.md-bhead em{font-style:normal;color:var(--mut);font-size:.78em;text-align:right}
.md-chart{width:100%;height:92px;display:block}
.md-ax{display:flex;justify-content:space-between;font-family:var(--m);
  font-size:.68em;color:var(--mut)}
.md-donutrow{display:flex;align-items:center;gap:.9rem}
.md-donut{width:84px;height:84px;flex:none}
.md-donut-c{font-size:21px;font-weight:600;fill:var(--ink);font-family:inherit}
.md-keys{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;flex:1;min-width:0;
  font-size:.84em}
.md-keys li{display:grid;grid-template-columns:9px 1fr auto auto;gap:.45rem;align-items:center}
.md-keys i{width:9px;height:9px;border-radius:2px}
.md-keys span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-keys b{font-weight:600;font-variant-numeric:tabular-nums}
.md-keys em{font-style:normal;color:var(--mut);min-width:2.6em;text-align:right}
.md-rows{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:.88em}
.md-rows li{display:flex;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--b);padding-bottom:.35rem}
.md-rows b{font-variant-numeric:tabular-nums}

.md-sub{border:1px solid var(--b);border-radius:11px;padding:.65rem .7rem;display:grid;gap:.55rem}
.md-subhead{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.md-subhead b{font-weight:600}
.md-subhead em{font-style:normal;color:var(--mut);font-size:.8em}
.md-quad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem}
.md-quad b{display:block;font-weight:600;font-size:1.05em;margin-top:.1rem;
  font-variant-numeric:tabular-nums}
.md-proj{border:1px solid #DDD6FE;background:#F5F3FF;border-radius:11px;
  padding:.65rem .7rem;display:grid;gap:.5rem}
.md-progress{height:7px;border-radius:4px;background:#DDD6FE;overflow:hidden}
.md-progress i{display:block;height:100%;background:#7E22CE}
.md-progress-l{display:flex;justify-content:space-between;font-size:.78em;color:#5B21B6}
.md-fine{margin:0;font-size:.78em;color:#5B21B6;line-height:1.5}

.md-hbars{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.md-hb-top{display:flex;justify-content:space-between;gap:.8rem;font-size:.86em}
.md-hb-top b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-hb-top i{font-style:normal;font-variant-numeric:tabular-nums;flex:none}
.md-hb-track{display:block;height:5px;border-radius:3px;background:#F1F5F9;margin-top:.22rem}
.md-hb-fill{display:block;height:100%;border-radius:3px}
.md-cols{width:100%;height:118px;display:block;overflow:visible}
.md-colval{font-size:11px;font-weight:600;fill:var(--ink);font-family:inherit}
.md-colax{font-size:10px;fill:var(--mut);font-family:var(--m)}

.md-table{width:100%;border-collapse:collapse;font-size:.84em}
.md-table th{text-align:left;font-size:.82em;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut);padding-bottom:.35rem;border-bottom:1px solid var(--b)}
.md-table th:not(:first-child),.md-table td:not(:first-child){text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:.6rem}
.md-table td{padding:.45rem 0;border-bottom:1px solid var(--b);vertical-align:top}
.md-table td b{display:block;font-weight:500}
.md-table td span{display:block;color:var(--mut);font-size:.86em}
.md-pr{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:.86em}
.md-pr li{display:flex;justify-content:space-between;gap:.8rem;align-items:flex-start;
  border-bottom:1px solid var(--b);padding-bottom:.45rem}
.md-pr em{display:block;font-style:normal;color:var(--mut);font-size:.88em}
.md-prv{font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}

.md-foot{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;justify-content:space-between;
  padding:.2rem .3rem;font-size:.78em;color:var(--mut)}
.md-foot b{font-weight:600;color:var(--ink)}

/* Each channel is a disclosure. On a phone the four of them stacked open run
   past 3,000px and bury the rest of the page, so all but the first are closed
   there and opened by tapping the channel's own header. With no JavaScript
   every one stays open. */
details.md-col>summary{cursor:pointer;list-style:none}
details.md-col>summary::-webkit-details-marker{display:none}
details.md-col>summary::after{content:"";width:9px;height:9px;flex:none;
  border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);
  transform:rotate(45deg) translate(-2px,-2px);margin-left:.2rem;display:none}
@media (max-width:719px){
  details.md-col>summary::after{display:block}
  details.md-col[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
}
.md-table th abbr{text-decoration:none;border-bottom:1px dotted var(--mut);cursor:help}
details.md-col>summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;
  border-radius:10px}

/* ==========================================================================
   SMALL-SCREEN TYPE FLOOR
   Measured on a 390px viewport: a handful of mono labels were rendering
   between 8.5px and 10.6px. They are legible on a desktop at a normal reading
   distance and not in a hand, so each is lifted to at least 11px here and left
   alone above the breakpoint, where the smaller size is part of the look.
   The breakpoint covers tablets in portrait as well as phones, since 10.6px
   mono is no easier to read on an iPad than on a handset.
   ========================================================================== */
@media (max-width:899px){
  .slate caption{font-size:.76rem;letter-spacing:.14em}
  .slate th{font-size:.72rem;letter-spacing:.08em}
  .cell .fn,.cell .go,.say .by{font-size:.72rem;letter-spacing:.12em}
  .reg .k,.fr .k,.fr .by{font-size:.72rem;letter-spacing:.12em}
  .ftr h2{font-size:.74rem;letter-spacing:.16em}
  .crumbs{font-size:.72rem;letter-spacing:.1em;gap:.5rem}
  .stamp span{font-size:.72rem;letter-spacing:.14em}
  .reg-list li{font-size:.74rem}
  .ftr-btm{font-size:.72rem;letter-spacing:.06em}
  .field label{font-size:.74rem;letter-spacing:.12em}
  .filt button{font-size:.74rem;letter-spacing:.08em}
  .rail .tc{font-size:.72rem;letter-spacing:.14em}
  .fr-bar{font-size:.72rem;letter-spacing:.09em;gap:1rem}
  .reel-head,.reel-dim{font-size:.72rem;letter-spacing:.09em}
  .slot-note{font-size:.72rem;letter-spacing:.09em}
  .md-chip{font-size:.78rem;letter-spacing:.02em}
}

/* India map state labels. The size is in SVG user units, so it scales with the
   map: 7.5 reads at about 12.8px where the map is at its 470px maximum, but
   only 8.6px on a phone, where the map is drawn at roughly 314px. The phone
   value is raised so the label lands near 11.5px there instead. */
.in-lab{font-size:7.5px}
@media (max-width:719px){ .in-lab{font-size:10px} }

/* ==========================================================================
   MERIDIAN DASHBOARD ON SMALL SCREENS
   Everything inside the panel is sized in em against .md, which clamps to
   about 12.5px at 390px wide. The deepest multipliers (.7em pills, .68em axis
   labels) were landing at 8.5-9px. The base is raised here and the few
   smallest multipliers are lifted with it, which is cheaper than restyling
   each one and keeps the desktop panel exactly as it is. The breakpoint runs
   to 899px because the panel is already down to two columns of about 335px by
   then, so there is room for the larger base.
   ========================================================================== */
@media (max-width:899px){
  .md{font-size:14px}
  .md-pill{font-size:.8em}
  .md-ax{font-size:.8em}
  .md-k{font-size:.82em}
  .md-legend{font-size:.84em}
  .md-fine{font-size:.86em}
  .md-bhead em,.md-subhead em{font-size:.86em}
  .md-table{font-size:.9em}
  .md-table th{font-size:.9em}
  .md-table th abbr{font-size:1em}
  .md-badge{font-size:.82em}

  /* The channel header is the control that opens the channel. At 30px it
     cleared the 24px minimum but was not a comfortable thumb target. */
  details.md-col>summary{padding-block:.5rem;min-height:44px}

  /* At 320px the reel sub-panel and its four-up figures ran past their box. */
  .md-sub{padding:.6rem .55rem}
  .md-quad{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem .5rem}
  .md-subhead{flex-wrap:wrap;gap:.2rem .5rem}

  /* These two are SVG user units on a 400-wide viewBox that is drawn at about
     295px on a phone, so 11u arrived as 8.2px. Scaled up to land near 11px. */
  .md-colval{font-size:15px}
  .md-colax{font-size:13.5px}
}

/* Very narrow phones (iPhone SE and similar, 320px). The 14px panel base is a
   little too generous there: the big figures and the channel name start to
   push past their columns, so the base steps back down and the channel header
   is allowed to wrap under its badge. */
@media (max-width:359px){
  /* The frame bar holds two mono labels on one row. At 320px they no longer
     fit at the larger phone size, so the letter-spacing closes up and the
     labels are allowed to wrap rather than being squeezed. */
  .fr-bar{flex-wrap:wrap;gap:.2rem .6rem;letter-spacing:.03em;font-size:.7rem}
  .fr-bar b:last-child{text-align:left}
  .md-chip{font-size:.74rem;padding:.3rem .55rem}
  /* Two KPI tiles side by side need more width than a 320px screen leaves
     once the frame and the panel padding are taken out, so the second column
     was being cut off at the right edge. One tile per row below 360px. */
  .md-kpis{grid-template-columns:1fr}
  .md-donutrow{flex-wrap:wrap}
  /* The donut legend truncates its labels to one line. At 320px "Search ·
     desktop" no longer fits, so the labels are allowed to wrap instead of
     being cut to "Search · des...". */
  .md-keys span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
  .md-keys li{align-items:start}
  /* The channel header runs badge, name, status pill and chevron on one row;
     closing the gap keeps it inside the card at this width. */
  .md-chead{gap:.4rem}
  .md{font-size:12.6px}
  .md-num{font-size:1.75em}
  .md-chead{flex-wrap:wrap;row-gap:.35rem}
  .md-cname{flex:1 1 100%;order:3}
  .md-pill{margin-left:auto}
}

/* ==========================================================================
   CLIENT LOGO STRIP
   Hidden until assets/img/clients/clients.txt lists at least one logo, so
   nothing appears before there is something real to show. Marks are set in
   the page's own ink rather than their brand colours, which keeps a wall of
   unrelated palettes from fighting the page.
   ========================================================================== */
.logo-act[hidden]{display:none}
.fr-flat{padding:0}
.logos{list-style:none;margin:0;padding:clamp(1.4rem,3.5vw,2.4rem) clamp(1.2rem,3vw,2rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:clamp(1.4rem,3.5vw,2.6rem) clamp(1.6rem,4vw,3rem);align-items:center}
.logos li{display:flex;align-items:center;justify-content:center;min-width:0}
.logos img{max-width:100%;max-height:46px;width:auto;height:auto;
  object-fit:contain;filter:grayscale(1);opacity:.78;
  transition:opacity .3s var(--ease),filter .3s var(--ease)}
.logos img:hover{filter:grayscale(0);opacity:1}
.dark .logos img,.teal .logos img{filter:grayscale(1) brightness(0) invert(1);opacity:.72}
.dark .logos img:hover,.teal .logos img:hover{opacity:1}
@media (max-width:719px){ .logos img{max-height:36px} }
@media (prefers-reduced-motion:reduce){ .logos img{transition:none} }