/* MR Factory v1.4 — "The Slate"
   Shared stylesheet. Tokens are normative in DESIGN.md; change them there first.
   Two grounds (cyclorama light / on-air dark), one accent that brightens on dark,
   no shadows anywhere. */
:root{
  --cyclorama:#F4F5F2; --cyc-shade:#E7E8E3;
  --ink:#0C1220; --ink-soft:#4A5261;
  --onair:#05070C; --onair-raise:#10141C;
  --paper-soft:#9AA3B2;
  --chroma:#1560C0; --chroma-lift:#5BB0FF; --tally:#FF3B30;
  --rule-light:rgba(12,18,32,.14); --rule-dark:rgba(244,245,242,.16);
  --plate:2px; --control:4px;
  --gutter:24px; --page:40px; --block:56px; --band:120px;
  /* one variable family; the width axis does the display work */
  --display:'Archivo','Helvetica Neue',sans-serif;
  --body:'Archivo','Helvetica Neue',sans-serif;
  --wide:112%;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:88px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  background:var(--cyclorama);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(21,96,192,.24);
}
a,button{touch-action:manipulation}
a{color:inherit}
:where(a,button,input,textarea,summary):focus-visible{
  outline:2px solid var(--chroma);outline-offset:3px;border-radius:1px;
}
.band-dark :where(a,button,input,textarea):focus-visible{outline-color:var(--chroma-lift)}
img{max-width:100%;display:block}

/* ---------- layout ---------- */
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--page)}
.band{padding:var(--band) 0;position:relative}
.band-dark{background:var(--onair);color:var(--cyclorama)}
.band-light{background:var(--cyclorama);color:var(--ink)}
.band-dark .col-read p,.band-dark .step p,.band-dark .card-contact dd{color:var(--paper-soft)}
.band-light .col-read p,.band-light .case .body p,.band-light .stat .l{color:var(--ink-soft)}
/* surface decides the color, not the band: plates are always dark inside */
.band-light .pending-note,.band-dark .pending-note{color:var(--paper-soft)}
.band-head{display:grid;grid-template-columns:1fr 190px;gap:var(--gutter);align-items:start}
.col-read{max-width:68ch}
.lede{font-size:19px;color:inherit !important}
h1+.lede{margin-top:26px}
h2+.lede,.eyebrow+.lede{margin-top:22px}
.lede+.lede{margin-top:16px}

/* metadata rail: real content, in flow */
.rail{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.9;border-top:1px solid var(--rule-light);padding-top:10px}
.band-dark .rail{border-top-color:var(--rule-dark);color:var(--paper-soft)}
.band-light .rail{color:var(--ink-soft)}
.rail b{display:block;font-weight:600;color:var(--ink)}
.band-dark .rail b{color:var(--cyclorama)}
.rail .live{color:var(--chroma)}
.band-dark .rail .live{color:var(--chroma-lift)}
.rail .live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--tally);margin-right:7px;vertical-align:middle}

/* ---------- type ---------- */
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:20px}
.band-light .eyebrow{color:var(--chroma)}
.band-dark .eyebrow{color:var(--chroma-lift)}
h1{font-family:var(--display);font-weight:700;font-stretch:var(--wide);
  font-size:clamp(44px,7vw,104px);
  line-height:.95;letter-spacing:-.03em;text-wrap:balance;max-width:15ch}
h2{font-family:var(--display);font-weight:600;font-stretch:105%;
  font-size:clamp(30px,4vw,56px);
  line-height:1.05;letter-spacing:-.02em;text-wrap:balance;max-width:20ch}
h3{font-family:var(--body);font-weight:600;font-size:21px;line-height:1.25;letter-spacing:-.01em}
/* emphasis follows the ground. This was one hardcoded ink rule that survived the
   proof band moving from light to dark and painted the lead-in of every case
   1.06:1 on black. More specific rules still win where they exist. */
.band-light strong,.band-light b{color:var(--ink)}
.band-dark strong,.band-dark b{color:var(--cyclorama)}
strong,b{font-weight:600}
.tape{width:44px;height:3px;background:var(--chroma);margin-bottom:18px}
.band-dark .tape{background:var(--chroma-lift)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  padding:15px 26px;border-radius:var(--control);border:1px solid transparent;
  font-family:var(--body);font-weight:600;font-size:16px;text-decoration:none;cursor:pointer;
  transition:background-color .12s linear,border-color .12s linear,color .12s linear}
