/* SolCode site styles.
   Continuous dark editorial ground, full-bleed film chapters, hairline
   grid structure. Every seam is colour-matched: footage dims to ink,
   body sections are ink, chapters fade up from ink. */
:root{
  --bone:#F2F0EA; --bone-2:#E9E6DD; --ink:#0B0B0A; --ink-soft:#141310;
  --red:#E5251B; --rule-d:rgba(242,240,234,.14); --rule-l:rgba(11,11,10,.14);
  --hair:rgba(242,240,234,.10);
  --max:1320px; --pad:clamp(20px,5vw,72px);
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --grotesk:"Neue Haas Grotesk Display Pro","neue-haas-grotesk-display","Neue Haas Grotesk","Inter","Helvetica Neue",Arial,sans-serif;
  --white:#FFFFFF;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);overscroll-behavior:none}
html,body{height:100%}
/* The document itself doesn't scroll; a dedicated viewport-sized container
   does, so Safari honours overscroll-behavior and the elastic page-bounce
   at the top/bottom is eliminated. */
body{font-family:var(--grotesk);background:var(--ink);color:var(--bone);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden}
#scroller{height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:none;scroll-behavior:smooth;position:relative;z-index:1;-webkit-overflow-scrolling:touch;scroll-snap-type:y proximity}
/* Gentle catch on the pure statement screens so a fast scroll settles on
   them for a beat. Not on chapters (free scrub) and not on programme
   content (.pm); proximity never traps the scroll. */
.band.moment:not(.pm){scroll-snap-align:start;scroll-snap-stop:normal}
img,video,canvas{display:block}

/* Self-hosted Neue Haas Grotesk (licensed woff2 files in /assets/fonts). */
@font-face{font-family:"Neue Haas Grotesk Display Pro";src:url("../assets/fonts/NeueHaasGroteskDisplayPro-75Bold.woff2") format("woff2");font-weight:600 800;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Haas Grotesk Display Pro";src:url("../assets/fonts/NeueHaasGroteskDisplayPro-55Roman.woff2") format("woff2");font-weight:300 500;font-style:normal;font-display:swap}

/* Anchor targets land below the fixed header. */
section[id]{scroll-margin-top:88px}

/* Keyboard focus: visible, on-brand, only for keyboard users. */
:focus:not(:focus-visible){outline:none}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* Balanced line breaks on display copy. */
.ch-copy h2,.ch-copy .ch-sub,.band h3.big,.prog h3,.cta h2,.cta p,.trio .t-item h4{text-wrap:balance}
.band .lede-l,.cols-2 p,.prog p,.trio .t-item p,.db .s{text-wrap:pretty}

/* Film grain: static composited layer, no blend mode (a blended fixed
   layer would force a full-viewport recomposite every scroll frame). */
.grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.035;transform:translateZ(0);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Section rail: a scroll bar that knows the sections. Hairline track,
   red progress fill, one node per section at its true scroll position.
   The active node carries its label; the rest reveal on hover. */
.section-rail{position:fixed;top:50%;right:clamp(16px,2.2vw,30px);transform:translateY(-50%);height:min(58vh,540px);width:7px;z-index:9050}
.section-rail .rail-track{position:absolute;top:0;right:3px;bottom:0;width:1px;background:rgba(242,240,234,.14);overflow:hidden}
.section-rail .rail-fill{position:absolute;top:0;left:0;width:100%;height:0;background:var(--red)}
.section-rail a{position:absolute;right:0;width:7px;height:7px;transform:translateY(-50%);border-radius:50%;border:1px solid rgba(242,240,234,.35);background:#0B0B0A;transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.section-rail a::after{content:attr(data-label);position:absolute;right:19px;top:50%;transform:translateY(-50%) translateX(4px);font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:var(--bone);background:var(--ink);border:1px solid var(--rule-d);padding:5px 9px;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.section-rail a:hover,.section-rail a.on{border-color:var(--red);background:var(--red)}
.section-rail a.on{box-shadow:0 0 0 3px rgba(229,37,27,.16)}
.section-rail a:hover::after,.section-rail a.on::after{opacity:1;transform:translateY(-50%) translateX(0)}
.section-rail a:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0)}
/* Below 1500px the persistent active label would overlap content rails:
   labels become hover/focus-only, the dots still mark position. */
@media(max-width:1499px){
  .section-rail a.on::after{opacity:0;transform:translateY(-50%) translateX(4px)}
  .section-rail a.on:hover::after,.section-rail a.on:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0)}
}
@media(max-width:1000px),(max-height:600px){.section-rail{display:none}}

/* Flat, flush sections with hairline structure. */
main>section{position:relative;isolation:isolate}
main>.band+.band,main>.band+.cta{border-top:1px solid var(--hair)}
main>.band.white+.band,main>.band+.band.white{border-top:none}

