/* Run of Show — direction 1. The page is the show-control desk for a night. */

:root {
  --black: #0a0908;
  --panel: #141210;
  --line: #2a2622;
  --white: #f2ede4;
  --dim: #8a837a;          /* 5.3:1 on --black, 5.0:1 on --panel */
  --amber: #ffb020;

  --display: 'Big Shoulders Display', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --ease-cue: cubic-bezier(.7, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-cue: 600ms;
  --t-light: 900ms;

  /* Design px. Desktop: 1440 x 900 desk, scaled to fit the viewport and centred. */
  --dpx: min(calc(100vw / 1440), calc(100vh / 900));
  --desk-w: calc(1440 * var(--dpx));
  --desk-h: calc(900 * var(--dpx));
  --desk-x: calc((100vw - var(--desk-w)) / 2);
  --desk-y: calc((100vh - var(--desk-h)) / 2);

  /* Geometry of the stage (dpx). */
  --win-x: 240; --win-y: 250; --win-w: 960; --win-h: 240;
  --floor-h: 210;

  --fs-display: 168; --lh-display: .86;
  --fs-h2: 64; --fs-cue: 13; --fs-body: 17;
  --margin: 24;
}
@media (max-width: 767px) {
  :root {
    --dpx: calc(100vw / 390);
    --desk-w: 100vw;
    --desk-h: calc(844 * var(--dpx));
    --desk-x: 0px;
    --desk-y: 0px;
    --win-x: 12; --win-y: 96; --win-w: 366; --win-h: 183;   /* 2:1 on phones: the footage is the biggest thing (QA #3) */
    --floor-h: 110;
    --fs-display: 56; --fs-h2: 36; --fs-cue: 11; --fs-body: 15;
    --margin: 12;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); color: var(--white); -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.standby { overflow: hidden; }
body {
  margin: 0; background: var(--black); color: var(--white);
  font: 400 calc(var(--fs-body) * var(--dpx)) / 1.5 var(--mono);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, video, canvas { display: block; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

.mono { font-family: var(--mono); font-size: calc(var(--fs-cue) * var(--dpx)); line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.dim { color: var(--dim); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; z-index: 50; inset-inline-start: 12px; top: -60px; background: var(--amber); color: var(--black); padding: 10px 14px; font: 500 13px var(--mono); text-decoration: none; }
.skip:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 1px; }

/* ---------- z0 room, z1 wash ---------- */
#room { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.wash {
  position: fixed; inset: 0 0 auto 0; height: 75vh; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 100% at 50% 0%, rgb(242 237 228 / .10), rgb(242 237 228 / .035) 45%, transparent 75%);
  opacity: 0;
  transition: opacity var(--t-light) var(--ease-cue);
}
html.standby .wash, html.lights-up .wash { opacity: 1; }

/* ---------- desk coordinate system ---------- */
.desk { position: absolute; inset-inline-start: var(--desk-x); top: var(--desk-y); width: var(--desk-w); height: var(--desk-h); }
.desk-fixed { position: fixed; z-index: 10; }

/* ---------- standby ---------- */
.standby-ui { position: fixed; z-index: 12; inset: 0; pointer-events: none; opacity: 0; transition: opacity 300ms linear; }
html.standby .standby-ui { opacity: 1; }
.standby-label { position: absolute; inset-inline-start: calc(var(--desk-x) + var(--margin) * var(--dpx)); top: calc(var(--desk-y) + 24 * var(--dpx)); line-height: calc(32 * var(--dpx)); }
.standby-digit {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 800 calc(var(--win-h) * .82 * var(--dpx)) / 1 var(--display); color: var(--amber);
  letter-spacing: .01em; font-variant-numeric: tabular-nums;
  opacity: 0; pointer-events: none;
}
html.standby .standby-digit { opacity: 1; }
html.reduced .standby-digit { font-size: calc(var(--win-h) * .28 * var(--dpx)); letter-spacing: .12em; transition: opacity 300ms linear; }

/* ---------- top bar ---------- */
.topbar {
  inset-inline-start: var(--desk-x); top: var(--desk-y); width: var(--desk-w);
  height: calc(80 * var(--dpx));
  padding: calc(24 * var(--dpx)) calc(var(--margin) * var(--dpx)) 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  background: linear-gradient(var(--black) 70%, rgb(10 9 8 / 0));
}
.topbar > p, .topbar-end { line-height: calc(32 * var(--dpx)); height: calc(32 * var(--dpx)); }
.showname { text-align: center; }
.topbar-end { display: flex; justify-content: flex-end; align-items: center; gap: calc(24 * var(--dpx)); }
.tally { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding-inline: 4px; }
.tally-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px rgb(255 176 32 / .6); }
.tally[aria-pressed="true"] .tally-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--dim); }
.tally[aria-pressed="true"] { color: var(--dim); }
.wa-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-height: 32px; text-transform: none; }
.wa-link:hover .wa-text { text-decoration: underline; text-underline-offset: 4px; }
.wa-icon { width: 16px; height: 16px; }