.btn-primary{background:var(--chroma);color:var(--cyclorama)}
.btn-primary:hover{background:#114E9E}
.band-dark .btn-primary{background:var(--chroma-lift);color:var(--ink)}
.band-dark .btn-primary:hover{background:#7CC0FF}
.btn-line{background:transparent;border-color:currentColor;color:inherit}
.band-dark .btn-line:hover{background:rgba(244,245,242,.08)}
.band-light .btn-line:hover{background:rgba(12,18,32,.06)}
.btn .arw{font-family:var(--mono);font-size:14px}

/* ---------- nav ---------- */
.skip{position:fixed;left:8px;top:-80px;background:var(--ink);color:var(--cyclorama);
  padding:12px 18px;z-index:200;font-family:var(--mono);font-size:12px;
  transition:top .12s linear}
.skip:focus{top:8px}
nav{position:sticky;top:0;z-index:100;background:var(--cyclorama);
  border-bottom:1px solid var(--rule-light)}
.nav-in{max-width:1280px;margin:0 auto;padding:0 var(--page);height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.wordmark{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;
  color:var(--ink);flex:0 0 auto}
.wordmark svg{height:42px;width:auto;display:block}
.band-dark .wordmark{color:var(--cyclorama)}
.nav-list{display:flex;align-items:center;gap:26px;list-style:none}
.nav-list a{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;
  min-height:44px}
.nav-list a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--chroma)}
.nav-list a:hover{color:var(--chroma)}
.lang{font-family:var(--mono);font-size:11px;letter-spacing:.14em}
.lang a{padding:0 7px}
.lang [aria-current]{font-weight:600}
.lang span{color:var(--ink-soft);padding:0 4px}
.nav-toggle{display:none;align-items:center;gap:9px;min-height:44px;padding:8px 14px;
  background:transparent;border:1px solid var(--rule-light);border-radius:var(--control);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.nav-toggle .bars{display:inline-block;width:15px;height:9px;border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink)}
@media (max-width:900px){
  .wordmark svg{height:36px}
  .nav-toggle{display:inline-flex}
  .nav-panel{display:none;border-top:1px solid var(--rule-light);background:var(--cyclorama)}
  .nav-panel.open{display:block}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;padding:8px var(--page) 20px}
  .nav-list li{border-bottom:1px solid var(--rule-light)}
  .nav-list li:last-child{border-bottom:0;padding-top:14px}
  .nav-list a{padding:15px 0;font-size:12px}
  .nav-list .btn{width:100%;justify-content:center}
}
@media (min-width:901px){.nav-panel{display:block !important}}

/* ---------- the slate (signature) ---------- */
figure.plate{border:1px solid var(--rule-dark);border-radius:var(--plate);
  background:var(--onair-raise);overflow:hidden}
.band-light figure.plate{border-color:var(--rule-light)}
.slate{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--onair);color:var(--cyclorama);
  padding:9px 14px;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--rule-dark)}
.slate .scene{color:var(--chroma-lift)}
.slate .src{color:var(--paper-soft);flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slate .tc{font-variant-numeric:tabular-nums;color:var(--paper-soft)}
.slate .pending{color:var(--cyclorama)}
.slate .pending::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--tally);margin-right:7px;vertical-align:middle}
.plate-body{position:relative;background:var(--onair-raise);display:grid;place-items:center;
  padding:28px;min-height:220px;color:var(--paper-soft)}
.plate-body.ratio{aspect-ratio:16/9;min-height:0}
.plate-body .pending-note,.layer-comp .pending-note{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;line-height:1.9;
  text-transform:uppercase;text-align:center;max-width:44ch;color:var(--paper-soft)}