/* Header. */
.site-header{position:fixed;top:0;left:0;right:0;z-index:9100;display:flex;align-items:center;justify-content:space-between;padding:16px var(--pad);color:var(--bone);transition:background .35s,color .35s,border-color .35s;border-bottom:1px solid transparent}
.site-header.solid{background:rgba(11,11,10,.62);backdrop-filter:blur(16px);border-bottom:1px solid var(--hair)}
/* Open over the hero film, light tint near the hero's end, solid in the body. */
.site-header.tint{background:rgba(11,11,10,.08);backdrop-filter:blur(3px)}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{height:22px;width:auto;display:block}
.brand .wordmark{font-weight:700;font-size:14px;line-height:1;letter-spacing:.22em;text-transform:uppercase}
.foot-brand{font-weight:700;font-size:24px;display:flex;align-items:center;gap:12px;margin-bottom:14px}
.foot-brand .logo{height:24px;width:auto}
.foot-brand .wordmark{font-weight:700;font-size:14px;letter-spacing:.22em;text-transform:uppercase}
.brand .logo-k,.foot-brand .logo-k{display:none}
.nav{display:flex;gap:26px;align-items:center}
.nav a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.nav a:hover{opacity:1;color:var(--red)}
.btn{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:11px 18px;border:1px solid currentColor;border-radius:0;display:inline-flex;align-items:center;gap:9px;cursor:pointer;transition:.25s}
.btn .dot{width:7px;height:7px;border-radius:50%;background:var(--red)}
.btn:hover{background:var(--bone);color:var(--ink)}
.btn:hover .dot{background:var(--red)}
.btn-solid{background:var(--red);border-color:var(--red);color:#F2F0EA}
.btn-solid:hover{background:var(--bone);color:var(--ink)}
.btn-ink{color:inherit}
.btn-ink:hover{background:var(--bone);color:var(--ink)}
@media(max-width:820px){.nav a:not(.btn){display:none}}

/* Theme toggle. */
.theme-toggle{background:none;border:1px solid var(--rule-d);width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;color:inherit;cursor:pointer;transition:border-color .25s,color .25s}
.theme-toggle:hover{border-color:var(--red);color:var(--red)}

/* Top veil: a progressive blur-and-fade strip under the header, so big
   type dissolves as it scrolls past the nav instead of cutting through
   it. Only active once the header has left the open hero state. */
.top-veil{position:fixed;top:0;left:0;right:0;height:112px;z-index:9090;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:linear-gradient(to bottom,rgba(11,11,10,.5),transparent 75%);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent);mask-image:linear-gradient(to bottom,#000 30%,transparent)}
.site-header.tint+.top-veil,.site-header.solid+.top-veil{opacity:1}
:root[data-theme="light"] .top-veil{background:linear-gradient(to bottom,rgba(244,242,236,.6),transparent 75%)}
/* Over film chapters the canvas redraws every frame: backdrop blurs
   would re-blur it per frame, so they switch off (the footage carries
   its own dark grade up top, and the swap happens inside black seams). */
:root.film-top .top-veil{opacity:0;-webkit-backdrop-filter:none;backdrop-filter:none}
:root.film-top .site-header.solid{background:rgba(11,11,10,.55);-webkit-backdrop-filter:none;backdrop-filter:none}
:root.film-top .site-header.tint{-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-theme="light"].film-top .site-header.solid{background:rgba(244,242,236,.82)}
/* Phones: gradient-only veil, no blur cost over the chapter videos. */
@media(max-width:760px){.top-veil{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(to bottom,rgba(11,11,10,.62),transparent 78%)}
  :root[data-theme="light"] .top-veil{background:linear-gradient(to bottom,rgba(244,242,236,.72),transparent 78%)}}

/* Scrub chapters. Long runways: footage concludes by ~78% of the pin,
   holds its final frame, then dims to ink so the next section is seamless. */
.chapter{position:relative;height:440vh}
.chapter[data-no-intro]{height:340vh}  /* shorter hero tail */
#network.chapter{height:520vh}   /* network sequence plays through in full */
#bask.chapter{height:360vh}      /* tagline chapter hands over to the CTA sooner */
.chapter .sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink)}
.chapter canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;transform-origin:50% 50%;will-change:transform}
.chapter .fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:none}
.chapter .grade{position:absolute;inset:0;z-index:1;background:
  linear-gradient(to top,rgba(11,11,10,.88) 0%,rgba(11,11,10,.28) 40%,rgba(11,11,10,.10) 66%,rgba(11,11,10,.40) 100%),
  radial-gradient(120% 80% at 82% 112%,rgba(229,37,27,.16),transparent 55%)}
/* Ink veil for chapter entry and exit (JS-driven). */
.chapter .dim{position:absolute;inset:0;z-index:2;background:var(--ink);opacity:0;pointer-events:none;will-change:opacity}

/* Chapter UI. */
.ch-ui{position:absolute;inset:0;z-index:3;max-width:var(--max);margin:0 auto;padding:0 var(--pad);width:100%}
.kick-row{position:absolute;top:108px;left:var(--pad);right:var(--pad);display:flex;align-items:center;gap:16px}
.kicker{font-family:var(--mono);font-size:clamp(10px,1vw,12px);letter-spacing:.24em;text-transform:uppercase;color:var(--bone);opacity:.92;line-height:1.7}
.kick-row .rule{height:1px;background:var(--rule-d);position:relative;flex:1;overflow:hidden}
.kick-row .rule b{position:absolute;inset:0;width:100%;background:var(--red);display:block;transform:scaleX(0);transform-origin:left center;will-change:transform}
.ch-copy{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(56px,11vh,128px);will-change:opacity,transform}
.ch-copy h2{font-weight:700;font-size:clamp(2.058rem,5vw,4.236rem);line-height:1.02;letter-spacing:-.025em;max-width:17ch;text-shadow:0 2px 34px rgba(0,0,0,.4);will-change:transform,opacity}
.ch-copy h2 .r{color:var(--red)}
.ch-copy .ch-sub{font-size:clamp(1rem,1.4vw,1.272rem);line-height:1.55;max-width:46ch;opacity:.88;margin-top:6px}
.ch-copy .actions{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}

/* Staged typography (scrubbed chapters, not the hero): footage plays
   first, then the words resolve in with a soft fade and rise. */
.ch-copy h2 .w{display:inline-block}
.ch-copy h2 .w i{display:inline-block;font-style:normal}
.ch-copy h2 .w i.r{color:var(--red)}
.chapter:not(.flat):not([data-no-intro]) .ch-copy h2 .w i{opacity:0;transform:translateY(.44em);transition:opacity .8s ease,transform 1.1s cubic-bezier(.22,1,.36,1);will-change:transform,opacity}
.chapter .sticky.copy-in .ch-copy h2 .w i{opacity:1;transform:none}
.chapter:not(.flat):not([data-no-intro]) .ch-copy .ch-sub,
.chapter:not(.flat):not([data-no-intro]) .ch-copy .actions{opacity:0;transform:translateY(20px);transition:opacity .9s ease .5s,transform 1s cubic-bezier(.22,1,.36,1) .5s}
.chapter .sticky.copy-in .ch-copy .ch-sub,
.chapter .sticky.copy-in .ch-copy .actions{opacity:1;transform:none}
.chapter .sticky.copy-in .ch-copy .ch-sub{opacity:.88}
.chapter:not(.flat):not([data-no-intro]) .kick-row{opacity:0;transition:opacity 1s ease}
.chapter .sticky.kick-in .kick-row{opacity:1}
/* Whole-line reveal for headlines that must not be word-split (tagline). */
.chapter:not(.flat):not([data-no-intro]) .ch-copy h2.no-split{opacity:0;transform:translateY(.34em);transition:opacity 1s ease,transform 1.2s cubic-bezier(.22,1,.36,1);will-change:transform,opacity}
.chapter .sticky.copy-in .ch-copy h2.no-split{opacity:1;transform:none}

.ch-copy h2.grad-tag{text-shadow:none;max-width:none}

/* Tagline gradient: sunset palette pulled from the closing footage,
   drifting slowly across the words. Matching end-stops + 200% size and
   travel keep the loop seamless. */
