/* ═══════════════════════════════════════════════════════════
   NEBULLEM BROADCAST SYSTEM  ·  CRT / VHS concept
   Everything is inside a cathode ray tube. The page is a signal.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* sampled straight out of the hero footage: #0C47F2, hue 225 */
  --void:      #000000;
  --tube:      #000000;
  --phos:      #4d7cff;      /* readable phosphor blue      */
  --phos-hot:  #0c47f2;      /* the exact colour of the film */
  --phos-lo:   #7aa0ff;      /* light split                  */
  --phos-hi:   #0a2bd6;      /* deep split                   */
  --phos-dim:  #21356f;
  --mag:       #7aa0ff;      /* ghosting stays in the family */
  --amber:     #6f93ff;      /* on screen display, same family */
  --paper:     #dbe4ff;
  --line:      rgba(77,124,255,.26);

  --mono: 'VT323', ui-monospace, 'Courier New', monospace;
  --disp: 'Bungee', 'Arial Black', sans-serif;

  --tracking: 0px;           /* driven by the TRACKING knob */
  --hue: 0deg;               /* driven by CH +/-            */
  --bend: 2.4% / 5.4%;
}

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  /* the layout was tuned at 1512px wide. below that this holds at 16px, above
     it every rem-based size grows with the screen so the design keeps its
     proportions instead of stranding content in the middle of a big monitor */
  font-size:clamp(16px, 1.0582vw, 27px);
  background:#000; scrollbar-width:thin; scrollbar-color:var(--phos-dim) #000;
}

body{
  background:var(--void);
  color:var(--paper);
  font-family:var(--mono);
  font-size:20px;
  line-height:1.45;
  overflow-x:hidden;
  min-height:100vh;
  cursor:crosshair;
}

/* the whole document is filtered as one signal */
#signal{
  filter:hue-rotate(var(--hue)) saturate(1.15);
  transform:translateX(var(--tracking));
  transition:transform .08s steps(2), filter .5s ease;
}

/* ── screen furniture ───────────────────────────────────── */

/* scanlines */
.scan{
  position:fixed; inset:0; z-index:90; pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,.42) 0px, rgba(0,0,0,.42) 1px,
    rgba(0,0,0,0)   1px, rgba(0,0,0,0)   3px);
  mix-blend-mode:multiply;
}
/* aperture grille, the vertical RGB stripe of a trinitron */
.grille{
  position:fixed; inset:0; z-index:91; pointer-events:none; opacity:.25;
  background:repeating-linear-gradient(to right,
    rgba(60,90,255,.5) 0 1px, rgba(120,160,255,.45) 1px 2px, rgba(12,71,242,.5) 2px 3px);
  mix-blend-mode:overlay;
}
/* the bright band that rolls down a mistuned tube */
.roll{
  position:fixed; left:0; right:0; height:22vh; z-index:92; pointer-events:none;
  background:linear-gradient(to bottom, transparent, rgba(150,180,255,.06) 45%, transparent);
  animation:roll 7.5s linear infinite;
}
@keyframes roll{ from{ transform:translateY(-30vh);} to{ transform:translateY(130vh);} }

/* analogue noise */
.noise{
  position:fixed; inset:-50%; z-index:89; pointer-events:none; opacity:.16;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
  animation:jitter .28s steps(3) infinite;
}
@keyframes jitter{
  0%{ transform:translate(0,0);}     33%{ transform:translate(-2%,1%);}
  66%{ transform:translate(1%,-2%);} 100%{ transform:translate(0,0);}
}

/* glass: curvature, vignette, corner falloff */
.glass{
  position:fixed; inset:0; z-index:93; pointer-events:none;
  border-radius:var(--bend);
  box-shadow:
    inset 0 0 120px rgba(0,0,0,.85),
    inset 0 0 320px rgba(0,0,0,.6),
    inset 0 0 40px rgba(77,124,255,.07);
  background:radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}
/* a soft specular smear across the tube */
.glare{
  position:fixed; inset:0; z-index:94; pointer-events:none; opacity:.5;
  background:radial-gradient(60% 38% at 24% 8%, rgba(150,185,255,.10), transparent 70%);
}
/* whole-screen flicker */
.flicker{
  position:fixed; inset:0; z-index:88; pointer-events:none;
  background:rgba(90,130,255,.035);
  animation:flick 4.1s steps(1) infinite;
}
@keyframes flick{
  0%,96%,100%{ opacity:.25; } 97%{ opacity:.7; } 98%{ opacity:.1; } 99%{ opacity:.55; }
}

/* ── on screen display ──────────────────────────────────── */
.osd{
  position:fixed; z-index:95; pointer-events:none;
  font-family:var(--mono); color:var(--amber);
  text-shadow:0 0 10px rgba(111,147,255,.7);
  letter-spacing:.06em; font-size:1.1875rem;
}
.osd-tl{ top:18px; left:22px; }
.osd-tr{ top:18px; right:22px; text-align:right; }
.osd-bl{ bottom:18px; left:22px; }
.rec{ color:#ff3b3b; text-shadow:0 0 12px rgba(255,59,59,.85); }
.rec i{
  display:inline-block; width:11px; height:11px; border-radius:50%;
  background:#ff2020; margin-right:8px; vertical-align:middle;
  box-shadow:0 0 14px rgba(255,32,32,.95), 0 0 34px rgba(255,32,32,.55);
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{ 0%,49%{opacity:1;} 50%,100%{opacity:.1;} }

html.booted #boot{ display:none; }

/* ── boot sequence ──────────────────────────────────────── */
#boot{
  position:fixed; inset:0; z-index:320; background:#000;
  display:grid; place-items:center; overflow:hidden;
}
#boot .line{
  position:absolute; left:0; right:0; top:50%; height:3px;
  background:#e8edff; box-shadow:0 0 40px 8px rgba(150,185,255,.9);
  transform:scaleX(0);
  animation:beam .5s .15s cubic-bezier(.6,0,.2,1) forwards;
}
@keyframes beam{ to{ transform:scaleX(1); } }
#boot .open{
  position:absolute; inset:0; background:#000;
  clip-path:inset(50% 0 50% 0);
  animation:tubeopen .55s .62s cubic-bezier(.3,0,0,1) forwards;
}
@keyframes tubeopen{ to{ clip-path:inset(0 0 0 0); } }
/* the loader reads as an arcade attract screen: block meter, tabular
   counter, a parallax starfield and a coin-op prompt that really does skip */
.boot-arcade{
  position:relative; z-index:2; width:min(44rem, 82vw);
  text-align:center; opacity:0; animation:showlog .1s .66s forwards;
}
@keyframes showlog{ to{ opacity:1; } }
.boot-arcade::before, .boot-arcade::after{
  content:''; position:absolute; width:1.5rem; height:1.5rem;
  border:2px solid var(--phos); opacity:.45;
}
.boot-arcade::before{ top:-1.3rem; left:-1.3rem; border-right:0; border-bottom:0; }
.boot-arcade::after{ bottom:-1.3rem; right:-1.3rem; border-left:0; border-top:0; }

.boot-tag{
  font-family:var(--mono); font-size:clamp(13px,1.1vw,1.125rem);
  letter-spacing:.4em; text-transform:uppercase;
  color:var(--phos); opacity:.72; margin:0 0 .7rem;
}
.boot-logo{ margin:0; line-height:0; }
.boot-logo img{
  width:min(28rem, 74%); height:auto; display:block; margin-inline:auto;
  /* the hero mark's split-phosphor fringe, scaled down to the loader */
  filter:
    drop-shadow(-2px 0 0 var(--phos-hi))
    drop-shadow( 2px 0 0 var(--phos-lo))
    drop-shadow(0 0 22px rgba(77,124,255,.6))
    drop-shadow(0 0 55px rgba(77,124,255,.25));
}
/* the meter fills in whole blocks, never a smooth bar */
.boot-bar{ display:flex; gap:.26rem; justify-content:center; margin:1.6rem 0 .8rem; }
.boot-bar i{
  flex:1 1 0; height:1.35rem;
  border:1px solid rgba(122,160,255,.34); background:rgba(122,160,255,.05);
}
.boot-bar i.lit{
  background:var(--phos); border-color:var(--phos-lo);
  box-shadow:0 0 .55rem rgba(12,71,242,.95), inset 0 0 .3rem rgba(232,237,255,.45);
}