/* ---------- hero ---------- */
.hero{padding:calc(var(--band) - 20px) 0 var(--band)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
/* placement is source order, never explicit: an explicit column survives the
   collapse to one track and lands the text in an implicit second column */
.hero-grid>*,.split>*,.duo>*,.grid>*,.contact-grid>*{min-width:0}

.hero p{max-width:56ch}
.hero-tag{font-family:var(--body);font-weight:500;color:var(--cyclorama) !important;
  border-left:2px solid var(--chroma-lift);padding-left:16px;margin:26px 0 32px;max-width:48ch}
.actions{display:flex;flex-wrap:wrap;gap:14px}

/* composite stack: plate -> key -> comp, converging once */
.composite{position:relative;aspect-ratio:4/3}
.layer{position:absolute;inset:0;border:1px solid var(--rule-dark);border-radius:var(--plate);
  display:grid;place-items:end start;padding:12px;
  transform:translate3d(var(--fx,0),var(--fy,0),0)}
.layer .tag{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;background:var(--onair);color:var(--cyclorama);padding:5px 9px}
.layer-plate{background:var(--chroma);--fx:-34px;--fy:34px}
.layer-plate .tag{background:var(--ink);color:var(--chroma-lift)}
.layer-key{--fx:-17px;--fy:17px;background:
  repeating-linear-gradient(135deg,rgba(244,245,242,.10) 0 2px,transparent 2px 9px),var(--onair-raise)}
.layer-comp{background:var(--onair-raise);display:grid;place-items:center;padding:0}
.layer-comp .tag{position:absolute;left:12px;bottom:12px}
@media (prefers-reduced-motion:no-preference){
  .layer-plate{animation:settle .9s cubic-bezier(.2,.7,.2,1) both}
  .layer-key{animation:settle .9s cubic-bezier(.2,.7,.2,1) .12s both}
  .layer-comp{animation:settle .9s cubic-bezier(.2,.7,.2,1) .24s both}
  @keyframes settle{
    from{transform:translate3d(calc(var(--fx,0px) - 24px),calc(var(--fy,0px) + 24px),0);opacity:0}
    to{transform:translate3d(var(--fx,0),var(--fy,0),0);opacity:1}}
}

.layers-legend{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--paper-soft);
  /* the fanned layers are transformed and paint below the figure box: clear them */
  margin-top:56px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.layers-legend .k{width:11px;height:11px;display:inline-block;margin-right:-10px;
  border:1px solid var(--rule-dark)}
.layers-legend .k.plate{background:var(--chroma);border-color:var(--chroma)}
.layers-legend .k.key{background:repeating-linear-gradient(135deg,rgba(244,245,242,.35) 0 1px,transparent 1px 4px),var(--onair-raise)}
.layers-legend .k.comp{background:var(--onair-raise)}

/* ---------- full-bleed hero ----------
   The footage runs the width of the page and the copy sits on it. The scrim is
   not decoration: contrast here cannot be measured from the CSS, because the
   ground is a moving image, so the gradient has to guarantee the reading on the
   copy side whatever frame is on screen. */
.hero-full{padding:0;position:relative;overflow:hidden;display:flex;flex-direction:column;
  justify-content:flex-end;min-height:min(86vh,820px)}
.hero-bg{position:absolute;inset:0;background:var(--onair)}
.hero-bg video,.hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
/* opaque under the copy column, then it falls away fast so the footage can be
   seen. The 0.86 floor is not taste: it is what keeps a 19px lede above 4.5:1 on
   the worst frame the loop can show. */
.hero-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(93deg,rgba(5,7,12,.93) 0%,rgba(5,7,12,.87) 46%,rgba(5,7,12,.34) 72%,rgba(5,7,12,.28) 100%),
    linear-gradient(180deg,rgba(5,7,12,.62) 0%,rgba(5,7,12,.06) 22%,rgba(5,7,12,.10) 60%,rgba(5,7,12,.82) 100%)}
/* auto margins on a flex item stop it stretching, and the wrap collapsed to its
   content and centred itself. It has to hold the page column. */
.hero-full>.wrap{position:relative;z-index:1;width:100%;
  padding-top:calc(var(--band) + 10px);padding-bottom:var(--block)}
.hero-copy{max-width:min(720px,100%)}
.hero-copy .actions{margin-top:28px}
.hero-full h1{font-size:clamp(40px,5.4vw,78px);max-width:15ch}
.hero-full .lede{max-width:48ch}
.hero-slate{position:relative;z-index:1;border-top:1px solid var(--rule-dark);background:var(--onair)}
.hero-slate .slate{border-bottom:0;background:transparent;padding:11px 0}
.hero-slate .wrap{padding-top:0;padding-bottom:0}
@media (prefers-reduced-motion:reduce){.hero-bg video{display:none}}
@media (max-width:900px){
  .hero-full{min-height:min(92vh,760px)}
  .hero-full>.wrap{padding-top:calc(var(--band) + 8px)}
  .hero-bg::after{background:
    linear-gradient(180deg,rgba(5,7,12,.78) 0%,rgba(5,7,12,.30) 22%,rgba(5,7,12,.55) 55%,rgba(5,7,12,.94) 100%)}
}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);
  border-top:1px solid var(--rule-light);border-bottom:1px solid var(--rule-light)}
.stat{padding:26px 0}
.stat+.stat{border-left:1px solid var(--rule-light);padding-left:22px}
.stat .n{font-family:var(--display);font-weight:700;font-stretch:var(--wide);font-size:clamp(30px,3.4vw,44px);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:9px}