.grad-tag{
  background:linear-gradient(100deg,#F2F0EA 0%,#FFC27A 22%,#FF8A4C 40%,var(--red) 55%,#FF8A4C 70%,#FFC27A 82%,#F2F0EA 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  text-shadow:none;
  animation:gradSweep 16s linear infinite;
  /* clipped-text paint stops at the box edge: extend it past descenders */
  padding-bottom:.16em;margin-bottom:-.16em}
.grad-tag-sm{
  background:linear-gradient(100deg,var(--bone) 0%,#FFC27A 30%,var(--red) 55%,#FFC27A 80%,var(--bone) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  padding-bottom:.14em}

/* Hero accent: a living brand gradient sweeping across the word. Deep
   red anchors the ends, a bone highlight travels through, and a soft
   ink drop-shadow keeps it legible over bright footage. */
.grad-hero{
  background:linear-gradient(95deg,#E5251B,#FF4A2E 18%,#F2F0EA 38%,#FF7A45 58%,#B81410 78%,#E5251B);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 24px rgba(11,11,10,.6));
  padding-bottom:.14em;
  animation:gradSweep 13s linear infinite}
/* 200% size + 200% travel = exactly one tile per cycle: seamless loop */
@keyframes gradSweep{to{background-position:200% 0}}
@media(prefers-reduced-motion:reduce){.grad-hero,.grad-tag{animation:none}}

/* Hero load sequence: fade up from ink, then kicker, headline, sub, actions. */
@keyframes heroDim{from{opacity:1}to{opacity:0}}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes riseInSub{from{opacity:0;transform:translateY(26px)}to{opacity:.88;transform:none}}
.chapter[data-no-intro]:not(.flat) .dim{animation:heroDim 1.3s ease .15s backwards}
.chapter[data-no-intro]:not(.flat) .kick-row{animation:riseIn 1s ease .9s backwards}
.chapter[data-no-intro]:not(.flat) .ch-copy h2{animation:riseIn 1.25s cubic-bezier(.22,1,.36,1) 1.1s backwards}
.chapter[data-no-intro]:not(.flat) .ch-copy .ch-sub{animation:riseInSub 1.2s cubic-bezier(.22,1,.36,1) 1.35s backwards}
.chapter[data-no-intro]:not(.flat) .ch-copy .actions{animation:riseIn 1.2s cubic-bezier(.22,1,.36,1) 1.55s backwards}

/* Scroll cue. */
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;opacity:.7;display:flex;flex-direction:column;align-items:center;gap:8px;transition:opacity .5s ease}
.scroll-cue.hide{opacity:0}
.sc-txt{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--bone);animation:cuePulse 2.4s ease-in-out infinite}
@keyframes cuePulse{0%,100%{opacity:.25}50%{opacity:.85}}

/* Chapter loader. */
.ch-loader{position:absolute;z-index:1;bottom:26px;left:var(--pad);font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone);opacity:.55;transition:opacity .8s ease}
.ch-loader.hidden{opacity:0}
.chapter.flat .ch-loader{display:none}

/* Typewriter kicker: full width reserved from frame one so the progress
   rule never shifts while the text types. */
.kicker{position:relative;display:inline-block}
.kicker .k-size{visibility:hidden}
.kicker .k-type{position:absolute;left:0;top:0;white-space:nowrap}
.kicker[data-typing="1"] .k-type::after{content:"\2590";margin-left:3px;animation:caretBlink .9s steps(1) infinite}
@keyframes caretBlink{50%{opacity:0}}

/* Closing CTA: pins centre like the statement screens, holds, releases. */
.cta{position:relative;display:block;min-height:150vh;text-align:center;background:var(--ink);overflow:visible}
/* z-index:0 forces a stacking context even where sticky alone doesn't
   (Safari), keeping the ambient field canvas above the section ink. */
.cta-stage{position:sticky;top:0;z-index:0;height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 var(--pad);overflow:hidden}
.cta .inner{max-width:760px;position:relative;z-index:2;will-change:opacity,transform}
.cta .kicker{color:var(--red);display:inline-block;margin-bottom:24px}
.cta h2{font-weight:700;font-size:clamp(2.058rem,5vw,4.236rem);line-height:1;letter-spacing:-.025em;margin-bottom:24px}
.cta h2 .grad-tag{text-shadow:none}
.cta p{opacity:.82;font-size:clamp(1rem,1.45vw,1.272rem);line-height:1.55;max-width:46ch;margin:0 auto 32px}
.cta .form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta input{font-family:var(--mono);font-size:13px;padding:15px 18px;min-width:280px;background:rgba(242,240,234,.06);border:1px solid var(--rule-d);border-radius:0;color:var(--bone)}
.cta input::placeholder{color:rgba(242,240,234,.5)}
.cta .note{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.5;margin-top:18px}
/* Standalone register page: no pin, editorial pair (statement left,
   form panel right). */
.cta.solo{min-height:100svh}
.cta.solo .cta-stage{position:relative;z-index:0;height:auto;min-height:100svh;display:block;overflow:visible;padding:clamp(120px,16vh,170px) var(--pad) 96px}
.cta .inner.reg-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(36px,5vw,88px);align-items:start;text-align:left}
.reg-copy h2{text-align:left}
.reg-copy .lede-l{margin:24px 0 0;max-width:50ch;text-align:left}
.reg-creed{margin-top:40px}
.reg-creed li{padding:4px 0}

/* Form panels: hairline cards with corner crosshairs. */
.reg-panel{position:relative;border:1px solid var(--rule-d);background:rgba(128,128,128,.04);padding:clamp(26px,3vw,42px)}
.cta-console{position:relative;border:1px solid var(--rule-d);background:rgba(128,128,128,.04);padding:30px clamp(20px,3vw,38px) 24px;max-width:820px;margin:42px auto 0}
.cta-console .aud-chips{justify-content:center}
.cta-console .form{margin-top:22px}
.cta-console .note{margin-top:16px}
.reg-panel::before,.reg-panel::after,.cta-console::before,.cta-console::after{content:"";position:absolute;width:7px;height:7px;pointer-events:none;border:1px solid var(--red);opacity:.6}
.reg-panel::before,.cta-console::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.reg-panel::after,.cta-console::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.rp-step{display:flex;align-items:center;gap:12px;margin:30px 0 16px}
.rp-step:first-child{margin-top:0}
.rp-step .n{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--red)}
.rp-step h3{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;opacity:.7}

