/* V15 · structure: Hero → Three jobs → On air → Packages → Contact.
   The hero pin is shorter (~1.4 screens at 1440×900) and hands off to Three jobs instead of Workflow. */
@media(min-width:761px) and (min-height:680px){
  :is([data-motion=on],[data-director=on]) .director-scroll{height:calc(100svh - var(--director-top) + 760px)}
  :is([data-motion=on],[data-director=on]) #features{position:relative;z-index:2;margin-top:-85svh;opacity:var(--next-arrival,0);transform:translateY(var(--next-rise,60px))}
}

/* The monitor's screen after the flip previews the three channels */






/* Three jobs. ≥1180 px: three strips on one baseline; the active strip widens and its monitor scales, so the whole
   screen stays in frame. 761–1179 px: stacked. ≤760 px: one channel at a time (tabs, swipe), controls under the monitor. */
#features.op3{padding-top:96px;padding-bottom:32px}
#features.op3>.section-label{margin-bottom:34px}
.op3-head{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:40px;align-items:end}
#features.op3 h2{margin:0;font:700 clamp(54px,6.2vw,104px)/.93 'Saira Condensed',sans-serif;letter-spacing:-.02em}
.op3-head>p{justify-self:end;max-width:440px;margin:0;font-size:19px;line-height:1.5;color:var(--muted2)}
.op3-tabs{display:none}
.op3-strips{--gap:24px;position:relative;container-type:inline-size;display:flex;margin:48px calc(var(--gap)*-1) 0;border-block:1px solid var(--line)}
.op3-strip{--job:var(--accent);--scr:calc((100cqw - var(--gap)*6)*1.85/3.85 - 2px);position:relative;display:flex;flex-direction:column;flex:1 1 0;min-width:0;padding:30px var(--gap) 34px;border-left:1px solid var(--line);cursor:pointer;transition:flex-grow .65s cubic-bezier(.2,.7,.2,1)}
.op3-strip[data-job="1"],.op3-tab[data-job="1"]{--job:var(--live)}
.op3-strip[data-job="2"],.op3-tab[data-job="2"]{--job:var(--success)}
.op3-strip:first-child{border-left:0}
.op3-strip.is-active{flex-grow:1.85;cursor:auto}
.op3-strip::before{content:"";position:absolute;top:-1px;left:var(--gap);right:var(--gap);height:3px;background:var(--job);opacity:.3;transition:opacity .3s}
.op3-strip.is-active::before{opacity:1}
[data-motion=off] .op3-strip{transition:none}
.op3-slot{--live:#ff5b5b;--success:#4dc48e;--accent:#9ac2ff;--cta-text:#ffb070;--liveEdge:rgba(255,91,91,.45);--liveWash:rgba(255,91,91,.12);--ink:#f4f8ff;--ink2:rgba(226,236,252,.72);position:relative;display:flex;align-items:flex-end;height:calc(var(--scr)*9/16 + 33px);color:var(--ink)}
[data-job="0"] .op3-slot{--job:var(--accent)}
[data-job="1"] .op3-slot{--job:var(--live)}
[data-job="2"] .op3-slot{--job:var(--success)}
.op3-monitor{position:relative;flex:1;min-width:0;overflow:hidden;border:1px solid rgba(178,201,235,.16);border-radius:var(--r-xs);background:#05070a}
.op3-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;height:30px;padding:0 12px;border-bottom:1px solid rgba(178,201,235,.12);font:500 10.5px/1 var(--font-mono);letter-spacing:.12em;color:var(--ink2);white-space:nowrap;overflow:hidden}
.op3-read{display:flex;align-items:center;gap:7px}
.op3-read i,.rd-state i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--job);transition:background-color .3s,box-shadow .3s}
.op3-read b{font-weight:500;color:var(--ink)}
.op3-strip[data-import]:not([data-import=live]) :is(.op3-read,.rd-state) i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink2)}
.op3-screen{--sc:max(2.4cqw,var(--safe-clear));position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;container-type:inline-size;background:#0a0d12;transition:opacity .4s,filter .4s}
.op3-strip:not(.is-active) .op3-screen{opacity:.82;filter:saturate(.7)}
.op3-ctl{position:absolute;left:var(--safe-clear);bottom:var(--safe-clear);z-index:3}
.op3-ctl.is-read,.op3-ctl.is-scrub{display:none}
.op3-take{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 12px;border:1px solid rgba(178,201,235,.28);border-radius:var(--r-xs);background:#0d1219;color:var(--ink);font:600 14px/1 var(--font-sans);cursor:pointer;box-shadow:0 2px 0 #000}
.op3-take i{width:9px;height:9px;flex:none;border-radius:50%;background:#3a4453;transition:background-color .2s}
.op3-take span{font-weight:400;color:var(--ink2)}
.op3-take:hover{border-color:rgba(178,201,235,.5)}
.op3-take[aria-pressed=true]{border-color:var(--live)}
.op3-take[aria-pressed=true] i{background:var(--live)}
.op3-take:active{translate:0 1px;box-shadow:none}
.op3-take:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.op3-strip:not(.is-active) .op3-take span{display:none}

/* Copy: every block fills its strip, so the links share one line */
.op3-copy{flex:1;display:flex;flex-direction:column;width:calc((100cqw - var(--gap)*6)/3.85);margin-top:28px}
.op3-mark{display:flex;align-items:baseline;justify-content:space-between;gap:16px;color:var(--job)}
.op3-num{font:800 clamp(64px,5.2vw,92px)/.78 'Saira Condensed',sans-serif;letter-spacing:-.03em}
.op3-ico{width:36px;height:36px;flex:none;translate:0 2px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square}
.op3-plate{fill:currentColor;fill-opacity:.2;stroke:none}
.op3-what{display:flex;align-items:center;gap:9px;margin-top:22px;font-size:15px;font-weight:600;line-height:1.3;color:var(--text)}
.op3-what::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--job)}
.op3-copy h3{margin:12px 0 12px;font:700 clamp(34px,2.9vw,48px)/.96 'Saira Condensed',sans-serif;letter-spacing:-.01em}
.op3-copy p{margin:0 0 20px;font-size:17px;line-height:1.5;color:var(--body)}
.op3-copy a{display:inline-flex;align-self:flex-start;align-items:center;gap:14px;margin-top:auto;font-size:16px;font-weight:500}
.op3-copy a span,.op3-bus a span{font-size:20px;transition:transform .3s}
.op3-copy a:hover span{transform:translateY(3px)}
:is(.op3-copy,.op3-bus) a[href^="/"]:hover span{transform:translate(2px,-2px)}
[data-motion=off] :is(.op3-copy,.op3-bus) a span{transition:none}
.op3-bus{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding:20px 0;border-bottom:1px solid var(--line)}
.op3-bus-tag{display:flex;align-items:center;gap:12px;font:500 10.5px/1 var(--font-mono);letter-spacing:.14em;color:var(--muted2)}
.op3-bus-tag svg{width:28px;height:28px;color:var(--cta-text);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square}
.op3-bus p{flex:1 1 360px;margin:0;font-size:17px;line-height:1.5;color:var(--body)}
.op3-bus a{display:inline-flex;align-items:center;gap:14px;font-weight:500}

/* Demo 01: HUD (values from assets/main-inferno.png; team colours are the HUD skin) */
.op3-hud{font-family:'Chakra Petch',sans-serif;color:#fff}
.hud-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.4) saturate(.7)}
.hud-radar{position:absolute;left:var(--sc);top:var(--sc);width:18cqw;height:18cqw;object-fit:contain;opacity:.85}
.hud-bug{position:absolute;top:2.2cqw;left:50%;translate:-50% 0;display:grid;grid-template-columns:12cqw 7.5cqw 16cqw 7.5cqw 12cqw;height:9.4cqw;box-shadow:0 .6cqw 1.6cqw rgba(0,0,0,.5)}
.hud-team{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3cqw}
.hud-team.ct{background:#4f8fe8}
.hud-team.t{background:#e35d52}
.hud-team img{width:3.6cqw;height:3.6cqw;object-fit:contain}
.hud-team b{font-size:1.45cqw;font-weight:700;letter-spacing:.12em}
.hud-score{display:grid;place-items:center;background:#080c11;font-size:5.2cqw;font-weight:700}
.hud-clock{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2cqw;background:#080c11;border-inline:1px solid #1a2230}
.hud-clock small{font-size:1.15cqw;letter-spacing:.16em;color:rgba(226,236,252,.7);white-space:nowrap}
.hud-clock b{font-size:3.7cqw;font-weight:600;font-variant-numeric:tabular-nums}
.hud-alive{position:absolute;top:12.4cqw;left:50%;translate:-50% 0;display:flex;gap:.8cqw;align-items:center;padding:.35cqw 1.2cqw;background:#090c12;border:1px solid #1d2636;font-size:1.5cqw;font-weight:600;color:rgba(226,236,252,.6)}
.hud-alive b:first-child{color:#8fb8f5}
.hud-alive b:last-child{color:#f08a80}
.hud-feed{position:absolute;top:13cqw;right:var(--sc);display:flex;flex-direction:column;align-items:flex-end;gap:.6cqw;margin:0;padding:0;list-style:none}
.hud-feed li{display:flex;align-items:center;gap:.8cqw;padding:.45cqw .9cqw;background:rgba(8,12,17,.92);font-size:1.45cqw;font-weight:600}
[data-motion=on] .hud-feed li{animation:op3-in .35s cubic-bezier(.2,.7,.2,1)}
.hud-feed img,.cue-ev img{width:auto;filter:brightness(0) invert(.92)}
.hud-feed img{height:1.7cqw}
.hud-feed .ct{color:#8fb8f5}
.hud-feed .t{color:#f08a80}
.hud-partner{position:absolute;top:24cqw;right:var(--sc);display:flex;align-items:center;gap:.8cqw;padding:.6cqw 1cqw;border:1px solid rgba(255,176,112,.45);background:rgba(8,12,17,.92);font:500 1.3cqw/1 var(--font-mono);letter-spacing:.14em;color:var(--cta-text)}
.hud-partner svg{width:1.8cqw;height:1.8cqw;fill:rgba(255,176,112,.25);stroke:currentColor;stroke-width:1.6}
.hud-partner b{font-weight:500}
.hud-roster{position:absolute;left:var(--sc);right:var(--sc);bottom:var(--sc);display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) 3cqw repeat(5,minmax(0,1fr));gap:.6cqw}
.hud-roster span{padding:.9cqw .8cqw;background:rgba(8,12,17,.92);border-top:.4cqw solid #4f8fe8;font-size:1.35cqw;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .4s,border-color .4s}
.hud-roster .t{border-top-color:#e35d52}
.hud-roster .is-dead{opacity:.3;border-top-color:#39424f}

/* Demo 02: game events bring up graphics; Take puts the spotlight on air */
.op3-cues{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2.6cqw;padding:max(3cqw,var(--safe-clear));color:var(--ink)}
.cue-log{display:flex;flex-direction:column;gap:1cqw;margin:0;padding:0;list-style:none}
.cue-log li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"tm ev st" ". to st";column-gap:1.6cqw;row-gap:.5cqw;align-items:center;padding:1.3cqw 1.5cqw;background:rgba(178,201,235,.05);border:1px solid rgba(178,201,235,.1);border-radius:var(--r-xs)}
.cue-log time{grid-area:tm;font:500 1.7cqw/1 var(--font-mono);color:rgba(226,236,252,.6)}
.cue-ev{grid-area:ev;display:flex;align-items:center;gap:1cqw;min-width:0;font-size:2.1cqw;font-weight:600;white-space:nowrap;overflow:hidden}
.cue-ev img{height:1.8cqw;flex:none}
.cue-ev svg{width:2.2cqw;height:2.2cqw;flex:none;fill:none;stroke:currentColor;stroke-width:1.4}
.cue-to{grid-area:to;font-size:1.8cqw;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cue-log em{grid-area:st;font:500 1.5cqw/1 var(--font-mono);letter-spacing:.12em;font-style:normal;color:rgba(226,236,252,.55)}
.cue-log li.is-cued{border-color:var(--liveEdge);background:var(--liveWash)}
.cue-log li.is-cued em{color:var(--live)}
.cue-pgm{position:relative;border:1px solid rgba(178,201,235,.16);border-radius:var(--r-xs);background:#05070a;overflow:hidden;transition:border-color .3s}
.pgm-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.35) saturate(.6)}
.cue-pgm-tag{position:absolute;top:1.3cqw;left:1.3cqw;z-index:2;display:flex;align-items:center;gap:.8cqw;font:500 1.5cqw/1 var(--font-mono);letter-spacing:.14em;color:var(--ink2)}
.cue-pgm-tag::before{content:"";width:1.2cqw;height:1.2cqw;border-radius:50%;background:#3a4453}
.is-onair .cue-pgm{border-color:var(--live)}
.is-onair .cue-pgm-tag{color:#fff}
.is-onair .cue-pgm-tag::before{background:var(--live)}
.spot{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:40% minmax(0,1fr);align-items:end;opacity:.4;filter:grayscale(.7);transition:opacity .3s,filter .3s}
.is-onair .spot{opacity:1;filter:none}
[data-motion=on] .is-onair .spot{animation:op3-wipe .5s cubic-bezier(.2,.7,.2,1)}
.spot>img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.spot-copy{min-width:0;padding:1.3cqw 1.5cqw;background:#080c11;border-top:.5cqw solid #4f8fe8}
.spot-copy small{display:block;font:500 1.15cqw/1 var(--font-mono);letter-spacing:.14em;color:var(--ink2)}
.spot-copy strong{display:block;margin-top:.6cqw;font:700 3.4cqw/1 'Chakra Petch',sans-serif}
.spot-team{display:block;margin-top:.4cqw;font:600 1.25cqw/1 'Chakra Petch',sans-serif;letter-spacing:.14em;color:#8fb8f5}
.spot dl{display:flex;gap:1.5cqw;margin:1.1cqw 0 0}
.spot dl div{display:flex;gap:.5cqw;align-items:baseline}
.spot dt{font:500 1.15cqw/1 var(--font-mono);color:var(--ink2)}
.spot dd{margin:0;font:700 2.1cqw/1 'Chakra Petch',sans-serif}
.spot-partner{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:.8cqw 1.5cqw;background:#0d1219;border-top:1px solid rgba(255,176,112,.35);font:500 1.15cqw/1 var(--font-mono);letter-spacing:.14em;color:var(--ink2)}
.spot-partner b{font-weight:500;color:var(--cta-text)}

/* Demo 03: automatic clip with in/out and playhead */
.op3-replay{color:#fff}
.rp-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rp-tag,.rp-state{position:absolute;top:var(--sc);display:flex;align-items:center;gap:.8cqw;padding:.7cqw 1.1cqw;background:rgba(8,12,17,.9);font:500 1.5cqw/1 var(--font-mono);letter-spacing:.14em}
.rp-tag{left:var(--sc)}
.rp-state{right:var(--sc);color:var(--ink2)}
.rp-state b{font-weight:500}
.rp-state i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:#3a4453}
.is-ready .rp-state{color:#fff}
.is-ready .rp-state i{background:var(--success)}
.rp-title{position:absolute;left:var(--sc);bottom:calc(var(--sc) + 15cqw);display:flex;flex-direction:column;align-items:flex-start;gap:.5cqw}
.rp-title strong{padding:.6cqw 1.2cqw;background:#080c11;font:700 5.2cqw/.9 'Saira Condensed',sans-serif}
.rp-title span{padding:.6cqw 1.2cqw;background:var(--success);color:#04130b;font:600 1.45cqw/1 var(--font-mono);letter-spacing:.12em}
.rp-partner{position:absolute;right:var(--sc);bottom:calc(var(--sc) + 15cqw);padding:.6cqw 1cqw;border:1px solid rgba(255,176,112,.45);background:rgba(8,12,17,.9);font:500 1.3cqw/1 var(--font-mono);letter-spacing:.14em;color:var(--ink2)}
.rp-partner b{font-weight:500;color:var(--cta-text)}
.rp-strip{--in:9%;--out:91%;position:absolute;left:var(--sc);right:var(--sc);bottom:var(--sc);height:12cqw;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:2px}
.rp-strip img{display:block;width:100%;height:100%;min-height:0;object-fit:cover;filter:brightness(.7)}
.rp-range{position:absolute;top:0;bottom:0;left:var(--in);right:calc(100% - var(--out));box-sizing:border-box;border:1px solid var(--success)}
.rp-head{position:absolute;top:-3px;bottom:-3px;width:1px;background:#fff;left:calc(var(--in) + (var(--out) - var(--in))*var(--p,1))}



/* CH 01 opens with the import: the link types in, teams, players and match count up, CS2 connects, the HUD comes in */
.hud-import{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:rgba(5,7,10,.8);transition:opacity .45s,visibility 0s .45s}
.op3-strip[data-import=live] .hud-import{opacity:0;visibility:hidden}
.imp-card{display:flex;flex-direction:column;gap:1.7cqw;width:58cqw;padding:2.4cqw 2.6cqw;background:#0b131a;border:1px solid rgba(178,201,235,.2);border-top:.45cqw solid var(--accent);border-radius:var(--r-xs)}
.imp-tab{font:500 1.35cqw/1 var(--font-mono);letter-spacing:.16em;color:var(--ink2)}
.imp-link{display:flex;align-items:center;gap:1cqw;padding:1.2cqw 1.3cqw;border:1px solid rgba(154,194,255,.32);border-radius:var(--r-xs);background:rgba(154,194,255,.06);font:500 2.3cqw/1.2 var(--font-mono);color:#dfe9f5;white-space:nowrap;overflow:hidden}
.imp-link svg{width:2.3cqw;height:2.3cqw;flex:none;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round}
.imp-link>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.imp-link .tw-on::after{border-color:var(--accent)}
.imp-count{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6cqw;margin:0;padding-top:1.6cqw;border-top:1px solid rgba(178,201,235,.14)}
.imp-count>div{display:flex;flex-direction:column-reverse;gap:.9cqw;min-width:0}
.imp-count dd{margin:0;font:700 7.4cqw/.85 'Saira Condensed',sans-serif;font-variant-numeric:tabular-nums;color:var(--accent)}
.imp-count dt{font:500 1.3cqw/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.imp-status{display:flex;align-items:center;gap:.9cqw;font:500 1.35cqw/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);transition:color .3s}
.imp-status i{width:1.15cqw;height:1.15cqw;flex:none;box-sizing:border-box;border:.22cqw solid currentColor;border-radius:50%}
.imp-status.is-on{color:var(--success)}
.imp-status.is-on i{background:currentColor}
.op3-hud :is(.hud-radar,.hud-bug,.hud-alive,.hud-feed,.hud-partner,.hud-roster){transition:opacity .45s ease,translate .6s cubic-bezier(.2,.7,.2,1)}
.op3-hud .hud-bug{transition-delay:.08s}
.op3-hud .hud-roster{transition-delay:.18s}
.op3-hud .hud-alive{transition-delay:.26s}
.op3-hud .hud-partner{transition-delay:.34s}
.op3-strip[data-import]:not([data-import=live]) .op3-hud :is(.hud-radar,.hud-alive,.hud-feed,.hud-partner){opacity:0}
.op3-strip[data-import]:not([data-import=live]) .hud-bug{opacity:0;translate:-50% -2.4cqw}
.op3-strip[data-import]:not([data-import=live]) .hud-roster{opacity:0;translate:0 2.4cqw}
[data-motion=off] :is(.hud-import,.op3-hud .hud-radar,.op3-hud .hud-bug,.op3-hud .hud-alive,.op3-hud .hud-feed,.op3-hud .hud-partner,.op3-hud .hud-roster){transition:none}

/* Controls under the monitor (≤760 px): CH 01 readout, CH 02 Take, CH 03 clip scrubber */
.rd-counts{display:flex;align-items:baseline;gap:14px;min-width:0}
.rd-counts>span{display:flex;align-items:baseline;gap:5px;font:500 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.rd-counts b{font:700 24px/.9 'Saira Condensed',sans-serif;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--accent)}
.rd-state{display:flex;align-items:center;gap:6px;margin-left:auto;font:500 10px/1 var(--font-mono);letter-spacing:.12em;color:var(--ink);white-space:nowrap}
.rd-state b{font-weight:500}
.op3-scrub{flex:1;display:flex;align-items:center;gap:12px;min-width:0;padding-inline:8px;font:500 11px/1 var(--font-mono);letter-spacing:.1em;font-variant-numeric:tabular-nums;color:var(--ink2)}
.op3-scrub input{flex:1;min-width:0;height:44px;margin:0;accent-color:var(--success);background:transparent;cursor:pointer}
.op3-scrub input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

@media(max-width:1179px){
  .op3-strips{container-type:normal;flex-direction:column;margin-inline:0}
  .op3-strip{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:36px;align-items:center;padding:34px 0;border-left:0;border-top:1px solid var(--line);cursor:auto}
  .op3-strip:first-child{border-top:0}
  .op3-strip::before{left:0;right:auto;width:72px}
  .op3-slot{display:block;height:auto}
  .op3-copy{flex:none;width:auto;margin:0}
}
@media(max-width:760px){
  #features.op3{padding-top:64px}
  #features.op3>.section-label{margin-bottom:24px}
  .op3-head{grid-template-columns:minmax(0,1fr);gap:18px}
  .op3-head>p{justify-self:start;font-size:18px}
  #features.op3 h2{font-size:52px}
  .op3-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:32px}
  .op3-tab{--job:var(--accent);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;min-width:0;min-height:52px;padding:9px 12px 8px;border:1px solid var(--line);border-radius:var(--r-xs);background:var(--surface);box-shadow:inset 0 3px 0 color-mix(in srgb,var(--job) 35%,transparent);color:var(--muted2);font:500 15px/1 var(--font-sans);text-align:left;cursor:pointer;transition:color .2s,border-color .2s,box-shadow .2s}
  .op3-tab b{font:500 10.5px/1 var(--font-mono);letter-spacing:.14em}
  .op3-tab[aria-selected=true]{border-color:var(--edge);box-shadow:inset 0 3px 0 var(--job);color:var(--text)}
  .op3-tab:focus-visible{outline:2px solid var(--text);outline-offset:2px}
  .op3-strips{flex-direction:row;gap:16px;margin:12px 0 0;border:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
  .op3-strips::-webkit-scrollbar{display:none}
  .op3-strip{flex:0 0 100%;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border:0;scroll-snap-align:start;scroll-snap-stop:always}
  .op3-strip::before{display:none}
  .op3-slot{display:flex;flex-direction:column;align-items:stretch}
  .op3-monitor{flex:none;border-radius:var(--r-xs) var(--r-xs) 0 0}
  .op3-ctl,.op3-ctl.is-read,.op3-ctl.is-scrub{position:static;display:flex;align-items:center;min-height:59px;padding:7px;border:1px solid rgba(178,201,235,.16);border-top:0;border-radius:0 0 var(--r-xs) var(--r-xs);background:#0b1016}
  .op3-ctl.is-read{padding-inline:14px}
  .op3-take{flex:1}
  .op3-strip:not(.is-active) .op3-take span{display:inline}
  .op3-strip:not(.is-active) .op3-screen{opacity:1;filter:none}
  .op3-copy{flex:1;width:auto;margin-top:24px}
  .op3-num{font-size:48px}
  [data-motion=off] .op3-tab{transition:none}
}

/* Scene posters (scene-manager.js): the first frame of each scene until the live scene is ready */
.scene-cover{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:flex-start;padding:12px;background:#070b10;transition:opacity .35s ease,visibility 0s .35s}
.scene-cover[hidden]{display:none}
.scene-cover[data-state=live]{opacity:0;visibility:hidden;pointer-events:none}
.scene-poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.scene-play{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 13px;border:1px solid rgba(178,201,235,.28);border-radius:var(--r-xs);background:#0d1219;color:#f4f8ff;font:600 14px/1 var(--font-sans);cursor:pointer;box-shadow:0 2px 0 #000}
.scene-play[hidden]{display:none}
.scene-play svg{width:11px;height:11px;flex:none;fill:currentColor}
.scene-play:hover{border-color:rgba(178,201,235,.5)}
.scene-play:active{translate:0 1px;box-shadow:none}
.scene-play:focus-visible{outline:2px solid #f4f8ff;outline-offset:2px}
.director-scroll[data-next-scene=true] .scene-cover{visibility:hidden}
[data-motion=off] .scene-cover{transition:none}
@media(prefers-reduced-motion:reduce){html:not([data-motion=on]) .scene-cover{transition:none}}
.director-scroll[data-away=true] *,.director-scroll[data-away=true] *::before,.director-scroll[data-away=true] *::after{animation-play-state:paused!important}

/* Rotated monitor: each channel card carries a mini poster of its channel */








/* Overlays keep --safe-clear from the picture edge. Safe-area guides are drawn only on the On air frame (onair-v15.css). */
:root{--safe-clear:18px}

/* Step 3: no corner brackets outside the On air frame (nav links included). After the monitor turns, the film's own
   play/pause button stays with the film, so it never sits over the channel cards or the Three jobs monitors. */
.desktop-nav a::after{content:none}
.director-scroll[data-next-scene=true] #hero-root button[aria-label$="broadcast demo"]{visibility:hidden}
/* The film's own play/pause would sit on its HUD at any height, so it is hidden; the page's Motion toggle
   (bottom-right, "Pause decorative motion and the broadcast film") pauses the film instead */
#hero-root button[aria-label$="broadcast demo"]{display:none!important}
/* The hero poster and its play button belong to the phone scene only; above 760 px the film is the hero picture */
@media(min-width:761px){#hero-screen .scene-cover{display:none!important}}
@media(max-width:760px){.imp-count{display:none}}

/* Step 4a: the cue sheet foot is one line (custom design services, then the package details link) */
.cs-foot .cs-service{flex-basis:auto;padding-top:0;border-top:0}

/* A two-line broadcast write-on. The text remains in the DOM, at its final size.
   No JS/no motion: immediately readable. A single brief entrance, never a looping glitch. */
#hero-title{position:relative}
.hero-type-line{position:relative;display:table;max-width:100%;white-space:nowrap}
.hero-type-line>span{display:block}
.hero-type-line::after{content:"";position:absolute;top:.12em;bottom:.06em;left:0;width:4px;background:var(--cta);box-shadow:0 0 20px #ffb07055;opacity:0;pointer-events:none}
.hero-type-live{--write-delay:.91s;--write-duration:.42s;--write-steps:7}
.hero-type-line:first-child{--write-delay:.16s;--write-duration:.74s;--write-steps:15}
@keyframes hero-write{from{clip-path:inset(-8% 100% -8% -2%)}to{clip-path:inset(-8% -2% -8% -2%)}}
@keyframes hero-cursor{0%{left:0;opacity:1}94%{opacity:1}100%{left:100%;opacity:0}}
@keyframes hero-air-take{0%{color:var(--cta);background:var(--cta);box-shadow:inset 0 0 0 1px var(--cta)}45%{color:#22160b;background:var(--cta)}100%{color:var(--cta-text);background:transparent;box-shadow:none}}
[data-motion=on] .hero-type-line>span{animation:hero-write var(--write-duration) steps(var(--write-steps),end) var(--write-delay) both}
[data-motion=on] .hero-type-line::after{animation:hero-cursor var(--write-duration) steps(var(--write-steps),end) var(--write-delay) both}
[data-motion=on] .hero-type-live .broadcast-word{animation:hero-air-take .65s ease-out 1.33s both}
[data-motion=off] .hero-type-line>span,[data-motion=off] .hero-type-line::after,[data-motion=off] .hero-type-live .broadcast-word{animation:none}

/* Step 4e: the hand-off screen is one broadcast frame, the Signature HUD over gameplay, with what Overhub puts on air
   called out. Pictures are placeholders from existing scenes. Inside the frame, sizes are cqw/cqh of the 16:9 frame. */
.director-scroll .director-prep-preview{container-type:size;display:block;padding:0;background:#05070a}
.ho-frame{position:absolute;left:50%;top:50%;width:min(100cqw,177.78cqh);aspect-ratio:16/9;translate:-50% -50%;container-type:size;overflow:hidden;color:#f4f8ff}
.ho-frame>img{position:absolute;inset:0;display:block;width:100%;height:100%}
.ho-game{object-fit:cover;filter:brightness(.55) saturate(.85)}
.ho-scrim{position:absolute;inset:0;background:radial-gradient(ellipse 55% 65% at 0 0,rgba(5,7,10,.82),transparent 72%)}
.ho-hud{z-index:1}
.ho-frame svg{width:2.4cqh;height:2.4cqh;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
.ho-title{position:absolute;left:4.5%;top:6.5%;z-index:3;display:block;font:700 9cqh/.92 'Saira Condensed',sans-serif;letter-spacing:-.015em;color:#f4f8ff}
.ho-title>span{display:block;white-space:nowrap}
.ho-title em{font-style:normal;color:#ff6b62}
.ho-plate{position:absolute;left:43.5%;width:13%;top:12.8%;height:4.4%;z-index:2;display:flex;align-items:center;justify-content:center;gap:1cqh;box-sizing:border-box;background:rgba(8,12,17,.94);border:1px solid rgba(255,255,255,.24);font:600 2.6cqh/1 var(--font-sans);color:#e9eef5}
.ho-l3{position:absolute;left:31%;right:31%;top:73%;height:11.5%;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.2cqh;box-sizing:border-box;padding:0 2cqh;background:rgba(8,12,17,.95);border-left:.6cqh solid #4f8fe8;border-right:.6cqh solid #e35d52;font-family:'Chakra Petch',sans-serif}
.ho-l3 small{font:500 2.1cqh/1 var(--font-mono);letter-spacing:.14em;color:#9fb3ba}
.ho-l3>span{display:flex;align-items:center;gap:1.3cqh;font-size:3.3cqh;font-weight:700;line-height:1;white-space:nowrap}
.ho-l3 img{width:3.4cqh;height:3.4cqh;object-fit:contain}
.ho-l3 i{font-style:normal;font-weight:500;font-size:2.2cqh;color:#9fb3ba}
.ho-strip{position:absolute;left:31%;right:31%;top:84.5%;height:4.5%;z-index:2;display:flex;align-items:center;justify-content:center;gap:1.2cqh;background:rgba(5,7,10,.94);border-top:1px solid rgba(255,255,255,.12);font:500 2cqh/1 var(--font-mono);letter-spacing:.12em;color:#aebdc4;white-space:nowrap}
.ho-strip b{display:flex;align-items:center;gap:.8cqh;font:600 2.6cqh/1 var(--font-sans);color:#f4f8ff}
.ho-lead{position:absolute;z-index:3;background:rgba(240,246,255,.62)}
.ho-lead::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#f4f8ff}
.ho-lead.is-hud{left:67.7%;width:4%;top:6.4%;height:1px}
.ho-lead.is-partner{left:56.5%;width:15%;top:15%;height:1px}
.ho-lead:is(.is-hud,.is-partner)::after{left:-2px;top:-2px}
.ho-lead.is-gfx{left:33.5%;top:67%;height:6%;width:1px}
.ho-lead.is-gfx::after{left:-2px;bottom:-2px}
.ho-note{position:absolute;z-index:4;display:flex;flex-direction:column;gap:.9cqh;padding:1.2cqh 1.6cqh;background:rgba(5,7,10,.88);border:1px solid rgba(255,255,255,.16);border-radius:2px;white-space:nowrap}
.ho-note b{display:flex;align-items:center;gap:1cqh;font:600 3.4cqh/1.05 var(--font-sans);color:#f4f8ff}
.ho-note b::before{content:"";width:1.2cqh;height:1.2cqh;border-radius:50%;background:var(--c)}
.ho-note>span{font:500 2.3cqh/1 var(--font-mono);letter-spacing:.12em;color:#b9c7ce}
.ho-note em{font-style:normal;color:#ffb070}
.ho-note.is-hud{--c:#9ac2ff;left:70%;top:2.8%}
.ho-note.is-partner{--c:#ffb070;left:70%;top:13.4%}
.ho-note.is-gfx{--c:#ff6b62;left:31%;top:61%}
@keyframes ho-in{from{opacity:0;translate:0 4px}}
html:not([data-motion=off]) .director-scroll[data-next-scene=true] :is(.ho-note,.ho-lead){animation:ho-in .35s cubic-bezier(.2,.7,.2,1) both}
.director-scroll[data-next-scene=true] :is(.ho-note,.ho-lead).is-partner{animation-delay:.12s}
.director-scroll[data-next-scene=true] :is(.ho-note,.ho-lead).is-gfx{animation-delay:.24s}
@media(prefers-reduced-motion:reduce){html:not([data-motion=on]) :is(.ho-note,.ho-lead){animation:none}}

/* Step 4e: the motion switch is a small icon in the footer bar; cue keys carry no number badges */
.kit-footer-bar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.kit-footer-bar #motion-toggle{display:grid;place-items:center;flex:none;width:32px;height:32px;min-height:0;padding:0;border:1px solid var(--line);border-radius:var(--r-xs);background:transparent;color:var(--muted2);font-size:0;cursor:pointer;transition:color .2s,border-color .2s}
.kit-footer-bar #motion-toggle:hover{color:var(--text);border-color:var(--edge-hover)}
.kit-footer-bar #motion-toggle:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.kit-footer-bar #motion-toggle svg{width:12px;height:12px;fill:currentColor}
@media(hover:none){.kit-footer-bar #motion-toggle{width:44px;height:44px}}
section#graphics .air12-cues button>span{padding-right:0}