.boot-meta{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  font-family:var(--mono); font-size:clamp(14px,1.2vw,1.25rem);
  letter-spacing:.22em; text-transform:uppercase; color:var(--phos); margin:0;
}
.boot-meta .bp-n{ color:var(--paper); font-variant-numeric:tabular-nums; }

.boot-stage{ position:relative; height:2.4rem; margin-top:1.4rem; overflow:hidden; }
.boot-stage::before{
  content:''; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(122,160,255,.55) 0 2px, transparent 2px 54px),
    repeating-linear-gradient(90deg, rgba(122,160,255,.32) 0 2px, transparent 2px 37px),
    repeating-linear-gradient(90deg, rgba(232,237,255,.5)  0 2px, transparent 2px 76px);
  background-size:54px 2px, 37px 2px, 76px 2px;
  background-repeat:repeat-x;
  background-position:0 24%, 0 58%, 0 86%;
  animation:bootstars 1.4s linear infinite;
}
@keyframes bootstars{ to{ background-position:-54px 24%, -37px 58%, -76px 86%; } }
.boot-ship{
  position:absolute; top:50%; left:-2rem; margin-top:-.62rem;
  font-family:var(--mono); font-size:1.35rem; line-height:1; color:var(--paper);
  text-shadow:0 0 .55rem rgba(77,124,255,.95);
  animation:bootfly 2.4s .7s linear infinite;
}
@keyframes bootfly{ to{ left:calc(100% + 2rem); } }

.boot-press{
  font-family:var(--mono); font-size:clamp(14px,1.2vw,1.1875rem);
  letter-spacing:.38em; text-transform:uppercase; color:var(--amber);
  margin:1.1rem 0 0; visibility:hidden;   /* space is reserved, so no jump */
}
#boot.ready .boot-press{ visibility:visible; animation:blink 1s steps(1) infinite; }
#boot.ready{ cursor:pointer; }
#boot.done{ animation:bootout .4s ease forwards; pointer-events:none; }
@keyframes bootout{ to{ opacity:0; visibility:hidden; } }

/* ── layout ─────────────────────────────────────────────── */
.wrap{ width:min(73.75rem, 92vw); margin-inline:auto; }
section{
  position:relative;
  /* sized to its own content with a normal rhythm, rather than forced to a
     full screen: short blocks were leaving half an empty screen either side */
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(92px,11.5vh,9.375rem);
}
/* the landing screen still owns the viewport */
.hero{ min-height:100svh; }
section > *{ position:relative; z-index:1; }

/* sections rise as they come into view */
.rise{ opacity:0; transform:translateY(34px); }
.rise.in{ opacity:1; transform:none; transition:opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1); }

.slug{
  display:flex; align-items:center; gap:18px;
  font-size:clamp(19px, 1.5vw, 1.5rem); letter-spacing:.34em; text-transform:uppercase;
  color:var(--phos); text-shadow:0 0 14px rgba(12,71,242,.75);
  margin-bottom:clamp(22px,3.2vh,44px);
}
.slug::before{
  content:''; width:13px; height:13px; background:var(--phos);
  box-shadow:0 0 14px var(--phos); flex:0 0 auto;
}
.slug::after{
  content:''; flex:1 1 auto; height:1px;
  background:linear-gradient(90deg, var(--line), transparent);
}

h1,h2,h3{ font-family:var(--disp); font-weight:400; line-height:.98; }

/* chromatic aberration, the signature move */
.ca{
  text-shadow:
    -2px 0 0 var(--phos-hi),
     2px 0 0 var(--phos-lo),
     0 0 26px rgba(77,124,255,.45);
  animation:ca 5s steps(1) infinite;
}
@keyframes ca{
  0%,92%,100%{ transform:translateX(0); }
  93%{ transform:translateX(-3px); } 95%{ transform:translateX(2px); }
}

/* ── hero, full bleed edge to edge ──────────────────────── */
.hero{ padding-block:clamp(26px,4vh,58px); justify-content:center; }
.tube{
  position:relative; width:100%;
  aspect-ratio:1920 / 1260;             /* the film's own shape, nothing forced */
  background:var(--void); overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 0 110px -26px rgba(12,71,242,.55), inset 0 0 90px rgba(0,0,0,.85);
}
.tube video{
  width:100%; height:100%;
  object-fit:contain;                   /* whole frame, never cropped or stretched */
  display:block;
  filter:contrast(1.18) saturate(1.35) brightness(.96);
  mix-blend-mode:screen;
}
/* melt the bottom of the tube into the page */
.tube::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:62%;
  z-index:3; pointer-events:none;
  background:linear-gradient(to bottom, transparent, rgba(3,5,14,.42) 38%, rgba(3,5,14,.86) 78%, rgba(3,5,14,.97));
}
/* copy sits over the lower part of the picture */
.hero-body{
  position:relative; z-index:6;
  display:flex; flex-direction:column; align-items:center;
  padding-inline:clamp(16px,3vw,44px);
}
.tube::after{  /* phosphor bloom over the footage */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 70% at 50% 45%, rgba(77,124,255,.14), transparent 70%);
  mix-blend-mode:screen;
}
.tube .bars{  /* the tracking tear */
  position:absolute; left:0; right:0; height:14px; top:38%;
  background:rgba(223,249,255,.14);
  filter:blur(1px); pointer-events:none; opacity:0;
}
.tube.tear .bars{ animation:tear .5s steps(2); }
@keyframes tear{
  0%{ opacity:1; transform:translateY(-160px) translateX(-14px); }
  50%{ opacity:1; transform:translateY(90px) translateX(16px); }
  100%{ opacity:0; transform:translateY(220px); }
}

.hero-mark{ position:relative; z-index:5; line-height:0; }
/* the real wordmark, run through the tube: RGB split + phosphor bloom */
.hero-mark img{
  width:min(47.5rem,80vw); height:auto; display:block;
  filter:
    drop-shadow(-3px 0 0 var(--phos-hi))
    drop-shadow( 3px 0 0 var(--phos-lo))
    drop-shadow(0 0 30px rgba(77,124,255,.55))
    drop-shadow(0 0 70px rgba(77,124,255,.25));
  animation:markjit 5s steps(1) infinite;
}
@keyframes markjit{
  0%,93%,100%{ transform:translateX(0); }
  94%{ transform:translateX(-4px) skewX(-.6deg); }
  96%{ transform:translateX(3px); }
}

/* ── showreel ──────────────────────────────────────────── */
.reel{
  position:relative; display:block; overflow:hidden; text-decoration:none;
  aspect-ratio:16/9; max-height:78svh; background:#000;
  border:1px solid var(--line);
  box-shadow:0 0 80px -22px rgba(77,124,255,.4), inset 0 0 80px rgba(0,0,0,.9);
}
.reel video{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:contrast(1.15) saturate(1.3);      /* footage as shot, no tint */
  transition:filter .45s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.reel:hover video{ filter:contrast(1.18) saturate(1.35) brightness(1.04); transform:scale(1.03); }
.reel-scan{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.34) 0 1px, transparent 1px 3px);
}
.reel-play{
  position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--mono); font-size:clamp(21px, 2.4vw, 1.875rem);
  letter-spacing:.2em; text-transform:uppercase; color:var(--paper);
  text-shadow:0 0 20px rgba(77,124,255,.7);
  display:flex; align-items:center; gap:14px;
  padding:14px 28px; border:1px solid var(--line);
  background:rgba(4,6,10,.42); backdrop-filter:blur(2px);
  transition:background .2s steps(2), border-color .2s;
}
.reel-play b{ color:var(--phos); font-weight:400; }
.reel:hover .reel-play{ background:rgba(77,124,255,.16); border-color:var(--phos); }
.reel-meta{
  position:absolute; z-index:3; left:0; right:0; bottom:0;
  display:flex; justify-content:space-between; gap:12px;
  padding:12px 16px; font-size:18px; letter-spacing:.16em;
  color:var(--amber); text-shadow:0 0 10px rgba(111,147,255,.6);
  background:linear-gradient(transparent, rgba(4,6,10,.9));
}