/* ---------- compare ---------- */
.compare{position:relative;margin-top:var(--block);border:1px solid var(--rule-light);
  border-radius:var(--plate);overflow:hidden;background:var(--onair-raise);aspect-ratio:16/9;
  touch-action:pan-y}
.cmp-side{position:absolute;inset:0}
.cmp-side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* right side is the plate as shot; the chroma shows only until the frame lands */
.cmp-before{background:var(--chroma)}
/* Left side is the selected stage. It is clipped, not narrowed: a width of 50%
   would squeeze the image with the handle, and a compare slider has to reveal
   the same frame, not a different one. */
.cmp-after{background:var(--onair-raise);clip-path:inset(0 50% 0 0)}
.cmp-pending{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:0 12%;background:var(--onair-raise);font-family:var(--mono);font-size:12.5px;
  line-height:1.75;letter-spacing:.02em;color:var(--paper-soft)}
/* an author display beats the browser rule for [hidden], and this panel covered
   the frame it was meant to stand in for */
.cmp-pending[hidden]{display:none}
.cmp-flag{position:absolute;top:14px;font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;background:var(--onair);color:var(--cyclorama);
  padding:6px 10px;z-index:3}
.cmp-flag.l{left:14px}.cmp-flag.r{right:14px}
.cmp-handle{position:absolute;top:0;bottom:0;left:50%;width:44px;transform:translateX(-50%);
  z-index:4;background:transparent;border:0;cursor:ew-resize;display:grid;place-items:center;
  /* the band scrolls vertically, the handle must own the horizontal gesture */
  touch-action:none}
.cmp-handle::after{content:"";width:2px;height:100%;background:var(--chroma)}
.cmp-grip{position:absolute;width:34px;height:34px;background:var(--chroma);color:var(--cyclorama);
  display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:600;
  border-radius:var(--control)}
.cmp-caption{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  line-height:1.9;color:var(--ink-soft);margin-top:16px}
.cmp-caption span{color:var(--chroma);font-weight:600;margin-right:12px}
.stages{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding:0;list-style:none}
.stage{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 14px;min-height:44px;background:transparent;border:1px solid var(--rule-light);
  border-radius:var(--control);cursor:pointer;color:var(--ink-soft);
  transition:background-color .12s linear,color .12s linear,border-color .12s linear}
.stage:hover{border-color:var(--ink);color:var(--ink)}
.stage[aria-selected="true"]{background:var(--chroma);border-color:var(--chroma);color:var(--cyclorama);font-weight:600}

/* ---------- pipeline ---------- */
.pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);margin-top:var(--block)}
.step{border:1px solid var(--rule-dark);border-radius:var(--plate);padding:26px 22px;
  background:var(--onair-raise);display:flex;flex-direction:column;gap:14px}
.step.own{border-color:var(--chroma-lift)}
.step .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--chroma-lift)}
.step .slot{height:54px;display:grid;place-items:center;background:rgba(244,245,242,.05);
  border:1px solid var(--rule-dark);border-radius:var(--plate);padding:8px}
.step.own .slot{background:var(--chroma-lift);border-color:var(--chroma-lift)}
.step.own .slot span{font-family:var(--display);font-weight:700;font-stretch:var(--wide);font-size:13px;
  letter-spacing:.04em;color:var(--ink)}
.step .slot img{height:22px;width:auto;object-fit:contain}
.step p{font-size:15px;line-height:1.6}
.builton{margin-top:var(--block);border-top:1px solid var(--rule-dark);padding-top:26px}
.builton .cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-soft);margin-bottom:20px}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:28px 40px}
.logos img{height:27px;width:auto;object-fit:contain;opacity:.9}
.closer{font-family:var(--display);font-weight:600;font-stretch:105%;font-size:clamp(22px,2.4vw,32px);
  letter-spacing:-.02em;margin-top:var(--block);color:inherit;max-width:24ch;text-wrap:balance}

/* ---------- proof ---------- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:var(--block)}
.cases.g2{grid-template-columns:repeat(2,1fr)}
.case .body{padding:22px 0 0}
.case .who{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--chroma);margin-bottom:9px}
.case p{font-size:15px;line-height:1.6}
.band-dark .case .body p{color:var(--paper-soft)}
.roster{margin-top:var(--block)}
.roster-row{border-top:1px solid var(--rule-light);padding:26px 0 4px}
.roster .cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:20px}
/* logos_blancos are white PNGs: they only need inverting on the light ground */
 /* height comes from the markup, computed per logo by optical weight */