/* ---------- cue stack ---------- */
.cuestack {
  inset-inline-start: calc(var(--desk-x) + 24 * var(--dpx)); top: calc(var(--desk-y) + 250 * var(--dpx));
  width: calc(192 * var(--dpx));
}
.cuestack-head, .cue { display: grid; grid-template-columns: calc(24 * var(--dpx)) 1fr calc(30 * var(--dpx)) calc(8 * var(--dpx)); gap: calc(5 * var(--dpx)); padding-inline-start: calc(10 * var(--dpx)); align-items: center; }
.cuestack-head { font-size: calc(10 * var(--dpx)); height: calc(28 * var(--dpx)); border-bottom: 1px solid var(--line); }
.cue { font-size: calc(12 * var(--dpx)); letter-spacing: .06em; white-space: nowrap; width: 100%; height: calc(40 * var(--dpx)); min-height: 32px; text-align: start; border-bottom: 1px solid var(--line); color: var(--white); transition: color 250ms var(--ease-out); }
.cue-state { font-size: calc(9 * var(--dpx)); letter-spacing: .1em; }
.cue-dur { color: var(--dim); }
.cue.is-played { color: var(--dim); }
.cue.is-live { color: var(--amber); }
.cue.is-next .cue-state::before { content: 'NEXT'; }
.cue.is-live .cue-state::before { content: 'LIVE'; }
.cue:hover:not(.is-live) .cue-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--dim); }
.cuestack-list { position: relative; }
.cuestack-bar {
  position: absolute; inset-inline-start: 0; top: calc(28 * var(--dpx)); width: calc(2 * var(--dpx)); min-width: 2px;
  height: calc(40 * var(--dpx)); background: var(--amber);
  transform: translateY(calc(var(--bar, 0) * 40 * var(--dpx))); opacity: 0;
  transition: transform 250ms var(--ease-cue), opacity 250ms linear;
}
.cuestack.has-live .cuestack-bar { opacity: 1; }
.cuestack-cap { margin-top: calc(12 * var(--dpx)); padding-inline-start: calc(10 * var(--dpx)); font-size: calc(10 * var(--dpx)); }

