/* =============================================================
   PJ Green — "GRITTY ANALOGUE" design system
   A back-room AV closet that never powers down: aged beige ABS
   plastic, a CRT that keeps glowing amber, paper labels under
   masking tape and Sharpie, brushed metal and screws.
   RULE: if an effect can't be justified as phosphor, plastic,
   paper, or metal, it doesn't ship. No neon, no holo-HUD.
   Hand-written HTML / CSS / vanilla JS. No framework, no build.
   ============================================================= */

/* ---------- Self-hosted font: one display family, two weights ---------- */
@font-face{font-family:'Plex Mono';font-weight:400;font-display:swap;src:url('../fonts/plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'Plex Mono';font-weight:700;font-display:swap;src:url('../fonts/plex-mono-700.woff2') format('woff2')}

/* ---------- Tokens ---------- */
:root{
  /* aged ABS plastic — the faceplate the whole page is molded from */
  --plastic:#d4c9ad; --plastic-hi:#e4dabf; --plastic-lo:#bcb091; --plastic-dk:#a79b7d; --plastic-seam:#8f8268;
  /* printed / Sharpie inks */
  --ink:#272118; --ink-2:#4b4332; --ink-soft:#6f6651; --ink-faint:#8a8068;
  /* paper + tape */
  --paper:#ece2cc; --paper-edge:#d8ccad; --tape:rgba(228,213,166,.82); --tape-edge:rgba(150,132,86,.5);
  /* raised letters on a dark Dymo label strip — always light, never inverts */
  --label-text:#e8dfc7;
  /* oxide-red Sharpie accent (the recolored logo) */
  --rust:#b0563f; --rust-dk:#8f4631; --rust-soft:#c98a6f;
  /* metal */
  --metal:#8d897c; --metal-hi:#b9b3a3; --metal-dk:#5d594e; --screw:#9a9486;
  /* CRT glass + amber phosphor */
  --screen:#16110a; --screen-2:#0c0905;
  --phos:#ffb23e; --phos-hi:#ffd089; --phos-dim:#c4842a; --phos-glow:rgba(255,178,62,.50);
  --led:#86c25a; --led-glow:rgba(134,194,90,.6);
  /* semantic surfaces */
  --bg:#cabd9f; --ink-on-screen:var(--phos);
  --gold:var(--phos); --gold-2:var(--phos-hi); --gold-soft:var(--phos-hi);
  --navy:var(--ink); --navy-2:var(--ink-2); --navy-3:var(--ink-soft); --navy-deep:#0c0a06;
  --on-dark:#ecd6b0; --on-dark-soft:var(--phos-dim); --on-dark-faint:rgba(255,178,62,.72);
  --good:#5e8a3a; --bad:#a8412f;

  /* type */
  --f-mono:'Plex Mono', ui-monospace,'Cascadia Code','Segoe UI Mono',Menlo,monospace;
  --f-ui:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  --container:1100px; --container-narrow:760px; --gutter:24px; --nav-h:62px;
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:.13s; --t:.26s; --t-slow:.6s;

  /* molded plastic bevel (light top, dark bottom) */
  --bevel: inset 0 1.5px 0 rgba(255,255,255,.42), inset 0 -2px 0 var(--plastic-lo), inset 2px 0 0 rgba(255,255,255,.16), inset -2px 0 0 rgba(0,0,0,.05);
  --bevel-deep: inset 0 2px 4px rgba(0,0,0,.18), inset 0 -1px 0 rgba(255,255,255,.25);
  --drop: 0 5px 14px rgba(40,30,15,.16); --drop-lg:0 10px 24px rgba(40,30,15,.24);
}

/* a single screw head (metal, slotted) for backgrounds */
:root{
  --screwimg: radial-gradient(circle at 42% 36%, #c3bca9 0%, #9a9282 42%, #5f5a4e 78%, #423e34 100%);
}

[data-theme="dark"]{
  /* LIGHTS OFF — the room goes dark, the CRT takes over */
  --plastic:#241f18; --plastic-hi:#2e2820; --plastic-lo:#191510; --plastic-dk:#120f0b; --plastic-seam:#0c0a07;
  --ink:#e4d9bf; --ink-2:#b7ad93; --ink-soft:#8e856e; --ink-faint:#6f6857;
  --paper:#2a2419; --paper-edge:#3a3327; --tape:rgba(60,52,34,.7); --tape-edge:rgba(20,16,8,.6);
  --metal:#5a5750; --metal-hi:#7d7a70; --metal-dk:#36342d; --screw:#54504738;
  --bg:#0e0b07;
  --rust:#cf6b4f; --rust-soft:#a85540;
  --bevel: inset 0 1.5px 0 rgba(255,255,255,.06), inset 0 -2px 0 #120f0b, inset 2px 0 0 rgba(255,255,255,.03), inset -2px 0 0 rgba(0,0,0,.4);
  --drop:0 7px 18px rgba(0,0,0,.45); --drop-lg:0 12px 30px rgba(0,0,0,.58);
  --screwimg: radial-gradient(circle at 42% 36%, #6a6557 0%, #46423a 50%, #1f1c16 100%);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-ui);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
  transition:background .4s var(--ease),color .4s var(--ease);
}
/* faceplate plastic + grain over the whole page (justified: molded ABS surface) */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(140% 120% at 50% -10%, var(--plastic-hi), transparent 55%),
    linear-gradient(var(--plastic), var(--plastic-lo));
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.045;mix-blend-mode:normal;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 19px);
  background-size:100% 3px,19px 19px;
}
[data-theme="dark"] body::after{opacity:.035}
main,.site-footer{position:relative;z-index:1}
img{max-width:100%;display:block}
svg{display:block}
button{font-family:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:2.5px solid var(--rust);outline-offset:3px}
::selection{background:var(--phos);color:#1a1206}

a{color:var(--rust-dk);text-decoration:none}
[data-theme="dark"] a:not(.btn){color:var(--rust)} /* brighter oxide for >=4.5:1 on dark; never recolor buttons */
a.link{position:relative;font-weight:600}
a.link::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:currentColor;border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease)}
a.link:hover::after{transform:scaleX(1)}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--f-mono);color:var(--ink);font-weight:700;line-height:1.12;margin:0;letter-spacing:0}
p{margin:0 0 1rem}
strong,b{color:var(--ink);font-weight:700}
.mono{font-family:var(--f-mono)}
.marker{font-family:var(--f-ui);color:var(--rust);transform:rotate(-1.2deg);display:inline-block}
.gold{color:var(--phos-hi);text-shadow:0 0 14px var(--phos-glow)}

/* label-maker / Dymo strip — the workhorse "kicker" */
.kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--label-text);background:#211c14;
  padding:5px 12px 5px 11px;border-radius:4px;margin:0 0 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 3px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--phos);box-shadow:0 0 6px var(--phos-glow);flex:none}
.kicker.center{justify-content:center}
[data-theme="dark"] .kicker{background:#070503}

.lede{font-size:clamp(1.04rem,.97rem + .42vw,1.22rem);color:var(--ink-2);line-height:1.6}
.muted{color:var(--ink-soft)}
.head{font-family:var(--f-mono);font-weight:700;font-size:clamp(1.5rem,1.12rem + 1.7vw,2.2rem);
  margin:0 0 16px;position:relative;letter-spacing:0;line-height:1.14}
/* rust marker underline */
.head::after{content:"";display:block;width:58px;height:4px;margin-top:14px;border-radius:3px 3px 4px 2px;
  background:var(--rust);box-shadow:0 1px 0 rgba(0,0,0,.10)}
.text-entry-cursor{display:inline-block;margin-left:.06em;color:var(--phos);text-shadow:0 0 8px var(--phos-glow),0 0 2px rgba(255,178,62,.7);transform:translateY(.03em)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.wrap.narrow{max-width:var(--container-narrow)}
section{padding:clamp(50px,6.5vw,88px) 0;position:relative}
section:not(.hero){content-visibility:auto;contain-intrinsic-size:auto 620px}
.center{text-align:center}
.maxw{max-width:64ch}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.grid-2,.grid-3{grid-template-columns:1fr}}
/* molded seam between sections (justified: plastic panel joins) */
.section-line{border-top:2px solid var(--plastic-dk);box-shadow:0 1px 0 var(--plastic-hi)}

/* a row of vent slots — decorative divider */
.vents{height:14px;border-radius:4px;background:repeating-linear-gradient(90deg,var(--plastic-seam) 0 3px,transparent 3px 10px);
  box-shadow:var(--bevel-deep);opacity:.8}

/* screws in the four corners of any panel */
.screws{position:relative}
.screws::before,.screws::after,.screws > .screw-bl,.screws > .screw-br{content:"";position:absolute;width:11px;height:11px;border-radius:50%;
  background:var(--screwimg);box-shadow:0 1px 1px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.25);}
.screws::before{top:9px;left:9px}
.screws::after{top:9px;right:9px}

/* ---------- Plastic panel / card ---------- */
.card{position:relative;background:linear-gradient(var(--plastic-hi),var(--plastic));color:var(--ink);
  border:1px solid var(--plastic-dk);border-radius:8px;padding:22px 24px;
  box-shadow:var(--bevel), var(--drop);overflow:hidden}