/* footer monogram */
.foot-mark{ display:inline-flex; align-items:center; gap:12px; }
.foot-mark img{
  width:26px; height:auto;
  filter:drop-shadow(0 0 12px rgba(77,124,255,.6));
}
.hero-sub{
  margin-top:clamp(26px,4vh,44px); font-size:clamp(20px, 1.9vw, 1.6875rem); color:var(--paper);
  max-width:60ch; line-height:1.28;
}
.hero-sub b{ color:var(--phos); font-weight:400; text-shadow:0 0 14px rgba(77,124,255,.5); }
.hero-row{
  margin-top:clamp(34px,5vh,56px); display:flex; gap:clamp(26px,3.4vw,52px); flex-wrap:wrap; align-items:center;
}

.btn{
  position:relative; display:inline-flex; align-items:center; gap:.875rem;
  font-family:var(--mono); font-size:clamp(18px, 1.5vw, 1.3125rem);
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--paper); background:none; border:0; border-radius:0;
  padding:.625rem .125rem .8125rem; text-decoration:none; cursor:pointer;
  transition:color .3s ease, letter-spacing .45s cubic-bezier(.2,.8,.2,1);
}
.btn::before{                      /* the resting rule */
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:rgba(122,160,255,.45);
}
.btn::after{                       /* the rule that draws in on hover */
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--phos); box-shadow:0 0 14px rgba(12,71,242,.9);
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.btn:hover{ color:#fff; letter-spacing:.3em; }
.btn:hover::after{ transform:scaleX(1); }
.btn:focus-visible{ outline:1px solid var(--phos); outline-offset:6px; }

.btn.ghost{ color:var(--phos); opacity:.82; }
.btn.ghost:hover{ color:var(--paper); opacity:1; }
.tag{
  border:1px solid var(--line); padding:8px 16px; color:var(--phos);
  font-size:18px; letter-spacing:.14em; text-transform:uppercase;
}
.tag b{ color:var(--amber); font-weight:400; }

/* ── channel menu (services) ────────────────────────────── */
/* ── what we do: a channel guide driving a live monitor ── */
.chan-sec{ overflow:visible; }
.guide{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(20px,3vw,50px); align-items:stretch;
}
.guide-list{ border-top:1px solid var(--line); }
/* the screen fills its column, so both sides finish on the same line */
.guide-screen{ display:flex; flex-direction:column; min-width:0; }
.ch{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:2px clamp(12px,1.4vw,22px);
  width:100%; text-align:left; font:inherit; color:inherit;
  background:none; border:0; border-radius:0; border-bottom:1px solid var(--line);
  padding:clamp(11px,1.5vh,19px) clamp(6px,.8vw,12px);
  cursor:pointer; position:relative;
  transition:background .18s steps(2), padding-left .18s steps(2);
}
.ch-n{
  grid-row:1 / span 2; align-self:center;
  font-family:var(--disp); font-size:clamp(21px,2vw,2rem);
  color:var(--phos-dim); transition:color .2s;
}
.ch-t{ font-family:var(--disp); font-size:min(3.3vh,2.4vw,2rem); line-height:1.06; color:var(--paper); }
.ch-d{
  font-size:clamp(13px,1vw,1.0625rem); letter-spacing:.1em;
  text-transform:uppercase; color:var(--phos); opacity:.6;
}
.ch[aria-selected="true"]{
  background:linear-gradient(90deg, rgba(12,71,242,.24), transparent 76%);
  padding-left:clamp(14px,1.6vw,26px);
}
.ch[aria-selected="true"] .ch-n{ color:var(--phos); text-shadow:0 0 18px var(--phos-hot); }
.ch[aria-selected="true"] .ch-t{ color:#fff; text-shadow:0 0 26px rgba(12,71,242,.85); }
.ch[aria-selected="true"] .ch-d{ opacity:.9; }
.ch:focus-visible{ outline:1px solid var(--phos); outline-offset:-2px; }

/* the monitor itself */
.scr{
  position:relative; flex:1 1 auto; min-height:clamp(240px,32vh,430px);
  overflow:hidden; background:#000;
  border:1px solid rgba(122,160,255,.32);
  box-shadow:0 0 0 1px rgba(0,0,0,.65) inset, 0 34px 90px -46px rgba(12,71,242,.9);
}
.scr video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.04); filter:contrast(1.06) saturate(1.22);
  transition:opacity .38s ease, transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.scr video.on{ opacity:1; transform:scale(1); }
.scr-lines{
  position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.32) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%, transparent 54%, rgba(0,0,0,.6));
}
.scr-static{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23s)'/></svg>");
}
.scr.tuning .scr-static{ opacity:.5; animation:tune .22s steps(2); }
@keyframes tune{ 0%{ opacity:.75; } 100%{ opacity:0; } }
.scr-tag, .scr-live{
  position:absolute; z-index:3; font-family:var(--mono);
  font-size:clamp(13px,1vw,1.0625rem); letter-spacing:.24em; text-transform:uppercase;
}
.scr-tag{ left:clamp(10px,1.2vw,18px); bottom:clamp(9px,1.1vw,16px); color:var(--paper); }
.scr-tag b{ color:var(--phos); font-weight:400; }
.scr-live{ right:clamp(10px,1.2vw,18px); top:clamp(9px,1.1vw,16px); color:#ff3b3b; }
.scr-live i{
  display:inline-block; width:.5rem; height:.5rem; border-radius:50%;
  background:#ff2020; margin-right:.5em; vertical-align:middle;
  box-shadow:0 0 10px rgba(255,32,32,.95);
  animation:blink 1.1s steps(1) infinite;
}
.scr-cap{
  margin-top:clamp(12px,1.5vh,20px); font-family:var(--mono);
  font-size:clamp(15px,1.2vw,1.1875rem); color:var(--phos); letter-spacing:.05em;
}
.scr-cap b{ color:var(--paper); font-weight:400; }
.scr-cap .sep{ opacity:.45; margin:0 .55em; }

@media (max-width:900px){
  .guide{ grid-template-columns:1fr; }
  .guide-screen{ order:-1; }
  .scr{ aspect-ratio:16/10; flex:0 0 auto; min-height:0; }
}
@media (prefers-reduced-motion: reduce){
  .scr video{ transition:none; transform:none; }
  .scr-live i{ animation:none; }
}

/* ── selected work: a proper showcase ──────────────────── */
.works{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:1.18fr 1fr;
  height:clamp(430px, 68svh, 820px);
  gap:clamp(10px,1.2vw,18px);
}
.w{
  position:relative; display:block; overflow:hidden; text-decoration:none;
  background:#000; border:1px solid var(--line);
  box-shadow:inset 0 0 70px rgba(0,0,0,.8);
  transition:border-color .3s, box-shadow .4s, transform .5s cubic-bezier(.2,.8,.2,1);
}
.w-hero{ grid-column:span 4; grid-row:1; }      /* 001, the big one */
.w:nth-of-type(2){ grid-column:span 2; grid-row:1; }
.w:nth-of-type(3){ grid-column:span 2; grid-row:2; }
.w-wide{ grid-column:span 2; grid-row:2; }
.w:nth-of-type(5){ grid-column:span 2; grid-row:2; }
@media (max-width:900px){
  .works{ grid-template-columns:repeat(2,1fr); grid-template-rows:none; height:auto; }
  .w, .w-hero, .w-wide, .w:nth-of-type(2), .w:nth-of-type(3), .w:nth-of-type(5){
    grid-column:span 2; grid-row:auto; aspect-ratio:16/10;
  }
}

.w img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:contrast(1.1) saturate(1.25) brightness(.95);   /* artwork as shot, no tint */
  transition:filter .5s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
.w::after{  /* scanlines over every tape */
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.34) 0 1px, transparent 1px 3px);
}
.w:hover{
  border-color:var(--phos);
  box-shadow:0 0 60px -14px rgba(12,71,242,.75), inset 0 0 70px rgba(0,0,0,.6);
  transform:translateY(-4px);
}
.w:hover img{ filter:contrast(1.12) saturate(1.3) brightness(1.05); transform:scale(1.05); }