/* Audience chips: a quiet radio row. */
.aud-chips{display:flex;flex-wrap:wrap;gap:9px}
.aud-chips button{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:11px 14px;border:1px solid var(--rule-d);border-radius:0;background:none;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:border-color .25s ease,background .25s ease,color .25s ease}
.aud-chips button::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35;transition:background .25s ease,opacity .25s ease}
.aud-chips button:hover{border-color:rgba(229,37,27,.55)}
.aud-chips button.sel{border-color:var(--red);background:rgba(229,37,27,.09);color:var(--red)}
.aud-chips button.sel::before{background:var(--red);opacity:1}

/* Labelled fields. */
.cta .reg-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0;justify-content:start}
.fld{display:flex;flex-direction:column;gap:8px;text-align:left}
.fld>span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.55}
.fld-full{grid-column:1/-1}
.cta .reg-form input{min-width:0;width:100%}
.cta .reg-form textarea{width:100%;font-family:var(--mono);font-size:13px;padding:15px 18px;background:rgba(242,240,234,.06);border:1px solid var(--rule-d);border-radius:0;color:var(--bone);resize:vertical;min-height:104px}
.cta .reg-form textarea::placeholder{color:rgba(242,240,234,.5)}
.cta .reg-form .btn{grid-column:1/-1;justify-content:center;padding:15px;margin-top:4px}
.reg-panel .note{text-align:left;margin-top:16px}
:root[data-theme="light"] .cta .reg-form textarea{background:rgba(11,11,10,.05);color:#0B0B0A}
:root[data-theme="light"] .cta .reg-form textarea::placeholder{color:rgba(11,11,10,.45)}
@media(max-width:960px){.cta .inner.reg-grid{grid-template-columns:1fr;gap:40px}}
@media(max-width:640px){.cta .reg-form{grid-template-columns:1fr}}

/* Genuinely short windows only: the pinned register stage would clip
   its content (overflow:hidden at 100svh), so release the pin. */
@media(max-height:619px){
  .cta{min-height:0}
  .cta-stage{position:relative;z-index:0;height:auto;display:block;overflow:visible;padding:96px var(--pad) 72px}
  .cta .inner{margin:0 auto}
}

/* Footer. */
.site-footer{background:#070706;color:var(--bone);padding:clamp(50px,8vh,90px) var(--pad) 40px;border-top:1px solid var(--hair)}
.foot-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.foot-grid h3{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.5;margin-bottom:16px;font-weight:400}
.foot-grid a{display:block;opacity:.82;margin-bottom:9px;font-size:.95rem}
.foot-grid a:hover{color:var(--red);opacity:1}
.foot-bottom{max-width:var(--max);margin:48px auto 0;padding-top:22px;border-top:1px solid var(--rule-d);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.5}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}

/* Structured content: one dark editorial ground. */
.band{background:var(--ink);color:var(--bone);padding:clamp(76px,12vh,150px) var(--pad);position:relative}
.band.tight{padding-top:clamp(56px,8vh,96px);padding-bottom:clamp(56px,8vh,96px)}
/* A statement that owns its own black screen: pinned with a sticky hold
   like the film chapters. It locks centre-screen while you keep
   scrolling, holds for a beat, then releases. Native physics throughout. */
.band.moment{display:block;min-height:145vh;padding-top:0;padding-bottom:0}
/* Build sections hold longer; their content unfolds in scroll-driven beats. */
.band.moment.build{min-height:210vh}
/* Build content anchors near the top, not centred, so the heading is
   always the first thing on screen and the rest reveals below it.
   (Centred content taller than the viewport could push the heading
   off-screen while lower body text stayed visible.) */
.band.moment.build .wrap{justify-content:flex-start;padding-top:clamp(104px,17vh,200px)}
.band.moment .wrap{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;width:100%;padding-top:clamp(50px,8vh,110px);padding-bottom:clamp(50px,8vh,110px);will-change:opacity,transform}
/* Scroll-driven beat reveal. Note the .band.moment prefix: staged children
   like .lede-l carry their own opacity, which would otherwise outweigh a
   bare .stage{opacity:0} and leave body text visible before its beat. */
.band.moment .stage{opacity:0;transform:translateY(15px);transition:opacity .45s ease,transform .55s cubic-bezier(.22,1,.36,1)}
.band.moment .stage.lit{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.band.moment.build{min-height:0}.band.moment .stage{opacity:1;transform:none;transition:none}}
/* Phones: the pin/beat engine is off; staged content reveals in view
   (observer adds .lit) with a light stagger per beat. */
@media(max-width:760px){
  .band.moment.build{min-height:0}
  .band.moment .stage[data-beat="1"]{transition-delay:.08s}
  .band.moment .stage[data-beat="2"]{transition-delay:.16s}
  .band.moment .stage[data-beat="3"]{transition-delay:.24s}
  .band.moment .stage[data-beat="4"]{transition-delay:.32s}
  .band.moment .stage[data-beat="5"]{transition-delay:.4s}
}
/* Programme bands lock too: sticky centring that preserves their grid. */
.band.moment .wrap.prog{display:grid;align-content:center}
.band.moment.tight{padding-top:0;padding-bottom:0}

/* Very short viewports: content may not fit a pinned screen, so fall back. */
@media(max-height:580px){
  .band.moment{min-height:0;padding-top:clamp(76px,12vh,150px);padding-bottom:clamp(76px,12vh,150px)}
  .band.moment .wrap{position:static;min-height:0;display:block;padding-top:0;padding-bottom:0}
  .band.moment .wrap.prog{display:grid}
}
/* Locked programme bands: tighter pinned padding so they fit laptop windows. */
.band.pm .wrap{padding-top:clamp(76px,10vh,110px);padding-bottom:clamp(28px,4vh,70px)}
@media(max-height:849px){
  .band.pm .prog .aside .loopcard{aspect-ratio:16/8}
  .band.pm .prog p{margin-top:14px}
  .band.pm .prog .aside .fact{margin-bottom:18px}
}
/* Only genuinely short windows release the lock. */
@media(max-height:679px){
  .band.pm{min-height:0;padding-top:clamp(64px,9vh,110px);padding-bottom:clamp(64px,9vh,110px)}
  .band.pm .wrap{position:static;min-height:0;padding-top:0;padding-bottom:0}
  .band.pm .wrap:not(.prog){display:block}
}

/* Statement screens: marker at the top, display-scale statement in the
   middle, creed strip anchored to the bottom edge. */
.wrap.stmt{justify-content:space-between}
.stmt-mid{margin:auto 0;padding:3vh 0}
.band.moment h3.big{font-size:clamp(2.058rem,4vw,3.33rem);letter-spacing:-.03em;line-height:1.04;max-width:22ch}
.band h3.big .r{color:var(--red)}
.stmt-mid .lede-l{font-size:clamp(1rem,1.45vw,1.272rem);margin-top:30px;max-width:56ch}
.creed-strip{list-style:none;display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--rule-d);padding-top:24px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.75;flex-wrap:wrap}
.creed-strip li{display:flex;align-items:center;gap:11px}
.creed-strip li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
@media(max-width:700px){.creed-strip{flex-direction:column;gap:14px}}