.card::after,.cluster::after,.proof::after,.work-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.07;mix-blend-mode:normal;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 1px,transparent 1px 17px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 1px,transparent 1px 23px),
    linear-gradient(135deg,rgba(255,255,255,.22),transparent 32%,rgba(0,0,0,.12) 100%);
}
[data-theme="dark"] .card::after,[data-theme="dark"] .cluster::after,[data-theme="dark"] .proof::after,[data-theme="dark"] .work-card::after{opacity:.055;mix-blend-mode:normal}
.card.lift{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.card.lift:hover{transform:translateY(-3px);box-shadow:var(--bevel),var(--drop-lg)}
.card h3{font-size:1.12rem;margin:0 0 8px}
.card h4{font-size:1rem;margin:0 0 6px}
.card p{color:var(--ink-2);font-size:.97rem;margin:0}
.card p+p{margin-top:.7rem}

/* ---------- CRT screen (justified: phosphor) ---------- */
.crt{position:relative;isolation:isolate;color:var(--phos);
  background:radial-gradient(125% 130% at 50% 38%, #1d1710 0%, #120d07 60%, var(--screen-2) 100%);
  border-radius:12px;overflow:hidden;
  box-shadow:
    inset 0 0 0 2px #07050288, inset 0 0 70px rgba(0,0,0,.85),
    0 0 0 7px #2a2418, 0 0 0 9px var(--plastic-dk), 0 0 0 11px #1d180f, var(--drop-lg);}
.crt > *{position:relative;z-index:2}
.crt .phos{color:var(--phos);text-shadow:0 0 7px var(--phos-glow),0 0 2px rgba(255,178,62,.6)}
.crt .dim{color:var(--phos-dim)}
/* scanlines + screen-door */
.crt::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 3px),
    repeating-linear-gradient(90deg,rgba(255,178,62,.035) 0 1px,transparent 1px 5px);}
/* glass vignette + corner bloom */
.crt::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%, transparent 58%, rgba(0,0,0,.55) 100%),
             radial-gradient(80% 60% at 50% 18%, rgba(255,178,62,.10), transparent 60%);}
.crt .cursor{display:inline-block;width:.62em;height:1.05em;background:var(--phos);
  margin-left:.12em;vertical-align:-2px;box-shadow:0 0 8px var(--phos-glow)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);font-weight:600;font-size:13.5px;
  text-transform:uppercase;letter-spacing:.07em;line-height:1;padding:13px 19px;border-radius:7px;border:1px solid var(--plastic-dk);
  background:linear-gradient(var(--plastic-hi),var(--plastic-lo));color:var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 var(--plastic-dk), 0 5px 8px rgba(0,0,0,.22);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast);}