.w-no{
  position:absolute; z-index:4; top:16px; right:20px;
  font-family:var(--disp); font-size:clamp(22px, 2.6vw, 2.5rem);
  color:var(--paper); opacity:.32; letter-spacing:.02em;
  transition:opacity .3s, color .3s;
}
.w:hover .w-no{ opacity:1; color:var(--phos); text-shadow:0 0 22px var(--phos-hot); }

.w-body{
  position:absolute; z-index:4; left:0; right:0; bottom:0;
  padding:clamp(18px,2.4vw,34px);
  display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(transparent, rgba(3,5,14,.70) 42%, rgba(3,5,14,.94));
}
.w-kind{
  font-size:17px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--phos); text-shadow:0 0 12px rgba(12,71,242,.8);
}
.w-title{
  font-family:var(--disp); line-height:1.02;
  font-size:clamp(21px, 2.5vw, 2.5rem); color:var(--paper);
}
.w-hero .w-title{ font-size:clamp(28px, 4.6vw, 4.5rem); }
.w-go{
  font-size:18px; letter-spacing:.18em; text-transform:uppercase; color:var(--paper);
  opacity:0; transform:translateY(8px);
  transition:opacity .3s, transform .3s;
}
.w:hover .w-go{ opacity:.85; transform:none; }

/* ── impact: huge ──────────────────────────────────────── */
.bignums{ border-top:1px solid var(--line); }
.bn{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:clamp(16px,4vw,60px); flex-wrap:wrap;
  padding:clamp(10px,1.9vh,30px) 4px;
  border-bottom:1px solid var(--line);
  transition:background .3s, padding-left .3s;
}
.bn:hover{ background:linear-gradient(90deg, rgba(12,71,242,.16), transparent 70%); padding-left:18px; }
.bn-v{
  font-family:var(--disp); line-height:.86;
  font-size:min(12.5vh, 11vw, 10.625rem);
  color:var(--paper);
  text-shadow:
    -3px 0 0 var(--phos-hi),
     3px 0 0 var(--phos-lo),
     0 0 60px rgba(12,71,242,.65);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.bn:hover .bn-v{ color:var(--phos); }
.bn-k{
  font-size:clamp(17px, 1.5vw, 1.4375rem); letter-spacing:.3em; text-transform:uppercase;
  color:var(--phos); opacity:.8; text-align:right; flex:0 0 auto;
}

/* ── transport (release cycle) ─────────────────────────── */
.transport{ display:grid; grid-template-columns:repeat(auto-fit,minmax(214px,1fr)); gap:16px; }
.stage{
  border:1px solid var(--line); padding:clamp(24px,3.4vh,44px) clamp(20px,2vw,30px); position:relative;
  background:linear-gradient(180deg, rgba(77,124,255,.05), transparent 60%);
}
.stage .n{
  font-family:var(--disp); font-size:16px; color:var(--void);
  background:var(--phos); display:inline-block; padding:3px 9px; letter-spacing:.1em;
}
.stage h3{ font-size:clamp(23px, 2.2vw, 2.125rem); margin:18px 0 14px; }
.stage p{ font-size:19px; color:var(--paper); opacity:.72; line-height:1.4; }

/* ── sign off ──────────────────────────────────────────── */
.signoff{ text-align:center; align-items:center; }
.signoff h2{ font-size:clamp(40px, 10vw, 9.375rem); }
.signoff p{ margin:18px auto 30px; max-width:46ch; font-size:21px; opacity:.72; }

footer{
  border-top:1px solid var(--line); padding:26px 0 60px;
  font-size:18px; letter-spacing:.1em; text-transform:uppercase; opacity:.6;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
footer a{ color:var(--phos); text-decoration:none; }

/* ── control deck: the monitor's faceplate ─────────────── */
#deck{
  position:fixed; left:0; right:0; bottom:0; z-index:260;
  transition:opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  display:flex; align-items:center; gap:clamp(10px,1.6vw,1.625rem);
  padding:.625rem clamp(12px,2vw,1.625rem);
  background:linear-gradient(180deg, rgba(4,7,18,.9), rgba(3,5,14,.97));
  border-top:1px solid var(--line);
  box-shadow:0 -18px 50px -26px #000;
  backdrop-filter:blur(8px);
}
.deck-mark{ flex:1 1 0; line-height:0; }
.deck-mark img{
  width:1.625rem; height:auto;
  filter:drop-shadow(0 0 10px rgba(12,71,242,.7));
  transition:transform .3s steps(2);
}
.deck-mark:hover img{ transform:scale(1.12); }

body.booting #deck{ opacity:0; transform:translateY(105%); pointer-events:none; }

/* the input keys, built like hardware buttons */
.inputs{
  display:flex; gap:clamp(16px,2.2vw,2.25rem); flex:0 1 auto;
  justify-content:center; overflow-x:auto; scrollbar-width:none;
}
.inputs::-webkit-scrollbar{ display:none; }
.key{
  position:relative; flex:0 0 auto; text-decoration:none;
  display:flex; align-items:baseline; gap:.5625rem;
  padding:.5625rem .25rem .6875rem;
  background:none; border:0; border-radius:0; box-shadow:none;
  transition:color .3s ease;
}
.key::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:rgba(122,160,255,.34);
}
.key::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--phos); box-shadow:0 0 12px rgba(12,71,242,.9);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.key:hover::after{ transform:scaleX(1); }
.key:active{ transform:none; }
.key .led{ display:none; }                       /* the lamp belonged to the old faceplate */
.key .kn{
  font-size:.75rem; letter-spacing:.24em; line-height:1;
  color:var(--phos); opacity:.5; transition:opacity .3s;
}
.key:hover .kn{ opacity:.95; }
.key .kl{
  font-family:var(--mono); font-size:1.0625rem; line-height:1;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper); opacity:.86;
  transition:opacity .3s, letter-spacing .45s cubic-bezier(.2,.8,.2,1);
}
.key:hover .kl{ opacity:1; letter-spacing:.24em; }
.key-hot .kl{ color:var(--phos); }