/* ---------- GO ---------- */
.go-wrap {
  inset-inline-start: calc(var(--desk-x) + 1256 * var(--dpx)); top: calc(var(--desk-y) + 672 * var(--dpx));
  width: calc(160 * var(--dpx));
}
.go {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1;
  background: var(--amber); color: var(--black); text-decoration: none; border-radius: calc(2 * var(--dpx));
  transition: background-color 200ms linear, box-shadow 120ms linear;
}
.go:hover { background: #ffbe45; }
.go.is-pressed, .go:active { box-shadow: inset 0 calc(1 * var(--dpx)) 0 calc(1 * var(--dpx)) rgb(10 9 8 / .55); }
.go-word { font: 800 calc(64 * var(--dpx)) / 1 var(--display); letter-spacing: .01em; }
.go-phone { display: none; }
.go[hidden] { display: none; }
.go-cap { margin-top: calc(10 * var(--dpx)); text-align: center; font-size: calc(11 * var(--dpx)); }
.go-standby { position: absolute; top: calc(12 * var(--dpx)); inset-inline-end: calc(12 * var(--dpx)); width: calc(8 * var(--dpx)); height: calc(8 * var(--dpx)); background: var(--black); border-radius: 50%; animation: standby-blink 1s steps(1) infinite; }
@keyframes standby-blink { 50% { opacity: 0; } }

/* ---------- bottom bar ---------- */
.bottombar {
  inset-inline-start: var(--desk-x); top: calc(var(--desk-y) + 852 * var(--dpx)); width: var(--desk-w);
  padding-inline: calc(24 * var(--dpx)); height: calc(48 * var(--dpx));
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(rgb(10 9 8 / 0), var(--black) 30%);
  transition: opacity 400ms linear;
}
html.at-contact .bottombar { opacity: 0; }

/* ---------- the show (pinned stage + steps) ---------- */
main { position: relative; z-index: 2; }
.show { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.steps { margin-top: -100vh; }
.step { height: 100vh; }

.window {
  position: absolute;
  inset-inline-start: calc(var(--win-x) * var(--dpx)); top: calc(var(--win-y) * var(--dpx));
  width: calc(var(--win-w) * var(--dpx)); height: calc(var(--win-h) * var(--dpx));
  border-radius: calc(6 * var(--dpx));
  box-shadow: 0 0 0 1px var(--line);
  overflow: hidden;
}
.floor-fallback { display: none; }

/* The screen sources: real <video>/<img>/<p> elements. With WebGL they only feed textures (WebGL draws the screen);
   without WebGL they are the screen. */
.screen-fallback { position: absolute; inset: 0; background: #050504; }
.screen-fallback .src { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-cue) var(--ease-cue); }
.screen-fallback .src.is-on { opacity: 1; }
html.standby .screen-fallback .src.is-on { opacity: 0; transition: none; }
.src-still { transform: scale(1); transition: opacity var(--t-cue) var(--ease-cue), transform 0s linear var(--t-cue); }
.src-still.is-on { transform: scale(1.04); transition: opacity var(--t-cue) var(--ease-cue), transform 10s linear; }   /* Ken Burns, inside the screen only */
html.reduced .src-still, html.reduced .src-still.is-on { transform: scale(1.02); }
.src-count { display: grid; place-items: center; background: #050504; color: var(--amber); font: 800 calc(var(--win-h) * .8 * var(--dpx)) / 1 var(--display); letter-spacing: .01em; }
html.reduced .src-count { font-size: calc(var(--win-h) * .42 * var(--dpx)); letter-spacing: .04em; }
.screen-text { position: absolute; inset: 0; display: grid; place-items: center; font: 800 calc(110 * var(--dpx)) / 1 var(--display); color: var(--amber); text-transform: uppercase; letter-spacing: .01em; background: #050504; }
.screen-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
html:not(.no-gl) .screen-fallback, html:not(.no-gl) .screen-text { visibility: hidden; }

html.no-gl .window { box-shadow: 0 0 0 calc(var(--win-w) * 4 * var(--dpx)) var(--black), 0 0 0 1px var(--line); overflow: visible; clip-path: none; }
html.no-gl .window > * { border-radius: inherit; overflow: hidden; }
html.no-gl .floor-fallback {
  display: block; position: absolute;
  inset-inline-start: calc(var(--win-x) * var(--dpx)); top: calc((var(--win-y) + var(--win-h)) * var(--dpx));
  width: calc(var(--win-w) * var(--dpx)); height: calc(var(--floor-h) * var(--dpx));
  background: radial-gradient(ellipse 55% 85% at 50% 0%, rgb(242 237 228 / .11), rgb(242 237 228 / .03) 55%, transparent 80%);
}

/* Copy under the floor. Lines rise 16 dpx and fade in (M3). */
.copy { position: absolute; inset-inline-start: calc(288 * var(--dpx)); bottom: calc(76 * var(--dpx)); width: calc(940 * var(--dpx)); visibility: hidden; transition: visibility 0s 200ms; }
.copy.is-live { visibility: visible; transition-delay: 0s; }
.copy .line { display: block; opacity: 0; transform: translateY(calc(16 * var(--dpx))); transition: opacity 200ms linear, transform 0s linear 200ms; }
.copy.is-live .line { opacity: 1; transform: none; transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); transition-delay: calc(140ms + var(--i, 0) * 60ms); }
.line.l1 { --i: 0; } .line.l2 { --i: 1; } .line.l3 { --i: 2; }

.headline, .cue-h, .h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: var(--white); }
.headline { font-size: calc(var(--fs-display) * var(--dpx)); line-height: var(--lh-display); }
.headline .l2 { padding-inline-start: calc(120 * var(--dpx)); }
.copy-0 { bottom: calc(72 * var(--dpx)); }
.copy .opening-sub { display: none; }
.headline .line { white-space: nowrap; }

.cue-h, .h2 { font-size: calc(var(--fs-h2) * var(--dpx)); line-height: .95; }
.cue-body { margin-top: calc(10 * var(--dpx)); max-width: 62ch; color: var(--white); }
.copy .cue-facts.line { display: flex; }
.cue-facts { margin-top: calc(24 * var(--dpx)); display: flex; flex-wrap: wrap; gap: 4px calc(24 * var(--dpx)); }

.cueline { display: none; }

/* Standby: everything but the dark screen waits. */
html.standby .topbar, html.standby .cuestack, html.standby .go-wrap, html.standby .bottombar,
html.standby .copy .line, html.standby .cueline { opacity: 0; }
.topbar, .cuestack, .go-wrap { transition: opacity var(--t-cue) var(--ease-out); }
html.intro .topbar { transition-delay: 300ms; }
html.intro .cuestack { transition-delay: 420ms; }
html.intro .go-wrap { transition: opacity var(--t-cue) var(--ease-out) 760ms; }
html.intro .bottombar { transition: opacity var(--t-cue) var(--ease-out) 860ms; }
html.intro .copy.is-live .line { transition-duration: 700ms; transition-delay: calc(480ms + var(--i, 0) * 110ms); }

/* ---------- interlude: services + case (normal flow, opaque, covers the room) ---------- */
.interlude { position: relative; background: var(--black); z-index: 3; }
/* The house dims into the last cue: the interlude ends in a fade, not an edge. */
.interlude::after { content: ''; position: absolute; inset-inline: 0; top: 100%; height: calc(200 * var(--dpx)); background: linear-gradient(var(--black), rgb(10 9 8 / 0)); pointer-events: none; }
.col { margin-inline-start: calc(var(--desk-x) + 288 * var(--dpx)); width: calc(944 * var(--dpx)); }
.services { padding-block: calc(160 * var(--dpx)) calc(120 * var(--dpx)); border-top: 1px solid var(--line); }
.lede { margin-top: calc(24 * var(--dpx)); max-width: 52ch; }
.svc { margin-top: calc(64 * var(--dpx)); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(32 * var(--dpx)); }
.svc li { border-top: 1px solid var(--line); padding-top: calc(16 * var(--dpx)); }
.svc-n { color: var(--amber); }
.svc-h { margin-block: calc(8 * var(--dpx)) calc(16 * var(--dpx)); color: var(--white); }
.svc li > p:last-child { color: var(--white); font-size: calc(15 * var(--dpx)); }
.proc-title { margin-top: calc(80 * var(--dpx)); }
.proc { margin-top: calc(12 * var(--dpx)); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(24 * var(--dpx)); }
.proc li { border-top: 1px solid var(--line); padding-top: calc(14 * var(--dpx)); }
.proc li > p:last-child { margin-top: calc(10 * var(--dpx)); font-size: calc(14 * var(--dpx)); color: var(--dim); }
.proc-h { display: flex; justify-content: space-between; color: var(--white); }
.proc-arrow { color: var(--amber); }

.case { padding-block: calc(120 * var(--dpx)) calc(160 * var(--dpx)); border-top: 1px solid var(--line); }
.case-grid { display: grid; grid-template-columns: 1fr calc(220 * var(--dpx)); gap: calc(40 * var(--dpx)); }
.case-n { color: var(--amber); }
.case-facts { margin-block: calc(20 * var(--dpx)) calc(20 * var(--dpx)); }
.case-copy { max-width: 56ch; }
.case-fig { margin-top: calc(32 * var(--dpx)); }
.case-fig img { width: 100%; aspect-ratio: 4 / 1; object-fit: cover; object-position: 50% 50%; border-radius: calc(6 * var(--dpx)); box-shadow: 0 0 0 1px var(--line); height: auto; }
.case-fig figcaption { margin-top: calc(10 * var(--dpx)); font-size: calc(11 * var(--dpx)); }
.case-slots { display: grid; gap: calc(16 * var(--dpx)); align-content: start; padding-top: calc(8 * var(--dpx)); }
.slot { border: 1px solid var(--line); border-radius: calc(6 * var(--dpx)); padding: calc(16 * var(--dpx)); aspect-ratio: 4 / 3; display: flex; flex-direction: column; justify-content: space-between; }
.slot-n { font: 800 calc(40 * var(--dpx)) / 1 var(--display); color: var(--dim); }

/* ---------- contact: cue 06 ---------- */
.contact { position: relative; height: 100vh; min-height: calc(var(--desk-h)); }
.contact .window { top: calc(170 * var(--dpx)); }
html.no-gl .contact .floor-fallback { top: calc(410 * var(--dpx)); }
.contact-copy { position: absolute; inset-inline-start: calc(288 * var(--dpx)); top: calc(616 * var(--dpx)); width: calc(940 * var(--dpx)); }
.brief { margin-top: calc(28 * var(--dpx)); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(24 * var(--dpx)); max-width: calc(900 * var(--dpx)); }
.field { display: grid; gap: calc(6 * var(--dpx)); }
.field label { color: var(--dim); }
.field input {
  background: rgb(20 18 16 / .85); border: 0; border-bottom: 1px solid var(--dim); border-radius: 0;
  height: calc(44 * var(--dpx)); min-height: 44px; padding-inline: calc(12 * var(--dpx)); font-size: max(16px, calc(15 * var(--dpx)));
  caret-color: var(--amber);
}
.field input:focus-visible { outline-offset: 0; border-bottom-color: var(--amber); }
.brief-note { margin-top: calc(14 * var(--dpx)); font-size: calc(10 * var(--dpx)); }
.contact-foot {
  position: absolute; inset-inline: calc(24 * var(--dpx)); top: calc(852 * var(--dpx)); height: calc(48 * var(--dpx));
  display: flex; justify-content: space-between; align-items: center;
}
.contact-foot a { text-decoration: none; }
.contact-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- phone ---------- */
@media (max-width: 767px) {
  .topbar { height: calc(72 * var(--dpx)); padding: calc(12 * var(--dpx)) calc(12 * var(--dpx)) 0; grid-template-columns: 1fr auto; }
  .topbar > p, .topbar-end { height: 44px; line-height: 44px; }
  .wordmark { font-size: 11px; }
  .showname { display: none; }
  .topbar-end { gap: 4px; }
  .tally { min-height: 44px; font-size: 11px; padding-inline: 8px; }
  .wa-link { width: 44px; height: 44px; justify-content: center; }
  .wa-icon { width: 24px; height: 24px; }
  .wa-text { display: none; }
  .standby-label { line-height: 44px; top: calc(12 * var(--dpx)); font-size: 11px; }

  .cuestack, .bottombar { display: none; }

  .go-wrap { inset: auto 12px max(12px, env(safe-area-inset-bottom)) 12px; width: auto; }
  .go { aspect-ratio: auto; height: 64px; border-radius: 2px; }
  .go-label { display: flex; align-items: baseline; gap: 10px; }
  .go-word { font-size: 32px; }
  .go-phone { display: inline; font-size: 13px; font-weight: 500; }
  .go-cap { display: none; }
  .go-standby { top: 50%; margin-top: -4px; width: 8px; height: 8px; inset-inline-end: 20px; }

  .cueline {
    transition: opacity var(--t-cue) var(--ease-out);
    display: block; position: absolute; inset-inline-start: calc(12 * var(--dpx)); top: calc(398 * var(--dpx)); width: calc(366 * var(--dpx));
    white-space: nowrap; overflow: hidden; color: var(--dim); font-size: 11px;
  }
  .cueline-now { color: var(--amber); }
  .cueline-next { color: var(--white); }

  .copy { inset-inline-start: calc(12 * var(--dpx)); width: calc(366 * var(--dpx)); bottom: auto; top: calc(440 * var(--dpx)); }
  .copy-0 { top: calc(444 * var(--dpx)); bottom: auto; }
  .headline { line-height: .96; }
  .headline .l2 { padding-inline-start: calc(40 * var(--dpx)); }
  .copy .opening-sub { display: block; margin-top: calc(28 * var(--dpx)); max-width: calc(320 * var(--dpx)); font-size: 11px; }
  .cue-h { line-height: 1; }
  .cue-facts { flex-direction: column; font-size: 10px; }
  .cue-body { max-width: none; }

  .col { margin-inline: 12px; width: auto; }
  .services { padding-block: 96px 64px; }
  .svc, .proc { grid-template-columns: 1fr; gap: 24px; }
  .proc-title { margin-top: 48px; }
  .proc-arrow { display: none; }
  .case { padding-block: 72px 96px; }
  .case-grid { grid-template-columns: 1fr; }
  .case-slots { grid-template-columns: 1fr 1fr; }
  .slot { aspect-ratio: 1; }
  .case-fig img { aspect-ratio: 2 / 1; }
  .contact { height: auto; min-height: 100vh; padding-bottom: calc(64px + 24px + 96px + env(safe-area-inset-bottom)); }   /* GO bar never covers the footer (QA #4) */
  .contact .desk { position: relative; height: auto; min-height: calc(844 * var(--dpx)); }
  .screen-text { font-size: calc(56 * var(--dpx)); }
  .contact .window { top: calc(96 * var(--dpx)); }
  html.no-gl .contact .floor-fallback { top: calc(279 * var(--dpx)); }
  .contact-copy { position: relative; inset-inline-start: auto; top: auto; width: auto; margin-inline: 12px; padding-top: calc(404 * var(--dpx)); }
  .brief { grid-template-columns: 1fr; gap: 16px; }
  .brief-note { font-size: 10px; }
  .contact-foot { position: relative; inset: auto; top: auto; margin: 32px 12px 0; height: auto; flex-direction: column; align-items: flex-start; gap: 8px; }
  .contact-foot a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- reduced motion ---------- */
html.reduced *, html.reduced *::before, html.reduced *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
html.reduced .standby-ui, html.reduced.intro .topbar, html.reduced.intro .cuestack, html.reduced.intro .go-wrap, html.reduced.intro .bottombar, html.reduced.intro .copy.is-live .line { transition: opacity 300ms linear !important; }
html.reduced .copy .line { transform: none; }