.roster .logos img,.partners .logos img{width:auto;max-width:170px}
.roster .logos img{opacity:.78}
.band-light .roster .logos img,.band-light .partners .logos img{filter:invert(1)}
.missing{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  border:1px dashed var(--rule-light);border-radius:var(--plate);padding:9px 12px}
.band-light .missing{color:var(--ink-soft);border-color:var(--rule-light)}
.band-dark .missing{color:var(--paper-soft);border-color:var(--rule-dark)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
form{margin-top:8px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px;display:flex;flex-direction:column}
label{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--paper-soft);margin-bottom:8px}
input,textarea{font-family:var(--body);font-size:16px;color:var(--cyclorama);
  background:var(--onair-raise);border:1px solid var(--rule-dark);border-radius:var(--control);
  padding:13px 14px;width:100%;min-height:44px;
  transition:border-color .12s linear,background-color .12s linear}
input:focus,textarea:focus{border-color:var(--chroma-lift);outline-offset:2px}
textarea{resize:vertical;min-height:104px}
.field[data-invalid="true"] input,.field[data-invalid="true"] textarea{border-color:var(--tally)}
.err{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tally);margin-top:7px;min-height:0}
.consent{display:flex;align-items:center;gap:12px;margin:22px 0 26px;min-height:44px}
.consent input[type=checkbox]{appearance:none;position:relative;flex:0 0 44px;
  width:44px;height:44px;margin:0;border:0;background:none;cursor:pointer}
.consent input[type=checkbox]::after{content:"";position:absolute;left:9px;top:9px;
  width:26px;height:26px;border:1px solid var(--paper-soft);border-radius:3px;
  background:var(--onair-raise)}
.consent input[type=checkbox]:checked::after{background:var(--chroma-lift);border-color:var(--chroma-lift)}
.consent input[type=checkbox]:checked::before{content:"✓";position:absolute;left:9px;top:9px;
  width:26px;height:26px;display:grid;place-items:center;z-index:1;
  color:var(--ink);font-size:15px;font-weight:700}
.consent label{font-family:var(--body);font-size:14px;letter-spacing:0;text-transform:none;
  color:var(--paper-soft);margin:0;line-height:1.5;cursor:pointer}
.consent a{color:var(--chroma-lift);text-underline-offset:3px}
.status{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  margin-top:16px;color:var(--chroma-lift)}
.card-contact{border:1px solid var(--rule-dark);border-radius:var(--plate);padding:28px;
  background:var(--onair-raise)}
.card-contact dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--paper-soft);margin-top:18px}
.card-contact dt:first-child{margin-top:0}
.card-contact dd{font-size:16px;margin-top:5px;color:var(--cyclorama)}
.card-contact a{color:var(--chroma-lift)}
.card-contact dd a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- footer ---------- */
footer{background:var(--onair);color:var(--paper-soft);border-top:1px solid var(--rule-dark);
  padding:40px 0 48px}
.foot{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:baseline}
.foot .legal{display:flex;flex-wrap:wrap;gap:6px 20px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase}
.foot .legal a{display:inline-flex;align-items:center;min-height:44px}
.foot a:hover{color:var(--chroma-lift)}
.foot .brand{font-family:var(--body);font-size:14px}
.note-f1{margin-top:26px;border-top:1px solid var(--rule-dark);padding-top:18px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;line-height:1.9;
  text-transform:uppercase;color:var(--paper-soft)}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .band-head{grid-template-columns:1fr 150px}
  .hero-grid{gap:40px}
}
@media (max-width:900px){
  :root{--page:24px;--band:76px;--block:40px}
  .band-head{grid-template-columns:1fr}
  .rail{order:-1;border-top:0;border-bottom:1px solid var(--rule-light);padding:0 0 12px;margin-bottom:22px}
  .band-dark .rail{border-bottom-color:var(--rule-dark)}
  .hero-grid,.contact-grid{grid-template-columns:1fr}
  .layers-legend{margin-top:36px}
  .layer-plate{--fx:-18px;--fy:18px}
  .layer-key{--fx:-9px;--fy:9px}
  .pipe,.cases,.cases.g2{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(odd)+.stat{border-left:1px solid var(--rule-light);padding-left:18px}
  .stat:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--rule-light)}
  .stat:nth-child(4){border-top:1px solid var(--rule-light)}
  h1{max-width:none}
}
@media (max-width:600px){
  .row{grid-template-columns:1fr}
  .logos{gap:26px 30px}
  .compare{aspect-ratio:4/3}
}


/* ================= F3 components =================
   Everything the five sections need beyond the F1 sample. Same rules apply:
   two grounds, one accent that brightens on dark, no shadows, 2px plates. */

