/* Layout: a single equipment rack. Machined rail nav, an instrument panel hero offset right,
   a rack of mixed-height modules beside a sticky patch index, a pinned cinematic interlude,
   a mixing desk, a keycap tray, an ID badge, and a transmit panel. Deliberately dark, single theme. */
/* Font loading: the six families are self-hosted (assets/fonts, SIL Open Font Licence texts in assets/fonts/licences).
   Each is the same Latin WOFF2 file the page previously took from Google Fonts, declared with the same weights, so the
   rendering is unchanged. font-display:block means the first frame never paints a substitute face. If a file is slow
   enough to outlast the block period, the local fallbacks below take over, each tuned with size and vertical metrics
   measured against the real face so text keeps its width, height and line breaks.
   Big Shoulders and IBM Plex Sans are variable files; they are declared once per original weight (not as a range) so
   that weight matching stays exactly as before (for example 450 resolves to the 500 face). */
@font-face{font-family:"Anybody";font-style:normal;font-weight:900;font-stretch:100% 120%;font-display:block;src:url(../assets/fonts/anybody-latin-wdth-900.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:500;font-display:block;src:url(../assets/fonts/big-shoulders-display-latin-variable.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:700;font-display:block;src:url(../assets/fonts/big-shoulders-display-latin-variable.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:900;font-display:block;src:url(../assets/fonts/big-shoulders-display-latin-variable.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:block;src:url(../assets/fonts/ibm-plex-mono-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:block;src:url(../assets/fonts/ibm-plex-mono-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-stretch:100%;font-display:block;src:url(../assets/fonts/ibm-plex-sans-latin-variable.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-stretch:100%;font-display:block;src:url(../assets/fonts/ibm-plex-sans-latin-variable.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-stretch:100%;font-display:block;src:url(../assets/fonts/ibm-plex-sans-latin-variable.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:block;src:url(../assets/fonts/instrument-serif-latin-italic-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Michroma";font-style:normal;font-weight:400;font-display:block;src:url(../assets/fonts/michroma-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Anybody Fallback";src:local("Arial Black"),local("ArialBlack"),local("Arial Bold");size-adjust:107.0%;ascent-override:74.7%;descent-override:22.4%;line-gap-override:0%}
@font-face{font-family:"Instrument Serif Fallback";font-style:italic;src:local("Georgia Italic"),local("Georgia-Italic"),local("Times New Roman Italic");size-adjust:76.7%;ascent-override:128.9%;descent-override:40.4%;line-gap-override:0%}
@font-face{font-family:"Big Shoulders Fallback";src:local("Arial Narrow Bold"),local("ArialNarrow-Bold"),local("Arial Narrow");size-adjust:88.8%;ascent-override:110.4%;descent-override:23.7%;line-gap-override:0%}
@font-face{font-family:"Michroma Fallback";src:local("Arial"),local("Helvetica");size-adjust:147.6%;ascent-override:78.6%;descent-override:18.3%;line-gap-override:0%}
@font-face{font-family:"Plex Sans Fallback";src:local("Arial"),local("Helvetica");size-adjust:103.1%;ascent-override:99.9%;descent-override:27.1%;line-gap-override:0%}
@font-face{font-family:"Plex Mono Fallback";src:local("Courier New"),local("Courier");size-adjust:100%;ascent-override:103%;descent-override:28%;line-gap-override:0%}
:root{
  --void:#090B0E;
  --graphite:#12151A;
  --alloy:#1E2229;
  --alloy-hi:#343A44;
  --etch:#8C95A3;
  --ink:#E9EDF2;
  /* text roles (no greys): warm white for reading copy, light steel for labels and metadata, soft cyan for screen captions */
  --ivory:#EFE8DC;
  --steel:#D3DAE2;
  --volt-soft:#8FE7F5;
  --volt:#3DE3FF;
  --volt-glow:rgba(61,227,255,.45);
  --volt-wash:rgba(61,227,255,.08);
  --amber:#FFB547;
  --alert:#FF5A4E;
  --ok:#5BF0A0;

  --f-display:"Big Shoulders Display","Big Shoulders Fallback","Arial Narrow",Impact,sans-serif;
  --f-hero:"Anybody","Anybody Fallback","Arial Black","Helvetica Neue",Arial,sans-serif;
  --f-hero-voice:"Instrument Serif","Instrument Serif Fallback",Georgia,"Times New Roman",serif;
  --f-silk:"Michroma","Michroma Fallback","Eurostile","Arial",sans-serif;
  --f-body:"IBM Plex Sans","Plex Sans Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono","Plex Mono Fallback",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --gutter:clamp(16px,4vw,56px);
  --brushed:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),linear-gradient(180deg,#262A31,#191C21);
  --brushed-lite:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 2px),linear-gradient(180deg,#30353D,#1F2329);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--ink);font:400 16px/1.6 var(--f-body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
:focus-visible{outline:2px solid var(--volt);outline-offset:3px}
.silk{font:400 10.5px/1.2 var(--f-silk);letter-spacing:.18em;text-transform:uppercase;color:var(--steel)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.wrap{padding-inline:var(--gutter);max-width:1440px;margin-inline:auto}

/* ---------- hardware primitives ---------- */
.screw{width:11px;height:11px;border-radius:50%;flex:none;position:relative;
  background:radial-gradient(circle at 35% 30%,#A8AFB9,#4A505A 55%,#23272D);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.07)}
.screw::after{content:"";position:absolute;left:2px;right:2px;top:50%;height:1.5px;margin-top:-.75px;background:#1A1D22;transform:rotate(var(--r,35deg));border-radius:1px}
.led{width:8px;height:8px;border-radius:50%;flex:none;background:#20343A;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.led.on{background:var(--volt);box-shadow:0 0 6px var(--volt),0 0 14px var(--volt-glow)}
.led.amber{background:var(--amber);box-shadow:0 0 6px var(--amber),0 0 14px rgba(255,181,71,.4)}
.led.ok{background:var(--ok);box-shadow:0 0 6px var(--ok),0 0 12px rgba(91,240,160,.35)}
.led.blink{animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}

.btn{--d:4px;appearance:none;border:0;cursor:pointer;font:400 11px/1 var(--f-silk);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  padding:16px 22px;border-radius:6px;background:var(--brushed-lite);position:relative;text-decoration:none;display:inline-flex;align-items:center;gap:10px;
  box-shadow:0 var(--d) 0 #0C0E11,0 calc(var(--d) + 6px) 14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.4);
  transform:translateY(0);transition:transform .08s,box-shadow .08s}
.btn:hover{--d:5px;transform:translateY(-1px)}
.btn:active{--d:1px;transform:translateY(3px)}
.btn.primary{background:linear-gradient(180deg,#5DEBFF,#18B9D8);color:#03161B;box-shadow:0 var(--d) 0 #0A6273,0 calc(var(--d) + 8px) 24px rgba(61,227,255,.28),inset 0 1px 0 rgba(255,255,255,.5)}
/* secondary CTA: no plate, no rule; just the live LED and text, which turns cyan on hover */
.btn.link{background:none;box-shadow:none;padding-inline:4px}
.btn.link:hover{color:var(--volt);transform:translateY(0)}
.btn.link:active{transform:translateY(1px)}

/* ---------- rail nav ---------- */
.rail{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:#000;border-bottom:1px solid rgba(61,227,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.6)}
.rail-in{display:flex;align-items:center;gap:14px;padding-block:10px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .logo{height:42px;width:auto;display:block}
.brand .silk{display:none;white-space:nowrap}
.nav{display:flex;gap:5px;margin-left:auto}
.nav a{font:400 11px/1 var(--f-silk);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--steel);padding:13px 12px;border-radius:4px;
  background:linear-gradient(180deg,#16191D,#0D0F12);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 0 #050608;transition:color .2s,transform .08s}
.nav a:hover{color:var(--volt)}
.nav a:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 #0B0D10}
.readout{display:none;align-items:center;gap:10px;padding:7px 12px;border-radius:4px;background:#05080A;box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.05)}
.readout .mono{color:var(--volt);font-size:13px;text-shadow:0 0 8px var(--volt-glow)}
.zones{gap:0;padding-inline:4px}
.zone{display:flex;align-items:center;gap:7px;padding-inline:9px}
.zone+.zone{box-shadow:-1px 0 0 rgba(61,227,255,.16)}
.zone .silk{color:var(--ink);font-size:10.5px;letter-spacing:.14em}
.zone .led{width:5px;height:5px}
.zone .mono{font-size:13.5px}
@media (min-width:860px) and (max-width:1299px){.zone+.zone{display:none}}
@media (min-width:860px){.readout{display:flex}}
@media (min-width:1420px){.brand .silk{display:block}}
.menu-btn{display:none}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(48px,8vw,110px) clamp(24px,4vw,56px)}
.hero-bg{position:absolute;inset:-20% -5%;pointer-events:none}
.grid-plane{position:absolute;inset:0;background-image:linear-gradient(rgba(61,227,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(61,227,255,.06) 1px,transparent 1px);background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 65% 45%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 65% 45%,#000 20%,transparent 75%)}
.halo{position:absolute;width:60vw;height:60vw;max-width:900px;max-height:900px;right:-10vw;top:0;border-radius:50%;background:radial-gradient(circle,rgba(61,227,255,.13),transparent 62%);filter:blur(10px)}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:56px;align-items:center}
@media (min-width:1000px){.hero-in{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px}}
.kicker{display:flex;align-items:center;gap:10px;margin-bottom:26px}
/* two typographic roles: the nouns (what gets built) in Anybody, heavy and slightly expanded;
   the voice words ("I build", "and") in Instrument Serif italic. One line per phrase, ragged right. */
.hero h1{font:900 clamp(34px,5.4vw,88px)/.9 var(--f-hero);font-stretch:108%;letter-spacing:-.025em;text-transform:uppercase;margin:0;color:var(--ink)}
.hero h1 .ln{display:block}
.hero h1 .s{font:italic 400 .7em/1 var(--f-hero-voice);letter-spacing:.01em}
.hero h1 .ln.s{margin-bottom:.1em}
.hero h1 .ln .s{margin-right:.08em}
.hero h1 .v{color:var(--volt);text-shadow:0 0 30px rgba(61,227,255,.35)}
/* the full stop is a green status light */
.hero h1 .stop{color:var(--ok);text-shadow:0 0 18px rgba(91,240,160,.45)}
.hero h1 .o{-webkit-text-stroke:1.5px var(--etch);color:transparent}
/* hero polish: subtext and secondary CTA in crisp cool white; tighter glow and larger LED labels inside the unit */
.hero .hero-copy p{color:#F1F6FA;font-weight:450}
.hero .btn.link{color:#F1F6FA}
.hero .btn.link:hover,.hero .btn.link:focus-visible{color:var(--volt)}
.hero .unit .silk{color:#F1F6FA}
.hero .unit #pwrlbl{color:var(--ok)}
.hero .unit.off #pwrlbl{color:var(--amber)}
.hero .unit .st .silk{font-size:10px;letter-spacing:.1em}
.hero .unit .modes span{font-size:10.5px}
.hero .unit .osd{text-shadow:0 0 3px rgba(61,227,255,.3);white-space:nowrap}
.hero .unit .modes span.on{text-shadow:0 0 3px rgba(61,227,255,.3)}
@media (max-width:520px){.hero .unit .osd-x{display:none}}
.hero-copy p{max-width:46ch;color:var(--ink);font-size:clamp(16px,1.3vw,19px);margin:30px 0 36px}
.cta{display:flex;flex-wrap:wrap;gap:16px}

/* instrument unit */
.stage{perspective:1400px}
.unit{position:relative;border-radius:14px;padding:22px 22px 18px;background:var(--brushed);transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 -1px 0 rgba(0,0,0,.6) inset,0 50px 90px -20px rgba(0,0,0,.9),0 0 0 1px #050608,0 30px 120px -40px rgba(61,227,255,.25)}
.unit-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.unit-top .l{display:flex;align-items:center;gap:10px}
.bezel{border-radius:10px;padding:10px;background:linear-gradient(180deg,#0A0C0F,#15181D);box-shadow:inset 0 3px 10px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.06)}
.screen{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:16/10;background:radial-gradient(ellipse at 50% 50%,#06222A,#020709 75%);transition:filter .4s}
.screen canvas{position:absolute;inset:0;width:100%;height:100%}
.osd{position:absolute;left:12px;right:12px;top:10px;display:flex;justify-content:space-between;font:500 11px/1 var(--f-mono);color:var(--volt);z-index:2;text-shadow:0 0 6px var(--volt-glow)}
.osd.b{top:auto;bottom:10px}
.unit.off .screen{filter:brightness(.08) saturate(0)}
.unit.off .osd{opacity:0}
.controls{display:grid;grid-template-columns:auto auto 1fr auto;gap:22px;align-items:center;margin-top:18px}
.ctl{display:grid;justify-items:center;gap:8px}
.knob{--a:-120deg;width:58px;height:58px;border-radius:50%;cursor:grab;position:relative;touch-action:none;border:0;padding:0;
  background:conic-gradient(from 0deg,#5A616C,#2A2F36,#5A616C,#2A2F36,#5A616C);box-shadow:0 6px 12px rgba(0,0,0,.6),0 0 0 4px #14171B,0 0 0 5px rgba(255,255,255,.05)}
.knob::before{content:"";position:absolute;inset:7px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#4A515C,#1E2227);box-shadow:inset 0 1px 1px rgba(255,255,255,.2)}
.knob::after{content:"";position:absolute;left:50%;top:9px;width:3px;height:14px;margin-left:-1.5px;border-radius:2px;background:var(--volt);box-shadow:0 0 8px var(--volt);transform-origin:50% 20px;transform:rotate(var(--a))}
.knob:active{cursor:grabbing}
.modes{display:flex;gap:10px}
.modes span{font:500 10.5px/1 var(--f-mono);color:var(--steel);letter-spacing:.08em}
.modes span.on{color:var(--volt);text-shadow:0 0 6px var(--volt-glow)}
.toggle{width:34px;height:58px;border-radius:6px;position:relative;cursor:pointer;border:0;padding:0;background:#0A0C0F;box-shadow:inset 0 2px 6px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.06)}
.toggle i{position:absolute;left:5px;right:5px;height:26px;border-radius:4px;top:5px;transition:top .18s cubic-bezier(.3,1.6,.5,1);
  background:linear-gradient(180deg,#5F6772,#2B3037);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 6px rgba(0,0,0,.6)}
.toggle[aria-pressed="false"] i{top:27px}
.leds{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap}
.serial{display:flex;justify-content:space-between;margin-top:16px;padding-top:12px;border-top:1px solid rgba(0,0,0,.5);box-shadow:0 -1px 0 rgba(255,255,255,.04)}
@media (max-width:520px){.controls{grid-template-columns:auto auto 1fr}.controls .leds{display:none}.unit{padding:14px}}

/* ---------- instrument unit: physical build (scoped to .unit so the desk knobs are untouched) ---------- */
/* chassis: lit top edge, shaded flanks, an extruded lower wall, and a machined panel groove */
.unit{background:linear-gradient(180deg,rgba(255,255,255,.045),transparent 22%),var(--brushed);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 1px 0 0 rgba(255,255,255,.05),inset -1px 0 0 rgba(0,0,0,.45),inset 0 -2px 0 rgba(0,0,0,.6),
    0 2px 0 #1C1F24,0 4px 0 #17191E,0 6px 0 #131519,0 8px 0 #0F1114,0 9px 0 #050608,0 0 0 1px #050608,
    0 60px 90px -20px rgba(0,0,0,.9),0 30px 120px -40px rgba(61,227,255,.25)}
.unit::before{content:"";position:absolute;inset:8px;border-radius:9px;pointer-events:none;border:1px solid rgba(0,0,0,.55);box-shadow:0 1px 0 rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.04)}
.unit .silk{color:var(--ink)}
.unit #pwrlbl{color:var(--ok)}
.unit.off #pwrlbl{color:var(--amber)}

/* screen recess: deep chamfered bezel, black gasket, and a glass layer with a soft reflection band */
.unit .bezel{position:relative;padding:12px;border-radius:12px;background:linear-gradient(180deg,#060709,#111418 55%,#1B1F25);
  box-shadow:inset 0 5px 12px rgba(0,0,0,.95),inset 0 -1px 0 rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.09),0 -1px 0 rgba(0,0,0,.7)}
.unit .screen{border-radius:8px;box-shadow:0 0 0 1px #000,0 0 0 2px rgba(255,255,255,.035)}
.unit .glass{position:absolute;inset:12px;border-radius:8px;pointer-events:none;z-index:4;
  background:linear-gradient(118deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.025) 30%,transparent 30.4%),
    radial-gradient(ellipse 120% 70% at 50% -12%,rgba(255,255,255,.06),transparent 55%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.07),transparent 60%);
  box-shadow:inset 0 0 50px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.03)}

/* mode dial: recessed collar with scale ticks, knurled skirt, spun-metal cap, green pointer */
.unit .dial{position:relative;width:80px;height:80px;display:grid;place-items:center}
.unit .dial::before{content:"";position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle,#0A0C0F 60%,#15181D);box-shadow:inset 0 3px 6px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.07)}
.unit .dial .tick{position:absolute;left:50%;top:0;width:2px;height:6px;margin-left:-1px;border-radius:1px;background:var(--ink);transform-origin:50% 40px;transform:rotate(var(--t))}
.unit .knob{width:56px;height:56px;box-shadow:0 3px 0 #101216,0 9px 12px -2px rgba(0,0,0,.75),inset 0 0 0 1px rgba(0,0,0,.6);
  background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.2),transparent 55%),radial-gradient(circle,transparent 62%,rgba(0,0,0,.5)),
    repeating-conic-gradient(from 0deg,#69707B 0 4deg,#2A2F36 4deg 8deg)}
.unit .knob::before{inset:7px;background:radial-gradient(circle at 36% 26%,rgba(255,255,255,.4),transparent 30%),
    repeating-radial-gradient(circle,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
    conic-gradient(from 200deg,#363C45,#7E8691,#3A4049,#1F2329,#5C636D,#363C45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 3px rgba(0,0,0,.5),0 2px 3px rgba(0,0,0,.6)}
.unit .knob::after{top:10px;height:13px;background:var(--ok);box-shadow:0 0 6px var(--ok),0 0 12px rgba(91,240,160,.45);transform-origin:50% 18px;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.unit .knob:hover::before{filter:brightness(1.12)}
.unit .modes span{color:var(--ink)}
.unit .modes span.on{color:var(--volt)}

/* power: bat-handle toggle on a nut and plate; flips down for standby */
.unit .toggle{width:46px;height:62px;border-radius:8px;
  background:radial-gradient(circle,#A3AAB4 0 6px,#59606A 6.5px 8px,#1B1E23 8.5px 10.5px,transparent 11px),linear-gradient(180deg,#2C3138,#181B20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.6),0 3px 6px rgba(0,0,0,.6),0 0 0 1px #08090B}
.unit .toggle i{left:50%;right:auto;top:auto;bottom:50%;width:8px;height:24px;margin-left:-4px;border-radius:4px 4px 2px 2px;transform-origin:50% 100%;transform:rotate(0);
  background:linear-gradient(90deg,#4F565F,#E8ECF0 45%,#9AA1AA 62%,#3F454D);box-shadow:0 6px 6px -2px rgba(0,0,0,.6);transition:transform .22s cubic-bezier(.3,1.6,.5,1)}
.unit .toggle i::before{content:"";position:absolute;left:50%;top:-5px;width:12px;height:12px;margin-left:-6px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#fff 0 1.5px,#C9CFD6 3px,#6B727C 6px,#3A4048);box-shadow:0 2px 3px rgba(0,0,0,.6)}
.unit .toggle[aria-pressed="false"] i{top:auto;transform:rotate(180deg)}

/* LEDs: lens in a bezel ring with a specular point */
.unit .led{width:9px;height:9px;position:relative;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.3) 0 1px,transparent 2.5px),#17242A;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7),0 0 0 2px #0B0D10,0 0 0 3px rgba(255,255,255,.07)}
.unit .led.on{background:radial-gradient(circle at 35% 30%,#fff 0 1px,transparent 2.5px),radial-gradient(circle,#A6F5FF,var(--volt) 55%,#1497B0);
  box-shadow:0 0 0 2px #0B0D10,0 0 0 3px rgba(255,255,255,.07),0 0 8px var(--volt),0 0 16px var(--volt-glow)}
.unit .led.ok{background:radial-gradient(circle at 35% 30%,#fff 0 1px,transparent 2.5px),radial-gradient(circle,#C2FFDD,var(--ok) 55%,#1E9E5B);
  box-shadow:0 0 0 2px #0B0D10,0 0 0 3px rgba(255,255,255,.07),0 0 8px var(--ok),0 0 14px rgba(91,240,160,.35)}
.unit .led.amber{background:radial-gradient(circle at 35% 30%,#fff 0 1px,transparent 2.5px),radial-gradient(circle,#FFE0A8,var(--amber) 55%,#B36F12);
  box-shadow:0 0 0 2px #0B0D10,0 0 0 3px rgba(255,255,255,.07),0 0 8px var(--amber),0 0 14px rgba(255,181,71,.35)}
.unit .leds{display:grid;grid-template-columns:repeat(4,auto);gap:14px}
.unit .st{display:grid;justify-items:center;gap:8px}
.unit .st .silk{font-size:10px;letter-spacing:.1em}
.unit .serial{align-items:center;gap:12px}
.unit .serial .silk:not(.mono){flex:1}
@media (max-width:520px){.unit .leds{display:none}.unit .dial{width:72px;height:72px}.unit .dial .tick{transform-origin:50% 36px}}

/* ---------- section heads ---------- */
.sec{padding-block:clamp(72px,10vw,140px)}
.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.h2{font:700 clamp(40px,6vw,84px)/.9 var(--f-display);text-transform:uppercase;margin:0;text-wrap:balance}
.lede{color:var(--ivory);max-width:52ch;margin:18px 0 0}

/* ---------- the lab ---------- */
.lab-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
@media (min-width:1080px){.lab-grid{grid-template-columns:minmax(0,clamp(280px,22vw,420px)) minmax(0,1fr);gap:clamp(56px,5vw,96px)}}
/* the lab uses more of a wide screen than the 1440px page measure, so it never reads as a narrow centred column */
@media (min-width:1500px){.lab-grid{max-width:1760px}}
.index{position:relative}
@media (min-width:1080px){.index-in{position:sticky;top:120px}}
.patch{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:4px}
.patch a{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:12px 14px;border-radius:6px;text-decoration:none;transition:background .25s}
.patch a:hover,.patch a.cur{background:var(--volt-wash)}
.jack{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,#000 35%,#3C424B 40%,#1C1F24 70%);box-shadow:0 0 0 2px #0D0F12,0 1px 0 3px rgba(255,255,255,.04);transition:box-shadow .3s}
.patch a.cur .jack{box-shadow:0 0 0 2px var(--volt),0 0 12px var(--volt-glow)}
.patch .nm{font:700 22px/1 var(--f-display);text-transform:uppercase;letter-spacing:.03em}
.patch .st{font:500 10.5px/1 var(--f-mono);color:var(--steel)}
.patch .st.live,.status.live{color:var(--ok)}
.patch .st.build,.status.build{color:var(--amber)}
@media (max-width:1079px){.patch{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}

.rack{position:relative;padding:14px clamp(26px,3.4vw,46px);border-radius:10px;background:#07090B;box-shadow:inset 0 0 40px rgba(0,0,0,.9),0 0 0 1px #000}
.rack::before,.rack::after{content:"";position:absolute;top:0;bottom:0;width:clamp(18px,2.4vw,30px);
  background:radial-gradient(circle at 50% 50%,#000 3px,transparent 3.5px) 50% 8px/100% 22px repeat-y,var(--brushed-lite);box-shadow:inset 0 0 0 1px #000}
.rack::before{left:4px;border-radius:6px 0 0 6px}
.rack::after{right:4px;border-radius:0 6px 6px 0}
.mods{display:grid;gap:10px}
.mod{--u:1;position:relative;border-radius:5px;background:var(--brushed);padding:18px 22px 18px 54px;min-height:calc(var(--u) * 92px);scroll-margin-top:110px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.6),0 2px 0 #000,0 6px 14px rgba(0,0,0,.5);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.mod:hover{transform:translateY(-3px) scale(1.008);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.6),0 2px 0 #000,0 26px 40px -6px rgba(0,0,0,.85),0 0 0 1px rgba(61,227,255,.2)}
.mod .ears{position:absolute;left:14px;top:14px;bottom:14px;display:flex;flex-direction:column;justify-content:space-between}
.mod .handle{position:absolute;left:30px;top:22%;bottom:22%;width:7px;border-radius:4px;background:linear-gradient(90deg,#596170,#262A31);box-shadow:2px 0 4px rgba(0,0,0,.6)}
.mod-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;justify-content:space-between}
.mod h3{font:900 clamp(30px,3.6vw,46px)/.9 var(--f-display);text-transform:uppercase;margin:0;letter-spacing:.01em}
.mod .tag{font:500 11px/1.3 var(--f-mono);color:var(--volt)}
.status{display:inline-flex;align-items:center;gap:8px;font:400 10.5px/1 var(--f-silk);letter-spacing:.16em;color:var(--steel);text-transform:uppercase;padding:7px 10px;border-radius:3px;background:#0A0C0F;box-shadow:inset 0 1px 3px rgba(0,0,0,.8)}
.mod-body{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-top:16px;align-items:center}
@media (min-width:760px){.mod-body{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.mod p{margin:0;color:var(--ivory);max-width:50ch}
.mod .meta{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.chip{font:500 10.5px/1 var(--f-mono);color:var(--steel);padding:6px 8px;border-radius:3px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.lcd{border-radius:6px;padding:14px;background:#030A0C;box-shadow:inset 0 2px 8px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.05);color:var(--volt);font:500 10.5px/1.2 var(--f-mono);position:relative;overflow:hidden}
.lcd::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px)}
.lcd .row{display:grid;grid-template-columns:92px 1fr 34px;gap:10px;align-items:center;margin-block:5px}
.bar{height:7px;border-radius:1px;background:rgba(61,227,255,.08);overflow:hidden}
.bar i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,rgba(61,227,255,.4),var(--volt));box-shadow:0 0 8px var(--volt-glow);animation:fillbar 2.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes fillbar{from{width:8%}}
.matrix{display:grid;grid-template-columns:repeat(9,1fr);gap:8px;justify-items:center;padding:6px 0}
.matrix .led{width:10px;height:10px}
.lcd-foot{display:flex;justify-content:space-between;margin-top:10px;color:var(--volt-soft)}
.switch3{display:flex;gap:0;border-radius:6px;padding:4px;background:#0A0C0F;box-shadow:inset 0 2px 6px rgba(0,0,0,.9);width:max-content}
.switch3 button{appearance:none;border:0;cursor:pointer;font:400 10.5px/1 var(--f-silk);letter-spacing:.16em;padding:12px 16px;border-radius:4px;color:#5E6878;background:transparent;display:flex;align-items:center;gap:8px}
.switch3 button[aria-pressed="true"]{color:var(--ink);background:var(--brushed-lite);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 6px rgba(0,0,0,.6)}
.switch3 .locked{color:#4C3532}
.shake{animation:shake .4s}
@keyframes shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.rs5-msg{margin-top:10px;font:500 10.5px/1.3 var(--f-mono);color:var(--amber);min-height:1.3em}
.rs5-side{display:grid;gap:12px}
.spark{height:70px;width:100%;display:block}
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.phase{padding:10px 8px;border-radius:4px;background:#0A0C0F;box-shadow:inset 0 1px 3px rgba(0,0,0,.9);display:grid;gap:6px}
.phase .silk{font-size:9.5px;letter-spacing:.1em}
.phase b{font:500 12px/1 var(--f-mono);color:var(--ink)}
.phase.now{box-shadow:inset 0 0 0 1px rgba(61,227,255,.4),0 0 14px rgba(61,227,255,.12)}
.count{display:flex;align-items:baseline;gap:12px;margin-top:14px}
.count .n{font:900 56px/.9 var(--f-display);color:var(--volt);text-shadow:0 0 18px var(--volt-glow)}
.tape{position:absolute;inset:0;border-radius:5px;pointer-events:none;overflow:hidden}
.tape::before{content:"";position:absolute;left:-10%;right:-10%;top:50%;height:34px;margin-top:-17px;transform:rotate(-2.2deg);
  background:repeating-linear-gradient(-45deg,#E8B33C 0 16px,#141414 16px 32px);box-shadow:0 4px 12px rgba(0,0,0,.6);opacity:.92}
.dag-side{display:grid;gap:12px}
.cycle{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cycle span{font:500 10.5px/1 var(--f-mono);text-align:center;padding:10px 4px;border-radius:4px;background:#0A0C0F;color:var(--steel);box-shadow:inset 0 1px 3px rgba(0,0,0,.9);transition:color .3s,box-shadow .3s}
.cycle span.on{color:var(--volt);box-shadow:inset 0 0 0 1px rgba(61,227,255,.5),0 0 14px rgba(61,227,255,.18);text-shadow:0 0 6px var(--volt-glow)}
.cycle span.done{color:var(--volt-soft)}
.eye-lcd{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center}
.ring{width:120px;height:120px}
.legend{display:grid;gap:6px}
.legend div{display:grid;grid-template-columns:10px 1fr auto;gap:8px;align-items:center}
.legend i{width:8px;height:8px;border-radius:2px}
.phone{justify-self:center;width:210px;border-radius:30px;padding:10px;background:linear-gradient(160deg,#3A4049,#16191D);box-shadow:0 20px 40px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.15),inset 0 0 0 1px #000}
.notch{width:60px;height:14px;border-radius:0 0 10px 10px;background:#000;margin:0 auto -14px;position:relative;z-index:2}
.ph-screen{border-radius:22px;background:#030A0C;padding:24px 14px 14px;display:grid;gap:9px;font:500 10.5px/1.2 var(--f-mono);color:var(--volt-soft);box-shadow:inset 0 2px 8px rgba(0,0,0,.95)}
.ph-row{display:flex;justify-content:space-between;gap:8px}
.ph-row b{color:var(--volt);font-weight:500;text-align:right}
.ph-wave{display:flex;align-items:center;gap:3px;height:34px}
.ph-wave i{flex:1;background:var(--volt);border-radius:1px;height:20%;box-shadow:0 0 5px var(--volt-glow);transition:height .12s}
.ph-foot{display:flex;align-items:center;gap:8px;color:var(--amber);font-size:10.5px;margin-top:4px}
.scramble{font-family:var(--f-mono);color:var(--ink)}

/* ---------- lab: cool engineered text palette ---------- */
#lab{--lab-title:#F3F8FB;--lab-body:#D6E2EA;--lab-etch:#BCCFDB;--lab-tag:#B8ECF6}
#lab .lede,#lab .mod p{color:var(--lab-body)}
#lab .mod h3,#lab .patch .nm{color:var(--lab-title)}
#lab .lab-title .acc{color:var(--volt)}

/* engraved: dark lip above, faint light catch below, as if cut into the plate. Small labels only; body copy stays clean */
#lab .mod .tag,#lab .chip,#lab .count .silk,#lab .phase .silk,#lab .eyebrow .silk,#lab .status,#lab .switch3 button,#lab .patch .st{text-shadow:0 -1px 0 rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.07)}
#lab .mod .tag{color:var(--lab-tag);letter-spacing:.02em}
#lab .chip{color:var(--lab-etch);background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.14));box-shadow:inset 0 1px 2px rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.06)}
#lab a.chip:hover{color:var(--volt)}
#lab .count .silk,#lab .phase .silk{color:var(--lab-etch)}
/* status windows: recessed into the plate with a machined rim */
#lab .status{background:linear-gradient(180deg,#07090B,#0D1013);box-shadow:inset 0 1px 3px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(0,0,0,.6)}

/* ---------- lab: shared hardware ---------- */
#lab .mod{box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 1px 0 0 rgba(255,255,255,.05),inset -1px 0 0 rgba(0,0,0,.4),inset 0 -2px 0 rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.3),
  0 2px 0 #0D0F12,0 3px 0 #050607,0 12px 20px -6px rgba(0,0,0,.75)}
#lab .mod:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 1px 0 0 rgba(255,255,255,.05),inset -1px 0 0 rgba(0,0,0,.4),inset 0 -2px 0 rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.3),
  0 2px 0 #0D0F12,0 3px 0 #050607,0 26px 40px -6px rgba(0,0,0,.85),0 0 0 1px rgba(61,227,255,.16)}
#lab .mod-head{padding-bottom:12px}
#lab .mod .screw{box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),0 0 0 2px rgba(0,0,0,.4),0 0 0 3px rgba(255,255,255,.05)}

/* ---------- lab: one environment, different equipment ---------- */
/* Reggie: satin-finished alloy, a brighter chamfer along the top edge */
#m-reggie .face{background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 35%),repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),linear-gradient(180deg,#2B3038,#1D2127)}
/* 13: dark anodised graphite with a fine vertical grain */
#m-13 .face{background:repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px),linear-gradient(180deg,#1B1F25,#131619)}
/* Orbit: brushed alloy with a perforated cooling strip down the right edge */
#m-orbit::after{content:"";position:absolute;right:3px;top:18px;bottom:18px;width:7px;border-radius:3px;pointer-events:none;
  background:radial-gradient(circle,#030405 1.4px,transparent 1.9px) 50% 0/8px 8px repeat-y;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
/* RS5: black lacquered front with a single diagonal sheen, like a trading terminal */
#m-rs5 .face{background:linear-gradient(112deg,rgba(255,255,255,.045) 0 22%,transparent 22.4%),linear-gradient(180deg,#15181C,#0D0F12)}
/* Daggerbill: hardened steel; a thin top edge runs breach red to secure green, its whole lifecycle in one line */
#m-dagger .face{background:repeating-linear-gradient(90deg,rgba(255,255,255,.014) 0 1px,transparent 1px 2px),linear-gradient(180deg,#22262C,#16191D)}
#m-dagger .face::after{content:"";position:absolute;left:14px;right:14px;top:0;height:2px;border-radius:0 0 2px 2px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,90,78,.75),rgba(255,181,71,.6) 50%,rgba(91,240,160,.75))}
/* Eyeson: matte powder coat with a fine dot texture */
#m-eyeson .face{background:radial-gradient(circle,rgba(255,255,255,.035) .6px,transparent 1px) 0 0/5px 5px,linear-gradient(180deg,#22272E,#191C21)}
/* InfoTake: soft-touch casing, smoother and more rounded, like a handheld */
#m-infotake .face{border-radius:9px;background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 40%),linear-gradient(180deg,#22262C,#181B1F)}

/* ---------- lab: title reveals (driven by js/main.js; never armed under reduced motion) ---------- */
.mod h3{position:relative}
.mod h3 .ch{display:inline-block;position:relative}
.mod h3 .ch.g{color:transparent}
.mod h3 .ch.g::after{content:attr(data-g);position:absolute;left:50%;top:0;transform:translateX(calc(-50% + var(--dx,0em)));color:var(--gc)}
/* Reggie */
.fx-lock.arm .ch{opacity:0}
.fx-lock.run .ch{animation:lockIn .45s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 40ms) both}
.fx-lock.run::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--volt);transform-origin:left;animation:lockLine .8s .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes lockIn{from{opacity:0;transform:translateY(.16em);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes lockLine{0%{transform:scaleX(0);opacity:1}60%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
/* 13 */
.fx-console.run .ch:not(.on){visibility:hidden}
.fx-console .ch.cur{background:var(--volt);color:transparent}
.fx-console .ch.caret::after{content:"";position:absolute;left:100%;margin-left:.08em;bottom:.04em;width:.42em;height:.09em;background:var(--volt);animation:caret .5s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
/* Orbit */
.fx-modules.arm .ch{color:transparent;-webkit-text-stroke:1px rgba(61,227,255,.6)}
.fx-modules.run .ch{animation:modOn .36s steps(3,end) calc(120ms + var(--i) * 130ms) both}
@keyframes modOn{0%{color:transparent;-webkit-text-stroke:1px rgba(61,227,255,.6)}50%{color:var(--volt);-webkit-text-stroke:0 transparent}100%{color:var(--lab-title);-webkit-text-stroke:0 transparent}}
/* RS5 */
.fx-ticker .ch.tick{animation:tick .5s ease-out}
@keyframes tick{from{color:var(--ok)}}
/* InfoTake */
.mod h3 .ch.wave{color:transparent}
.mod h3 .ch.wave::before,.mod h3 .ch.wave::after{content:"";position:absolute;top:50%;width:.09em;border-radius:1px;background:var(--volt);transform:translateY(-50%);transition:height .07s}
.mod h3 .ch.wave::before{left:28%;height:var(--l1)}
.mod h3 .ch.wave::after{left:62%;height:var(--l2)}
/* Daggerbill */
.mod h3 .ch.scan::before{content:"";position:absolute;right:-.05em;top:.06em;bottom:.06em;width:2px;background:var(--volt)}
.fx-breach.verify .ch.scan::before{background:var(--ok)}
.mod h3.secure::after{content:"";position:absolute;left:100%;margin-left:.16em;bottom:.1em;width:.15em;height:.15em;border-radius:1px;background:var(--ok);box-shadow:0 0 6px rgba(91,240,160,.45);animation:secureIn .4s ease-out both}
@keyframes secureIn{from{opacity:0;transform:scale(.4)}}
/* Brian: letters converge from four directions, then resolve together */
.fx-converge .ch{transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s ease-out;transition-delay:calc(var(--i) * 40ms)}
.fx-converge.arm .ch{opacity:0;transform:translate(var(--cx,0),var(--cy,0));transition:none}
.fx-converge.synth .ch{animation:synth .65s ease-out}
@keyframes synth{0%{color:var(--volt);text-shadow:0 0 14px var(--volt-glow)}100%{color:var(--lab-title);text-shadow:none}}
@media (prefers-reduced-motion:reduce){.mod h3 .ch,.mod h3::after{animation:none!important}}
@media (prefers-reduced-motion:reduce){.fx-converge .ch{transition:none}}

/* ---------- lab: depth, displays and state colour ---------- */
/* the wall: a darker recessed bay with faint vertical extrusion lines, so mounted units read in front of it */
#lab .rack{background:repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 6px),#06080A;
  box-shadow:inset 0 0 50px rgba(0,0,0,.95),inset 0 2px 0 rgba(0,0,0,.8),0 0 0 1px #000,0 1px 0 1px rgba(255,255,255,.04)}
#lab .mods{gap:18px}
/* displays: sunk behind a dark bezel ring with a lit lip, faint glass sheen, readouts in cool white rather than all-cyan */
#lab .lcd{color:var(--lab-body);background:linear-gradient(165deg,rgba(255,255,255,.04),transparent 38%),#030A0C;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.95),inset 0 0 0 1px rgba(0,0,0,.9),0 0 0 3px #0E1114,0 0 0 4px rgba(255,255,255,.05),0 2px 0 4px rgba(0,0,0,.5)}
#lab .lcd-foot{color:var(--lab-etch)}
/* control wells (Daggerbill cycle and phases, RS5 switch): bevelled recesses */
#lab .cycle span,#lab .phase,#lab .switch3{box-shadow:inset 0 1px 3px rgba(0,0,0,.9),inset 0 0 0 1px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.05)}

/* Reggie: cyan bars, no bloom; a steel threshold mark at 80; scores above it read green, the weak area amber */
#m-reggie .bar{position:relative}
#m-reggie .bar i{box-shadow:none}
#m-reggie .bar::after{content:"";position:absolute;left:80%;top:0;bottom:0;width:1px;background:rgba(233,237,242,.6)}
#m-reggie .row span:last-child{color:var(--lab-title);text-align:right}
#m-reggie .row.hi span:last-child{color:var(--ok)}
#m-reggie .row.lo span:last-child{color:var(--amber)}
/* Orbit: module count turns green once every module reports healthy */
#modcount.ok{color:var(--ok)}
/* RS5: flush black glass terminal rather than a bezelled screen */
#m-rs5 .lcd{box-shadow:inset 0 3px 10px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.09),0 1px 0 1px rgba(0,0,0,.6)}
/* RS5 mode: a single engaged position. LIVE in green, LOCKED a readable secondary qualifier, not a fault */
#m-rs5 .rs5-state .sw-on{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:4px;font:400 10.5px/1 var(--f-silk);letter-spacing:.16em;
  background:var(--brushed-lite);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 6px rgba(0,0,0,.6);text-shadow:0 -1px 0 rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.07)}
#m-rs5 .rs5-state b{font-weight:400;color:var(--ok)}
#m-rs5 .rs5-state .lk{color:var(--lab-etch)}
/* Daggerbill: the cycle carries its own state language. Attack steps light red, repair steps amber, hardening steps green */
#m-dagger .cycle span.on{text-shadow:none}
/* audit discovers (cyan), breach and re-breach attack (red), repair amber, harden and guard defend (green) */
#m-dagger .cycle span:nth-child(2).on,#m-dagger .cycle span:nth-child(4).on{color:var(--alert);box-shadow:inset 0 0 0 1px rgba(255,90,78,.6),0 0 10px rgba(255,90,78,.12)}
#m-dagger .cycle span:nth-child(3).on{color:var(--amber);box-shadow:inset 0 0 0 1px rgba(255,181,71,.6),0 0 10px rgba(255,181,71,.12)}
#m-dagger .cycle span:nth-child(n+5).on{color:var(--ok);box-shadow:inset 0 0 0 1px rgba(91,240,160,.6),0 0 10px rgba(91,240,160,.12)}
#m-dagger .cycle span.done{color:var(--lab-etch)}
#m-dagger .count .n{color:var(--amber);font-size:40px;text-shadow:none}
/* the closed loop is the product: larger, firmer lifecycle keys; grids may shrink so nothing overruns the panel */
#m-dagger .cycle,#m-dagger .phases{grid-template-columns:repeat(3,minmax(0,1fr))}
#m-dagger .phases{grid-template-columns:repeat(4,minmax(0,1fr))}
#m-dagger .cycle span{font-size:11.5px;letter-spacing:.04em;padding:13px 4px}
@media (max-width:520px){#m-dagger .phases{grid-template-columns:repeat(2,minmax(0,1fr))}#m-dagger .cycle span{font-size:10px;letter-spacing:0;padding:11px 2px}}
#m-dagger .phase.now{box-shadow:inset 0 0 0 1px rgba(255,181,71,.55),0 0 12px rgba(255,181,71,.1)}
/* Eyeson: a rounder instrument window; labels in cool white, values in bright white, the reconciled line stays green */
#m-eyeson .lcd{border-radius:12px}
#m-eyeson .legend div:not(:last-child) span{color:var(--lab-body)}
#m-eyeson .legend div:not(:last-child) span:last-child{color:var(--lab-title)}
#m-eyeson .legend .recon{grid-template-columns:1fr auto;margin-top:4px;color:var(--lab-etch)}
#m-eyeson .legend .recon b{font-weight:500;color:var(--ok)}
#m-eyeson .legend .recon span:last-child{color:var(--ok)}
/* narrow screens: legend sits under the ring so long class names and values both stay visible */
@media (max-width:520px){#m-eyeson .eye-lcd{grid-template-columns:minmax(0,1fr)}}
/* InfoTake: values in white, the card amber while scanning, the footer amber when queued and green once synced */
#m-infotake .ph-screen{color:var(--lab-etch)}
#m-infotake .ph-row b{color:var(--lab-title)}
#it-card.pend{color:var(--amber)}
#itfoot.synced{color:var(--ok)}
/* journey strip: done segments green, the current one cyan, the stage named on the right */
#m-infotake .ph-steps{display:flex;align-items:center;gap:4px;margin-bottom:2px}
#m-infotake .ph-steps i{width:16px;height:3px;border-radius:2px;background:#17282E;transition:background .3s}
#m-infotake .ph-steps i.on{background:var(--volt)}
#m-infotake .ph-steps i.done{background:var(--ok)}
#m-infotake .ph-steps span{margin-left:auto;font-size:10px;letter-spacing:.06em;color:var(--volt)}
#m-infotake .ph-steps.synced span{color:var(--ok)}
#m-infotake .ph-row b.pend{color:var(--amber)}
#m-infotake .ph-row b.live{color:var(--volt)}
#m-infotake .ph-row b.ok::after{content:" ✓";color:var(--ok)}

/* ---------- Brian: the core unit ----------
   Dark titanium with a cyan inlay along the top edge; its display maps the advisory infrastructure */
#m-brian .face{background:linear-gradient(180deg,rgba(61,227,255,.05),transparent 30%),repeating-linear-gradient(90deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px),linear-gradient(180deg,#1E232A,#14171C)}
#m-brian .face::after{content:"";position:absolute;left:14px;right:14px;top:0;height:2px;border-radius:0 0 2px 2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(61,227,255,.85) 20%,rgba(61,227,255,.85) 80%,transparent)}
#m-brian .brian-lcd{padding:14px 14px 12px}
#m-brian .b-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;align-items:stretch}
#m-brian .b-in{display:grid;gap:7px;position:relative;padding-right:14px}
#m-brian .b-in::after{content:"";position:absolute;right:0;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,rgba(61,227,255,.15),rgba(61,227,255,.7),rgba(61,227,255,.15))}
#m-brian .b-in span{display:flex;align-items:center;gap:8px;color:var(--lab-body);transition:color .3s}
#m-brian .b-in span .led{width:7px;height:7px}
#m-brian .b-in span.on{color:var(--volt)}
#m-brian .b-in span.on .led{background:var(--volt);box-shadow:0 0 6px var(--volt),0 0 12px var(--volt-glow)}
#m-brian .b-in span.done .led{background:#7FD8E8;box-shadow:0 0 4px rgba(61,227,255,.35)}
#m-brian .b-core{display:grid;align-content:start;gap:6px}
#m-brian .b-core > b{font:700 22px/1 var(--f-display);letter-spacing:.06em;color:var(--lab-title)}
#m-brian #b-state{color:var(--volt)}
#m-brian .b-bar{height:6px;border-radius:1px;background:rgba(61,227,255,.08);overflow:hidden;margin-top:2px}
#m-brian .b-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,rgba(61,227,255,.35),var(--volt));transition:width .8s cubic-bezier(.2,.8,.2,1)}
#m-brian .b-out{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(61,227,255,.14);color:var(--lab-body)}
#m-brian .b-out b{margin-left:auto;font-weight:500;color:var(--lab-title)}
#m-brian .b-out.ready > span:nth-child(2){color:var(--ok)}
#m-brian .lcd-foot span:last-child{color:var(--lab-title)}
@media (max-width:520px){
  #m-brian .b-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  #m-brian .b-in{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 0 12px}
  #m-brian .b-in::after{top:auto;bottom:0;left:0;right:0;width:auto;height:1px;background:linear-gradient(90deg,rgba(61,227,255,.15),rgba(61,227,255,.7),rgba(61,227,255,.15))}
}

/* sharper small text: the engraving shadow softened small type, and the hover zoom resampled it. Lift only now */
#lab .mod .tag,#lab .chip,#lab .status,#lab .patch .st{text-shadow:none}
#lab .mod .tag{font-size:11.5px}
#lab .chip{font-size:11px}
#lab .mod:hover{transform:translateY(-3px)}


/* ---------- the lab: mounted hardware modules ----------
   Each product is a two-layer unit: a dark anodised rack frame (ears, screws, handle) carrying a raised faceplate in
   the product's own finish. Inside the faceplate: title, an engraved subtitle strip, copy, recessed capability
   chips, and the instrument in its own bevelled housing behind glass. Depth comes from light and shadow only, so
   text is never put on a 3D-transformed surface. */
#lab .mod{padding:10px 14px 10px 46px;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px),linear-gradient(180deg,#191C21,#0F1114);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.45),
    0 2px 0 #0B0C0E,0 4px 0 #040506,0 18px 30px -10px rgba(0,0,0,.85)}
#lab .mod:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.45),
    0 2px 0 #0B0C0E,0 4px 0 #040506,0 30px 44px -12px rgba(0,0,0,.9),0 0 0 1px rgba(61,227,255,.14)}
#lab .mod .handle{left:29px}
.face{position:relative;border-radius:7px;padding:16px 20px 18px;background:var(--brushed);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 1px 0 0 rgba(255,255,255,.05),inset -1px 0 0 rgba(0,0,0,.35),inset 0 -2px 0 rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.75),0 3px 0 rgba(0,0,0,.45),0 8px 14px -6px rgba(0,0,0,.7)}

/* subtitle strip: an engraved band across the faceplate */
#lab .mod .tag{display:block;margin:0 -20px;padding:8px 20px;background:linear-gradient(180deg,rgba(0,0,0,.38),rgba(0,0,0,.2));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.75),inset 0 -1px 0 rgba(255,255,255,.05)}

/* status: a bezelled indicator window */
#lab .status{padding:7px 11px;border-radius:4px;box-shadow:inset 0 1px 3px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.7),0 0 0 3px #15181C,0 0 0 4px rgba(255,255,255,.06)}
#lab .status .led{width:8px;height:8px}

/* instrument housing: every instrument sits in a bevelled, anchored housing; displays get a glass cover */
#lab .housing{position:relative;padding:11px;border-radius:10px;
  background:radial-gradient(circle at 7px 7px,#5A616C 1.3px,#1C2025 1.9px,transparent 2.5px),
    radial-gradient(circle at calc(100% - 7px) 7px,#5A616C 1.3px,#1C2025 1.9px,transparent 2.5px),
    radial-gradient(circle at 7px calc(100% - 7px),#5A616C 1.3px,#1C2025 1.9px,transparent 2.5px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px),#5A616C 1.3px,#1C2025 1.9px,transparent 2.5px),
    linear-gradient(180deg,#1A1D22,#101215);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.7),0 10px 18px -8px rgba(0,0,0,.8)}
#lab .lcd::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;
  background:linear-gradient(158deg,rgba(255,255,255,.08),rgba(255,255,255,.015) 34%,transparent 34.5%)}

/* Reggie: measured. A calibration scale behind every bar */
#m-reggie .bar{background:repeating-linear-gradient(90deg,rgba(61,227,255,.16) 0 1px,transparent 1px 10%),rgba(61,227,255,.06)}
/* Orbit: modules on a routed bus */
#m-orbit .matrix{background:linear-gradient(rgba(61,227,255,.16),rgba(61,227,255,.16)) 0 calc(25% + 1px)/100% 1px no-repeat,
  linear-gradient(rgba(61,227,255,.16),rgba(61,227,255,.16)) 0 calc(75% - 1px)/100% 1px no-repeat}
/* RS5: the analysis stack shares one housing; the mode switch reads as a mounted control */
#m-rs5 .rs5-side{gap:10px}
/* Daggerbill: harder edged. Chamfered faceplate and housing */
#m-dagger .face{clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
#m-dagger .housing{clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
/* EyesOn: the composition ring sits in a round machined bezel */
#m-eyeson .ring{border-radius:50%;box-shadow:0 0 0 4px #0B0E11,0 0 0 5px rgba(255,255,255,.07),inset 0 0 12px rgba(0,0,0,.8)}
/* InfoTake: the capture handset docks into a cradle */
#m-infotake .phone{position:relative;box-shadow:0 20px 40px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.15),inset 0 0 0 1px #000}
#m-infotake .phone::after{content:"";position:absolute;left:12%;right:12%;bottom:-12px;height:12px;border-radius:0 0 10px 10px;
  background:linear-gradient(180deg,#22262C,#0E1013);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 10px rgba(0,0,0,.6)}
@media (max-width:760px){#lab .mod{padding:8px 10px 8px 40px}.face{padding:14px 16px 16px}#lab .mod .tag{margin:0 -16px;padding:7px 16px}}

/* proportions: each unit splits copy and instrument differently */
@media (min-width:760px){
  #m-brian .mod-body{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  #m-13 .mod-body{grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr)}
  #m-rs5 .mod-body{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  #m-dagger .mod-body{grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr)}
  #m-infotake .mod-body{grid-template-columns:minmax(0,1.5fr) minmax(210px,.8fr)}
}

/* ---------- interlude ---------- */
/* no background of its own: the statement sits on the same dark field as the lab above and the desk below. Short travel
   (50vh of pinned scroll) so all three lines land in one gesture and the scene does not hold on an empty field */
.interlude{position:relative;height:150vh;background:transparent}
.pin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.floor{position:absolute;left:-50%;right:-50%;bottom:-10%;height:80%;transform:perspective(500px) rotateX(62deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(61,227,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(61,227,255,.22) 1px,transparent 1px);background-size:80px 80px;
  mask-image:linear-gradient(0deg,#000 10%,transparent 85%);-webkit-mask-image:linear-gradient(0deg,#000 10%,transparent 85%)}
.sun{position:absolute;left:50%;top:44%;width:50vmin;height:50vmin;margin:-25vmin 0 0 -25vmin;border-radius:50%;background:radial-gradient(circle,rgba(61,227,255,.22),transparent 65%)}
/* letterbox bars are soft fades into the page field rather than solid black bands, so neighbouring sections join seamlessly */
.letterbox{position:absolute;left:0;right:0;height:12vh;z-index:3;pointer-events:none}
.letterbox.t{top:0;background:linear-gradient(180deg,var(--void),transparent)}.letterbox.b{bottom:0;background:linear-gradient(0deg,var(--void),transparent)}
.lines{position:relative;z-index:2;text-align:left;padding-inline:var(--gutter);width:100%;max-width:1600px}
.lines p{margin:0;font:900 clamp(44px,8.6vw,138px)/.88 var(--f-display);text-transform:uppercase;color:#1F252C;transition:color .6s,text-shadow .6s,transform .9s cubic-bezier(.2,.8,.2,1);transform:translateX(-2vw)}
.lines p:nth-child(2){padding-left:8vw}
.lines p:nth-child(3){padding-left:16vw}
.lines p.lit{color:var(--ink);transform:none}
.lines p.lit em{color:var(--volt);font-style:normal;text-shadow:0 0 40px rgba(61,227,255,.4)}
.lines br.mb{display:none}
/* narrow screens: each line breaks deliberately in two, so no word is left alone on a row */
@media (max-width:760px){
  .lines br.mb{display:inline}
  .lines p{font-size:clamp(44px,14.2vw,84px)}
}

/* ---------- desk ---------- */
.desk-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media (min-width:1080px){.desk-wrap{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:end}}
.desk-scroll{overflow-x:auto;padding-bottom:10px}
.desk{display:grid;grid-template-columns:repeat(5,minmax(118px,1fr));gap:2px;min-width:620px;padding:18px;border-radius:12px;background:#0B0D10;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9),inset 0 0 0 1px #000,inset 0 1px 0 rgba(255,255,255,.05);transform:perspective(1600px) rotateX(8deg);transform-origin:50% 100%}
.strip{display:grid;justify-items:center;gap:14px;padding:16px 10px 18px;background:var(--brushed);border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.strip.master{background:linear-gradient(180deg,#1A2A30,#11181C);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(61,227,255,.25)}
.strip .knob{width:44px;height:44px}
.strip .knob::after{top:6px;height:11px;transform-origin:50% 16px}
.strip .knob::before{inset:6px}
.vu{display:flex;flex-direction:column-reverse;gap:3px;width:16px;padding:4px;border-radius:3px;background:#030506;box-shadow:inset 0 1px 3px rgba(0,0,0,.9)}
.vu i{height:5px;border-radius:1px;background:#0E2026}
.vu i.on{background:var(--volt);box-shadow:0 0 5px var(--volt-glow)}
.vu i.on.hot{background:var(--amber);box-shadow:0 0 5px rgba(255,181,71,.5)}
.vu i.on.clip{background:var(--alert);box-shadow:0 0 5px rgba(255,90,78,.6)}
.meter-row{display:flex;gap:12px;align-items:flex-end}
.fader-slot{position:relative;height:150px;width:30px;display:grid;place-items:center}
.fader-slot::before{content:"";position:absolute;top:6px;bottom:6px;left:50%;width:4px;margin-left:-2px;background:#000;border-radius:2px;box-shadow:0 1px 0 rgba(255,255,255,.07)}
.fader{writing-mode:vertical-lr;direction:rtl;appearance:none;-webkit-appearance:none;width:30px;height:150px;background:transparent;margin:0;position:relative;cursor:grab}
.fader::-webkit-slider-runnable-track{background:transparent;width:30px}
.fader::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:20px;border-radius:3px;background:linear-gradient(180deg,#7A828E,#3A3F48 45%,#20242A 55%,#4C535D);box-shadow:0 5px 8px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.3)}
.fader::-moz-range-thumb{width:30px;height:20px;border:0;border-radius:3px;background:linear-gradient(180deg,#7A828E,#3A3F48 45%,#20242A 55%,#4C535D);box-shadow:0 5px 8px rgba(0,0,0,.7)}
.fader::-moz-range-track{background:transparent}
.btns{display:flex;gap:6px}
.pad{appearance:none;border:0;cursor:pointer;width:30px;height:22px;border-radius:3px;font:500 10.5px/1 var(--f-mono);color:var(--steel);background:linear-gradient(180deg,#2C3139,#1B1E23);box-shadow:0 2px 0 #08090B,inset 0 1px 0 rgba(255,255,255,.1)}
.pad:active{transform:translateY(2px);box-shadow:none}
.pad[aria-pressed="true"]{color:#1A0E00;background:var(--amber);box-shadow:0 0 10px rgba(255,181,71,.5)}
/* channel readouts: dark glass windows set into the strip, in place of paper scribble strips */
.chan{width:100%;display:grid;gap:5px;padding:9px 8px 10px;border-radius:4px;background:linear-gradient(170deg,rgba(255,255,255,.035),transparent 45%),#030A0C;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.95),inset 0 0 0 1px rgba(0,0,0,.8),0 0 0 2px #0E1114,0 0 0 3px rgba(255,255,255,.05);position:relative}
.chan b{font:700 17px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:#F3F8FB}
.chan span:last-child{font:500 8.5px/1.25 var(--f-mono);letter-spacing:.02em;color:#BCCFDB}
.chan-led{position:absolute;right:8px;top:9px;width:5px;height:5px;border-radius:50%;background:#16282E;transition:background .4s,box-shadow .4s}
.strip.active .chan-led{background:var(--volt);box-shadow:0 0 6px var(--volt-glow)}
.strip.master .chan{box-shadow:inset 0 2px 6px rgba(0,0,0,.95),inset 0 0 0 1px rgba(61,227,255,.35),0 0 0 2px #0E1114,0 0 0 3px rgba(61,227,255,.12)}
.strip.master .chan b{color:var(--volt)}
.strip.master.active .chan-led{background:var(--ok);box-shadow:0 0 6px rgba(91,240,160,.5)}
.desk-note{color:#D6E2EA}
.desk-note .desk-line{margin-top:22px;font:700 clamp(22px,2vw,28px)/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;color:var(--ink);max-width:24ch}
.desk-note .desk-line span{display:block;color:var(--volt)}
/* heading: centred over the desk, initials picked out in the accent */
.desk-head{text-align:center;display:grid;justify-items:center}
.desk-head .eyebrow{justify-content:center}
.desk-title{font-size:clamp(46px,7vw,104px);position:relative;padding-bottom:22px}
.desk-title .ini{color:var(--volt)}
.desk-title::after{content:"";position:absolute;left:50%;bottom:0;width:140px;height:1px;margin-left:-70px;background:linear-gradient(90deg,transparent,rgba(61,227,255,.7),transparent)}

/* ---------- keycaps ---------- */
.tray{margin-top:44px;padding:clamp(14px,2vw,22px);border-radius:14px;background:linear-gradient(180deg,#14171C,#0C0E11);box-shadow:inset 0 2px 10px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.05)}
.tray-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 4px 14px}
.tray-head .silk{color:#BCCFDB;text-shadow:0 -1px 0 rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.07)}
.tray-head .silk:first-child{color:var(--volt)}
.keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
@media (min-width:1080px){.keys{grid-template-columns:repeat(5,minmax(0,1fr))}}
.key{--d:6px;appearance:none;border:0;cursor:pointer;text-align:left;border-radius:8px;padding:12px 12px 16px;min-height:78px;color:var(--ink);position:relative;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(180deg,#2D323A,#20242A);box-shadow:0 var(--d) 0 #0A0B0D,0 calc(var(--d) + 4px) 10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -6px 10px rgba(0,0,0,.25);
  transition:transform .07s,box-shadow .07s}
.key:hover{background:linear-gradient(180deg,#323840,#22262C)}
.key:active,.key.hit{--d:1px;transform:translateY(5px)}
.key b{overflow-wrap:anywhere;font:700 18px/1.05 var(--f-display);text-transform:uppercase;letter-spacing:.03em;margin-top:8px}
.key em{font:500 10px/1.2 var(--f-mono);font-style:normal;color:#8FE7F5;margin-top:8px}
.key.accent em{color:#0B4552}
.key small{font:500 10.5px/1.2 var(--f-mono);color:var(--steel)}
.key.wide{grid-column:span 2}
.key.accent{background:linear-gradient(180deg,#56E8FF,#19B6D4);color:#03161B}
.key.accent small{color:#0B4552}
.key.hit{box-shadow:0 1px 0 #0A0B0D,0 0 0 1px var(--volt),0 0 22px var(--volt-glow)}

/* ---------- build desk: fit, clarity and intelligence layers ---------- */
/* composition: tighter vertical rhythm, wider measure, desk and copy as one band, layers pulled up to meet them */
#desk.sec{padding-block:clamp(20px,2vw,30px) clamp(64px,7vw,110px);scroll-margin-top:62px}
/* desktop: the desk is its own full-screen scene. It fills the viewport below the fixed header with its content centred,
   and a proximity snap settles the scroll on it, so the tail of the pinned statement scene (empty field and black
   letterbox) is never left sitting above it. Smaller screens keep natural flow */
@media (min-width:1080px) and (min-height:720px){
  html{scroll-snap-type:y proximity}
  #desk.sec{min-height:calc(100vh - 62px);display:flex;flex-direction:column;justify-content:center;padding-block:20px 18px;scroll-snap-align:start}
  #desk.sec > .wrap{width:100%}
}
#desk .wrap{max-width:1600px}
#desk .desk-head .eyebrow{margin-bottom:8px}
#desk .desk-title{font-size:clamp(44px,5.2vw,84px);padding-bottom:14px}
#desk .desk-wrap{margin-top:26px;gap:clamp(28px,3.5vw,56px)}
@media (min-width:1080px){#desk .desk-wrap{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:center}}
#desk .desk{padding:14px}
#desk .strip{padding:12px 10px 12px;gap:11px}
#desk .fader-slot,#desk .fader{height:132px}
#desk .desk-scroll{padding-bottom:4px}

/* copy: larger, cool, comfortable measure */
#desk .desk-note p{font-size:clamp(17px,1.25vw,19px);line-height:1.6;color:#DCE8F1;max-width:56ch;margin:0 0 12px}
#desk .desk-note .desk-line{margin-top:18px;font-size:clamp(26px,2.4vw,36px);line-height:1.05;color:#F3F8FB;max-width:30ch;text-wrap:balance}

/* channel labels: cut into the strip's metal rather than floating on glass. Cool white, larger, engraved */
#desk .chan{gap:6px;padding:10px 9px 11px;background:linear-gradient(180deg,#111418,#191D22);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.85),inset 0 0 0 1px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.07)}
#desk .chan b{font-size:18px;letter-spacing:.07em;color:#F3F8FB;text-shadow:0 -1px 0 rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.08)}
#desk .chan span:last-child{font-size:9.5px;line-height:1.3;letter-spacing:.03em;color:#D8E8F2;text-shadow:0 -1px 0 rgba(0,0,0,.9)}
#desk .strip.master .chan{box-shadow:inset 0 2px 4px rgba(0,0,0,.85),inset 0 0 0 1px rgba(61,227,255,.4),0 1px 0 rgba(255,255,255,.07)}
#desk .strip.master .chan b{color:var(--volt)}
/* one chassis, five modules: equal columns and fixed row geometry, so every control row and readout panel
   sits at the same height, width and baseline whatever its text length. Only meters, faders and BUILD's cyan vary */
#desk .desk{grid-template-columns:repeat(5,minmax(0,1fr))}
#desk .strip{grid-template-rows:auto auto 22px 100px;align-content:start;justify-items:stretch}
#desk .strip > .knob,#desk .strip > .meter-row,#desk .strip > .btns{justify-self:center}
#desk .btns{height:22px;align-items:center}
#desk .btns .pad{height:22px}
#desk .chan{box-sizing:border-box;height:100px;align-content:start;grid-template-rows:auto auto;gap:7px;padding:11px 10px 14px;border-radius:4px}
#desk .chan b{font-size:18px;line-height:1;font-weight:700}
#desk .chan-led{top:11px;right:9px}
/* descriptions: proportional sans at a medium weight. The condensed mono at 600 filled its tight counters at this
   size and, drawn on the desk's 3D-tilted surface, read as blur. No shadow, full-opacity icy white */
#desk .chan span:last-child{font:500 11.5px/1.35 var(--f-body);letter-spacing:.01em;color:#F1F7FB;text-shadow:none}
#desk .strip.master .chan span:last-child{color:#EEF6FB}

/* intelligence layers: interacting modules, not a stack list. One shared edge treatment, so no layer is labelled
   as human or machine; together they feed one dominant outcome. */
#desk .tray{margin-top:18px;padding:12px 16px 14px}
#desk .tray-head{margin:0 2px 12px}
#desk .tray-head .silk:last-child{color:#D8E8F2}
#desk .layers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:760px){#desk .layers{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1080px){#desk .layers{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(240px,1.25fr);grid-template-rows:auto auto}}
#desk .layer{--d:3px;min-height:0;padding:12px 14px 13px;justify-content:flex-start;gap:6px;
  background:linear-gradient(180deg,#1B1F25,#14171B);box-shadow:0 var(--d) 0 #08090B,0 calc(var(--d) + 4px) 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(0,0,0,.4)}
#desk .layer:hover{background:linear-gradient(180deg,#20252C,#171A1F)}
#desk .layer::before{content:"";position:absolute;left:12px;right:12px;top:0;height:2px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,#E9EDF2,var(--volt))}
#desk .layer.wide{grid-column:span 2}
#desk .layer b{margin-top:0;font-size:18px;color:#F3F8FB}
#desk .layer em{margin-top:0;font-size:10.5px;letter-spacing:.02em;color:#D8E8F2}
/* the outcome: dominant, spanning both rows, fed by a signal bus from the layers */
#desk .result{grid-column:1/-1;min-height:0;padding:16px 18px 16px;justify-content:space-between;gap:6px}
@media (min-width:1080px){#desk .result{grid-column:5;grid-row:1/3}}
#desk .result small{color:#0B4552}
#desk .result b{margin-top:2px;font-size:clamp(30px,2.6vw,40px);line-height:.95}
#desk .result em{margin-top:0;font-size:10.5px;color:#0B4552}
#desk .result .ship{font:500 10.5px/1 var(--f-mono);letter-spacing:.06em;color:#03161B;margin-top:8px;text-transform:uppercase}
@media (min-width:1080px){#desk .result::before{content:"";position:absolute;left:-7px;top:12%;bottom:12%;width:2px;border-radius:2px;
  background:linear-gradient(180deg,transparent,rgba(61,227,255,.85),transparent);box-shadow:0 0 8px var(--volt-glow)}}

/* ---------- operator ---------- */
.op{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;align-items:center}
@media (min-width:980px){.op{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:90px}}
.lanyard{display:grid;justify-items:center;perspective:1000px}
.strap{width:26px;height:110px;background:repeating-linear-gradient(0deg,#0F5E6E 0 6px,#127286 6px 12px);box-shadow:inset 0 0 6px rgba(0,0,0,.6)}
.clip{width:46px;height:26px;border-radius:6px;margin-top:-4px;background:var(--brushed-lite);box-shadow:0 4px 8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.2)}
.badge{width:min(100%,340px);margin-top:-6px;border-radius:16px;padding:22px;position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1);
  background:linear-gradient(160deg,#EEF1F4,#CDD3DA);color:#121417;box-shadow:0 40px 70px -20px rgba(0,0,0,.9),inset 0 1px 0 #fff;transform-origin:50% 0}
.badge::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(61,227,255,.3) 45%,rgba(170,214,232,.26) 52%,transparent 66%);background-size:250% 100%;background-position:var(--sheen,50%) 0;mix-blend-mode:multiply;opacity:.55;pointer-events:none}
.badge .slot{width:60px;height:10px;border-radius:6px;background:#9AA2AC;margin:0 auto 18px;box-shadow:inset 0 2px 3px rgba(0,0,0,.5)}
.badge .top{display:flex;justify-content:space-between;align-items:center}
.badge .top .silk{color:#0B4552}
.mono-mark{width:100%;aspect-ratio:4/3;max-width:100%;border-radius:10px;margin:16px 0;display:grid;place-items:center;background:#0B0D10;position:relative;overflow:hidden}
.mono-mark img{width:100%;height:100%;object-fit:cover;display:block}
/* boot screen: same black the scope canvas is cleared to, so the fade reveals the trace on an identical field.
   The glass layer (.unit .glass) sits above both, so scanlines and reflections stay constant through the fade.
   The logo's baked navy backing plate is keyed out by #logoKey (luminance mask), leaving only the mark itself. */
.splash{position:absolute;inset:0;display:grid;place-items:center;z-index:3;background:#02080A;transition:opacity .9s}
.splash img{width:78%;filter:url(#logoKey) drop-shadow(0 0 18px rgba(61,227,255,.35));animation:flick 1.4s steps(1) 1}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.splash.gone{opacity:0;pointer-events:none}
@keyframes flick{0%{opacity:0}8%{opacity:1}12%{opacity:.2}18%{opacity:1}}
.mono-mark b{font:900 120px/.8 var(--f-display);color:transparent;-webkit-text-stroke:1.5px var(--volt);letter-spacing:-.02em;text-shadow:0 0 30px rgba(61,227,255,.25)}
.mono-mark .grid-plane{mask-image:none;-webkit-mask-image:none;opacity:.6;background-size:20px 20px}
.badge h3{font:900 34px/.9 var(--f-display);text-transform:uppercase;margin:0}
.badge dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:14px 0 0;font:500 11px/1.3 var(--f-mono)}
.badge dt{color:#0B4552}
.badge dd{margin:0}
.barcode{height:34px;margin-top:16px;background:repeating-linear-gradient(90deg,#121417 0 2px,transparent 2px 4px,#121417 4px 5px,transparent 5px 9px,#121417 9px 12px,transparent 12px 13px)}
.op-text p{color:#DCE8F1;max-width:62ch;font-size:clamp(16px,1.25vw,18px);line-height:1.65}
.op-title .acc{color:var(--volt)}
.op-text p.big{font:500 clamp(22px,2.2vw,30px)/1.35 var(--f-body);color:#F3F8FB;max-width:34ch}
.op-text p.big{margin-top:24px}
/* desktop: one complete scene below the fixed header. Card and copy share the screen, the copy column runs wide so the
   approved text needs fewer lines, and the section centres itself within the remaining viewport height */
#operator{scroll-margin-top:62px}
@media (min-width:1080px) and (min-height:720px){
  #operator.sec{min-height:calc(100vh - 62px);display:flex;flex-direction:column;justify-content:flex-start;padding-block:clamp(22px,3.4vh,40px) 24px}
  #operator.sec > .wrap{width:100%}
  #operator .op{grid-template-columns:minmax(0,370px) minmax(0,1fr);gap:clamp(40px,4.5vw,80px);align-items:start}
  #operator .lanyard{align-self:center}
  #operator .strap{height:clamp(44px,6.4vh,74px)}
  #operator .badge{width:min(100%,clamp(280px,36.4vh,328px));padding:19px;
    /* restrained depth: a faint cool edge to lift it off the black, and layered soft shadow beneath. No glow */
    box-shadow:0 0 0 1px rgba(180,205,222,.12),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.16),0 22px 40px -16px rgba(0,0,0,.95),0 60px 90px -30px rgba(0,0,0,.9)}
  #operator .badge .slot{margin-bottom:14px}
  #operator .mono-mark{margin:12px 0}
  #operator .badge h3{font-size:30px}
  #operator .barcode{height:28px;margin-top:12px}
  /* two deliberate lines: THE PERSON BEHIND / THE SYSTEMS. */
  #operator .op-title{font-size:clamp(52px,min(6vw,9.6vh),92px);line-height:.92}
  #operator .op-title .ln{display:block}
  #operator .op-text .eyebrow{margin-bottom:12px}
  #operator .op-text p.big{margin-top:18px;font-size:clamp(20px,1.65vw,25px);max-width:46ch}
  #operator .op-text p:not(.big){max-width:680px;margin:14px 0 0;line-height:1.7}
}/* short desktop screens: keep comfortable room under the last paragraph */
@media (min-width:1080px) and (min-height:720px) and (max-height:800px){
  #operator .op-title{font-size:clamp(48px,min(6vw,8.6vh),84px)}
  #operator .op-text p.big{margin-top:14px}
  #operator .op-text p:not(.big){margin-top:11px;line-height:1.66}
}


/* ---------- contact ---------- */
.transmit{position:relative;border-radius:18px;overflow:hidden;background:var(--brushed);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 60px 100px -40px rgba(0,0,0,.95)}
.transmit-in{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding:clamp(24px,4vw,56px)}
@media (min-width:980px){.transmit-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}}
.transmit .corner{position:absolute;display:flex;gap:6px}
.transmit .corner.tl{left:14px;top:14px}.transmit .corner.tr{right:14px;top:14px}.transmit .corner.bl{left:14px;bottom:14px}.transmit .corner.br{right:14px;bottom:14px}
.term{border-radius:10px;background:#030709;box-shadow:inset 0 3px 12px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.05);padding:20px;display:grid;gap:14px;position:relative}
.term label{display:grid;gap:6px;font:500 11px/1 var(--f-mono);color:var(--volt-soft)}
.term input,.term textarea{width:100%;font:500 15px/1.4 var(--f-mono);color:var(--volt);background:transparent;border:0;border-bottom:1px dashed #164650;padding:8px 0;caret-color:var(--volt);text-shadow:0 0 6px var(--volt-glow);resize:vertical}
.term input:focus,.term textarea:focus{outline:none;border-bottom-color:var(--volt)}
/* placeholders: a muted steel-cyan, dimmer and plainer than typed text (bright cyan with a glow), so they never read as entered data */
.term ::placeholder{color:#5A8C98;opacity:1;text-shadow:none}
.send-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.big-btn{width:96px;height:96px;border-radius:50%;border:0;cursor:pointer;position:relative;flex:none;background:radial-gradient(circle at 50% 35%,#7FF0FF,#11A9C7 60%,#0A6E82);
  box-shadow:0 0 0 8px #14171B,0 0 0 9px rgba(255,255,255,.06),0 8px 0 8px #0A0C0F,0 20px 30px 8px rgba(0,0,0,.6),0 0 40px rgba(61,227,255,.35);transition:transform .08s,box-shadow .08s;font:400 12px/1 var(--f-silk);letter-spacing:.14em;color:#03161B}
.big-btn:active{transform:translateY(5px);box-shadow:0 0 0 8px #14171B,0 0 0 9px rgba(255,255,255,.06),0 3px 0 8px #0A0C0F,0 10px 20px 8px rgba(0,0,0,.6),0 0 60px rgba(61,227,255,.6)}
.tx-status{font:500 12px/1.4 var(--f-mono);color:var(--steel);flex:1;min-width:180px}

footer{padding-block:0 clamp(28px,3vw,44px)}
#contact .lede{color:#DCE8F1}

/* project logo strip: full width, drifting left to right. Two identical sets, so translating -50% to 0 loops seamlessly.
   Each logo carries its own scale (--s) from its measured artwork box, so wide wordmarks and square marks read at
   equal visual weight; --dy centres the artwork, --ml/--mr pull in transparent padding so gaps look even */
.logo-strip{--H:clamp(44px,5vw,66px);--gap:clamp(48px,6vw,96px);position:relative;overflow:hidden;padding-block:clamp(22px,3vw,38px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.logo-track{display:flex;width:max-content;animation:logoDrift 46s linear infinite}
.logo-set{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.logo-set li{display:flex;align-items:center;height:calc(var(--H) * 1.2);margin-right:var(--gap)}
.logo-set img{display:block;height:calc(var(--H) * var(--s));width:auto;max-width:none;
  margin-left:calc(var(--H) * var(--ml));margin-right:calc(var(--H) * var(--mr));transform:translateY(calc(var(--H) * var(--dy)))}
/* the track slides by exactly one set width (--logo-shift, measured by main.js); 50% is the two-set fallback */
@keyframes logoDrift{from{transform:translateX(calc(var(--logo-shift,50%) * -1))}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.logo-track{animation:none}}
@media (max-width:760px){.logo-strip{--H:38px;--gap:40px}.logo-track{animation-duration:34s}}
.plate{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;align-items:center;padding:18px 22px;border-radius:8px;margin-inline:1cm;min-height:62px;background:linear-gradient(180deg,#C7CDD4,#99A1AB);color:#15181C;box-shadow:inset 0 1px 0 #fff,0 10px 30px rgba(0,0,0,.6)}
.plate .silk{color:#0B4552}
/* footer chassis plate: logo in a recessed dark window left, legal links centred, copyright right */
footer .plate{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;padding:10px 16px;min-height:0}
/* logo sits directly on the plate: an sRGB colour matrix turns its white lettering black (whiteness is read from the red
   channel, which cyan lacks) and restores the cyan accents' brightness, so only the white changes */
.foot-logo{justify-self:start;display:flex;align-items:center;padding:5px 6px}
.foot-logo img{display:block;height:34px;width:auto;filter:url(#logoInk)}
.foot-links{display:flex;gap:clamp(18px,2.6vw,36px);justify-content:center}
.foot-links a,.foot-copy{font:400 10.5px/1.2 var(--f-silk);letter-spacing:.16em;text-transform:uppercase;color:#15181C;text-decoration:none;white-space:nowrap}
.foot-links a{padding:6px 0;border-bottom:1px solid transparent;transition:border-color .2s}
.foot-links a[href]{cursor:pointer}
.foot-links a[href]:hover,.foot-links a[href]:focus-visible{border-bottom-color:var(--volt)}
.foot-copy{justify-self:end}
@media (max-width:760px){
  footer .plate{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;padding:14px 16px;gap:12px}
  .foot-logo,.foot-copy{justify-self:center}
  .foot-links{flex-wrap:wrap;gap:2px 22px}
}
.plate b{font:900 26px/1 var(--f-display);letter-spacing:.04em}

.reveal{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .interlude{height:auto}.pin{position:relative;height:auto;padding-block:120px}.lines p{color:var(--ink);transform:none}
}

/* ---------- build desk: final polish ----------
   One console bed carries both levels: the five-channel desk with its brief, and the intelligence layers below,
   divided by an engraved seam. Depth comes from bevels, recesses and edge light only (no 3D on text). */
#desk .desk-chassis{position:relative;margin-top:14px;padding:14px 16px 12px;border-radius:18px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 5px),linear-gradient(180deg,#121519,#0A0C0F);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.8),inset 0 0 0 1px rgba(0,0,0,.6),
    0 0 0 1px #040506,0 2px 0 #08090B,0 30px 60px -30px rgba(0,0,0,.95)}
#desk .desk-chassis::before,#desk .desk-chassis::after{content:"";position:absolute;top:8px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#A8AFB9,#4A505A 55%,#23272D);box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),0 0 0 2px rgba(0,0,0,.35)}
#desk .desk-chassis::before{left:10px}
#desk .desk-chassis::after{right:10px}
#desk .desk-chassis > .desk-wrap{margin-top:0}
#desk .desk-chassis > .tray{position:relative;margin-top:16px;border-radius:12px;
  background:linear-gradient(180deg,#101317,#0B0D10);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.85),inset 0 0 0 1px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.05)}
/* engraved seam between the two levels, with a lit signal trace running along it */
#desk .desk-chassis > .tray::before{content:"";position:absolute;left:8px;right:8px;top:-10px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(61,227,255,.55) 30%,rgba(61,227,255,.55) 70%,transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.04),0 -1px 0 rgba(0,0,0,.8)}
#desk .desk-wrap{gap:clamp(28px,3vw,48px)}

/* the desk itself: a raised faceplate set into the bed */
#desk .desk{border-radius:12px;background:linear-gradient(180deg,#0E1013,#090A0C);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9),inset 0 0 0 1px #000,inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.03)}
/* channel strips: bevelled faceplates with anchor points top and bottom */
#desk .strip{position:relative;border-radius:5px;
  background:radial-gradient(circle at 8px 8px,#5A616C 1.2px,#1C2025 1.8px,transparent 2.4px),
    radial-gradient(circle at calc(100% - 8px) 8px,#5A616C 1.2px,#1C2025 1.8px,transparent 2.4px),var(--brushed);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 1px 0 0 rgba(255,255,255,.04),inset -1px 0 0 rgba(0,0,0,.45),inset 0 -2px 0 rgba(0,0,0,.55)}
#desk .strip.master{background:radial-gradient(circle at 8px 8px,#5A616C 1.2px,#1C2025 1.8px,transparent 2.4px),
    radial-gradient(circle at calc(100% - 8px) 8px,#5A616C 1.2px,#1C2025 1.8px,transparent 2.4px),linear-gradient(180deg,#1A2A30,#10171B);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.55),inset 0 0 0 1px rgba(61,227,255,.28)}
/* knobs: knurled skirt, spun cap, crisp pointer */
#desk .strip .knob{box-shadow:0 3px 0 #0D0F12,0 7px 10px -2px rgba(0,0,0,.75),inset 0 0 0 1px rgba(0,0,0,.6);
  background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.18),transparent 55%),radial-gradient(circle,transparent 62%,rgba(0,0,0,.5)),
    repeating-conic-gradient(from 0deg,#646B76 0 5deg,#2A2F36 5deg 10deg)}
#desk .strip .knob::before{background:radial-gradient(circle at 36% 26%,rgba(255,255,255,.38),transparent 32%),
    repeating-radial-gradient(circle,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),conic-gradient(from 200deg,#363C45,#7E8691,#3A4049,#1F2329,#5C636D,#363C45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 3px rgba(0,0,0,.5),0 2px 3px rgba(0,0,0,.6)}
/* faders: deeper slot with a scale either side, grooved cap */
#desk .fader-slot::before{width:5px;margin-left:-2.5px;background:#020304;box-shadow:inset 0 1px 2px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.08)}
#desk .fader-slot::after{content:"";position:absolute;top:10px;bottom:10px;left:50%;width:22px;margin-left:-11px;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(233,237,242,.28) 0 1px,transparent 1px 12.5%) 0 0/4px 100% no-repeat,
    repeating-linear-gradient(180deg,rgba(233,237,242,.28) 0 1px,transparent 1px 12.5%) 100% 0/4px 100% no-repeat}
#desk .fader{position:relative;z-index:1}
#desk .fader::-webkit-slider-thumb{height:22px;border-radius:3px;
  background:linear-gradient(180deg,transparent 47%,#0B0D10 47% 53%,transparent 53%),linear-gradient(180deg,#8A929E,#3A3F48 42%,#1C2025 58%,#4C535D);
  box-shadow:0 6px 9px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.6)}
#desk .fader::-moz-range-thumb{height:22px;background:linear-gradient(180deg,transparent 47%,#0B0D10 47% 53%,transparent 53%),linear-gradient(180deg,#8A929E,#3A3F48 42%,#1C2025 58%,#4C535D)}
.strip.master .fader::-webkit-slider-thumb{background:linear-gradient(180deg,transparent 47%,var(--volt) 47% 53%,transparent 53%),linear-gradient(180deg,#8A929E,#3A3F48 42%,#1C2025 58%,#4C535D)}
/* pads: bevelled keys */
#desk .pad{color:#EEF4F8;background:linear-gradient(180deg,#323840,#1B1E23);box-shadow:0 2px 0 #07080A,inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(0,0,0,.4)}
#desk .pad[aria-pressed="true"]{color:#1A0E00;background:var(--amber);box-shadow:0 0 10px rgba(255,181,71,.45),inset 0 1px 0 rgba(255,255,255,.4)}
/* meters: recessed bezel */
#desk .vu{box-shadow:inset 0 1px 3px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.6),0 1px 0 1px rgba(255,255,255,.05)}

/* the brief: refined rhythm */
#desk .desk-note p{line-height:1.6;letter-spacing:.003em;margin:0 0 14px}
#desk .desk-note .desk-line{margin-top:20px;padding-top:18px;border-top:1px solid rgba(61,227,255,.16);letter-spacing:.015em}

/* intelligence layers: embedded modules with a recessed descriptor slot */
#desk .layer{background:linear-gradient(180deg,#1C2026,#15181D);
  box-shadow:0 var(--d) 0 #07080A,0 calc(var(--d) + 5px) 12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(0,0,0,.45)}
#desk .layer em{display:block;margin-top:3px;padding:4px 7px;border-radius:4px;background:rgba(0,0,0,.32);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.05)}
#desk .layer.wide{background:linear-gradient(180deg,#20252C,#171A1F)}

/* working system: the machine's output. A lit smoked-glass module rather than a bright banner */
#desk .result{background:linear-gradient(160deg,rgba(61,227,255,.16),rgba(61,227,255,.04) 55%),linear-gradient(180deg,#0E2329,#0A171B);
  color:var(--ink);box-shadow:0 var(--d) 0 #04161B,0 calc(var(--d) + 8px) 20px rgba(0,0,0,.6),inset 0 0 0 1px rgba(61,227,255,.55),
    inset 0 1px 0 rgba(255,255,255,.18),0 0 24px rgba(61,227,255,.12)}
#desk .result:hover{background:linear-gradient(160deg,rgba(61,227,255,.2),rgba(61,227,255,.06) 55%),linear-gradient(180deg,#10282F,#0B1A1F)}
#desk .result small{color:#9FE9F6}
#desk .result b{color:var(--volt)}
#desk .result em{color:#DCEFF5}
#desk .result .ship{color:#9FE9F6}

/* ---------- contact: isometric transmit unit ----------
   The unit is sheared, not rotated in 3D: a 2D skew keeps the type and form drawn as crisp vector text, while the
   angle reads like the reference. Thickness is a stack of offset layers extruded down-left, ending in a thin
   cyan powered edge, then a contact shadow and broad ambient occlusion. Phones get the flat unit. */
@media (min-width:980px){
  #contact .wrap{padding-block:28px 40px}
  #contact .transmit{overflow:visible;transform:skew(-1.6deg,2.4deg);transform-origin:50% 50%;margin-inline:clamp(12px,2vw,28px);
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px),linear-gradient(165deg,#272B32,#1A1D22 55%,#14171B);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 1px 0 0 rgba(255,255,255,.06),inset -1px 0 0 rgba(0,0,0,.5),inset 0 -2px 0 rgba(0,0,0,.6),
      -1px 1px 0 rgb(34,38,45),-2px 2px 0 rgb(31,35,41),-3px 3px 0 rgb(29,32,38),-4px 4px 0 rgb(27,30,36),-5px 5px 0 rgb(25,28,33),-6px 6px 0 rgb(23,26,31),-7px 7px 0 rgb(21,24,29),-8px 8px 0 rgb(20,23,27),-9px 9px 0 rgb(19,21,25),-10px 10px 0 rgb(18,20,24),-11px 11px 0 rgb(17,19,23),-12px 12px 0 rgb(16,18,21),-13px 13px 0 rgb(15,17,20),-14px 14px 0 rgb(14,16,19),
      -15px 15px 0 rgba(61,227,255,.55),-16px 16px 0 #07090B,
      -16px 18px 10px rgba(61,227,255,.12),-24px 34px 26px rgba(0,0,0,.85),-40px 70px 90px -10px rgba(0,0,0,.9)}
  /* machined seam inset from the face edge */
  #contact .transmit::before{content:"";position:absolute;inset:9px;border-radius:12px;pointer-events:none;
    border:1px solid rgba(0,0,0,.55);box-shadow:0 1px 0 rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.04)}
}
#contact .transmit .corner .screw{width:12px;height:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),0 0 0 2px rgba(0,0,0,.4),0 0 0 3px rgba(255,255,255,.05)}

/* recessed form screen: machined bezel, deep inner shadow, smoked glass with a soft reflection */
#contact .term{background:linear-gradient(170deg,#06101A,#020608 60%);
  box-shadow:inset 0 4px 16px rgba(0,0,0,.95),inset 0 0 0 1px rgba(0,0,0,.9),0 0 0 6px #121519,0 0 0 7px rgba(255,255,255,.07),
    0 1px 0 7px rgba(0,0,0,.6),0 14px 26px -8px rgba(0,0,0,.8)}
#contact .term::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 30%,transparent 30.5%)}
#contact .term input,#contact .term textarea{position:relative;border-bottom-color:rgba(61,227,255,.32)}
#contact .term input:focus,#contact .term textarea:focus{border-bottom-color:var(--volt)}
#contact .term label{position:relative;color:#9FE9F6}
#contact .tx-status{color:#DCE8F1}

/* send: a raised illuminated key seated in a machined collar */
#contact .big-btn{box-shadow:0 0 0 7px #101317,0 0 0 8px rgba(255,255,255,.08),0 5px 0 7px #07090B,0 16px 26px 6px rgba(0,0,0,.65),
  inset 0 2px 0 rgba(255,255,255,.5),inset 0 -6px 12px rgba(0,60,72,.55),0 0 28px rgba(61,227,255,.28)}
#contact .big-btn:hover{box-shadow:0 0 0 7px #101317,0 0 0 8px rgba(255,255,255,.1),0 5px 0 7px #07090B,0 16px 26px 6px rgba(0,0,0,.65),
  inset 0 2px 0 rgba(255,255,255,.55),inset 0 -6px 12px rgba(0,60,72,.5),0 0 38px rgba(61,227,255,.4)}
#contact .big-btn:active{transform:translateY(4px);box-shadow:0 0 0 7px #101317,0 0 0 8px rgba(255,255,255,.08),0 1px 0 7px #07090B,0 8px 16px 6px rgba(0,0,0,.6),
  inset 0 2px 0 rgba(255,255,255,.4),inset 0 -4px 10px rgba(0,60,72,.5),0 0 44px rgba(61,227,255,.45)}

/* ---------- contact closing scene ----------
   Contact unit, project rail and base plate read as one composition in one dark field. On desktop the contact
   section fills whatever the viewport leaves after the header and footer (rail plus plate, about 205px), with the
   unit centred in it; the rail sits just clear of the unit's extruded edge and the plate closes directly under it */
#contact{scroll-margin-top:62px}
@media (min-width:980px) and (min-height:720px){
  #contact.sec{padding-block:0!important;min-height:calc(100vh - 62px - 205px);display:flex;flex-direction:column;justify-content:center}
  #contact.sec > .wrap{width:100%;padding-block:18px 6px}
  .logo-strip{padding-block:24px 14px}
  footer{padding-bottom:16px}
}
@media (min-width:980px) and (min-height:720px) and (max-height:800px){
  #contact.sec > .wrap{padding-block:8px 0}
  .logo-strip{padding-block:14px 8px}
  footer{padding-bottom:10px}
}

/* ---------- audit remediation ----------
   Targeted fixes only: navigation on small screens, laptop-band layout, the build desk on narrow screens, the
   intelligence layers grid, focus visibility and contact-form clarity. No change to the visual identity. */

/* mobile menu: all four destinations stay reachable under 720px, behind one touch-sized key */
@media (max-width:719px){
  .rail-in{gap:12px}
  .menu-btn{display:inline-flex;align-items:center;gap:10px;margin-left:auto;min-height:44px;padding:0 16px;border:0;border-radius:4px;cursor:pointer;
    font:400 11px/1 var(--f-silk);letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
    background:linear-gradient(180deg,#16191D,#0D0F12);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 0 #050608}
  .menu-btn:hover,.rail.open .menu-btn{color:var(--volt)}
  .menu-ico{display:grid;gap:4px;width:16px}
  .menu-ico i{display:block;height:2px;border-radius:1px;background:currentColor;transition:transform .2s,opacity .2s}
  .rail.open .menu-ico i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .rail.open .menu-ico i:nth-child(2){opacity:0}
  .rail.open .menu-ico i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:6px;margin:0;padding:12px var(--gutter) 18px;
    background:#000;border-bottom:1px solid rgba(61,227,255,.14);box-shadow:0 24px 30px rgba(0,0,0,.7)}
  .rail.open .nav{display:flex}
  .nav a{display:flex;align-items:center;min-height:48px;padding:0 18px;font-size:12px}
}

/* lab index: a deliberate grid at every width. Four across on laptops, two across below that, nothing wraps or collides */
@media (max-width:1079px){
  .patch{grid-template-columns:repeat(2,minmax(0,1fr))}
  .patch a{gap:10px;padding:12px 10px}
  .patch .nm{white-space:nowrap;font-size:21px}
  .patch .st{white-space:nowrap}
}
@media (min-width:860px) and (max-width:1079px){.patch{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* build desk: five channels in one row where they fit; below 760px they reflow into two columns with BUILD across the
   full width, so every channel stays on screen with no horizontal scrolling and no tilt clipping the edges */
#desk .desk{min-width:0}
@media (max-width:760px){
  #desk .desk-scroll{overflow:visible}
  #desk .desk{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;transform:none}
  #desk .strip.master{grid-column:1/-1}
}

/* intelligence layers: no empty cell at any width. Three-up tablets give the last layer a double-width slot;
   two-up phones already pair up evenly after the double-width first layer */
@media (min-width:760px) and (max-width:1079px){#desk .layer:nth-child(7){grid-column:span 2}}

/* focus: the cyan signal ring on every control, kept to a restrained 2px */
.nav a:focus-visible,.menu-btn:focus-visible{color:var(--volt);outline-offset:2px}
.btn:focus-visible{outline-offset:4px}
.unit .knob:focus-visible,.unit .toggle:focus-visible{outline-offset:5px}
.strip .knob:focus-visible,.pad:focus-visible,.key:focus-visible{outline-offset:3px}
.big-btn:focus-visible{outline-offset:13px}
#contact .term input:focus,#contact .term textarea:focus{outline:2px solid var(--volt);outline-offset:5px;border-radius:2px;border-bottom-style:solid;border-bottom-color:var(--volt)}
#contact .term label:focus-within{color:var(--volt)}

/* hero unit: the controls row and serial plate hold together at every width. Narrow units tighten the LED row,
  so the instruction stays on one line */
@media (max-width:1199px){
  .unit .controls{gap:14px}
  .unit .leds{gap:8px}
  .unit .serial .silk:not(.mono){white-space:nowrap;letter-spacing:.12em}
}
@media (max-width:520px){.unit .serial .silk:not(.mono){font-size:10px;letter-spacing:.08em}}
@media (max-width:420px){.unit .serial .screw{display:none}}
@media (max-width:359px){.unit .serial .silk:not(.mono){white-space:normal;text-align:center;text-wrap:balance}}
@media (min-width:521px) and (max-width:1199px){
  .unit .controls{grid-template-columns:auto auto minmax(0,1fr)}
  .unit .controls > div:empty{display:none}
  .unit .leds{justify-self:end}
}

/* lab instruments: each housing reports its own width, so a display re-flows to fit whatever column it lands in
   (sidebar layouts, laptops, tablets) instead of spilling past its bezel */
#lab .housing{container-type:inline-size}
@container (max-width:255px){
  #m-brian .b-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  #m-brian .b-in{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 0 12px}
  #m-brian .b-in::after{top:auto;bottom:0;left:0;right:0;width:auto;height:1px;background:linear-gradient(90deg,rgba(61,227,255,.15),rgba(61,227,255,.7),rgba(61,227,255,.15))}
}
@container (max-width:337px){#m-dagger .phases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:340px){#m-eyeson .eye-lcd{grid-template-columns:minmax(0,1fr)}}
@container (max-width:215px){
  #m-orbit .matrix{column-gap:4px}
  #m-reggie .lcd .row{grid-template-columns:76px minmax(0,1fr) 28px;gap:8px}
}

/* small phones: index, RS5 mode switch and InfoTake handset narrow with the screen instead of spilling */
.phone{width:min(210px,100%)}
@media (max-width:400px){
  .patch a{gap:8px;padding:12px 8px}
  .patch .nm{font-size:18px}
  .jack{width:14px;height:14px}
  #m-rs5 .rs5-state .sw-on{padding:12px 10px;letter-spacing:.1em}
}

/* hero unit title bar: one line on phones */
@media (max-width:520px){.unit-top .silk{letter-spacing:.1em;white-space:nowrap}}
@media (max-width:420px){.unit-top .l:first-child .screw{display:none}}

/* contact: the chassis stays sheared for the isometric look, but the copy and form sit on a flattened plane.
   The matrix is the exact inverse of the chassis skew(-1.6deg,2.4deg), so the two cancel and text is drawn on the pixel grid,
   crisp, while the slab, its extruded edge, seam and corner screws keep the angle */
@media (min-width:980px){
  #contact .transmit-in{transform:matrix(0.998830649,-0.041863408,0.027899866,0.998830649,0,0)}
}

/* ---------- 13: control surface ----------
   Five areas of the business, each with a switch in its engaged position and a plain status word. A check sweeps
   down the list; no figures, because nothing here is a measurement. */
#m-13 .ctl13{display:grid;gap:4px}
#m-13 .ctl13 .r{display:grid;grid-template-columns:84px 28px minmax(0,1fr);gap:10px;align-items:center;padding:6px 8px;border-radius:3px;
  transition:background .3s,box-shadow .3s}
#m-13 .ctl13 .n{color:var(--lab-title)}
#m-13 .ctl13 .s{text-align:right;color:var(--lab-etch)}
#m-13 .ctl13 .sw{position:relative;width:28px;height:12px;border-radius:6px;background:#06161B;box-shadow:inset 0 1px 3px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.06)}
#m-13 .ctl13 .sw i{position:absolute;right:2px;top:2px;width:8px;height:8px;border-radius:50%;background:var(--volt);box-shadow:0 0 6px var(--volt-glow)}
#m-13 .ctl13 .r.scan{background:var(--volt-wash);box-shadow:inset 0 0 0 1px rgba(61,227,255,.28)}
#m-13 .ctl13 .r.scan .n,#m-13 .ctl13 .r.scan .s{color:var(--volt)}
@container (max-width:230px){
  #m-13 .ctl13 .r{grid-template-columns:76px minmax(0,1fr);gap:8px}
  #m-13 .ctl13 .sw{display:none}
}
.ph-row{flex-wrap:wrap}
@media (max-width:380px){.unit-top .silk{letter-spacing:.06em;font-size:10px}}

/* ---------- final audit pass ---------- */
/* footer plate: three zones where they fit; between 761px and 1023px the logo and copyright share the first row and the
   legal links centre beneath, so nothing can overprint */
@media (min-width:761px) and (max-width:1023px){
  footer .plate{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo copy" "links links";row-gap:6px}
  .foot-logo{grid-area:logo}
  .foot-copy{grid-area:copy;justify-self:end}
  .foot-links{grid-area:links;justify-self:center}
}

/* hero hardware on tablets: capped and centred so the proposition stays on screen alongside it */
@media (min-width:600px) and (max-width:999px){
  .stage{width:min(100%,540px);justify-self:center}
  .hero-in{gap:40px}
}

/* statement lead-in: the lab closes up to the statement, which starts arriving earlier */
#lab.sec{padding-bottom:clamp(16px,2vw,32px)}
#lab .rack{z-index:1}
.interlude{margin-top:-12vh}

/* instrument footers wrap rather than overrun in narrow housings */
#lab .lcd-foot{flex-wrap:wrap;gap:2px 12px}

/* RS5 chart: the canvas takes its width from the housing, never the other way round */
.rs5-side{grid-template-columns:minmax(0,1fr)}
.rs5-side > *{min-width:0}
/* RS5 status: ACTIVE · MONITORING tightens inside narrow housings and wraps as a last resort */
#m-rs5 .switch3.rs5-state{width:auto;max-width:100%}
#m-rs5 .rs5-state .sw-on{flex-wrap:wrap;row-gap:6px}
@container (max-width:300px){#m-rs5 .rs5-state .sw-on{padding:12px 10px;letter-spacing:.08em;gap:6px}}

/* ---------- polish pass ---------- */
/* RS5: a faint technical backdrop and watermark behind the trace, so the chart reads as a stylised monitoring display */
#m-rs5 .lcd .wm{position:absolute;inset:0;z-index:0;display:flex;align-items:flex-start;justify-content:flex-start;padding:9px 12px;pointer-events:none;
  background:linear-gradient(rgba(61,227,255,.05) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(61,227,255,.05) 1px,transparent 1px) 0 0/22px 22px}
#m-rs5 .lcd .wm span{font:400 10px/1 var(--f-silk);letter-spacing:.3em;text-transform:uppercase;color:rgba(188,207,219,.34)}
#m-rs5 .lcd .spark{position:relative;z-index:1}
/* layer notes read as plain phrases: balanced wrapping, no separators left to dangle */
#desk .layer em{text-wrap:balance}
/* build desk: the tilted slab is a background layer only. The strips and their labels sit on a flat plane, so channel text is
   drawn on the pixel grid instead of being resampled by the 3D tilt */
#desk .desk{position:relative;transform:none;background:none;box-shadow:none}
#desk .desk::before{content:"";position:absolute;inset:0;border-radius:12px;z-index:0;pointer-events:none;background:linear-gradient(180deg,#0E1013,#090A0C);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9),inset 0 0 0 1px #000,inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.03);
  transform:perspective(1600px) rotateX(8deg);transform-origin:50% 100%}
#desk .desk > .strip{position:relative;z-index:1}
@media (max-width:760px){#desk .desk::before{transform:none}}

/* ---------- production hardening: accessibility additions (no change to the approved look) ----------
   Skip link, screen-reader-only text, enlarged hit areas for small controls (anchor offsets under the sticky rail already
   come from the scroll-margin-top rules on .mod, #desk, #operator and #contact above),
   and the contact form's per-field error states. The form placeholders are drawn by .ph overlays so the trailing
   underscore keeps its look without being read aloud as "underscore". */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-64px;z-index:200;padding:12px 16px;border-radius:4px;background:#000;color:var(--volt);text-decoration:none;
  font:400 11px/1 var(--f-silk);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 0 0 2px var(--volt)}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
.pad{position:relative}
.pad::after{content:"";position:absolute;inset:-3px -2px}
.chip[href]{position:relative}
.chip[href]::after{content:"";position:absolute;inset:-3px -2px}
.patch a{min-height:24px}
div.knob{display:block}
.term .field{display:block}
.term .lbl{display:block;text-transform:uppercase} /* written as Name / Email / Message so screen readers say the word; shown uppercase */
.term .fld{position:relative;display:block}
.term .fld input,.term .fld textarea{display:block}
.term .ph{position:absolute;left:0;top:0;right:0;padding:8px 0;font:500 15px/1.4 var(--f-mono);color:#5A8C98;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term .fld input:not(:placeholder-shown)~.ph,.term .fld textarea:not(:placeholder-shown)~.ph{display:none}
.term .err{margin:6px 0 0;font:500 11px/1.3 var(--f-mono);color:var(--amber)}
.term [aria-invalid="true"]{border-bottom-color:var(--amber)!important}
.term .hp{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.splash img{height:auto}

/* ---------- static pages (404 and the legal routes) ----------
   Same rail, tokens and plate footer as the home page. The legal routes (/privacy/, /cookies/, /terms/) use the .doc
   block below: near-black ground, crisp white text, cyan accents and cool steel labels, set to a readable measure. */
.page{min-height:calc(100vh - 220px);display:flex;align-items:center}
.page .cta{margin-top:28px}
.foot-links a[aria-current="page"]{border-bottom-color:#0B4552}
/* cyan is hard to see on the silver plate, so keyboard focus there uses the dark teal of the silkscreen labels */
.foot-links a:focus-visible,.foot-logo:focus-visible{outline:2px solid #0B4552;outline-offset:3px}

.doc{--doc-w:980px;--doc-line:rgba(211,218,226,.2);position:relative;padding-block:clamp(28px,4vw,56px) clamp(72px,9vw,128px);overflow:hidden}
.doc::before{content:"";position:absolute;left:0;right:0;top:0;height:620px;pointer-events:none;
  background:radial-gradient(60% 70% at 18% 0%,rgba(61,227,255,.09),transparent 70%),
    linear-gradient(rgba(143,231,245,.045) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,rgba(143,231,245,.045) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
.doc>.wrap{position:relative;max-width:calc(var(--doc-w) + var(--gutter) * 2)}

.doc-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 20px}
.doc-back,.pdf-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:400 10.5px/1.2 var(--f-silk);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--steel);transition:color .2s}
.doc-back:hover,.pdf-link:hover{color:var(--volt)}
.pdf-link{padding:0 14px;border:1px solid rgba(61,227,255,.34);border-radius:4px;background:rgba(61,227,255,.05)}
.pdf-link:hover{border-color:var(--volt);background:var(--volt-wash)}
.doc-head{padding-top:clamp(16px,3vw,32px)}
.doc-head .eyebrow{margin:clamp(28px,5vw,56px) 0 14px}
.doc-head .eyebrow .led{background:var(--volt);box-shadow:0 0 6px var(--volt),0 0 14px var(--volt-glow)}
.doc h1{font:700 clamp(48px,8.4vw,108px)/.92 var(--f-display);letter-spacing:.005em;text-transform:uppercase;color:#fff;margin:0;text-wrap:balance}
.doc h1::after{content:"";display:block;width:104px;height:3px;margin-top:clamp(20px,2.6vw,30px);background:var(--volt);box-shadow:0 0 14px var(--volt-glow)}
.doc-intro{max-width:64ch;margin:clamp(22px,3vw,34px) 0 0;font-size:clamp(17px,1.45vw,20px);line-height:1.68;color:var(--ink)}
.doc-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px 28px;margin:clamp(32px,4.4vw,52px) 0 0;padding-top:20px;border-top:1px solid var(--doc-line)}
.doc-meta dt{font:400 10.5px/1.3 var(--f-silk);letter-spacing:.2em;text-transform:uppercase;color:var(--etch);margin:0 0 8px}
.doc-meta dd{margin:0;font:500 17px/1.35 var(--f-body);color:#fff;overflow-wrap:anywhere}

.toc{margin-top:clamp(40px,5vw,64px);padding:clamp(22px,3vw,34px) clamp(18px,3vw,38px) clamp(14px,2vw,22px);border:1px solid rgba(61,227,255,.16);border-left:3px solid var(--volt);border-radius:6px;
  background:linear-gradient(180deg,rgba(18,21,26,.92),rgba(9,11,14,.92))}
.toc .silk.toc-eyebrow{color:var(--volt);margin:0 0 10px}
.toc h2{font:700 clamp(28px,3.4vw,40px)/1.04 var(--f-display);letter-spacing:.015em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.toc ol{list-style:none;margin:0;padding:0}
@media (min-width:760px){.toc ol{columns:2;column-gap:clamp(32px,4vw,56px)}}
.toc li{break-inside:avoid}
.toc a{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:baseline;min-height:44px;padding:10px 4px;color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(211,218,226,.1);font-size:16.5px;line-height:1.4;transition:color .2s,background-color .2s}
.toc a .n{font:500 12px/1 var(--f-mono);letter-spacing:.08em;color:var(--volt)}
.toc a:hover{color:var(--volt);background:var(--volt-wash)}

.doc-body{margin-top:clamp(40px,6vw,76px)}
.doc-main{scroll-margin-top:76px}
.doc-sec{scroll-margin-top:96px;margin-top:clamp(48px,6vw,76px)}
/* links clear the sticky rail when keyboard focus scrolls them into view */
.doc a{scroll-margin-top:92px}
.doc-sec:first-child{margin-top:0}
.doc-sec h2{display:flex;align-items:center;gap:14px;margin:0 0 24px;padding-bottom:16px;border-bottom:1px solid var(--doc-line);
  font:700 clamp(28px,3.3vw,42px)/1.05 var(--f-display);letter-spacing:.015em;text-transform:uppercase;color:#fff;text-wrap:balance}
.doc-sec h2 .n{flex:none;font:500 12.5px/1 var(--f-mono);letter-spacing:.1em;color:var(--volt);padding:8px 10px;border:1px solid rgba(61,227,255,.34);border-radius:3px;background:#000;text-shadow:0 0 8px var(--volt-glow)}
.doc-sec h3{display:flex;align-items:center;gap:12px;margin:38px 0 14px;font:400 12px/1.5 var(--f-silk);letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
.doc-sec h3::before{content:"";flex:none;width:8px;height:8px;background:var(--volt);box-shadow:0 0 8px var(--volt-glow)}
.doc-sec h2+h3{margin-top:4px}
.doc-sec p,.doc-sec li{font-size:17px;line-height:1.75;color:var(--ink)}
.doc-sec p{max-width:70ch;margin:0 0 18px}
.doc-sec strong{font-weight:600;color:#fff}
.doc-sec a{color:var(--volt);text-decoration:underline;text-decoration-color:rgba(61,227,255,.4);text-underline-offset:3px;transition:text-decoration-color .2s}
.doc-sec a:hover{text-decoration-color:var(--volt)}
.doc-sec ul{list-style:none;margin:0 0 22px;padding:0;max-width:70ch}
.doc-sec li{position:relative;margin:0 0 10px;padding-left:28px}
.doc-sec li::before{content:"";position:absolute;left:0;top:.9em;width:13px;height:2px;background:var(--volt);box-shadow:0 0 6px var(--volt-glow)}
.doc-sec ul.chips{display:flex;flex-wrap:wrap;gap:10px;max-width:none;margin:0 0 26px}
.doc-sec ul.chips li{display:flex;align-items:center;gap:10px;margin:0;padding:10px 14px;border:1px solid rgba(211,218,226,.3);border-radius:3px;background:rgba(255,255,255,.025);
  font:400 11px/1.3 var(--f-silk);letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.doc-sec ul.chips li::before{content:"\00D7";position:static;width:auto;height:auto;background:none;box-shadow:none;font:400 15px/1 var(--f-body);letter-spacing:0;color:var(--volt)}

.tbl-wrap{margin:6px 0 28px;border:1px solid rgba(211,218,226,.18);border-radius:6px;overflow:hidden;background:rgba(18,21,26,.72)}
.tbl{width:100%;border-collapse:collapse;text-align:left}
.tbl thead th{padding:15px 20px;background:#000;font:400 10.5px/1.3 var(--f-silk);letter-spacing:.18em;text-transform:uppercase;color:#fff;text-align:left}
.tbl thead th:first-child{box-shadow:inset 3px 0 0 var(--volt)}
.tbl tbody th,.tbl tbody td{padding:17px 20px;vertical-align:top;text-align:left;border-top:1px solid rgba(211,218,226,.13);font-size:16px;line-height:1.6;color:var(--ink)}
.tbl tbody tr:first-child th,.tbl tbody tr:first-child td{border-top:0}
.tbl tbody th{font-weight:600;color:#fff;width:27%}
.tbl.cols-2 tbody th{width:34%}
.tbl td strong{color:#fff}
@media (max-width:719px){
  .tbl thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .tbl,.tbl tbody,.tbl tr,.tbl tbody th,.tbl tbody td{display:block;width:auto}
  .tbl tbody tr{padding:16px 18px 18px;border-top:1px solid rgba(211,218,226,.13)}
  .tbl tbody tr:first-child{border-top:0}
  .tbl tbody th,.tbl.cols-2 tbody th{width:auto;padding:0 0 10px;border:0}
  .tbl tbody td{padding:8px 0 0;border:0}
  .tbl tbody td::before{content:attr(data-label);display:block;margin-bottom:4px;font:400 10px/1.4 var(--f-silk);letter-spacing:.16em;text-transform:uppercase;color:var(--volt)}
}

.doc-end{margin-top:clamp(56px,7vw,92px);padding-top:26px;border-top:1px solid var(--doc-line);text-align:center}
.doc-end p{margin:0;overflow-wrap:anywhere}
.doc-end-a{font:500 16px/1.5 var(--f-body);color:#fff}
.doc-end-b{margin-top:4px!important;font:400 15px/1.5 var(--f-body);color:var(--etch)}
.doc-cta{justify-content:center;margin-top:34px}
.doc-cta .btn{text-decoration:none}
@media (max-width:520px){
  .doc-sec h2{gap:12px}
  .doc-sec h3{letter-spacing:.14em}
  .doc-sec ul.chips li{letter-spacing:.1em}
}