.btn:hover{background:linear-gradient(var(--plastic-hi),var(--plastic))}
.btn:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 var(--plastic-dk),0 1px 2px rgba(0,0,0,.3)}
.btn .ar{transition:transform var(--t) var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
/* primary = a lit amber screen-key */
.btn-primary,.btn-gold{background:linear-gradient(#1a140c,#0e0a05);border-color:#000;color:var(--phos);
  text-shadow:0 0 8px var(--phos-glow);
  box-shadow: inset 0 0 14px rgba(255,178,62,.18), inset 0 0 0 1px rgba(255,178,62,.25), 0 3px 0 #000, 0 6px 12px rgba(0,0,0,.4)}
.btn-primary:hover,.btn-gold:hover{box-shadow:inset 0 0 22px rgba(255,178,62,.3),inset 0 0 0 1px rgba(255,178,62,.45),0 3px 0 #000,0 8px 16px rgba(0,0,0,.45)}
.btn-primary:active,.btn-gold:active{transform:translateY(3px);box-shadow:inset 0 0 22px rgba(255,178,62,.3),0 0 0 #000}
/* rust = painted metal */
.btn-rust{background:linear-gradient(#bd6147,#9a4a34);border-color:#6f3322;color:#fdeee6;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 3px 0 #6f3322,0 5px 9px rgba(0,0,0,.3)}
.btn-rust:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 #6f3322}
.btn-ghost{background:transparent;border:1.5px solid var(--plastic-dk);box-shadow:none;color:var(--ink)}
.btn-ghost:hover{border-color:var(--rust);color:var(--rust-dk);background:rgba(176,86,63,.06)}
/* buttons sitting on a dark CRT surface */
.btn-on-screen,.btn-on-dark{background:rgba(255,178,62,.08);border:1px solid rgba(255,178,62,.4);color:var(--phos);
  text-shadow:0 0 6px var(--phos-glow);box-shadow:inset 0 0 12px rgba(255,178,62,.08)}
.btn-on-screen:hover,.btn-on-dark:hover{background:rgba(255,178,62,.16)}
.btn-on-screen:active,.btn-on-dark:active{transform:translateY(2px)}
.btn-sm{padding:9px 14px;font-size:12px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* vintage keycap — aged ABS key with a real skirt that presses down (justified: plastic).
   Applied explicitly via .btn-key, and to every hero CTA so all heroes get keys. */
.btn-key,
.hero .btn-row .btn{position:relative;display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);font-weight:700;
  font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:#2c2419;border:1px solid #a89a78;border-radius:8px;
  padding:12px 17px 13px;background:linear-gradient(180deg,#f1e9d4 0%,#e4d9bd 46%,#d6c9a8 100%);text-shadow:none;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.85), inset 0 -6px 7px rgba(150,130,92,.32),
    0 6px 0 #9c8e6c, 0 8px 2px rgba(0,0,0,.22), 0 11px 14px rgba(0,0,0,.42);
  transition:transform .07s var(--ease),box-shadow .07s var(--ease),background var(--t-fast)}
.btn-key:hover,.hero .btn-row .btn:hover{background:linear-gradient(180deg,#f6efdb,#e7dcc0)}
.btn-key .ar,.hero .btn-row .btn .ar{transition:transform var(--t) var(--ease);color:inherit}
.btn-key:hover .ar,.hero .btn-row .btn:hover .ar{transform:translateX(3px)}
.btn-key:active,.hero .btn-row .btn:active{transform:translateY(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 5px rgba(150,130,92,.3),
    0 0 0 #9c8e6c, 0 1px 2px rgba(0,0,0,.4), 0 2px 5px rgba(0,0,0,.4)}
[data-theme="dark"] .btn-key,[data-theme="dark"] .hero .btn-row .btn{background:linear-gradient(180deg,#ddd0af,#baac88)}
/* keys + status line sit in front of the CRT glass, above the scanline overlay */
.hero .btn-row,.hero .hero-meta{position:relative;z-index:4}
.hero .btn-row{gap:12px 13px}
/* (contact-grid / contact-points / field.two are defined later in the file) */

/* ---------- Tape labels / paper / chips ---------- */
.tag{display:inline-block;font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-2);background:var(--tape);border:1px solid var(--tape-edge);border-radius:2px;padding:5px 10px;margin:0 6px 6px 0;
  box-shadow:0 1px 2px rgba(0,0,0,.12)}
.tag.rust{color:#fff;background:linear-gradient(var(--rust),var(--rust-dk));border-color:var(--rust-dk)}
.tag.amber{color:var(--phos);background:#191309;border:1px solid rgba(255,178,62,.35);text-shadow:0 0 6px var(--phos-glow)}
.tag-row{display:flex;flex-wrap:wrap;gap:0;margin-top:8px}
.pill{display:inline-block;font-family:var(--f-mono);font-size:11.5px;font-weight:500;color:var(--good);background:#e7ecd6;
  border:1px solid #b9c79a;border-radius:3px;padding:4px 10px;margin:0 6px 6px 0;text-transform:uppercase;letter-spacing:.04em}
[data-theme="dark"] .pill{background:#1c2113;color:#9cc46f;border-color:#3a4426}
.chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:12.5px;color:var(--ink-2);
  background:var(--plastic-hi);border:1px solid var(--plastic-dk);border-radius:4px;padding:6px 11px;box-shadow:var(--bevel)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--phos);box-shadow:0 0 5px var(--phos-glow);flex:none}

/* paper sticky label (rotated, taped) */
.label{position:relative;display:inline-block;background:var(--paper);color:var(--ink);font-family:var(--f-mono);
  font-size:12px;padding:8px 14px;border:1px solid var(--paper-edge);box-shadow:0 2px 5px rgba(0,0,0,.18);transform:rotate(-1deg)}
.label::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(2deg);
  width:46px;height:14px;background:var(--tape);border:1px solid var(--tape-edge);opacity:.92}

/* ---------- Top nav (plastic faceplate bar) ---------- */
.site-nav{position:sticky;top:0;z-index:60;background:linear-gradient(var(--plastic-hi),var(--plastic));
  border-bottom:2px solid var(--plastic-dk);box-shadow:0 2px 0 var(--plastic-lo),0 5px 14px rgba(0,0,0,.16);
  transition:box-shadow var(--t)}
.site-nav.scrolled{box-shadow:0 2px 0 var(--plastic-lo),0 8px 22px rgba(0,0,0,.26)}
.nav-inner{max-width:var(--container);margin:0 auto;height:var(--nav-h);padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:11px;font-family:var(--f-mono);font-weight:700;color:var(--ink);font-size:16px;letter-spacing:0}
.brand .chip-screen{width:34px;height:34px;flex:none;border-radius:7px;background:radial-gradient(120% 120% at 50% 35%,#1d1710,#0b0804);
  display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px #000,inset 0 0 10px rgba(0,0,0,.8),0 0 0 2px var(--plastic-dk);overflow:hidden;position:relative}
.brand .chip-screen img{width:24px;height:auto}
.brand .chip-screen::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px,rgba(0,0,0,.25) 2px 3px)}
.brand b{font-weight:700}
.brand .reg{color:var(--ink-soft);font-weight:500}
.nav-links{display:flex;align-items:center;gap:3px}
.nav-links a{font-family:var(--f-mono);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);
  padding:8px 11px;border-radius:5px;transition:background var(--t-fast),color var(--t-fast)}
.nav-links a:hover{background:rgba(0,0,0,.06);color:var(--ink)}
.nav-links a.nav-cta{color:var(--phos);text-shadow:0 0 8px var(--phos-glow)}
.nav-links a.nav-cta:hover{color:var(--phos-hi);background:linear-gradient(#1a140c,#0e0a05)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{content:"";display:block;height:3px;margin:4px 11px -2px;border-radius:2px;background:var(--rust)}
.nav-cta{margin-left:6px}
.nav-right{display:flex;align-items:center;gap:10px}

/* lights switch (justified: metal toggle) */
.lights{display:inline-flex;align-items:center;gap:8px;margin-left:4px;padding:5px 9px 5px 7px;border-radius:6px;
  background:linear-gradient(var(--metal-hi),var(--metal));border:1px solid var(--metal-dk);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 4px rgba(0,0,0,.25);font-family:var(--f-mono);font-size:10px;
  letter-spacing:.1em;color:var(--ink);text-transform:uppercase}
.lights .rocker{width:30px;height:16px;border-radius:3px;background:#3a352b;position:relative;box-shadow:inset 0 0 4px rgba(0,0,0,.7)}
.lights .rocker::after{content:"";position:absolute;top:1.5px;left:1.5px;width:13px;height:13px;border-radius:2px;
  background:linear-gradient(#e4dabf,#bcb091);box-shadow:0 1px 2px rgba(0,0,0,.5);transition:left var(--t) var(--ease)}
[data-theme="dark"] .lights .rocker::after{left:14px;background:linear-gradient(var(--phos-hi),var(--phos-dim));box-shadow:0 0 7px var(--phos-glow)}
.lights .led{width:7px;height:7px;border-radius:50%;background:#4a4636;box-shadow:inset 0 0 2px rgba(0,0,0,.8)}
[data-theme="dark"] .lights .led{background:var(--led);box-shadow:0 0 7px var(--led-glow)}
@media(max-width:980px){.lights .lbl{display:none}.lights{padding:6px 8px}}

.nav-toggle{display:none;width:42px;height:40px;border:1px solid var(--plastic-dk);background:linear-gradient(var(--plastic-hi),var(--plastic-lo));
  border-radius:6px;align-items:center;justify-content:center;color:var(--ink);box-shadow:var(--bevel)}
.nav-toggle svg{width:20px;height:20px}.nav-toggle .x{display:none}
.nav-toggle[aria-expanded="true"] .menu{display:none}.nav-toggle[aria-expanded="true"] .x{display:block}
@media(max-width:980px){
  .nav-toggle{display:inline-flex}
  .nav-links{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;
    background:linear-gradient(var(--plastic-hi),var(--plastic));border-bottom:2px solid var(--plastic-dk);
    padding:12px var(--gutter) 18px;box-shadow:var(--drop);transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity var(--t),transform var(--t);max-height:calc(100dvh - var(--nav-h));overflow:auto}
  .nav-links.open{opacity:1;transform:none;pointer-events:auto}
  .nav-links a{padding:13px 12px;font-size:14px}
  .nav-links a[aria-current="page"]::after{display:none}
  .nav-links a[aria-current="page"]{background:rgba(0,0,0,.06)}
  .nav-cta{margin:8px 0 0}
}

/* ---------- HERO (a big CRT set into the faceplate) ---------- */
.hero{padding:clamp(26px,4vw,46px) 0 clamp(40px,6vw,72px)}
.hero-screen{position:relative;isolation:isolate;color:var(--phos);overflow:hidden;
  background:radial-gradient(130% 140% at 50% 30%, #1f1810 0%, #130d07 55%, #0a0704 100%);
  border-radius:16px;padding:clamp(30px,5vw,60px) clamp(24px,4vw,54px) clamp(34px,5vw,60px);
  box-shadow:inset 0 0 0 2px #05030188, inset 0 0 110px rgba(0,0,0,.8),
    0 0 0 8px #2a2417, 0 0 0 10px var(--plastic-dk), 0 0 0 12px #1c170e, var(--drop-lg)}
.hero-screen::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    repeating-linear-gradient(rgba(0,0,0,0) 0 2px,rgba(0,0,0,.15) 2px 3px),
    repeating-linear-gradient(90deg,rgba(255,178,62,.04) 0 1px,transparent 1px 6px)}
.hero-screen::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 0%,transparent 43%,rgba(255,202,118,.12) 49%,transparent 56%,transparent 100%),
    radial-gradient(125% 105% at 50% 45%, transparent 55%, rgba(0,0,0,.6)),
    radial-gradient(70% 55% at 50% 12%, rgba(255,178,62,.12), transparent 60%);
  background-size:100% 220%,auto,auto;background-position:0 -120%,center,center}
.hero-screen > *{position:relative;z-index:2}
.hero .statusline{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.04em;color:var(--phos-dim);
  display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:24px;border-bottom:1px solid rgba(255,178,62,.18);padding-bottom:14px}
.hero .statusline .on{color:var(--phos);text-shadow:0 0 6px var(--phos-glow)}
.hero .prompt{font-family:var(--f-mono);font-size:13px;color:var(--phos-dim);margin-bottom:14px}
.hero h1{font-family:var(--f-mono);font-weight:700;color:var(--phos);
  font-size:clamp(2rem,1.2rem + 3.6vw,4.1rem);line-height:1.06;letter-spacing:0;margin:0 0 20px;max-width:18ch;
  text-shadow:0 0 14px var(--phos-glow),0 0 3px rgba(255,178,62,.5)}
.hero h1 .amber{color:var(--phos-hi);text-shadow:0 0 18px rgba(255,178,62,.7)}
.hero .lede{color:#f0d9b3;max-width:60ch;font-size:clamp(1.04rem,.98rem + .5vw,1.32rem);line-height:1.55;margin:0 0 16px;
  text-shadow:0 0 8px rgba(255,178,62,.15)}
.hero .sub{color:var(--phos-dim);max-width:60ch;font-size:1rem;margin:0 0 30px}
.hero .btn-row{margin-bottom:28px}
.hero-meta{display:flex;flex-wrap:wrap;gap:9px 22px;align-items:center;font-family:var(--f-mono);font-size:12.5px;
  color:var(--phos-dim);border-top:1px solid rgba(255,178,62,.18);padding-top:20px}
.hero-meta span{display:inline-flex;align-items:center;gap:8px}
.hero-meta .gd{color:var(--phos)}

/* secondary CRT band (spotlight/contact use) */
.band-screen,.band-dark{position:relative;isolation:isolate;color:var(--phos);overflow:hidden;
  background:radial-gradient(130% 130% at 50% 30%, #1d1710, #0b0804);border-radius:14px;
  box-shadow:inset 0 0 90px rgba(0,0,0,.8), inset 0 0 0 2px #060401, var(--drop-lg);margin:clamp(40px,6vw,72px) 0}
.band-screen::before,.band-dark::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  repeating-linear-gradient(rgba(0,0,0,0) 0 2px,rgba(0,0,0,.14) 2px 3px),
  repeating-linear-gradient(90deg,rgba(255,178,62,.035) 0 1px,transparent 1px 6px)}
.band-screen .wrap,.band-dark .wrap{position:relative;z-index:2;padding:clamp(40px,6vw,72px) var(--gutter)}
.band-screen h2,.band-screen .head,.band-dark h2,.band-dark .head{color:var(--phos);text-shadow:0 0 12px var(--phos-glow)}
.band-screen .head::after,.band-dark .head::after{background:var(--phos);box-shadow:0 0 8px var(--phos-glow)}
.band-screen .kicker,.band-dark .kicker{background:#070503}
.band-screen p,.band-dark p{color:#ecd6b0}

/* ---------- Spotlight ---------- */
.spotlight{display:grid;grid-template-columns:1.12fr .88fr;gap:34px;align-items:center}
@media(max-width:880px){.spotlight{grid-template-columns:1fr;gap:26px}}
.spotlight .body p{color:#ecd6b0;font-size:1.04rem}
/* readout panel = a monitored data screen */
.readout,.panel{background:rgba(0,0,0,.35);border:1px solid rgba(255,178,62,.25);border-radius:8px;padding:8px 20px;
  box-shadow:inset 0 0 30px rgba(0,0,0,.6)}
.readout .row,.panel .row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px dashed rgba(255,178,62,.18)}
.readout .row:last-child,.panel .row:last-child{border-bottom:0}
.readout .v,.panel .v{font-family:var(--f-mono);font-weight:700;color:var(--phos);font-size:1.7rem;line-height:1;text-shadow:0 0 10px var(--phos-glow)}
.readout .v .u,.panel .v .u{font-size:.5em;color:var(--phos-dim)}
.readout .l,.panel .l{font-family:var(--f-mono);color:var(--phos-dim);font-size:12px;text-align:right;max-width:19ch;text-transform:uppercase;letter-spacing:.04em}
.readout .note,.panel .note{font-family:var(--f-mono);font-size:11px;color:var(--phos-dim);opacity:.8;padding:10px 0 4px}

/* ---------- Selected work cards (equipment modules) ---------- */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:820px){.work-grid{grid-template-columns:1fr}}
.work-card{position:relative;display:flex;flex-direction:column;background:linear-gradient(var(--plastic-hi),var(--plastic));
  border:1px solid var(--plastic-dk);border-radius:8px;padding:28px;box-shadow:var(--bevel),var(--drop);overflow:hidden;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.work-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--rust);transform:scaleY(0);transform-origin:top;transition:transform var(--t) var(--ease)}
.work-card:hover{transform:translateY(-4px);box-shadow:var(--bevel),var(--drop-lg)}
.work-card:hover::before{transform:scaleY(1)}
.work-card .num{font-family:var(--f-mono);font-size:11px;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase}
.work-card h3{font-size:1.28rem;margin:12px 0 5px}
.work-card .role{font-family:var(--f-mono);font-size:12px;color:var(--rust-dk);font-weight:600;margin-bottom:12px}
[data-theme="dark"] .work-card .role{color:var(--rust-soft)}
.work-card p{color:var(--ink-2);font-size:.96rem;flex:1}
.work-card .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:15px;border-top:1px solid var(--plastic-dk)}
.work-card .status{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);display:inline-flex;align-items:center;gap:7px}
.work-card .go{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-weight:600;color:var(--ink);font-size:13px}
.work-card.live .status{color:var(--good)}
.work-card.live .status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--led);box-shadow:0 0 6px var(--led-glow)}

/* ---------- Homepage service board ---------- */
.service-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(290px,.72fr);gap:24px;align-items:start;margin-top:30px}
.service-group-head{display:block;margin:0 0 14px;padding:0 0 11px;border-bottom:1px solid var(--plastic-dk)}
.service-group-head span{font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rust-dk)}
[data-theme="dark"] .service-group-head span{color:var(--phos)}
.service-group-head p{max-width:58ch;margin:7px 0 0;color:var(--ink-soft);font-size:.9rem;line-height:1.45;text-align:left}
.service-group-secondary .service-group-head p{max-width:34ch}
.service-primary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.service-lane,.support-lane{position:relative;display:flex;color:var(--ink);border:1px solid var(--plastic-dk);border-radius:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 28%),linear-gradient(var(--plastic-hi),var(--plastic));
  box-shadow:var(--bevel),var(--drop);overflow:hidden;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.service-lane::after,.support-lane::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:normal;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 1px,transparent 1px 15px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 1px,transparent 1px 21px),
    linear-gradient(135deg,rgba(255,255,255,.22),transparent 32%,rgba(0,0,0,.12) 100%)}
[data-theme="dark"] .service-lane::after,[data-theme="dark"] .support-lane::after{opacity:.05;mix-blend-mode:normal}
.service-lane:hover,.support-lane:hover{transform:translateY(-3px);box-shadow:var(--bevel),var(--drop-lg);border-color:var(--rust)}
.main-lane{min-height:250px;flex-direction:column;padding:24px 24px 20px}
.main-lane::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--rust),var(--phos),transparent 72%);opacity:.86}
.lane-meta{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;width:max-content;font-family:var(--f-mono);
  color:var(--ink-soft);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.lane-meta::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--led);box-shadow:0 0 7px var(--led-glow)}
.service-lane h3,.support-lane h3{position:relative;z-index:1;margin:12px 0 8px;font-size:1.24rem}
.service-lane p,.support-lane p{position:relative;z-index:1;margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.55}
.lane-tags{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.lane-tags span{font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--label-text);
  background:#211c14;border:1px solid rgba(0,0,0,.45);border-radius:4px;padding:5px 7px;box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
.lane-foot{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:18px;border-top:1px solid var(--plastic-dk)}
.lane-foot span{font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--good)}
.lane-foot b{display:inline-flex;align-items:center;justify-content:flex-end;color:var(--ink);font-family:var(--f-mono);font-size:12.5px;text-align:right;line-height:1.25}
.lane-build{background:linear-gradient(180deg,rgba(255,178,62,.08),transparent 30%),linear-gradient(var(--plastic-hi),var(--plastic))}
.lane-fix{background:linear-gradient(180deg,rgba(207,107,79,.10),transparent 32%),linear-gradient(var(--plastic-hi),var(--plastic))}
.lane-system{background:linear-gradient(180deg,rgba(134,194,90,.09),transparent 32%),linear-gradient(var(--plastic-hi),var(--plastic))}
.lane-automation{background:linear-gradient(180deg,rgba(185,179,163,.13),transparent 32%),linear-gradient(var(--plastic-hi),var(--plastic))}
.service-secondary-grid{display:grid;gap:12px}
.support-lane{min-height:128px;flex-direction:column;padding:16px 17px 15px 58px}
.support-lane>span{position:absolute;left:17px;top:17px;z-index:1;width:28px;height:28px;border-radius:6px;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 50% 35%,#1d1710,#0b0804);border:1px solid rgba(255,178,62,.25);
  color:var(--phos);font-family:var(--f-mono);font-size:11px;font-weight:700;box-shadow:inset 0 0 0 1px #000,0 0 9px rgba(255,178,62,.10)}
.support-lane h3{font-size:1rem;margin:0 0 5px}
.support-lane p{font-size:.86rem;line-height:1.42}
.support-lane b{position:relative;z-index:1;margin-top:10px;color:var(--rust-dk);font-family:var(--f-mono);font-size:11.5px;line-height:1.25}
[data-theme="dark"] .support-lane b{color:var(--phos)}
@media(max-width:980px){.service-layout{grid-template-columns:1fr}.service-group-secondary .service-group-head p{max-width:58ch}}
@media(max-width:680px){.service-primary-grid{grid-template-columns:1fr}.main-lane{min-height:auto}.lane-foot{align-items:flex-start;flex-direction:column}}

/* ---------- Timeline (a cable run with labeled tags) ---------- */
.timeline{position:relative;margin-top:14px;padding-left:6px}
.timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:3px;border-radius:2px;
  background:linear-gradient(var(--rust),var(--metal-dk) 80%);box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.tl-item{position:relative;padding:0 0 26px 40px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:2.5px;top:4px;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,var(--metal-hi),var(--metal) 60%,var(--metal-dk));
  box-shadow:0 1px 2px rgba(0,0,0,.4),inset 0 0 0 1px rgba(0,0,0,.3);z-index:1;transition:transform var(--t)}
.tl-item.now::before{background:radial-gradient(circle at 40% 35%,var(--phos-hi),var(--phos) 55%,var(--phos-dim));box-shadow:0 0 10px var(--phos-glow)}
.tl-item:hover::before{transform:scale(1.15)}
.tl-item .yr{font-family:var(--f-mono);font-size:12.5px;color:var(--rust-dk);font-weight:600;letter-spacing:.02em}
[data-theme="dark"] .tl-item .yr{color:var(--rust-soft)}
.tl-item h3{font-size:1.08rem;margin:3px 0 2px;font-weight:600}
.tl-item .org{color:var(--ink-soft);font-size:.93rem}
.tl-item .org b{color:var(--ink);font-weight:600}

/* ---------- Skills clusters (equipment modules w/ Dymo header) ---------- */
.cluster{position:relative;background:linear-gradient(var(--plastic-hi),var(--plastic));border:1px solid var(--plastic-dk);
  border-radius:8px;padding:20px 20px 18px;box-shadow:var(--bevel),var(--drop);transition:transform var(--t) var(--ease)}
.cluster:hover{transform:translateY(-3px)}
.cluster h3{display:flex;align-items:center;gap:11px;font-size:1rem;margin:0 0 14px;font-weight:700}
.cluster h3 .ic{width:32px;height:32px;flex:none;border-radius:6px;background:radial-gradient(120% 120% at 50% 35%,#1d1710,#0b0804);
  display:grid;place-items:center;color:var(--phos);box-shadow:inset 0 0 0 1px #000,0 0 0 1px var(--plastic-dk)}
.cluster h3 .ic svg{width:17px;height:17px}
.cluster p{color:var(--ink-2);font-size:.95rem;margin:0}
.cluster ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.cluster li{font-family:var(--f-mono);font-size:12px;color:var(--ink-2);background:var(--plastic-hi);
  border:1px solid var(--plastic-dk);border-radius:3px;padding:5px 9px;box-shadow:var(--bevel)}
.cluster li.key{background:linear-gradient(var(--rust),var(--rust-dk));color:#fff;border-color:var(--rust-dk);text-shadow:0 1px 1px rgba(0,0,0,.3)}

/* ---------- Proof strip ---------- */
.proof-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:760px){.proof-grid{grid-template-columns:1fr}}
.proof{position:relative;overflow:hidden;display:flex;gap:15px;align-items:flex-start;background:linear-gradient(var(--plastic-hi),var(--plastic));
  border:1px solid var(--plastic-dk);border-radius:8px;padding:18px 20px;box-shadow:var(--bevel),var(--drop)}
.proof .ic{width:40px;height:40px;flex:none;border-radius:7px;background:radial-gradient(120% 120% at 50% 35%,#1d1710,#0b0804);
  color:var(--phos);display:grid;place-items:center;box-shadow:inset 0 0 0 1px #000}
.proof .ic svg{width:20px;height:20px}
.proof h4{font-size:1rem;margin:0 0 3px;font-weight:700}
.proof p{font-size:.9rem;color:var(--ink-soft);margin:0}
.quote{position:relative;background:var(--paper);color:var(--ink);border:1px solid var(--paper-edge);border-left:4px solid var(--rust);
  border-radius:4px;padding:24px 26px;box-shadow:var(--drop);overflow:hidden}
.quote::before{content:"";position:absolute;top:-8px;left:34px;width:92px;height:18px;background:var(--tape);border:1px solid var(--tape-edge);
  transform:rotate(-2deg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.quote::after{content:"";position:absolute;right:-1px;bottom:-1px;width:46px;height:46px;pointer-events:none;
  background:linear-gradient(135deg,rgba(0,0,0,.16),rgba(255,255,255,.18) 48%,var(--paper-edge) 50%,var(--paper) 100%);
  clip-path:polygon(100% 0,0 100%,100% 100%)}
.quote blockquote,.quote .by{position:relative;z-index:1}
.quote blockquote{margin:0;font-family:var(--f-ui);font-size:1.1rem;line-height:1.6;color:var(--ink);font-style:italic}
.quote .by{margin-top:14px;font-family:var(--f-mono);font-size:13px;color:var(--ink-soft);font-style:normal}
.quote .by b{color:var(--ink)}

/* ---------- KPI readouts ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.kpi{background:radial-gradient(120% 130% at 50% 35%,#1d1710,#0b0804);border-radius:8px;padding:22px 18px;text-align:center;
  box-shadow:inset 0 0 30px rgba(0,0,0,.7),inset 0 0 0 1px #000,0 0 0 6px var(--plastic-dk),var(--drop);position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px,rgba(0,0,0,.18) 2px 3px)}
.kpi .big{font-family:var(--f-mono);font-size:clamp(1.8rem,1.3rem + 1.5vw,2.3rem);font-weight:700;color:var(--phos);line-height:1;text-shadow:0 0 12px var(--phos-glow)}
.kpi .big .u{font-size:.5em;color:var(--phos-dim)}
.kpi .lab{font-family:var(--f-mono);font-size:11px;color:var(--phos-dim);margin-top:10px;text-transform:uppercase;letter-spacing:.05em;position:relative}
.note{font-family:var(--f-mono);font-size:12px;color:var(--ink-soft);margin-top:16px}

/* ---------- Signal flow + steps ---------- */
.signal-flow{position:relative;overflow-x:clip;margin-top:14px;padding:42px 0 46px}
.signal-flow::before{content:"";position:absolute;z-index:0;pointer-events:none;inset:20px max(-46px,-6vw) 18px;
  background:radial-gradient(ellipse at 50% 49%,rgba(20,15,9,.22) 0 26%,rgba(40,31,18,.13) 44%,transparent 72%);
  opacity:.38;mix-blend-mode:normal}
[data-theme="dark"] .signal-flow::before{opacity:.24;mix-blend-mode:normal;background:radial-gradient(ellipse at 50% 49%,rgba(255,178,62,.10) 0 24%,rgba(255,178,62,.04) 46%,transparent 74%)}
.signal-legend{position:absolute;inset:0;z-index:7;pointer-events:none;margin:0}
.signal-legend div{position:absolute;left:50%;display:flex;align-items:center;gap:9px;width:min(100%,680px);min-height:29px;
  padding:5px 12px 5px 24px;border-top:1px solid rgba(92,63,24,.24);border-bottom:1px solid rgba(92,63,24,.22);border-radius:0;
  background:linear-gradient(90deg,transparent,rgba(18,15,10,.84) 10%,rgba(255,178,62,.08) 48%,rgba(18,15,10,.84) 90%,transparent);
  box-shadow:0 9px 22px rgba(50,38,21,.14),0 0 14px rgba(255,178,62,.08);opacity:.72;transform:translateX(-50%);
  transition:opacity .46s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease),filter .28s var(--ease)}
.signal-legend div::before{content:"";position:absolute;left:10px;top:50%;width:5px;height:5px;border-radius:50%;opacity:.34;background:var(--phos);transform:translateY(-50%);
  box-shadow:0 0 7px rgba(255,178,62,.30);transition:opacity .28s var(--ease),transform .28s var(--ease)}
.signal-legend div::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:1px;opacity:0;background:linear-gradient(90deg,transparent,rgba(255,226,177,.7),transparent);
  transition:opacity .28s var(--ease)}
.signal-legend div:nth-child(1){top:0}
.signal-legend div:nth-child(2){top:50%;z-index:1;display:block;width:min(90%,620px);min-height:31px;padding:0;transform:translate(-50%,-50%);opacity:.34;
  -webkit-mask-image:radial-gradient(ellipse 185px 92px at 50% 50%,transparent 0 56%,rgba(0,0,0,.45) 72%,#000 100%);
  mask-image:radial-gradient(ellipse 185px 92px at 50% 50%,transparent 0 56%,rgba(0,0,0,.45) 72%,#000 100%)}
.signal-legend div:nth-child(2)::before{left:12px}
.signal-legend div:nth-child(3){bottom:0}
.signal-legend b{display:block;color:var(--phos);font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.14em;line-height:1;text-transform:uppercase;text-shadow:0 0 7px rgba(255,178,62,.28)}
.signal-legend span{display:block;min-width:0;color:rgba(246,231,199,.84);font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.04em;line-height:1.35;text-align:left;text-transform:uppercase}
.signal-legend div:nth-child(2) b{position:absolute;left:26px;top:50%;transform:translateY(-50%)}
.signal-legend div:nth-child(2) span{position:absolute;right:12px;top:50%;max-width:150px;text-align:right;transform:translateY(-50%)}
.signal-shell{position:relative;isolation:isolate;overflow:visible;display:grid;grid-template-columns:1fr;gap:12px;
  min-height:auto;padding:clamp(16px,2.4vw,24px);border:0;border-radius:0;background:transparent;box-shadow:none}
.signal-shell::before,.signal-shell::after{display:none}
.signal-noise,.signal-gate,.signal-clean{position:relative;z-index:2;min-height:auto}
.signal-noise{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:10px;padding-right:4px}
.chip{--x0:0rem;--y0:0rem;--r0:0deg;
  position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 10px;border-radius:7px;
  color:var(--label-text);font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,208,137,.16),rgba(255,178,62,.055)),#15100a;
  border:1px solid rgba(82,56,23,.46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 9px 17px rgba(39,31,18,.20),0 0 14px rgba(255,178,62,.12);
  transform:translate(var(--x0),var(--y0)) rotate(var(--r0))}
.chip-label{position:relative;z-index:2;opacity:1;letter-spacing:inherit;transition:opacity .24s var(--ease),letter-spacing .24s var(--ease)}
.chip-core{position:absolute;z-index:1;left:50%;top:50%;width:11px;height:11px;border-radius:999px;opacity:0;transform:translate(-50%,-50%) scale(.35);
  background:radial-gradient(circle at 50% 50%,var(--phos-hi) 0 28%,var(--phos) 29% 62%,rgba(255,178,62,.12) 63% 100%);
  box-shadow:0 0 12px rgba(255,178,62,.34),0 0 25px rgba(255,178,62,.13);transition:opacity .22s var(--ease),transform .28s var(--ease)}
.chip-1{--x0:.15rem;--y0:-.15rem;--r0:-2deg}
.chip-2{--x0:-.45rem;--y0:.32rem;--r0:1deg}
.chip-3{--x0:.35rem;--y0:-.2rem;--r0:2deg}
.chip-4{--x0:-.2rem;--y0:.48rem;--r0:-1deg}
.chip-5{--x0:.52rem;--y0:-.34rem;--r0:1deg}
.chip-6{--x0:-.34rem;--y0:-.12rem;--r0:-1.6deg}
.chip-7{--x0:.4rem;--y0:.25rem;--r0:1deg}
.chip-8{--x0:-.52rem;--y0:-.22rem;--r0:-2.4deg;grid-column:span 2}
.signal-gate{display:grid;place-items:center;z-index:8}
.gate-frame{position:relative;width:min(260px,100%);padding:12px 12px 10px;border-radius:13px;border:1px solid rgba(52,38,20,.50);
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 26%),linear-gradient(180deg,#1b150e,#0f0b07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -2px 0 rgba(0,0,0,.50),0 0 18px rgba(255,178,62,.14),0 18px 28px rgba(34,26,14,.32)}
.gate-frame::before,.gate-frame::after{content:"";position:absolute;bottom:-10px;background:#0d0905;border:1px solid rgba(255,178,62,.16);box-shadow:0 5px 10px rgba(0,0,0,.25)}
.gate-frame::before{left:50%;width:42px;height:12px;transform:translateX(-50%);border-radius:0 0 6px 6px}
.gate-frame::after{left:50%;width:82px;height:6px;transform:translateX(-50%);border-radius:999px}
.gate-bezel{position:relative;border-radius:10px;padding:7px;background:linear-gradient(180deg,#0a0704,#17100a);
  border:1px solid rgba(255,178,62,.13);box-shadow:inset 0 0 12px rgba(0,0,0,.72)}
.gate-screen{position:relative;overflow:hidden;display:grid;grid-template-rows:repeat(4,1fr);gap:0;min-height:122px;padding:10px 11px;border-radius:8px;
  border:1px solid rgba(255,178,62,.16);
  background:radial-gradient(110% 90% at 50% 20%,rgba(255,178,62,.10),transparent 60%),linear-gradient(180deg,#14100a,#090704)}
.gate-screen::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
  background:repeating-linear-gradient(to bottom,rgba(255,178,62,.18) 0 1px,transparent 1px 5px)}
.gate-screen::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:radial-gradient(80% 60% at 50% 45%,transparent 40%,rgba(0,0,0,.35) 100%)}
.gate-screen span{position:relative;z-index:1;display:flex;align-items:center;min-width:0;color:var(--phos-hi);font-family:var(--f-mono);
  font-size:clamp(9px,1.15vw,10.5px);font-weight:700;letter-spacing:.10em;text-transform:uppercase;line-height:1;opacity:.42;white-space:nowrap}
.gate-status{display:grid;grid-template-columns:9px 1fr;align-items:center;gap:8px;margin-top:9px;padding:0 2px 0 3px}
.gate-led{width:7px;height:7px;border-radius:50%;background:var(--led);box-shadow:0 0 8px var(--led-glow)}
.gate-bar{position:relative;height:7px;overflow:hidden;border-radius:999px;background:rgba(255,178,62,.12);
  box-shadow:inset 0 0 0 1px rgba(255,178,62,.11),0 0 8px rgba(255,178,62,.06)}
.gate-bar::before{content:"";position:absolute;inset:0;transform:none;clip-path:inset(0 100% 0 0);
  background:linear-gradient(90deg,transparent,var(--phos),var(--phos-hi),transparent)}
.gate-plate{position:absolute;right:11px;top:-9px;padding:2px 5px;border-radius:4px;background:#070503;color:var(--phos-hi);
  border:1px solid rgba(255,178,62,.22);font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.12em;box-shadow:0 0 8px rgba(255,178,62,.12)}
.signal-clean{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:10px}
.clean-card{position:relative;overflow:hidden;display:grid;place-items:center;min-height:48px;padding:10px;text-align:center;color:var(--label-text);font-family:var(--f-mono);
  font-size:11px;font-weight:700;line-height:1.25;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,178,62,.20);border-radius:7px;
  background:linear-gradient(180deg,rgba(255,208,137,.15),rgba(255,178,62,.045)),rgba(18,14,9,.98);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 15px rgba(40,31,17,.18);opacity:1}
.signal-flow .gate-bar::before{clip-path:inset(0 18% 0 0);opacity:.72}
.signal-flow .gate-screen span{opacity:.76}
@media(max-width:900px){
  .signal-legend div{width:calc(100% - 10px);max-width:none;min-height:32px;padding:6px 10px;gap:9px}
  .signal-legend div:nth-child(1){top:0;left:50%}
  .signal-legend div:nth-child(2){top:48%;right:auto;left:50%;width:min(92%,620px);transform:translate(-50%,-50%)}
  .signal-legend div:nth-child(3){right:auto;bottom:0;left:50%}
}
@media(max-width:460px){
  .signal-legend div{width:100%;padding:6px 8px;gap:7px}
  .signal-legend b,.signal-legend span{font-size:9px;letter-spacing:.04em}
  .signal-legend div:nth-child(2){top:47%;width:82%}
  .signal-legend div:nth-child(2) span{display:none}
  .signal-noise,.signal-clean{grid-template-columns:1fr}
  .chip-8{grid-column:auto}
}
.steps{counter-reset:s;display:grid;gap:11px}
.step{display:flex;gap:16px;background:linear-gradient(var(--plastic-hi),var(--plastic));border:1px solid var(--plastic-dk);border-radius:7px;padding:16px 19px;box-shadow:var(--bevel)}
.step .num{counter-increment:s;flex:none;width:30px;height:30px;border-radius:5px;background:linear-gradient(var(--rust),var(--rust-dk));color:#fff;font-family:var(--f-mono);font-weight:700;display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.step .num::before{content:counter(s,decimal-leading-zero)}
.step b{color:var(--ink)}.step p{margin:0;font-size:.96rem;color:var(--ink-2)}

/* ---------- Architecture diagram (on-screen terminal list) ---------- */
.arch{display:flex;flex-direction:column;gap:9px;margin-top:8px}
.layer{background:linear-gradient(var(--plastic-hi),var(--plastic));border:1px solid var(--plastic-dk);border-left:4px solid var(--metal-dk);
  border-radius:6px;padding:14px 18px;cursor:pointer;transition:var(--t-fast) var(--ease);display:flex;align-items:center;gap:15px;box-shadow:var(--bevel)}
.layer:hover{border-left-color:var(--rust);transform:translateX(3px)}
.layer .n{font-family:var(--f-mono);font-size:12px;font-weight:700;color:var(--phos);background:radial-gradient(circle,#1d1710,#0b0804);border-radius:5px;min-width:32px;height:32px;display:grid;place-items:center;flex:none;box-shadow:inset 0 0 0 1px #000;text-shadow:0 0 5px var(--phos-glow)}
.layer .t{flex:1}.layer .t b{display:block;font-family:var(--f-mono);font-size:1.02rem;color:var(--ink)}
.layer .t span{font-size:13px;color:var(--ink-soft)}
.layer .chev{color:var(--rust);font-weight:700;font-family:var(--f-mono);transition:transform var(--t)}
.layer.open{border-left-color:var(--rust)}.layer.open .chev{transform:rotate(90deg)}
.detail{display:none;background:radial-gradient(130% 130% at 50% 0,#1a140d,#0b0804);color:var(--phos);border-radius:6px;margin:-1px 0 3px 46px;padding:14px 18px;box-shadow:inset 0 0 24px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,178,62,.2)}
.detail.open{display:block;animation:fade .25s var(--ease)}
.detail ul{margin:0;padding-left:18px}
.detail li{font-family:var(--f-mono);font-size:13px;color:#ecd6b0;margin-bottom:7px;line-height:1.5}
.detail li:last-child{margin-bottom:0}.detail li b{color:var(--phos);text-shadow:0 0 5px var(--phos-glow)}
.flow{text-align:center;color:var(--rust);font-family:var(--f-mono);font-size:18px;line-height:1;margin:-3px 0}
.hint{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-soft);margin-top:12px}
.pain{display:flex;gap:12px;align-items:flex-start}.pain .x{color:var(--bad);font-weight:700;font-family:var(--f-mono);flex:none}

/* ---------- Experience roles (labeled drawers) ---------- */
.xp{display:grid;gap:13px}
.role{position:relative;background:linear-gradient(var(--plastic-hi),var(--plastic));border:1px solid var(--plastic-dk);border-radius:8px;box-shadow:var(--bevel),var(--drop);overflow:hidden}
.role-head{display:flex;gap:18px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;padding:20px 22px}
.role-head .yrs{font-family:var(--f-mono);font-size:12.5px;color:var(--rust-dk);font-weight:600;flex:none;width:130px;padding-top:3px}
[data-theme="dark"] .role-head .yrs{color:var(--rust-soft)}
.role-head .meta{flex:1;min-width:0}.role-head h3{font-size:1.16rem;margin:0 0 3px;font-weight:700}
.role-head .org{color:var(--ink-2);font-size:.96rem}.role-head .org b{color:var(--ink)}
.role-head .loc{font-family:var(--f-mono);color:var(--ink-soft);font-size:.85rem;margin-top:3px}
.role-head .chev{flex:none;color:var(--rust);align-self:center;font-family:var(--f-mono);transition:transform var(--t) var(--ease)}
.role.open .role-head .chev{transform:rotate(90deg)}
.role-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-slow) var(--ease)}
.role.open .role-body{grid-template-rows:1fr}
.role-body .inner{overflow:hidden}.role-body .pad{padding:0 22px 22px}
.role-body .divider{border-top:1px dashed var(--plastic-seam);margin-bottom:16px}
.role-body ul{margin:0;padding-left:20px}.role-body li{margin-bottom:9px;font-size:.96rem;color:var(--ink-2)}
.role-body li:last-child{margin-bottom:0}
@media(max-width:680px){.role-head{flex-wrap:wrap;gap:6px 14px;padding:18px}.role-head .yrs{width:auto;order:1}.role-head .chev{order:2;margin-left:auto}.role-head .meta{order:3;flex-basis:100%}.role-body .pad{padding:0 18px 18px}}

/* ---------- Gallery (taped prints / slides) ---------- */
.gal-filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.gal-filters button{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);
  background:linear-gradient(var(--plastic-hi),var(--plastic-lo));border:1px solid var(--plastic-dk);border-radius:5px;padding:9px 15px;box-shadow:var(--bevel)}
.gal-filters button[aria-pressed="true"]{background:linear-gradient(var(--rust),var(--rust-dk));color:#fff;border-color:var(--rust-dk)}
.gal-grid{column-count:3;column-gap:18px}
@media(max-width:880px){.gal-grid{column-count:2}}@media(max-width:520px){.gal-grid{column-count:1}}
.gal-item{break-inside:avoid;margin:0 0 18px;position:relative;background:var(--paper);padding:10px 10px 12px;border:1px solid var(--paper-edge);
  box-shadow:var(--drop);cursor:zoom-in;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.gal-item:nth-child(3n){transform:rotate(-.8deg)}.gal-item:nth-child(4n){transform:rotate(.7deg)}
.gal-item:hover{transform:rotate(0) translateY(-3px) scale(1.01);box-shadow:var(--drop-lg);z-index:2}
.gal-item img{width:100%;height:auto;display:block;background:#0b0804}
.gal-item .cap{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-2);padding:9px 2px 1px;line-height:1.35}
.gal-item .badge{position:absolute;top:2px;left:2px;font-family:var(--f-mono);font-size:9.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:#fff;background:var(--rust);padding:3px 8px;transform:rotate(-2deg);box-shadow:0 1px 3px rgba(0,0,0,.3)}
/* masking-tape corner on each print */
/* masking tape — straddles the top edge like it's holding the print down */
.gal-item::before{content:"";position:absolute;top:-13px;right:18px;width:78px;height:30px;
  background:var(--tape);border:1px solid var(--tape-edge);transform:rotate(-2.5deg);
  box-shadow:0 2px 6px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.08);z-index:4}
.gal-item:nth-child(2n)::before{transform:rotate(2.2deg);right:32px}
.gal-item.ph{cursor:default;aspect-ratio:4/3;display:grid;place-items:center;text-align:center;background:#0d0a06;color:var(--phos-dim);overflow:hidden}
.gal-item.ph::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px,rgba(0,0,0,.2) 2px 3px)}
.gal-item.ph:hover{transform:rotate(0)}
.gal-item.ph .pt{font-family:var(--f-mono);font-size:12px;color:var(--phos-dim);max-width:24ch;line-height:1.45;position:relative;z-index:1;padding:14px}
.gal-item.ph .pt b{display:block;color:var(--phos);margin-bottom:5px;text-shadow:0 0 6px var(--phos-glow)}

/* lightbox (light table) */
.lb{position:fixed;inset:0;z-index:90;background:rgba(8,6,3,.94);display:none;align-items:center;justify-content:center;padding:28px;opacity:0;transition:opacity var(--t)}
.lb.open{display:flex;opacity:1}
.lb img{max-width:min(1100px,94vw);max-height:84vh;background:#0b0804;padding:10px;border:1px solid #2a2418;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.lb .lb-cap{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-family:var(--f-mono);color:var(--phos-dim);font-size:13px;padding:0 24px}
.lb .lb-x,.lb .lb-nav{position:absolute;background:rgba(255,178,62,.1);border:1px solid rgba(255,178,62,.35);color:var(--phos);width:46px;height:46px;border-radius:6px;display:grid;place-items:center;font-family:var(--f-mono)}
.lb .lb-x:hover,.lb .lb-nav:hover{background:rgba(255,178,62,.22)}
.lb .lb-x{top:22px;right:22px}.lb .lb-nav{top:50%;transform:translateY(-50%)}.lb .lb-prev{left:18px}.lb .lb-next{right:18px}
@media(max-width:600px){.lb .lb-nav{top:auto;bottom:20px;transform:none}.lb .lb-prev{left:24px}.lb .lb-next{right:24px}}

/* ---------- Callout / disclaimer ---------- */
.callout{position:relative;overflow:hidden;display:flex;gap:14px;background:var(--paper);border:1px solid var(--paper-edge);border-left:4px solid var(--rust);border-radius:4px;padding:16px 20px;color:var(--ink-2)}
.callout::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.08;mix-blend-mode:normal;background:
  repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 1px,transparent 1px 18px)}
.callout::before{content:"";position:absolute;right:0;top:0;width:34px;height:34px;background:linear-gradient(225deg,var(--paper-edge),var(--paper) 55%,rgba(0,0,0,.12) 56%,transparent 57%);
  box-shadow:-1px 1px 2px rgba(0,0,0,.12)}
.callout .ic{flex:none;color:var(--rust)}.callout p{margin:0;font-size:.94rem;color:var(--ink-2)}
.callout .ic,.callout p{position:relative;z-index:1}
.source-list{display:grid;grid-template-columns:20px 1fr;gap:8px 14px}
.source-list .ic{grid-row:1 / span 2}
.source-list .source-links{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:2px}
.disc{font-family:var(--f-mono);font-size:12px;color:var(--ink-soft);max-width:660px;line-height:1.55}

/* ---------- Service hub pages ---------- */
.service-page .service-hero{padding-bottom:clamp(32px,5vw,60px)}
.service-hero .hero-screen{padding-bottom:clamp(34px,5vw,58px)}
.service-hero h1{max-width:20ch}
.service-intro{padding-top:clamp(24px,4vw,44px)}
.service-grid .card h3{font-size:1.04rem}
.service-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.service-columns{grid-template-columns:1fr}}
.service-list ul{margin:12px 0 0;padding-left:20px;color:var(--ink-2)}
.service-list li{margin-bottom:10px}
.service-list li:last-child{margin-bottom:0}
.service-proof .readout .v{font-size:clamp(1.28rem,1.02rem + 1vw,1.7rem)}
.service-proof .readout .l{max-width:22ch}
.service-related .work-card h3{font-size:1.08rem}
.service-related .work-card p{font-size:.92rem}

/* ---------- Resource tools / lead magnets ---------- */
.resource-page .hero h1{max-width:17ch}
.tool-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:30px;align-items:start}
@media(max-width:980px){.tool-layout{grid-template-columns:1fr}}
.tool-copy{position:sticky;top:calc(var(--nav-h) + 22px)}
@media(max-width:980px){.tool-copy{position:static}}
.tool-meter{margin-top:22px}
.tool-meter ul{margin:12px 0 0;padding-left:20px;color:var(--ink-2)}
.tool-meter li{margin-bottom:9px}.tool-meter li:last-child{margin-bottom:0}
.tool-panel{display:grid;gap:22px;min-width:0}
.tool-promo{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center}
@media(max-width:720px){.tool-promo{grid-template-columns:1fr}}
.tool-promo p{max-width:66ch}

.triage-form{display:grid;gap:18px}
.triage-question{border:0;margin:0;padding:0;min-width:0}
.triage-question legend{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-weight:700;color:var(--ink);
  margin:0 0 10px;line-height:1.25}
.triage-question legend span{display:grid;place-items:center;flex:none;width:32px;height:30px;border-radius:5px;
  background:linear-gradient(var(--rust),var(--rust-dk));color:#fff;font-size:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.triage-choice{display:block;position:relative;margin:0 0 9px}
.triage-choice:last-child{margin-bottom:0}
.triage-choice input{position:absolute;opacity:0;inset:0;width:1px;height:1px}
.choice-body{display:block;position:relative;overflow:hidden;background:linear-gradient(var(--plastic-hi),var(--plastic));
  border:1px solid var(--plastic-dk);border-radius:7px;padding:14px 16px 14px 42px;box-shadow:var(--bevel);cursor:pointer;
  transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast),background var(--t-fast)}
.choice-body::before{content:"";position:absolute;left:15px;top:17px;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,var(--metal-hi),var(--metal) 60%,var(--metal-dk));
  box-shadow:0 1px 2px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.25)}
.choice-body::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:normal;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px 4px)}
.choice-body b{display:block;font-family:var(--f-mono);font-size:.98rem;color:var(--ink);line-height:1.3}
.choice-body small{display:block;color:var(--ink-2);font-size:.9rem;line-height:1.45;margin-top:4px}
.triage-choice:hover .choice-body{transform:translateY(-1px);border-color:var(--rust);box-shadow:var(--bevel),0 4px 10px rgba(40,30,15,.18)}
.triage-choice input:focus-visible + .choice-body{outline:2.5px solid var(--rust);outline-offset:3px}
.triage-choice input:checked + .choice-body{border-color:var(--rust-dk);background:linear-gradient(#efe2c3,var(--plastic-hi));
  box-shadow:inset 0 0 0 2px rgba(176,86,63,.18),var(--bevel),0 4px 10px rgba(40,30,15,.18)}
.triage-choice input:checked + .choice-body::before{background:radial-gradient(circle at 40% 35%,var(--phos-hi),var(--phos) 58%,var(--phos-dim));
  box-shadow:0 0 10px var(--phos-glow),inset 0 0 0 1px rgba(0,0,0,.25)}
.triage-tools-field{margin:2px 0 4px}
.triage-actions{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;background:var(--paper);border:1px solid var(--paper-edge);
  border-left:4px solid var(--rust);border-radius:4px;padding:16px 18px;box-shadow:var(--drop)}
.triage-actions .form-note{max-width:48ch;margin:0}

.triage-result[hidden]{display:none}
.triage-result{position:relative;scroll-margin-top:calc(var(--nav-h) + 20px)}
.result-screen{position:relative;isolation:isolate;overflow:hidden;color:var(--phos);
  background:radial-gradient(130% 130% at 50% 28%,#1d1710,#0b0804);border-radius:10px;padding:clamp(22px,3vw,34px);
  box-shadow:inset 0 0 70px rgba(0,0,0,.8),inset 0 0 0 2px #050301,var(--drop-lg)}
.result-screen::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px,rgba(0,0,0,.17) 2px 3px),
             repeating-linear-gradient(90deg,rgba(255,178,62,.04) 0 1px,transparent 1px 6px)}
.result-screen > *{position:relative;z-index:2}
.result-screen h2{font-size:clamp(1.45rem,1.06rem + 1.2vw,2rem);color:var(--phos);text-shadow:0 0 12px var(--phos-glow);margin:0 0 10px}
.result-screen h3{font-size:1rem;color:var(--phos-hi);margin:20px 0 8px;text-shadow:0 0 8px var(--phos-glow)}
.result-screen p{color:#ecd6b0}
.result-screen ul{margin:0;padding-left:20px;color:#ecd6b0}
.result-screen li{margin-bottom:8px}.result-screen li:last-child{margin-bottom:0}
.score-bars{display:grid;gap:8px;margin:20px 0 6px}
.score-row{display:grid;grid-template-columns:105px 1fr 36px;gap:10px;align-items:center;font-family:var(--f-mono);font-size:12px;color:var(--phos-dim)}
.score-row b{color:var(--phos);text-align:right}
.score-track{height:10px;border-radius:10px;background:rgba(255,178,62,.12);border:1px solid rgba(255,178,62,.22);overflow:hidden}
.score-track i{display:block;height:100%;width:var(--score,0%);background:linear-gradient(90deg,var(--phos-dim),var(--phos-hi));
  box-shadow:0 0 10px var(--phos-glow);transition:width var(--t-slow) var(--ease)}
.answer-list li{font-family:var(--f-mono);font-size:12.5px;line-height:1.5;color:var(--phos-dim)}
.answer-list b{color:var(--phos)}
@media(max-width:560px){
  .score-row{grid-template-columns:1fr 34px}
  .score-row span{grid-column:1 / -1}
}

/* ---------- Contact form (control panel) ---------- */
.contact-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:34px;align-items:start}
.contact-copy .lede{color:#ecd6b0;max-width:54ch}
.contact-copy .lede b{color:var(--phos);text-shadow:0 0 6px var(--phos-glow)}
.contact-points{display:grid;gap:10px;margin:22px 0 24px}
.contact-points div{font-family:var(--f-mono);font-size:12.5px;line-height:1.5;color:var(--phos-dim);
  background:rgba(255,178,62,.07);border:1px solid rgba(255,178,62,.22);border-radius:6px;padding:11px 13px}
.contact-points b{color:var(--phos)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:24px}}
.form-panel{background:linear-gradient(var(--plastic-hi),var(--plastic));border:1px solid var(--plastic-dk);border-radius:8px;
  padding:clamp(22px,3vw,32px);box-shadow:var(--bevel),var(--drop-lg);position:relative;overflow:hidden}
.form-panel::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(39,33,24,.18);border-radius:6px;pointer-events:none}
.form-panel::after{content:"";position:absolute;left:-8%;right:-8%;top:-40%;height:28%;pointer-events:none;opacity:.10;mix-blend-mode:normal;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.55) 45%,rgba(255,178,62,.35) 52%,transparent)}
.form-panel > *{position:relative;z-index:1}
.field{margin-bottom:16px}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.field.two{grid-template-columns:1fr;gap:0}}
.field label{display:block;font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2);
  background:#211c14;color:var(--label-text);padding:4px 9px;border-radius:3px;margin-bottom:8px;width:fit-content;
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.5)}
.field input,.field select,.field textarea{width:100%;font-family:var(--f-mono);font-size:14px;color:var(--phos);
  background:radial-gradient(130% 130% at 50% 0,#1a140d,#0b0804);border:1px solid #000;border-radius:6px;padding:12px 14px;
  box-shadow:inset 0 0 18px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,178,62,.12);text-shadow:0 0 5px var(--phos-glow);outline:none;
  transition:box-shadow var(--t-fast)}
.field input::placeholder,.field textarea::placeholder{color:var(--phos-dim);opacity:.55}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:inset 0 0 22px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,178,62,.45)}
.field textarea{resize:vertical;min-height:120px;line-height:1.5}
.field select{appearance:none;cursor:pointer}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-soft);margin-top:4px}
.form-status{font-family:var(--f-mono);font-size:13px;margin-top:14px;min-height:1.2em}
.form-status.ok{color:var(--good)}.form-status.err{color:var(--bad)}

/* ---------- Footer (the back of the rack) ---------- */
.site-footer{position:relative;background:linear-gradient(#221d15,#171209);color:#cabd9f;border-top:3px solid var(--plastic-dk);
  box-shadow:inset 0 3px 0 #0a0805}
.site-footer .wrap{position:relative;z-index:1;padding:clamp(44px,6vw,68px) var(--gutter) 36px}
.footer-top{display:grid;grid-template-columns:1.35fr .9fr .9fr .75fr;gap:32px}
@media(max-width:760px){.footer-top{grid-template-columns:1fr;gap:26px}}
.site-footer .kicker{background:#070503}
.site-footer h2{color:#f0e6cf;font-family:var(--f-mono);font-size:clamp(1.3rem,1.05rem+1.2vw,1.7rem);margin:0 0 10px;max-width:20ch}
.site-footer .tagline{color:#b3a886;max-width:34ch;font-size:.95rem}
.site-footer .col h4{color:#e6dcc2;font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 14px;font-weight:600}
.site-footer .col a{display:block;color:#b3a886;padding:5px 0;font-family:var(--f-mono);font-size:13.5px;transition:color var(--t-fast)}
.site-footer .col a:hover{color:var(--phos)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;align-items:center;margin-top:36px;padding-top:20px;
  border-top:1px solid #36302279;font-family:var(--f-mono);font-size:12px;color:#8a7f64}
.footer-bottom .built{display:inline-flex;align-items:center;gap:8px}.footer-bottom .built .gd{color:var(--phos)}

/* ---------- Legal pages ---------- */
.legal-hero .hero-screen{padding-bottom:clamp(32px,4vw,48px)}
.legal-doc p{color:var(--ink-2)}
.legal-list{margin:14px 0 18px;padding-left:22px;color:var(--ink-2)}
.legal-list li{margin-bottom:10px}
.legal-list li:last-child{margin-bottom:0}

/* ---------- Motion policy ---------- */
.reveal,.reveal.in{opacity:1;transform:none}
.text-entry-cursor{opacity:.7}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- a11y ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:#211c14;color:var(--label-text);font-family:var(--f-mono);padding:10px 16px;border-radius:6px}
.skip:focus{left:16px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .signal-flow .chip,.signal-flow .signal-legend div,.signal-flow .signal-legend div::after,.signal-flow .gate-screen span,.signal-flow .gate-bar::before,.signal-flow .clean-card{animation:none!important}
  .signal-flow .chip{opacity:.58}
  .signal-flow .gate-screen span{opacity:.82}
  .signal-flow .gate-bar::before{transform:none;clip-path:inset(0 0 0 0);opacity:.55}
  .signal-flow .clean-card{opacity:1;transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 14px rgba(255,178,62,.12)}
}
@media (prefers-reduced-data: reduce){
  body::after,.card::after,.cluster::after,.proof::after,.work-card::after,.service-lane::after,.support-lane::after,.callout::after,.choice-body::after,.form-panel::after{display:none}
  .crt::before,.hero-screen::before,.band-screen::before,.band-dark::before,.result-screen::before,.kpi::after{display:none}
}
@media (hover:none),(pointer:coarse),(max-width:760px){
  .card.lift:hover,.work-card:hover,.service-lane:hover,.support-lane:hover,.gal-item:hover,.layer:hover{transform:none}
  .card.lift:hover,.work-card:hover,.service-lane:hover,.support-lane:hover,.gal-item:hover{box-shadow:var(--bevel),var(--drop)}
  .crt,.hero-screen,.band-screen,.band-dark,.result-screen{box-shadow:inset 0 0 0 2px #05030188, var(--drop)}
}

/* ---------- utilities ---------- */
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.4rem}
.mb-0{margin-bottom:0}.nowrap{white-space:nowrap}
.hr{border:0;border-top:1px solid var(--plastic-dk);margin:0}

/* ============================================================
   Conditional intake wizard (contact form). Reuses .form-panel,
   .field and .triage-choice styling; adds stepping + branching.
   Text colors are scoped under .intake-wiz to override the
   .band-screen p {color:#ecd6b0} rule on the light form panel.
   ============================================================ */
.intake-wiz{min-width:0}

/* progress header (shown only once JS marks the form ready) */
.wiz-head{display:none;margin:0 0 18px}
.intake-ready .wiz-head{display:block}
.intake-wiz .wiz-progress{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2);margin:0 0 8px}
.intake-wiz .wiz-progress b{color:var(--rust-dk)}
.wiz-bar{height:6px;border-radius:6px;background:rgba(39,33,24,.14);overflow:hidden}
.wiz-bar i{display:block;height:100%;width:25%;border-radius:6px;background:linear-gradient(90deg,var(--rust),var(--rust-dk));transition:width .3s ease}

/* steps: exactly one visible. No animation/opacity gates visibility — a paused
   or throttled CSS timeline (iOS Low Power Mode, backgrounded tabs) must never
   be able to leave a step invisible. Pure display, fully deterministic. JS also
   forces the active step visible inline as a belt-and-suspenders failsafe. */
.wiz-step{display:none}
.wiz-step.active{display:block}

/* question blocks + card groups */
.wiz-q{margin-bottom:16px}
.intake-wiz .wiz-q > label{display:block;font-family:var(--f-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2);margin-bottom:8px}
.intake-wiz .wiz-hint{font-family:var(--f-mono);font-size:12px;color:var(--ink-soft);line-height:1.45;margin:0 0 10px}
.intake-wiz .opt{color:var(--ink-soft);font-weight:400;text-transform:none;letter-spacing:0}
.wiz-cards{display:grid;gap:9px}
.wiz-cards.two{grid-template-columns:1fr 1fr}
@media(max-width:560px){.wiz-cards.two{grid-template-columns:1fr}}
.wiz-branch{margin:2px 0 0;padding-top:14px;border-top:1px dashed rgba(39,33,24,.2)}

/* step nav (shown only once ready) */
.wiz-nav{display:none;justify-content:space-between;align-items:center;gap:12px;margin-top:20px}
.intake-ready .wiz-nav{display:flex}
.wiz-nav .btn{margin:0}

/* routed acknowledgement banner */
/* Self-contained dark "readout": high-contrast in both light and dark themes
   (the previous fixed light gradient went unreadable in dark mode). */
.wiz-ack{font-family:var(--f-mono);font-size:13px;line-height:1.55;color:#ecd6b0;background:#0f0a05;border:1px solid rgba(255,178,62,.35);border-left:3px solid var(--phos);border-radius:6px;padding:12px 14px;margin:0 0 18px}
.intake-wiz .wiz-ack b{color:var(--phos-hi);font-weight:700}
.wiz-ack[hidden]{display:none}

/* success panel */
.wiz-done[hidden]{display:none}
.intake-wiz .wiz-done h3{font-family:var(--f-mono);font-size:1.05rem;color:var(--ink);margin:0 0 10px}
.intake-wiz .wiz-done p{font-family:var(--f-mono);font-size:13px;color:var(--ink-2);line-height:1.55;margin:0}

@media(prefers-reduced-motion:reduce){.wiz-bar i{transition:none}}