/* ---------- generic grids ---------- */
.grid{display:grid;gap:var(--gutter);margin-top:var(--block)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:var(--block)}
.split.media-first>.split-media{order:-1}
.beat{margin-top:var(--band)}
.beat:first-child{margin-top:0}

/* ---------- card (panel with a tape mark) ---------- */
.card{border:1px solid var(--rule-light);border-radius:var(--plate);padding:28px}
.band-light .card{background:var(--cyc-shade);border-color:var(--rule-light)}
.band-dark .card{background:var(--onair-raise);border-color:var(--rule-dark)}
.card .tape{width:34px;margin-bottom:16px}
.card h3{margin-bottom:10px;text-wrap:balance}
.card p{font-size:15px;line-height:1.6}
.band-light .card p{color:var(--ink-soft)}
.band-dark .card p{color:var(--paper-soft)}
.card p+p{margin-top:12px}

/* ---------- two-column contrast (problem / answer) ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter) 56px;margin-top:var(--block)}
.duo>div{border-top:1px solid var(--rule-light);padding-top:20px}
.band-dark .duo>div{border-top-color:var(--rule-dark)}
.duo h3{margin-bottom:10px}
.duo p{font-size:16px}
.band-light .duo p{color:var(--ink-soft)}
.band-dark .duo p{color:var(--paper-soft)}
.duo p strong,.card p strong{font-weight:600}
.band-light .duo p strong,.band-light .card p strong{color:var(--ink)}
.band-dark .duo p strong,.band-dark .card p strong{color:var(--cyclorama)}
.lab{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:12px}
.band-light .lab{color:var(--chroma)}
.band-dark .lab{color:var(--chroma-lift)}

/* ---------- chain: a real sequence, arrows in their own gutter ----------
   v1.3 pushed 7 children through a 5-track grid and the last row fell out of
   line. Here each link owns its arrow, so the count can never break it. */
.chain{display:flex;flex-wrap:wrap;margin-top:var(--block);
  border-top:1px solid var(--rule-light)}
.band-dark .chain{border-top-color:var(--rule-dark)}
.lnk{flex:1 1 210px;position:relative;padding:24px 26px 24px 0}
.lnk+.lnk{padding-left:40px}
.lnk+.lnk::before{content:"→";position:absolute;left:8px;top:25px;
  font-family:var(--mono);font-size:15px;line-height:1}
.band-light .lnk+.lnk::before{color:var(--chroma)}
.band-dark .lnk+.lnk::before{color:var(--chroma-lift)}
.lnk h3{font-size:19px;margin-bottom:8px}
.lnk h3+p+h3{margin-top:18px}
.lnk p{font-size:14.5px;line-height:1.6}
.band-light .lnk p{color:var(--ink-soft)}
.band-dark .lnk p{color:var(--paper-soft)}
.lnk .lab{margin-bottom:14px}

/* ---------- specs and chips ---------- */
.specs{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.spec,.chip{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid var(--rule-light);border-radius:var(--plate);
  padding:9px 12px;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--block)}
.chip{padding:12px 15px;font-size:11px}
.band-light .spec,.band-light .chip{color:var(--ink-soft);border-color:var(--rule-light)}
.band-dark .spec,.band-dark .chip{color:var(--paper-soft);border-color:var(--rule-dark)}

/* ---------- focal figure ---------- */
.bignum{font-family:var(--display);font-weight:700;font-stretch:var(--wide);
  font-size:clamp(60px,9vw,132px);line-height:.88;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.bignum-l{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  line-height:1.9;margin-top:16px;max-width:42ch}
.band-light .bignum-l{color:var(--ink-soft)}
.band-dark .bignum-l{color:var(--paper-soft)}

/* provenance line: which figures are the studio's, the group's or the market's */
/* the camera-report aside. Uppercase mono is right for a three-word slate and
   wrong for a forty-word note, so this one stays in sentence case and only its
   leading label shouts. */
.src-note{font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;line-height:1.8;
  margin-top:18px;max-width:80ch}
.src-note b{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  margin-right:10px}
.band-light .src-note b{color:var(--chroma)}
.band-dark .src-note b{color:var(--chroma-lift)}
.band-light .src-note{color:var(--ink-soft)}
.band-dark .src-note{color:var(--paper-soft)}
.stat .src{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  margin-top:6px}
.band-light .stat .src{color:var(--chroma)}
.band-dark .stat .src{color:var(--chroma-lift)}
.stats.stats-quiet .n{font-size:clamp(24px,2.4vw,32px)}

/* ---------- studio cards ---------- */
.studios{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);margin-top:var(--block)}
.studio .body{padding:18px 0 0}
.studio .flag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.band-light .studio .flag{color:var(--chroma)}
.band-dark .studio .flag{color:var(--chroma-lift)}
.studio h3{margin:7px 0 8px}
.studio .body p{font-size:14.5px;line-height:1.6}
.band-light .studio .body p{color:var(--ink-soft)}
.band-dark .studio .body p{color:var(--paper-soft)}