/* the input you are currently watching stays lit */
.key[aria-current]::after{ transform:scaleX(1); }
.key[aria-current] .kl{ color:#fff; opacity:1; }
.key[aria-current] .kn{ opacity:1; }
.key-hot:hover .kl{ color:#fff; }

/* the hardware knobs on the right */
.knobs{
  flex:1 1 0; display:flex; align-items:center; justify-content:flex-end; gap:.75rem;
  font-size:1rem; letter-spacing:.14em; text-transform:uppercase; color:var(--phos);
}
.knobs .grp{ display:flex; align-items:center; gap:6px; }
.knobs button{
  font-family:var(--mono); font-size:1rem; letter-spacing:.14em;
  background:none; color:var(--phos); border:0;
  border-bottom:1px solid var(--line); border-radius:0;
  padding:.25rem .4375rem .3125rem; cursor:pointer; opacity:.8;
  transition:opacity .25s, border-color .25s, color .25s;
}
.knobs button:hover{ opacity:1; color:#fff; border-color:var(--phos); }
.knobs button:active{ opacity:.6; }
.knobs input[type=range]{ width:70px; accent-color:var(--phos); cursor:pointer; }
@media (max-width:900px){
  .key .kn{ display:none; }
}
@media (max-width:560px){
  .deck-mark{ display:none; }
  .knobs{ gap:8px; }
}

/* the deck occupies real space, so nothing hides behind it */
body{ padding-bottom:64px; }
.osd-bl{ bottom:74px; }

/* ═══ power: the tube discharging and recharging ═══ */
body.off #signal, body.off .osd, body.off .roll,
body.off .noise, body.off .flicker, body.off .grille,
body.off .scan, body.off .glare{ opacity:0; }
body.off{ background:#000; }

/* the deck is hardware, not picture: it stays visible and usable in standby */
body.off #deck{
  opacity:1; pointer-events:auto;
  background:linear-gradient(180deg, rgba(6,9,20,.96), rgba(0,0,0,.99));
  border-top-color:rgba(122,160,255,.16);
}
body.off .inputs, body.off .deck-mark{ opacity:.32; transition:opacity .5s ease; }
body.off .inputs:hover{ opacity:.7; }
/* the power key becomes a standby lamp */
body.off #pwr{
  color:#ff3b3b; opacity:1;
  border-bottom-color:rgba(255,59,59,.6);
  text-shadow:0 0 14px rgba(255,45,45,.9);
  animation:standby 2.4s ease-in-out infinite;
}
@keyframes standby{
  0%,100%{ text-shadow:0 0 12px rgba(255,45,45,.75); }
  50%    { text-shadow:0 0 22px rgba(255,45,45,1); }
}
body.off #pwr:hover{ color:#fff; text-shadow:0 0 20px rgba(255,80,80,1); }

#pwrfx{
  position:fixed; inset:0; z-index:250; pointer-events:none;
  display:none; background:#000; overflow:hidden;
}
#pwrfx.busy{ display:block; }
#pwrfx.clear{ background:transparent; }

/* the electron beam: a sheet that pinches to a line, then to a point */
.pwr-beam{
  position:absolute; left:0; right:0; top:50%;
  height:100vh; margin-top:-50vh;
  background:#eef6ff;
  transform-origin:center center;
  will-change:transform, opacity, filter;
}

/* switching off: flash, pinch to a scanline, squeeze to a dot, let it die */
@keyframes tubeOff{
  0%   { transform:scale(1,1);           opacity:1; filter:brightness(1);   box-shadow:none; }
  14%  { transform:scale(1,1);           opacity:1; filter:brightness(2.6); }
  42%  { transform:scale(1,.0055);       opacity:1; filter:brightness(2.2);
         box-shadow:0 0 60px 12px rgba(220,240,255,.85); }
  70%  { transform:scale(.0035,.0055);   opacity:1; filter:brightness(2.6);
         box-shadow:0 0 70px 16px rgba(220,240,255,.9); }
  100% { transform:scale(.0016,.0035);   opacity:0; filter:brightness(3);
         box-shadow:0 0 90px 20px rgba(200,235,255,.35); }
}
/* switching on: the dot strikes, stretches to a line, opens out */
@keyframes tubeOn{
  0%   { transform:scale(.0016,.0035);   opacity:0; filter:brightness(3); }
  12%  { transform:scale(.0035,.0055);   opacity:1; filter:brightness(2.8);
         box-shadow:0 0 70px 16px rgba(220,240,255,.9); }
  40%  { transform:scale(1,.0055);       opacity:1; filter:brightness(2.3);
         box-shadow:0 0 60px 12px rgba(220,240,255,.8); }
  68%  { transform:scale(1,1);           opacity:1; filter:brightness(1.9); }
  100% { transform:scale(1,1);           opacity:0; filter:brightness(1); }
}
.pwr-beam.off{ animation:tubeOff .62s cubic-bezier(.5,0,.75,0) forwards; }
.pwr-beam.on{  animation:tubeOn  .68s cubic-bezier(.2,.8,.3,1) forwards; }

/* the dying phosphor dot that lingers after the beam goes */
.pwr-dot{
  position:absolute; left:50%; top:50%; width:5px; height:5px;
  margin:-2.5px 0 0 -2.5px; border-radius:50%;
  background:#dff0ff; opacity:0;
}
.pwr-dot.glow{ animation:dotFade 1.5s ease-out forwards; }
@keyframes dotFade{
  0%  { opacity:.95; transform:scale(1);   box-shadow:0 0 26px 7px rgba(200,235,255,.85); }
  35% { opacity:.5;  transform:scale(.75); box-shadow:0 0 16px 4px rgba(200,235,255,.45); }
  100%{ opacity:0;   transform:scale(.4);  box-shadow:0 0 6px 1px rgba(200,235,255,0); }
}

@media (prefers-reduced-motion: reduce){
  .pwr-beam.off, .pwr-beam.on, .pwr-dot.glow{ animation:none !important; opacity:0 !important; }
}

@media (prefers-reduced-motion: reduce){
  .roll,.noise,.flicker,.ca,.rec i{ animation:none !important; }
  #boot{ display:none; }
}

/* ═══════════════════════════════════════════════════════════
   SUBPAGE COMPONENTS
   ═══════════════════════════════════════════════════════════ */

/* page header used by every subpage */
.phead{
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(110px,15vh,180px) clamp(60px,8vh,100px);
}
.phead .slug{ margin-bottom:clamp(20px,3vh,38px); }
.phead h1{
  font-size:min(11vh, 7.6vw, 7.375rem); line-height:.94; color:var(--paper);
  letter-spacing:-.015em; margin-bottom:clamp(18px,2.6vh,30px);
}
.phead .psub{ font-size:clamp(19px, 1.9vw, 1.75rem); color:var(--phos); max-width:54ch; }
.phead .dot{ color:var(--phos); }

/* facts strip */
.facts{
  display:flex; gap:clamp(24px,5vw,72px); flex-wrap:wrap;
  border-top:1px solid var(--line); margin-top:clamp(30px,5vh,56px); padding-top:24px;
}
.facts .k{ display:block; font-size:16px; letter-spacing:.24em; text-transform:uppercase; color:var(--phos); opacity:.7; margin-bottom:6px; }
.facts .v{ font-size:19px; color:var(--paper); }

/* origin: story + portrait */
.story{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,74px); align-items:center; }
@media (max-width:900px){ .story{ grid-template-columns:1fr; } }
.story .lead{ font-family:var(--disp); font-size:min(5.6vh, 3.6vw, 3.25rem); line-height:1.02; color:var(--paper); }
.story .side p{ color:var(--paper); opacity:.74; font-size:19px; margin-top:18px; }
.story-media{ position:relative; }
.story-media .frame{
  position:relative; overflow:hidden; aspect-ratio:4/4.4;
  border:1px solid var(--line); box-shadow:0 0 70px -22px rgba(12,71,242,.6);
}
.story-media .frame img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.story-media .frame::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.3) 0 1px, transparent 1px 3px);
}

/* crew */
.crew{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.4vw,22px);
}
.crew-card.join{ grid-column:1 / -1; }        /* the hiring card takes the full width */
.crew-card.join{
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:clamp(16px,2.4vw,34px); padding:clamp(18px,2.4vh,28px) clamp(18px,2.4vw,30px);
  background:linear-gradient(120deg, rgba(12,71,242,.12), transparent 60%);
}
.crew-card.join .mono{
  aspect-ratio:auto; width:clamp(52px,5vw,74px); height:clamp(52px,5vw,74px);
  border:1px solid var(--line); font-size:30px;
}
.crew-card.join .who{ padding:0; }
.crew-card.join .body{ padding:6px 0 0; grid-column:2; max-width:62ch; }
@media (max-width:860px){
  .crew{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .crew{ grid-template-columns:1fr; }
  .crew-card.join{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .crew-card.join .body{ grid-column:1; }
}
.crew-card{
  position:relative; border:1px solid var(--line); overflow:hidden; background:#000;
  transition:border-color .3s, transform .4s cubic-bezier(.2,.8,.2,1);
}
.crew-card:hover{ border-color:var(--phos); transform:translateY(-4px); }
.crew-card .ph{ aspect-ratio:1; overflow:hidden; }
.crew-card .ph img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.1) saturate(1.2); }
.crew-card .mono{
  aspect-ratio:1; display:grid; place-items:center;
  font-family:var(--disp); font-size:44px; color:var(--phos-dim);
  background:radial-gradient(70% 60% at 50% 30%, rgba(12,71,242,.16), transparent 70%);
}
.crew-card .who{ padding:12px 14px; display:flex; flex-direction:column; gap:3px; }
.crew-card .nm{ font-family:var(--disp); font-size:18px; color:var(--paper); }
.crew-card .role{ font-size:16px; letter-spacing:.14em; text-transform:uppercase; color:var(--phos); opacity:.75; }
.crew-card.join .body{ padding:0 14px 16px; font-size:17px; color:var(--paper); opacity:.7; }
.crew-card.join a{ color:var(--phos); }