.band .wrap{max-width:var(--max);margin:0 auto;position:relative;z-index:0}
/* Ambient geometry (canvas injected behind statement content). */
.geo-field{position:absolute;inset:0;z-index:-1;pointer-events:none}
.band.dark{background:var(--ink)}
.section-meta{display:flex;align-items:center;gap:16px;margin-bottom:clamp(30px,5vh,52px)}
.section-meta .smark{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--red);white-space:nowrap}
.section-meta .ln{flex:1;height:1px;background:linear-gradient(to right,var(--rule-d),transparent)}
.band h3.big{font-weight:700;font-size:clamp(1.618rem,4.2vw,3.33rem);line-height:1.02;letter-spacing:-.025em;max-width:22ch}
.band .lede-l{font-size:clamp(1rem,1.45vw,1.272rem);line-height:1.6;max-width:58ch;opacity:.85;margin-top:24px}
/* Quiet emphasis: key phrases step forward in weight only. */
.lede-l strong,.prog p strong,.cols-2 p strong{font-weight:700}

/* Word glow: statement headlines shimmer word by word, a soft light
   passing along the line before it rests. Disabled in light mode (glow
   needs ink) and for reduced motion. */
.gw{display:inline-block;animation:wordGlow 4.6s ease-in-out infinite;animation-delay:calc(var(--gi)*.3s);animation-play-state:paused}
.gw.gw-r{animation-name:wordGlowR}
/* Gradient words keep their sweep and glow at once. */
.gw.grad-tag{animation:gradSweep 16s linear infinite,wordGlow 4.6s ease-in-out infinite;animation-delay:0s,calc(var(--gi)*.3s);animation-play-state:paused}
/* Glow only runs while its headline is on screen (observer-driven). */
.gw-run .gw,.gw-run .gw.grad-tag{animation-play-state:running}
@keyframes wordGlow{
  0%,16%,100%{text-shadow:0 0 0 rgba(242,240,234,0)}
  7%{text-shadow:0 0 16px rgba(242,240,234,.55),0 0 46px rgba(242,240,234,.2)}
}
@keyframes wordGlowR{
  0%,16%,100%{text-shadow:0 0 0 rgba(229,37,27,0)}
  7%{text-shadow:0 0 16px rgba(229,37,27,.6),0 0 50px rgba(229,37,27,.28)}
}
:root[data-theme="light"] .gw:not(.grad-tag){animation:none}
@media(prefers-reduced-motion:reduce){.gw,.gw.grad-tag{animation:none}}

/* Never show native playback chrome on inline videos. */
video::-webkit-media-controls,
video::-webkit-media-controls-start-playback-button{display:none!important;opacity:0!important;pointer-events:none!important;-webkit-appearance:none}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,76px);margin-top:40px;align-items:start}
.cols-2 p{line-height:1.65;opacity:.82}
.cols-2 p+p{margin-top:16px}
@media(max-width:780px){.cols-2{grid-template-columns:1fr}}

/* Status chips. */
.pill{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;border:1px solid currentColor;border-radius:0;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}
.pill.muted{opacity:.6}.pill.muted::before{background:currentColor;opacity:.5}

/* The problem: editorial headline/lede pair, baseline-set. */
.prob-head{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,90px);align-items:end}
.prob-head .lede-l{margin-top:0;padding-bottom:.35em}
@media(max-width:880px){.prob-head{grid-template-columns:1fr}.prob-head .lede-l{margin-top:24px;padding-bottom:0}}
.glow-rg{text-shadow:0 0 22px rgba(229,37,27,.20)}

/* The figures: a typographic ledger. Hairline column rules, oversized
   numerals, a red tick that draws in as each counts. */
.datablocks{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(44px,8vh,76px)}
.db{border-left:1px solid var(--rule-d);padding:6px clamp(26px,3vw,48px)}
.db:first-child{border-left:none;padding-left:0}
.db::before{content:"";display:block;width:0;height:2px;background:var(--red);margin-bottom:20px;transition:width 1.1s cubic-bezier(.22,1,.36,1) .35s}
.db.in::before{width:36px}
.db .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.55;line-height:1.8}
.db .v{font-weight:700;font-size:clamp(1.618rem,3vw,2.618rem);letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin-top:18px;line-height:1}
.db .v small{font-size:.4em;font-weight:700;letter-spacing:0;opacity:.85}
.db .s{font-size:.95rem;opacity:.6;margin-top:16px;line-height:1.55;max-width:30ch}
@media(max-width:780px){
  .datablocks{grid-template-columns:1fr}
  .db{border-left:none;border-top:1px solid var(--rule-d);padding:24px 0}
  .db:first-child{border-top:none;padding-top:0}
}

/* Programme content blocks. */
.prog{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,80px);align-items:start}
.prog .head-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.prog .idx{font-family:var(--mono);font-size:12px;letter-spacing:.2em;opacity:.5}
.prog h3{font-weight:700;font-size:clamp(1.618rem,3.4vw,2.618rem);letter-spacing:-.02em;line-height:1.05;max-width:20ch}
.prog p{line-height:1.65;opacity:.82;margin-top:18px;max-width:56ch}
.prog .status-note{font-family:var(--mono);font-size:11px;letter-spacing:.08em;line-height:1.7;opacity:.55;margin-top:22px;padding-top:18px;border-top:1px solid var(--rule-d);max-width:56ch}
.prog .aside{border-left:1px solid var(--rule-d);padding-left:clamp(20px,2.5vw,40px)}
.prog .aside .fact{margin-bottom:26px}
.prog .aside .fact .fk{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.5}
.prog .aside .fact .fv{font-weight:700;font-size:clamp(1.272rem,2.4vw,2.058rem);letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums}
.prog .aside .fact .fv small{font-size:.5em;font-weight:700}
.prog .cta-row{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:880px){.prog{grid-template-columns:1fr}.prog .aside{border-left:none;border-top:1px solid var(--rule-d);padding-left:0;padding-top:26px}}