/* ---------- logo rows shared by "Built on", partners and the client wall ---------- */
.partners{margin-top:var(--block);border-top:1px solid var(--rule-light);padding-top:26px}
.band-dark .partners{border-top-color:var(--rule-dark)}
.partners .cap,.roster .cap,.builton .cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:20px}
.band-light .partners .cap{color:var(--ink-soft)}
.band-dark .partners .cap{color:var(--paper-soft)}
.partners .logos img{opacity:.85}

/* ---------- link cards (industries, product index) ---------- */
.linkcard{display:flex;flex-direction:column;text-decoration:none;border-radius:var(--plate);
  border:1px solid var(--rule-light);padding:28px;
  transition:border-color .12s linear,background-color .12s linear}
.band-light .linkcard{background:var(--cyc-shade)}
.band-dark .linkcard{background:var(--onair-raise);border-color:var(--rule-dark)}
.band-light .linkcard:hover{border-color:var(--chroma)}
.band-dark .linkcard:hover{border-color:var(--chroma-lift)}
.linkcard .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:14px}
.band-light .linkcard .n{color:var(--chroma)}
.band-dark .linkcard .n{color:var(--chroma-lift)}
.linkcard h3{margin-bottom:10px}
.linkcard p{font-size:15px;line-height:1.6}
.band-light .linkcard p{color:var(--ink-soft)}
.band-dark .linkcard p{color:var(--paper-soft)}
.linkcard .go{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:9px}
.band-light .linkcard .go{color:var(--chroma)}
.band-dark .linkcard .go{color:var(--chroma-lift)}

/* ---------- motion: one gesture, and a failure mode that shows everything ----
   The hiding rule is scoped to [data-motion], an attribute only the script
   sets, and only when the reader has not asked for less motion and the
   observer exists. No script, no hidden content. The transform is small on
   purpose: this is a band arriving, not a slide deck. */
@media (prefers-reduced-motion:no-preference){
  [data-motion="on"] .rv{opacity:0;transform:translate3d(0,14px,0)}
  [data-motion="on"] .rv.in{opacity:1;transform:none;
    transition:opacity .52s cubic-bezier(.2,.7,.2,1),transform .52s cubic-bezier(.2,.7,.2,1)}
  /* the tally is the one thing on the page that is allowed to keep moving:
     it says on air, and a still red dot says nothing */
  .rail .live::before{animation:tally 2.6s ease-in-out infinite}
  @keyframes tally{0%,44%{opacity:1}62%{opacity:.28}100%{opacity:1}}
}

/* The honeypot. Clipped rather than display:none, because a bot that skips what
   is not displayed would skip the one field it is meant to fill. And clipped
   rather than pushed off-canvas at -9999px, which is the other common way to
   write this and which the overflow check correctly reads as a page a
   thousand pixels wider than the window. */