/* client wall */
.clients-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(10px,1.2vw,18px); }
@media (max-width:900px){ .clients-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:560px){ .clients-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.client-card{
  position:relative; display:flex; flex-direction:column; text-decoration:none;
  border:1px solid var(--line); padding:8px 8px 11px; background:rgba(9,13,30,.5);
  transition:border-color .3s, transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.client-card:hover{ border-color:var(--phos); transform:translateY(-4px); box-shadow:0 0 44px -16px rgba(12,71,242,.8); }
.client-card .cimg{ position:relative; aspect-ratio:1; overflow:hidden; background:#000; margin-bottom:9px; }
.client-card .cimg img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.1) saturate(1.2); transition:transform .6s; }
.client-card:hover .cimg img{ transform:scale(1.06); }
.client-card .cimg::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.32) 0 1px, transparent 1px 3px);
}
.client-card .ci-blank{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--disp); font-size:30px; color:var(--phos-dim);
}
.client-card .cmeta{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:0 2px; }
.client-card .cname{
  font-family:var(--disp); font-size:15px; color:var(--paper);
  min-width:0; flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.client-card .cstat{ font-family:var(--disp); font-size:14px; color:var(--phos); white-space:nowrap; }
.client-card.is-more{
  border-style:dashed; border-color:rgba(122,160,255,.4); align-items:center; justify-content:center;
}
.client-card.is-more span{ font-family:var(--disp); font-size:17px; color:var(--phos); text-align:center; line-height:1.3; }

/* contact form */
.formwrap{ display:grid; gap:clamp(30px,3.4vw,54px); align-items:start; }
.formwrap aside{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,20px);
}
@media (max-width:820px){ .formwrap aside{ grid-template-columns:1fr; } }
.field{ margin-bottom:18px; }
.field label{
  display:block; font-size:16px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--phos); margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%; font-family:var(--mono); font-size:20px; color:var(--paper);
  background:rgba(6,10,26,.85); border:1px solid var(--line); border-radius:2px;
  padding:11px 14px; transition:border-color .25s, box-shadow .25s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--phos); box-shadow:0 0 0 1px var(--phos), 0 0 26px -6px rgba(12,71,242,.9);
}
.field textarea{ min-height:130px; resize:vertical; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:620px){ .two{ grid-template-columns:1fr; } }
.aside-block{
  border:1px solid var(--line); padding:1.375rem;
  background:linear-gradient(180deg, rgba(12,71,242,.07), transparent 60%);
}
.aside-block h3{ font-size:1.3125rem; margin-bottom:.625rem; color:var(--paper); }
.aside-block p{ font-size:1.125rem; color:var(--paper); opacity:.72; }
.aside-block a{ color:var(--phos); }

/* pricing tiers */
.tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(12px,1.4vw,20px); }
.tier{
  border:1px solid var(--line); padding:clamp(22px,2.6vh,34px) 22px;
  background:linear-gradient(180deg, rgba(12,71,242,.08), transparent 55%);
  transition:border-color .3s, transform .4s;
}
.tier:hover{ border-color:var(--phos); transform:translateY(-4px); }
.tier .tn{ font-size:16px; letter-spacing:.22em; text-transform:uppercase; color:var(--phos); }
.tier h3{ font-size:clamp(21px, 2vw, 1.8125rem); margin:12px 0 6px; color:var(--paper); }
.tier .amt{ font-family:var(--disp); font-size:clamp(28px, 3.4vw, 2.875rem); color:var(--phos); margin-bottom:14px; }
.tier ul{ list-style:none; }
.tier li{ font-size:18px; color:var(--paper); opacity:.75; padding:7px 0; border-top:1px solid var(--line); }

/* faq */
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:clamp(15px,2vh,24px) 4px;
  font-family:var(--disp); font-size:clamp(19px, 2vw, 1.75rem); color:var(--paper);
  display:flex; justify-content:space-between; gap:16px; align-items:center;
  transition:color .25s, padding-left .25s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; color:var(--phos); font-family:var(--mono); font-size:26px; }
.faq details[open] summary{ color:var(--phos); padding-left:14px; }
.faq details[open] summary::after{ content:'−'; }
.faq p{ padding:0 4px 22px; font-size:19px; color:var(--paper); opacity:.74; max-width:74ch; }

/* origin: the mark on its own, no frame around it */
.story-media .mark-open{ display:grid; place-items:center; padding:clamp(10px,3vw,40px); }
.story-media .mark-open img{
  width:min(100%, 540px); height:auto; display:block;
  filter:drop-shadow(0 0 40px rgba(12,71,242,.8)) drop-shadow(0 0 110px rgba(12,71,242,.4));
}

/* ── who we are: a short read straight after the hero ── */
.who-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,80px); align-items:start;
}
@media (max-width:900px){ .who-grid{ grid-template-columns:1fr; } }
.who-line{
  font-family:var(--disp); line-height:.98; letter-spacing:-.015em;
  font-size:min(7vh, 4.6vw, 4.25rem); color:var(--paper);
}
.who-line .dot{ color:var(--phos); }
.who-side p{ font-size:clamp(19px, 1.6vw, 1.4375rem); color:var(--paper); opacity:.76; max-width:48ch; }
.who-facts{
  display:flex; gap:clamp(22px,3.4vw,52px); flex-wrap:wrap;
  border-top:1px solid var(--line); margin-top:clamp(24px,3.4vh,40px); padding-top:20px;
}
.who-facts .k{
  display:block; font-size:15px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--phos); opacity:.7; margin-bottom:5px;
}
.who-facts .v{ font-size:19px; color:var(--paper); }
.who-side .btn{ margin-top:clamp(24px,3.4vh,38px); }

/* ── selected work: full width, uncropped, type over the frame ── */
.worksec{ padding-block:clamp(72px,10vh,130px); }
.wfs{ display:flex; flex-direction:column; gap:clamp(14px,2.2vh,34px); }

.wf{
  position:relative; display:block; text-decoration:none; overflow:hidden;
  width:100vw; margin-left:calc(50% - 50vw);
  aspect-ratio:1920 / 599;          /* the clips' own shape: never cropped */
  background:var(--void);
}
.wf video{
  width:100%; height:100%; object-fit:contain; display:block;
  filter:contrast(1.08) saturate(1.18) brightness(.82);
  transition:filter .5s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
.wf:hover video{ filter:contrast(1.12) saturate(1.3) brightness(1); transform:scale(1.02); }
.wf-scan{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(3,5,14,.86) 2%, rgba(3,5,14,.15) 48%, rgba(3,5,14,.45)),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.26) 0 1px, transparent 1px 3px);
}

/* the typography sits in the page column, not against the screen edge */
.wf-cap{
  position:absolute; z-index:3; inset:0;
  width:min(1180px,92vw); margin-inline:auto;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  gap:clamp(8px,1.2vh,16px); pointer-events:none;
}
.wf-meta{ display:flex; align-items:center; gap:16px; }
.wf-no{
  font-family:var(--disp); font-size:clamp(15px, 1.2vw, 1.1875rem);
  color:var(--phos); opacity:.85; letter-spacing:.04em;
}
.wf-kind{
  font-size:clamp(14px, 1.1vw, 1.125rem); letter-spacing:.3em; text-transform:uppercase;
  color:var(--phos); opacity:.9; text-shadow:0 0 14px rgba(12,71,242,.9);
}
.wf-title{
  font-family:var(--disp); line-height:.94; color:#fff;
  font-size:min(9vh, 5.6vw, 5.25rem); letter-spacing:-.015em;
  text-shadow:0 0 40px rgba(3,5,14,.9), -2px 0 0 rgba(10,43,214,.55), 2px 0 0 rgba(122,160,255,.5);
  display:flex; flex-direction:column;
}
.wf-title .wf-sub{ color:var(--paper); opacity:.9; }
.wf-go{
  margin-top:clamp(6px,1vh,14px);
  font-size:clamp(15px, 1.2vw, 1.1875rem); letter-spacing:.24em; text-transform:uppercase;
  color:var(--paper); opacity:0; transform:translateY(8px);
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.wf:hover .wf-go{ opacity:.9; transform:none; }

@media (max-width:760px){
  .wf-title{ font-size:clamp(26px, 7.6vw, 2.75rem); }
  .wf-scan{ background:
    linear-gradient(90deg, rgba(3,5,14,.9) 6%, rgba(3,5,14,.35) 70%),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.26) 0 1px, transparent 1px 3px); }
}