/* Network index: hairline grid, cells lift and glow on hover. */
.netdex{display:grid;grid-template-columns:repeat(5,1fr);margin-top:50px;border-right:1px solid var(--rule-d);border-bottom:1px solid var(--rule-d)}
.netdex a{position:relative;border-top:1px solid var(--rule-d);border-left:1px solid var(--rule-d);background:var(--ink);padding:28px 24px 26px;display:flex;flex-direction:column;gap:14px;transition:background .35s ease,box-shadow .35s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.netdex a:hover,.netdex a:focus-visible{background:#161009;transform:translateY(-4px);z-index:1;
  box-shadow:inset 0 0 0 1px rgba(229,37,27,.45),0 0 0 1px rgba(229,37,27,.25),0 14px 44px rgba(229,37,27,.13),0 0 60px rgba(229,37,27,.10);outline:none}
.netdex .n{font-family:var(--mono);font-size:11px;letter-spacing:.18em;opacity:.5;transition:color .3s,opacity .3s}
.netdex a:hover .n{color:var(--red);opacity:1}
.netdex .t{font-weight:700;font-size:1.05rem;letter-spacing:-.01em;line-height:1.2}
.netdex .pill{margin-top:auto;align-self:flex-start}
@media(max-width:980px){.netdex{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.netdex{grid-template-columns:1fr}}

/* Programme showcase: five scenes, one per programme, aligned to the
   index above. The hovered (or focused) scene widens. */
.netdex-stage{display:flex;gap:10px;margin-top:16px;height:clamp(220px,32vh,380px)}
.nds-pane{position:relative;flex:1;min-width:0;overflow:hidden;border:1px solid var(--rule-d);background:#101010;transition:flex .5s cubic-bezier(.22,1,.36,1),border-color .35s ease}
.nds-pane:hover,.nds-pane:focus-visible{flex:2.4;border-color:rgba(229,37,27,.45)}
.nds-pane video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nds-pane::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,10,.6),transparent 45%);pointer-events:none}
.nds-cap{position:absolute;left:14px;bottom:12px;z-index:2;display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#F2F0EA;white-space:nowrap}
.nds-cap i{font-style:normal;color:var(--red)}
.nds-cap b{font-weight:400;opacity:0;transform:translateX(-6px);transition:opacity .35s ease .12s,transform .4s ease .12s}
.nds-pane:hover .nds-cap b,.nds-pane:focus-visible .nds-cap b{opacity:.9;transform:none}
:root[data-theme="light"] .nds-pane{background:#E2DED4}
@media(max-height:760px){.netdex-stage{height:clamp(170px,25vh,280px)}}
@media(max-width:760px){
  .netdex-stage{height:200px;margin-top:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
  .nds-pane{flex:0 0 64vw;scroll-snap-align:center}
  .nds-cap b{opacity:.9;transform:none}
}

/* Dharma: the one deliberate inversion (white stage). */
.band.white{background:var(--white);color:var(--ink)}
.band.white .section-meta .ln{background:var(--rule-l)}
.band.white .status-note{border-top-color:var(--rule-l)}
.dharma-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(28px,5vw,72px);align-items:center}
.dharma-copy h3.big{max-width:12ch}
.dharma-copy .lede-l{max-width:48ch;opacity:.8}
.dharma-copy .status-note{margin-top:28px}
.dharma-stage{position:relative}
.dharma-vid{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--white)}
@media(max-width:880px){.dharma-grid{grid-template-columns:1fr}.dharma-stage{order:-1}}

/* Loop video card. */
.loopcard{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:0;border:1px solid var(--rule-d);background:#101010}
.loopcard video,.loopcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.loopcard .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,10,.55),transparent 55%)}
.prog .aside .loopcard{margin-bottom:28px}

/* Scroll-driven video marquee. */
.motion{padding-left:0;padding-right:0;overflow:hidden}
.motion .wrap{padding:0 var(--pad)}
.mq{margin-top:clamp(40px,7vh,72px);display:flex;flex-direction:column;gap:clamp(12px,1.6vw,20px)}
.mq-row{display:flex;gap:clamp(12px,1.6vw,20px);width:max-content;will-change:transform}
.mq-tile{position:relative;flex:none;width:clamp(280px,32vw,480px);aspect-ratio:16/9;overflow:hidden;border-radius:0;border:1px solid var(--rule-d);background:#101010;margin:0}
.mq-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mq-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,10,.6),transparent 45%)}
.mq-tile figcaption{position:absolute;left:16px;bottom:13px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#F2F0EA;opacity:.85}
@media(max-width:760px){
  .mq{display:block}
  .mq-row{width:auto;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:0 var(--pad) 14px}
  .mq-row+.mq-row{margin-top:4px}
  .mq-tile{width:78vw;scroll-snap-align:center}
}

/* Why-different trio. */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:48px}
.trio .t-item{border-top:1px solid var(--rule-d);padding-top:22px}
.trio .t-item .tn{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--red)}
.trio .t-item h4{font-weight:700;font-size:1.272rem;letter-spacing:-.015em;margin-top:12px}
.trio .t-item p{margin-top:12px;line-height:1.6;opacity:.8;font-size:.98rem}
@media(max-width:780px){.trio{grid-template-columns:1fr}}