.trap{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- routes: the home reads as a table of contents ----------
   Five destinations as cards would be a ragged two-row grid and cost twice the
   height. A row per section reads as a directory, which is what a home page is. */
.routes{margin-top:var(--block);border-top:1px solid var(--rule-light)}
.band-dark .routes{border-top-color:var(--rule-dark)}
.route{display:grid;grid-template-columns:46px minmax(150px,1fr) 2.4fr 26px;
  gap:var(--gutter);align-items:baseline;text-decoration:none;
  border-bottom:1px solid var(--rule-light);padding:22px 8px}
.band-dark .route{border-bottom-color:var(--rule-dark)}
.route .n{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em}
.band-light .route .n{color:var(--chroma)}
.band-dark .route .n{color:var(--chroma-lift)}
.route-name{font-family:var(--body);font-weight:600;font-size:21px;line-height:1.25;
  letter-spacing:-.01em}
.route-p{font-size:15px;line-height:1.6}
.band-light .route-p{color:var(--ink-soft)}
.band-dark .route-p{color:var(--paper-soft)}
.route .arw{justify-self:end;font-size:15px}
.band-light .route .arw{color:var(--chroma)}
.band-dark .route .arw{color:var(--chroma-lift)}
.band-light .route:hover{background:var(--cyc-shade)}
.band-dark .route:hover{background:var(--onair-raise)}
@media (prefers-reduced-motion:no-preference){
  .route{transition:background-color .12s linear}
  .route .arw{transition:transform .12s linear}
  .route:hover .arw{transform:translateX(5px)}
}
/* every child placed by hand here, because auto-placement with a spanning cell
   sends the arrow to a third implicit row */
@media (max-width:900px){
  .route{grid-template-columns:46px 1fr 26px;row-gap:8px}
  .route .n{grid-column:1;grid-row:1}
  .route-name{grid-column:2;grid-row:1}
  .route .arw{grid-column:3;grid-row:1}
  .route-p{grid-column:2/4;grid-row:2}
}

/* ---------- product chapter separator ---------- */
.chapter{padding:calc(var(--band) - 30px) 0}
.chapter .col-read{max-width:22ch}
.chapter .lede{max-width:60ch}
.chapter .num{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:20px}
.band-light .chapter .num{color:var(--chroma)}
.band-dark .chapter .num{color:var(--chroma-lift)}
.chapter h2{font-size:clamp(38px,5.4vw,76px);font-stretch:var(--wide);font-weight:700;
  line-height:.98;letter-spacing:-.03em;max-width:16ch}

/* ---------- prose inside a reading column ---------- */
.col-read h3{margin:30px 0 10px}
.col-read p+p{margin-top:16px}
.bullets{margin:22px 0 0;padding-left:20px}
.bullets li{margin-bottom:10px;font-size:15.5px}
.band-light .bullets li{color:var(--ink-soft)}
.band-dark .bullets li{color:var(--paper-soft)}
.band-light .bullets li::marker{color:var(--chroma)}
.band-dark .bullets li::marker{color:var(--chroma-lift)}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .studios{grid-template-columns:repeat(2,1fr)}
  .split{gap:36px}
}
@media (max-width:900px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:36px}
  .split.media-first>.split-media{order:0}
  .duo{grid-template-columns:1fr}
  .beat{margin-top:var(--band)}
  .chain{display:block}
  .lnk,.lnk+.lnk{padding:22px 0 22px 32px}
  .lnk+.lnk{border-top:1px solid var(--rule-light)}
  .band-dark .lnk+.lnk{border-top-color:var(--rule-dark)}
  .lnk+.lnk::before{content:"↓";left:4px;top:23px}
  .chapter h2{max-width:none}
}
@media (max-width:600px){
  .studios{grid-template-columns:1fr}
  .spec,.chip{white-space:normal}
}

/* ---------- legal pages: long-form reading in the documentation layer ----------
   Named legal-doc, not legal: the footer already owns .legal for its link row,
   and .legal a was repainting those links chroma on the dark ground (3.33:1). */
.legal-doc .col-read{max-width:72ch}
.legal-doc h2{font-family:var(--body);font-stretch:normal;font-size:20px;font-weight:600;
  line-height:1.3;letter-spacing:-.01em;max-width:none;margin:46px 0 14px;
  padding-top:18px;border-top:1px solid var(--rule-light)}
.legal-doc h3{font-family:var(--body);font-size:16px;font-weight:600;margin:28px 0 10px}
.legal-doc p{margin:0 0 16px;color:var(--ink-soft)}
.legal-doc p strong{color:var(--ink)}
.legal-doc ul{margin:0 0 18px;padding-left:20px}
.legal-doc li{color:var(--ink-soft);margin-bottom:9px}
.legal-doc li::marker{color:var(--chroma)}
.legal-doc a{color:var(--chroma);text-underline-offset:3px;word-break:break-word}
.legal-doc code{font-family:var(--mono);font-size:.88em;background:var(--cyc-shade);
  padding:2px 6px;border-radius:3px;color:var(--ink)}
.legal-doc em{color:var(--ink-soft);font-style:normal;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;display:block;line-height:1.9}
.legal-doc .tw{overflow-x:auto;margin:0 0 22px;border:1px solid var(--rule-light);border-radius:var(--plate)}
.legal-doc table{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px}
.legal-doc th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  text-align:left;padding:12px 14px;background:var(--cyc-shade);color:var(--ink);
  border-bottom:1px solid var(--rule-light);white-space:nowrap}
.legal-doc td{padding:12px 14px;border-bottom:1px solid var(--rule-light);color:var(--ink-soft);
  vertical-align:top}
.legal-doc tbody tr:last-child td{border-bottom:0}
.legal-hero{padding:88px 0 72px}
.legal-hero h1{font-size:clamp(34px,5vw,64px);max-width:18ch}
.band-light.legal-doc{padding:72px 0 96px}