/* ═══════════════════════════════════════════════════════════
   CENTRED COMPOSITION
   Everything is built on a centre axis rather than a left edge.
   ═══════════════════════════════════════════════════════════ */

/* section slugs: a label held between two rules */
.slug{ justify-content:center; text-align:center; gap:20px; }
.slug::before{
  content:''; width:auto; height:1px; flex:1 1 auto; background:none;
  background-image:linear-gradient(270deg, var(--line), transparent);
  box-shadow:none;
}
.slug::after{
  flex:1 1 auto; height:1px;
  background:linear-gradient(90deg, var(--line), transparent);
}

/* hero */
.hero-body{ text-align:center; }
.hero-mark{ display:flex; justify-content:center; }
.hero-sub{ margin-inline:auto; max-width:52ch; }
.hero-row{ justify-content:center; }


/* selected work: title centred over the frame */
.wf-cap{ align-items:center; text-align:center; }
.wf-meta{ justify-content:center; }
.wf-title{ align-items:center; }
.wf-scan{
  background:
    linear-gradient(180deg, rgba(3,5,14,.5), rgba(3,5,14,.2) 45%, rgba(3,5,14,.6)),
    radial-gradient(58% 90% at 50% 50%, rgba(3,5,14,.72), transparent 78%),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.26) 0 1px, transparent 1px 3px);
}

/* impact: the number over its label, dead centre */
.bn{
  flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:clamp(4px,.7vh,10px);
  padding:clamp(8px,1.3vh,20px) 4px;
}
/* stacked rows are taller than side-by-side ones, so the figure scales down */
.bn-v{ font-size:min(9.4vh, 8.4vw, 8.25rem); }
.bn-k{ font-size:clamp(15px, 1.2vw, 1.1875rem); letter-spacing:.34em; }
.bn:hover{ padding-left:0; background:linear-gradient(180deg, rgba(12,71,242,.16), transparent 80%); }
.bn-k{ text-align:center; }

/* release cycle */
.stage{ text-align:center; }
.stage p{ margin-inline:auto; max-width:34ch; }

/* subpage headers */
.phead{ text-align:center; }
.phead .psub{ margin-inline:auto; }
.facts{ justify-content:center; }
.facts > div{ text-align:center; }


/* work grids and tiers read centred too */
.sec-note{ margin-inline:auto; text-align:center; }
.tier{ text-align:center; }
.tier ul{ display:inline-block; text-align:center; }
.faq summary{ justify-content:center; gap:14px; }
.faq p{ margin-inline:auto; text-align:center; }
.clients-note{ text-align:center; }

/* the sign off was already centred, keep it aligned with the rest */
.signoff p{ margin-inline:auto; }

/* ═══ visualizers ═══ */
.visgrid{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(12px,1.5vw,22px);
}
.visgrid .vis{ grid-column:span 2; }
/* the first two lead the section */
.visgrid .vis:nth-child(1),
.visgrid .vis:nth-child(2){ grid-column:span 3; }
.visgrid .vis:nth-child(1) .vis-artist,
.visgrid .vis:nth-child(2) .vis-artist{ font-size:clamp(18px, 1.8vw, 1.625rem); }
.visgrid .vis:nth-child(1) .vis-track,
.visgrid .vis:nth-child(2) .vis-track{ font-size:clamp(19px, 1.6vw, 1.4375rem); }
.visec .sec-note{ margin-bottom:clamp(26px,4vh,46px); }
@media (max-width:900px){
  .visgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .visgrid .vis, .visgrid .vis:nth-child(1), .visgrid .vis:nth-child(2){ grid-column:span 1; }
}
@media (max-width:560px){
  .visgrid{ grid-template-columns:1fr; }
  .visgrid .vis, .visgrid .vis:nth-child(1), .visgrid .vis:nth-child(2){ grid-column:span 1; }
}
.vis{
  position:relative; display:block; text-decoration:none; overflow:hidden;
  border:1px solid var(--line); background:#000;
  transition:border-color .3s, transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
}
.vis:hover{
  border-color:var(--phos); transform:translateY(-5px);
  box-shadow:0 0 54px -18px rgba(12,71,242,.85);
}
.vis-im{ display:block; aspect-ratio:16/9; overflow:hidden; position:relative; }
.vis-im img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:contrast(1.1) saturate(1.2) brightness(.9);
  transition:filter .45s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.vis:hover .vis-im img{ filter:contrast(1.14) saturate(1.3) brightness(1.04); transform:scale(1.06); }
.vis-im::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.3) 0 1px, transparent 1px 3px);
}
.vis-cap{
  display:flex; flex-direction:column; gap:4px; align-items:center;
  padding:clamp(14px,1.8vh,22px) 16px clamp(16px,2vh,24px); text-align:center;
}
.vis-artist{ font-family:var(--disp); font-size:16px; color:var(--paper); line-height:1.15; }
.vis-track{ font-size:18px; color:var(--phos); }
.vis-ch{ font-size:14px; letter-spacing:.22em; text-transform:uppercase; color:var(--paper); opacity:.4; margin-top:3px; }
.vis-play{
  position:absolute; z-index:3; top:12px; right:14px;
  font-size:20px; color:var(--paper); opacity:0; transform:translateY(-6px);
  text-shadow:0 0 16px rgba(12,71,242,.95);
  transition:opacity .3s, transform .3s;
}
.vis:hover .vis-play{ opacity:1; transform:none; }

/* ═══ how a release comes together: 2 x 2 ═══ */
.transport{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.6vw,24px); }
@media (max-width:760px){ .transport{ grid-template-columns:1fr; } }
.stage{
  position:relative; overflow:hidden;
  border:1px solid var(--line);
  padding:clamp(20px,2.8vh,36px) clamp(22px,2.4vw,38px) clamp(22px,3vh,38px);
  background:linear-gradient(160deg, rgba(12,71,242,.11), rgba(3,5,14,.6) 62%);
  transition:border-color .35s, transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
}
.stage:hover{
  border-color:var(--phos); transform:translateY(-5px);
  box-shadow:0 0 62px -20px rgba(12,71,242,.8);
}
.stage-n{
  display:block; font-family:var(--disp); line-height:1;
  font-size:min(7vh, 4.6vw, 4.375rem); color:var(--phos); opacity:.28;
  transition:opacity .35s, text-shadow .35s;
}
.stage:hover .stage-n{ opacity:.95; text-shadow:0 0 34px rgba(12,71,242,.9); }
.stage h3{ font-size:min(3.4vh, 2.2vw, 2rem); margin:10px 0 9px; color:#fff; }
.stage p{ font-size:clamp(17px, 1.35vw, 1.25rem); color:var(--paper); opacity:.72; line-height:1.42; max-width:40ch; margin-inline:auto; }
.stage .dur{
  display:inline-block; margin-top:clamp(12px,1.8vh,20px);
  font-size:15px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--phos); border:1px solid var(--line); padding:7px 16px;
}
.stage:hover .dur{ border-color:var(--phos); }