/* Contact (display only) */
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(32px,5vh,52px)}
.c-card{border:1px solid var(--rule-d);padding:clamp(22px,2.6vw,32px);background:var(--ink-soft);transition:border-color .3s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.c-card:hover{border-color:var(--red);transform:translateY(-2px)}
.c-card .c-k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.c-card .c-v{font-weight:700;font-size:clamp(1.15rem,1.9vw,1.5rem);letter-spacing:-.01em;margin-top:14px;line-height:1.22}
.c-card .c-v a{color:inherit;border-bottom:1px solid var(--rule-d);transition:color .25s,border-color .25s}
.c-card .c-v a:hover{color:var(--red);border-color:var(--red)}
.c-card .c-sub{margin-top:12px;font-size:.95rem;opacity:.72;line-height:1.55}
.c-hours{margin-top:14px;display:grid;gap:8px;font-size:.95rem}
.c-hours .row{display:flex;justify-content:space-between;gap:18px}
.c-hours .row span{opacity:.72}
.c-hours .row b{font-weight:600}
@media(max-width:680px){.contact-grid{grid-template-columns:1fr}}

/* Contact lead — person, two equal columns (circular photo left, copy right) */
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.lead-photo{display:flex;justify-content:center;align-items:center}
.lead-portrait{width:clamp(180px,16vw,224px);aspect-ratio:1/1;overflow:hidden;border-radius:50%;border:2px solid #fff;box-shadow:0 14px 34px rgba(0,0,0,.36);background:#f3f1ec;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.lead-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 44%}
.lead-photo:hover .lead-portrait{transform:scale(1.05)}
.lead-copy .section-meta{margin-bottom:clamp(18px,3vh,30px)}
.lead-role{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
.lead-name{font-weight:700;font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:-.03em;line-height:1.02;margin-top:14px}
.lead-copy .lede-l{margin-top:20px;max-width:46ch}
@media(max-width:760px){.lead-grid{grid-template-columns:1fr;gap:clamp(24px,6vw,36px)}.lead-photo{justify-content:flex-start}.lead-portrait{width:clamp(168px,48vw,210px)}}

/* Reveals. */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
.moment .rv{transform:translateY(36px);transition-duration:.55s}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* Inside locked sections, reveals are opacity-only: the section lift
   already animates position on the scroll clock, and a second positional
   animation on its own clock makes text wobble. */
.band.moment .rv{transform:none}
.band.moment .rv.in{transform:none}

/* Mobile / reduced-motion: poster chapters, no scrub. The ID selectors
   must be repeated here: #network/#bask height rules outrank .flat, which
   would leave reduced-motion and landscape-phone visitors scrolling
   hundreds of vh of empty runway. */
.chapter.flat,#network.chapter.flat,#bask.chapter.flat,.chapter.flat[data-no-intro]{height:auto}
.chapter.flat .sticky{position:relative;height:100svh}
.chapter.flat canvas{display:none}
.chapter.flat .fallback{display:block}
.chapter.flat .ch-loader,.chapter.flat .scroll-cue{display:none}
/* Mobile chapters play their matching loop instead of a frozen poster. */
.chapter.flat video.mseq{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

/* Consistent hover language: underline reveal on quiet links. */
.foot-grid a,.nav a:not(.btn){background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size .35s ease,color .25s ease,opacity .25s ease;padding-bottom:2px}
.foot-grid a:hover,.nav a:not(.btn):hover{background-size:100% 1px}

/* Light mode: content sections invert to bone paper; the film chapters
   stay cinematic (their UI is always bone). */
:root[data-theme="light"]{
  --bone:#0B0B0A; --bone-2:#1A1916; --ink:#F4F2EC; --ink-soft:#EBE8E0;
  --rule-d:rgba(11,11,10,.18); --hair:rgba(11,11,10,.12);
}
:root[data-theme="light"] .site-header.solid{background:rgba(244,242,236,.72)}
:root[data-theme="light"] .site-header:not(.solid){color:#F2F0EA}
:root[data-theme="light"] .logo-w{display:none}
:root[data-theme="light"] .brand .logo-k{display:block}
:root[data-theme="light"] .site-footer{background:#EBE8E0;color:#0B0B0A}
:root[data-theme="light"] .foot-brand .logo-k{display:block}
:root[data-theme="light"] .netdex a:hover{background:#EFE9DF}
:root[data-theme="light"] .mq-tile,
:root[data-theme="light"] .loopcard{background:#E2DED4}
:root[data-theme="light"] .cta input{background:rgba(11,11,10,.05);color:#0B0B0A}
:root[data-theme="light"] .cta input::placeholder{color:rgba(11,11,10,.45)}
:root[data-theme="light"] .grain{opacity:.035}
:root[data-theme="light"] .section-rail .rail-track{background:rgba(11,11,10,.16)}
:root[data-theme="light"] .section-rail a{border-color:rgba(11,11,10,.4);background:#F4F2EC}
:root[data-theme="light"] .section-rail a:hover,
:root[data-theme="light"] .section-rail a.on{border-color:var(--red);background:var(--red)}
/* Film chapters keep bone UI on the footage regardless of theme. */
.chapter .ch-ui,.chapter .ch-loader,.chapter .sc-txt,.chapter .kicker{color:#F2F0EA}
.chapter .kick-row .rule{background:rgba(242,240,234,.14)}

/* Hero copy: stacked, calm. */
#top .hero-side{max-width:46ch;margin-top:28px}
#top .hero-side .ch-sub{margin-top:0}
#top .hero-side .actions{margin-top:28px}
/* The hero block sits vertically centred, left-set. */
#top .ch-copy{top:0;bottom:0;display:flex;flex-direction:column;justify-content:center}

/* Home & stay: partnership matrix, compact enough to read on one
   screen without scrolling. */
#partner{padding-top:clamp(44px,6vh,64px);padding-bottom:clamp(44px,6vh,64px)}
#partner .section-meta{margin-bottom:18px}
.pt-head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:end}
.pt-head h3.big{margin:0;line-height:1;font-size:clamp(1.618rem,2.8vw,2.618rem);max-width:none}
.pt-head .lede-l{margin:0;font-size:clamp(.92rem,1.05vw,1rem);line-height:1.6;max-width:44ch;opacity:.75}
@media(max-width:780px){.pt-head{grid-template-columns:1fr;gap:18px}}

/* Three self-contained tier cards. The shared label column is gone;
   each spec row carries its own caption inside the card. */
.pt-matrix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(22px,3.5vh,36px);align-items:stretch}
.pt-track{position:relative;display:flex;flex-direction:column;border:1px solid var(--rule-d);background:rgba(128,128,128,.04);
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s ease,box-shadow .35s ease}
.pt-track:hover{transform:translateY(-4px);border-color:rgba(229,37,27,.4);box-shadow:0 16px 50px rgba(0,0,0,.35)}
.pt-track.feat{border-color:rgba(229,37,27,.6);background:rgba(229,37,27,.05);box-shadow:0 0 0 1px rgba(229,37,27,.35),0 28px 80px -40px rgba(229,37,27,.5)}
.pt-track.feat:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(229,37,27,.5),0 24px 70px -30px rgba(229,37,27,.55)}

/* Card header: name, tagline, headline figure, CTA. */
.pt-head-cell{position:relative;display:flex;flex-direction:column;gap:7px;flex:1;padding:22px 20px 18px;border-bottom:1px solid var(--rule-d)}
.pt-idx{font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;opacity:.45}
.pt-head-cell h4{font-weight:700;font-size:clamp(1.15rem,1.5vw,1.45rem);letter-spacing:-.015em;line-height:1.02}
.pt-head-cell p{opacity:.68;font-size:.88rem;line-height:1.4;max-width:26ch}
.pt-hero{margin-top:auto;display:flex;flex-direction:row;align-items:baseline;gap:10px;padding-top:12px}
.pt-hero b{font-weight:800;font-size:clamp(1.85rem,2.7vw,2.618rem);letter-spacing:-.035em;line-height:.9;font-variant-numeric:tabular-nums}
.pt-track.feat .pt-hero b{color:var(--red)}
.pt-hero em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.55}
.pt-head-cell .btn{margin-top:14px;align-self:flex-start;padding:9px 14px;font-size:11px}
.pt-flag{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:var(--red);color:#fff;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;padding:5px 12px;white-space:nowrap}

/* Spec rows: caption left, value right. */
.pt-c{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:38px;padding:6px 20px;border-bottom:1px solid var(--rule-d);font-weight:700;font-size:.9rem;text-align:right}
.pt-c:last-child{border-bottom:none}
.pt-c::before{content:attr(data-label);font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;font-weight:400;text-align:left;white-space:nowrap}

/* Matrix footer. */
.pt-foot{margin-top:16px;display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
.pt-flex{max-width:70ch;opacity:.8;font-size:.9rem;line-height:1.55}
.pt-arrow{color:var(--red);font-weight:700;margin-right:6px;font-size:1.1em}
.pt-prov{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.45;white-space:nowrap}

/* Stacked cards on narrow screens. */
@media(max-width:880px){
  .pt-matrix{grid-template-columns:1fr;gap:14px}
  .pt-flag{left:26px;transform:translateY(-50%)}
}

/* Mobile layout, gated to phones (desktop untouched). */
@media(max-width:760px){
  /* ID-specific chapter heights outrank .flat; force every chapter to one
     screen on mobile. */
  #network.chapter,#bask.chapter,.chapter,.chapter[data-no-intro]{height:auto}

  /* Header: compact, safe-area aware. */
  .site-header{padding:12px 18px;padding-top:max(12px,env(safe-area-inset-top))}
  .brand .logo{height:20px}
  .brand .wordmark{font-size:13px;letter-spacing:.18em}
  .nav{gap:10px}
  .nav .btn{padding:9px 12px;font-size:10px;letter-spacing:.08em}
  .theme-toggle{width:32px;height:32px}

  /* Hero: centred within a safe band clear of the kicker, thumb-reachable
     actions. */
  .kick-row{top:84px}
  #top .ch-copy{top:148px;bottom:96px}
  .ch-copy h2{font-size:clamp(2.058rem,10.5vw,3.33rem);line-height:1.02;max-width:14ch}
  .ch-copy .ch-sub{font-size:1rem;max-width:34ch}
  #top .hero-side{margin-top:20px}
  #top .hero-side .actions{margin-top:22px;flex-direction:column;align-items:flex-start;gap:10px}
  #top .hero-side .actions .btn{width:100%;justify-content:center;padding:14px}
  .chapter:not(#top) .ch-copy{bottom:56px}

  /* Sections keep their vertical rhythm: the pinned-section rules zero
     the padding for desktop runways, so restore it here at higher
     specificity than the base .band.moment rules. */
  .band{padding:clamp(56px,10vh,88px) var(--pad)}
  .band.moment,.band.moment.tight,.band.moment.build{min-height:0;padding-top:clamp(56px,10vh,88px);padding-bottom:clamp(56px,10vh,88px)}
  .band.moment .wrap{position:static;min-height:0;display:block;padding:0}
  .band.moment .wrap.prog{display:block}
  .band.pm .wrap{position:static;min-height:0;padding:0}
  .band.pm .wrap.prog{display:block}
  .section-meta{margin-bottom:26px}

  /* Statement screens: phone-scale type, full-measure copy. */
  .band h3.big,.band.moment h3.big{font-size:clamp(1.8rem,8vw,2.618rem);line-height:1.06;max-width:18ch}
  .stmt-mid{margin:26px 0}
  .stmt-mid .lede-l,.band .lede-l{font-size:1rem;max-width:none}
  .creed-strip{flex-direction:column;gap:12px;margin-top:28px}

  /* The ledger: stacked, generous. */
  .prob-head{gap:20px}
  .datablocks{margin-top:34px}
  .db{padding:22px 0}
  .db .v{font-size:clamp(2.058rem,11vw,2.618rem)}
  .db .s{max-width:none}

  /* Programme blocks: single column, video first. */
  .prog{gap:24px}
  .prog .aside{order:-1}
  .prog .aside .loopcard{margin-bottom:22px}
  .prog .aside .fact{margin-bottom:20px}
  .prog h3{font-size:clamp(1.618rem,7vw,2.058rem)}
  .prog p,.prog .status-note{max-width:none}
  .head-row{gap:10px}

  /* Network index + tier cards: comfortable tap targets. */
  .netdex a{padding:22px 18px}
  .pt-head-cell{padding:28px 20px 24px}
  .pt-c{padding:10px 20px}
  .pt-foot{flex-direction:column;align-items:flex-start;gap:14px}
  .pt-prov{white-space:normal}

  /* Register: the pin releases. Content is taller than a phone screen,
     so the stage flows naturally instead of clipping. */
  .cta{min-height:0}
  .cta-stage{position:relative;z-index:0;height:auto;display:block;overflow:visible;padding:84px var(--pad) max(72px,env(safe-area-inset-bottom))}
  .cta .inner{margin:0 auto}
  .cta h2{font-size:clamp(2.058rem,9vw,2.618rem)}
  .cta p{margin-bottom:26px}
  .cta-console{padding:22px 16px 18px;margin-top:32px}
  .cta .form{flex-direction:column}
  .cta input{min-width:0;width:100%}
  .cta .form .btn{width:100%;justify-content:center}

  /* Footer: stack. */
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .foot-bottom{flex-direction:column;gap:10px}

  /* Tagline + marquee at phone scale; the marquee stays full-bleed. */
  .grad-tag,.ch-copy h2.grad-tag{font-size:clamp(2.058rem,10vw,2.618rem)}
  .motion{padding-left:0;padding-right:0}
  .trio{gap:26px}

  /* 16px floor stops iOS zooming the page when a field focuses. */
  .cta input,.cta textarea{font-size:16px}
}
@media(max-width:420px){
  .foot-grid{grid-template-columns:1fr}
  .brand .wordmark{font-size:11px;letter-spacing:.14em}
  .nav .btn{padding:8px 10px}
}