/* ═══ impact: boxed and grand ═══ */
.stats{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(12px,1.4vw,20px);
}
.stat{
  position:relative; overflow:hidden; grid-column:span 2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:clamp(6px,1vh,12px);
  border:1px solid var(--line);
  padding:clamp(26px,3.6vh,48px) clamp(18px,2vw,30px);
  background:linear-gradient(165deg, rgba(12,71,242,.13), rgba(3,5,14,.55) 65%);
  transition:border-color .35s, transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
}
.stat.is-big{ grid-column:span 3; }
.stat::before{                 /* a hairline that lights along the top edge */
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--phos); transform:scaleX(0); transform-origin:center;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.stat:hover{
  border-color:rgba(77,124,255,.5); transform:translateY(-5px);
  box-shadow:0 0 66px -22px rgba(12,71,242,.85);
}
.stat:hover::before{ transform:scaleX(1); }
.stat-n{
  font-family:var(--disp); line-height:.9; color:#fff;
  font-size:min(9vh, 6.6vw, 6.5rem); font-variant-numeric:tabular-nums;
  text-shadow:-2px 0 0 rgba(10,43,214,.6), 2px 0 0 rgba(122,160,255,.55), 0 0 46px rgba(12,71,242,.6);
}
.stat.is-big .stat-n{ font-size:min(11vh, 7.6vw, 8rem); }
.stat-k{
  font-size:clamp(15px, 1.2vw, 1.1875rem); letter-spacing:.3em; text-transform:uppercase;
  color:var(--phos);
}
.stat-d{
  font-size:clamp(15px, 1.15vw, 1.125rem); color:var(--paper); opacity:.6;
  max-width:30ch; line-height:1.4;
}
@media (max-width:900px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat, .stat.is-big{ grid-column:span 1; }
}
@media (max-width:560px){
  .stats{ grid-template-columns:1fr; }
}

/* ═══ work page: a clean editorial grid ═══ */
.pwgrid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(30px,4vw,64px) clamp(20px,2.6vw,44px);
}
@media (max-width:760px){ .pwgrid{ grid-template-columns:1fr; gap:clamp(26px,5vw,40px); } }

.pw{ display:block; text-decoration:none; }
.pw-im{
  position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
  background:#000; border:1px solid var(--line);
  transition:border-color .35s, box-shadow .5s, transform .55s cubic-bezier(.2,.8,.2,1);
}
.pw-im img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:contrast(1.08) saturate(1.15) brightness(.88);
  transition:filter .5s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
.pw-im::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
}
.pw:hover .pw-im{
  border-color:var(--phos); transform:translateY(-5px);
  box-shadow:0 0 70px -22px rgba(12,71,242,.85);
}
.pw:hover .pw-im img{ filter:contrast(1.12) saturate(1.28) brightness(1.04); transform:scale(1.05); }

.pw-cue{
  position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-45%);
  font-family:var(--mono); font-size:clamp(15px, 1.2vw, 1.1875rem);
  letter-spacing:.24em; text-transform:uppercase; color:var(--paper);
  padding:11px 22px; border:1px solid rgba(219,228,255,.5);
  background:rgba(3,5,14,.45); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.pw:hover .pw-cue{ opacity:1; transform:translate(-50%,-50%); }

.pw-cap{ display:block; padding-top:clamp(14px,1.8vh,22px); }
.pw-meta{
  display:flex; align-items:center; gap:14px;
  font-size:clamp(13px, 1vw, 1rem); letter-spacing:.26em; text-transform:uppercase;
}
.pw-meta i{ font-style:normal; color:var(--phos); opacity:.75; }
.pw-meta em{ font-style:normal; color:var(--paper); opacity:.5; }
.pw-title{
  display:block; margin-top:8px; font-family:var(--disp);
  font-size:clamp(21px, 2.1vw, 2rem); line-height:1.06; color:var(--paper);
  transition:color .3s;
}
.pw-title .pw-sub{ display:block; color:var(--phos); opacity:.9; }
.pw:hover .pw-title{ color:#fff; }

/* ═══ in-site player ═══ */
#player{
  position:fixed; inset:0; z-index:300; display:none;
  align-items:center; justify-content:center;
  padding:clamp(16px,4vw,64px);
  background:rgba(2,3,9,.9); backdrop-filter:blur(10px) saturate(.7);
  opacity:0; transition:opacity .35s ease;
}
#player.open{ display:flex; }
#player.shown{ opacity:1; }

.pl-box{
  position:relative; width:min(1180px,100%);
  transform:scale(.97) translateY(10px);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
#player.shown .pl-box{ transform:none; }

.pl-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; padding-bottom:12px; flex-wrap:wrap;
}
.pl-title{
  font-family:var(--disp); font-size:clamp(18px, 2vw, 1.75rem); color:var(--paper);
  line-height:1.1;
}
.pl-kind{
  font-size:clamp(13px, 1vw, 1rem); letter-spacing:.26em; text-transform:uppercase;
  color:var(--phos); opacity:.85;
}
.pl-frame{
  position:relative; aspect-ratio:16/9; width:100%;
  background:#000; border:1px solid var(--line);
  box-shadow:0 0 120px -30px rgba(12,71,242,.9), inset 0 0 90px rgba(0,0,0,.9);
  overflow:hidden;
}
.pl-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.pl-frame::after{                 /* the tube texture, kept off the controls */
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
}
.pl-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top:12px; flex-wrap:wrap;
  font-size:clamp(13px, 1vw, 1rem); letter-spacing:.22em; text-transform:uppercase;
  color:var(--paper); opacity:.55;
}
.pl-foot a{ color:var(--phos); text-decoration:none; opacity:.9; }
.pl-foot a:hover{ color:#fff; }

.pl-close{
  position:absolute; top:-46px; right:0;
  font-family:var(--mono); font-size:16px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper); background:none; border:0; cursor:pointer;
  padding:8px 4px 10px; opacity:.75;
  transition:opacity .25s, color .25s;
}
.pl-close::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--phos); transform:scaleX(0); transform-origin:right;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.pl-close:hover{ opacity:1; color:#fff; }
.pl-close:hover::after{ transform:scaleX(1); }
@media (max-width:620px){ .pl-close{ top:auto; bottom:-42px; } }

body.playing{ overflow:hidden; }

/* ═══ standby arcade ═══ */
#arcade{
  position:fixed; inset:0; z-index:255; display:none;
  opacity:0; transition:opacity .5s ease;
}
#arcade.on{ display:block; }
#arcade.shown{ opacity:1; }
#arcade canvas{ display:block; width:100%; height:100%; }
.arc-hint{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--deck-h, 66px) + 18px); z-index:256;
  font-family:var(--mono); font-size:15px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--phos); opacity:.5;
  pointer-events:none; text-align:center; white-space:nowrap;
}
@media (max-width:620px){ .arc-hint{ font-size:13px; letter-spacing:.14em; } }



/* ═══ scroll cue: vertical label + travelling line on the right edge ═══ */
.scue{
  position:absolute; z-index:6;
  /* sections are a centred column, so reach out past the gutter to the
     screen edge: (50vw - 50%) is exactly half the leftover space */
  right:calc(clamp(10px,1.4vw,1.375rem) - (50vw - 50%));
  top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-decoration:none; cursor:pointer;
  opacity:.55; transition:opacity .35s ease;
}
.scue:hover{ opacity:1; }

.scue-txt{
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--mono); font-size:13px; letter-spacing:.36em;
  text-transform:uppercase; color:var(--phos); white-space:nowrap;
  text-shadow:0 0 10px rgba(3,5,14,.95), 0 0 22px rgba(3,5,14,.8), 0 0 14px rgba(12,71,242,.5);
}
.scue-txt b{ color:var(--paper); font-weight:400; }

.scue-line{
  position:relative; width:1px; height:clamp(48px,7vh,84px);
  background:var(--line); overflow:hidden; flex:0 0 auto;
}
.scue-line::after{
  content:''; position:absolute; left:0; top:0; width:1px; height:26px;
  background:linear-gradient(to bottom, transparent, var(--phos) 55%, transparent);
  box-shadow:0 0 8px rgba(12,71,242,.9);
  animation:scueRun 2.4s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes scueRun{
  0%   { transform:translateY(-30px); opacity:0; }
  22%  { opacity:1; }
  78%  { opacity:1; }
  100% { transform:translateY(var(--scue-h, 84px)); opacity:0; }
}
/* the last screen points back up */
.scue.is-top .scue-line::after{ animation-name:scueRunUp; }
@keyframes scueRunUp{
  0%   { transform:translateY(var(--scue-h, 84px)); opacity:0; }
  22%  { opacity:1; }
  78%  { opacity:1; }
  100% { transform:translateY(-30px); opacity:0; }
}
.scue.is-top{ flex-direction:column-reverse; }

@media (max-width:1080px){ .scue{ display:none; } }
@media (prefers-reduced-motion: reduce){ .scue-line::after{ animation:none; opacity:.8; } }