/* Tier1 Networkz — style.css
   One stylesheet, system fonts, no third-party requests. */

:root{
  /* dark — the default theme */
  --bg:#1B242F;
  --bg-2:#0F151C;
  --panel:#0B1220;
  --steel:#7C93A6;
  --steel-light:#B9C6D1;
  --text:#EDF1F5;
  --muted:#A9B8C6;
  --line:rgba(185,198,209,0.16);
  --surface:rgba(185,198,209,.055);
  --surface-hover:rgba(185,198,209,.1);
  --pill-bg:rgba(11,18,32,.72);
  --pill-line:rgba(185,198,209,.16);
  --pill-shadow:0 18px 40px rgba(0,0,0,.4);
  --pill-shadow-scrolled:0 20px 46px rgba(0,0,0,.52);
  --grain-opacity:.035;
  --hero-g1:#212C39; --hero-g2:#1B242F; --hero-g3:#0F151C;
  --intro-r1:rgba(185,198,209,.28); --intro-r2:rgba(124,147,166,.16);
  --grid-line:rgba(185,198,209,.06);
  --vignette-rgb:15,21,28;
  --sheen-rgb:255,255,255;
  --mesh-line-rgb:185,198,209;
  --mesh-node-rgb:210,220,228;
  color-scheme:dark;

  /* theme-constant — same in both themes. The whoami/matrix/bourne
     terminal easter egg stays permanently dark on purpose (Chris's explicit
     call, not an assumption on my part this time): it reads as an actual
     terminal window, which conventionally stays dark regardless of the
     app around it. Defining these only once, here, and never redeclaring
     them under [data-theme="light"], is what keeps them constant. */
  --red:#B22234;
  --red-hover:#C42B40;
  --ok:#3FE0D0;
  --term-bg:#0B1220; --term-line:rgba(185,198,209,.25);
  --term-text:#CDE8E4; --term-prompt:#3FE0D0; --term-dim:#9AAAC0;
  --term-bar-bg:rgba(255,255,255,.03); --term-bar-line:rgba(255,255,255,.06); --term-dot:rgba(255,255,255,.15);
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  --gut:clamp(1.25rem,5.5vw,5.5rem);
  --max:78rem;
  --ease:cubic-bezier(.16,.8,.24,1);
}

/* light theme: only on explicit request (the toggle). Dark is always the
   starting point (see below for why), but once chosen, light applies
   everywhere — hero and the coming-soon intro included, both as real
   canvas colors, not just CSS. An earlier draft kept those two
   permanently dark as a design choice I hadn't asked about; Chris
   rejected that plainly ("light mode means light mode period end of
   story"), so every color on the page, including inside canvas-drawn
   elements, now has a real light-mode value here instead of being
   hardcoded. The one deliberate exception is the whoami/matrix/bourne
   terminal, which Chris asked to keep permanently dark — that's his call,
   made explicitly, not an assumption; see where --term-* is defined. */
:root[data-theme="light"]{
  --bg:#F3F6F8; --bg-2:#E7ECF0; --panel:#FFFFFF;
  --steel:#5C7386; --steel-light:#33455A;
  --text:#152029; --muted:#4B5D6D;
  --line:rgba(21,32,41,0.12);
  --surface:rgba(21,32,41,.045); --surface-hover:rgba(21,32,41,.08);
  --pill-bg:rgba(255,255,255,.78); --pill-line:rgba(21,32,41,.12);
  --pill-shadow:0 18px 40px rgba(21,32,41,.16); --pill-shadow-scrolled:0 20px 46px rgba(21,32,41,.22);
  --grain-opacity:.02;
  --ok:#0E8F83;
  --hero-g1:#EDF2F5; --hero-g2:#F3F6F8; --hero-g3:#E7ECF0;
  --intro-r1:rgba(92,115,134,.14); --intro-r2:rgba(92,115,134,.08);
  --grid-line:rgba(21,32,41,.07);
  --vignette-rgb:225,232,237;
  --sheen-rgb:21,32,41;
  --mesh-line-rgb:92,115,134;
  --mesh-node-rgb:60,78,94;
  /* --term-* intentionally not redeclared here — see the comment where
     they're defined; the terminal stays dark in both themes */
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{position:relative;margin:0;background:var(--bg);color:var(--text);font:400 .95rem/1.65 var(--sans);min-height:100vh}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
img,svg,canvas{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--steel-light);outline-offset:3px}

/* very quiet film-grain, self-contained data: URI — no external request */
body::before{
  content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:var(--grain-opacity);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip{position:absolute;left:1rem;top:-5rem;z-index:100;background:var(--steel-light);color:var(--bg-2);padding:.75rem 1rem;font-weight:600;text-decoration:none}
.skip:focus{top:1rem}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

/* ---------- KITT scanner — a real row of individual bulbs chasing back
   and forth, riding the bottom edge of the floating nav pill. Built as
   actual elements (site.js appends the .led spans), each one's brightness
   set via a data-level attribute rather than inline styles, so it works
   under this page's strict CSP (style-src 'self', no unsafe-inline) —
   classList/dataset changes aren't "style," a JS-set .style.opacity would
   be. Hidden in plain sight: reads as an ambient "system active" strip
   unless you know exactly what it's nodding to. ---------- */
.scanner{position:absolute;left:20px;right:20px;bottom:5px;height:3px;z-index:5;
  display:flex;align-items:stretch;gap:1.5px;pointer-events:none}
.scanner .led{flex:1;border-radius:1px;
  background:radial-gradient(circle,rgba(200,215,230,.16) 0%,rgba(140,16,30,.16) 60%,transparent 100%)}
.scanner .led[data-level="1"]{background:radial-gradient(circle,rgba(200,215,230,.35) 0%,rgba(150,18,32,.4) 60%,transparent 100%)}
.scanner .led[data-level="2"]{background:radial-gradient(circle,rgba(205,218,232,.6) 0%,rgba(165,20,34,.65) 60%,transparent 100%)}
.scanner .led[data-level="3"]{background:radial-gradient(circle,rgba(215,226,238,.85) 0%,rgba(190,24,38,.85) 55%,transparent 100%)}
.scanner .led[data-level="4"]{background:radial-gradient(circle,rgba(228,236,246,1) 0%,rgba(220,40,50,1) 50%,rgba(140,16,30,.4) 100%);
  box-shadow:0 0 6px 1px rgba(190,205,225,.75)}
@media (prefers-reduced-motion:reduce){.scanner{opacity:.6}}

/* ---------- Top nav — an actual floating pill, inset from every edge,
   glass + blur + shadow at all times (not just once scrolled), shrinks
   further on scroll. Not a full-width bar. ---------- */
.nav-wrap{position:sticky;top:0;z-index:20;height:0}
.nav{position:absolute;left:50%;top:14px;transform:translateX(-50%);isolation:isolate;
  width:min(60rem,calc(100% - 24px));display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:.8rem 1.4rem;border-radius:999px;
  background:var(--pill-bg);border:1px solid var(--pill-line);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:var(--pill-shadow);
  transition:top .3s var(--ease),padding .3s var(--ease),box-shadow .3s var(--ease),width .3s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease)}
.nav-wrap.scrolled .nav{top:8px;padding:.55rem 1.4rem;box-shadow:var(--pill-shadow-scrolled)}
.mark{display:inline-flex;align-items:center;gap:.65rem;font:600 .85rem/1 var(--sans);letter-spacing:.02em;text-decoration:none;color:var(--text);transition:font-size .3s var(--ease)}
.nav-wrap.scrolled .mark{font-size:.78rem}
.mark b{font-weight:700}
.mark .sep{color:var(--red);padding:0 .35em;font-weight:400}
.mark-glyph{width:1.7rem;height:1.7rem;flex:none;transition:width .3s var(--ease),height .3s var(--ease)}
.nav-wrap.scrolled .mark-glyph{width:1.4rem;height:1.4rem}
.mark-glyph .g-shield{fill:none;stroke:var(--steel);stroke-width:3}
.mark-glyph .g-link{stroke:var(--steel-light);stroke-width:1.6;opacity:.85}
.mark-glyph .g-node{fill:var(--steel-light)}
.mark-glyph .g-node-red{fill:var(--red)}
.mark-glyph .g-node-light{fill:var(--text)}
.nav-right{display:flex;align-items:center;gap:.6rem}
.nav-links{display:flex;gap:.25rem}
.nav-links a{position:relative;text-decoration:none;color:var(--muted);font:500 .85rem var(--sans);padding:.5rem .95rem;border-radius:999px;transition:color .2s,background-color .2s}
.nav-links a:hover{color:var(--text);background:var(--surface-hover)}
.nav-links a[aria-current="page"]{color:var(--text);background:rgba(178,34,52,.16)}

.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:2.15rem;height:2.15rem;flex:none;
  border-radius:50%;border:1px solid var(--pill-line);background:transparent;color:var(--text);cursor:pointer;padding:0;
  transition:background-color .2s,width .3s var(--ease),height .3s var(--ease)}
.theme-btn:hover{background:var(--surface-hover)}
.nav-wrap.scrolled .theme-btn{width:1.85rem;height:1.85rem}
.theme-btn svg{width:1.05rem;height:1.05rem}
.theme-btn .icon-sun{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.theme-btn .icon-moon{fill:currentColor;stroke:none;display:none}
:root[data-theme="light"] .theme-btn .icon-sun{display:none}
:root[data-theme="light"] .theme-btn .icon-moon{display:block}

/* ---------- Mobile nav: a real hamburger + dropdown panel, not the
   desktop row squeezed into less space. Below the breakpoint, the three
   text links move out of the pill entirely so the pill itself never has
   to wrap. ---------- */
.menu-btn{display:none;align-items:center;justify-content:center;width:2.15rem;height:2.15rem;flex:none;
  border-radius:50%;border:1px solid var(--pill-line);background:transparent;color:var(--text);cursor:pointer;padding:0}
.menu-btn:hover{background:var(--surface-hover)}
.menu-btn svg{width:1.1rem;height:1.1rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.menu-btn .icon-x{display:none}
.nav-wrap.menu-open .menu-btn .icon-bars{display:none}
.nav-wrap.menu-open .menu-btn .icon-x{display:block}

.mobile-panel{position:absolute;left:50%;top:64px;transform:translateX(-50%);z-index:19;
  width:min(60rem,calc(100% - 24px));
  background:var(--pill-bg);border:1px solid var(--pill-line);border-radius:20px;
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:var(--pill-shadow);padding:.6rem;
  opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-8px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s}
.nav-wrap.menu-open .mobile-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mobile-panel a{display:block;padding:.85rem 1rem;border-radius:14px;text-decoration:none;color:var(--text);font:500 1rem var(--sans);transition:background-color .2s}
.mobile-panel a:hover{background:var(--surface-hover)}
.mobile-panel a[aria-current="page"]{background:rgba(178,34,52,.16)}
.mobile-panel .btn{display:flex;justify-content:center;margin:.4rem .25rem 0}

@media (max-width:43.75rem){
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
}

/* ---------- Intro — the live coming-soon page, brought in as the first
   screen of the real site rather than kept as a separate file. Adapted,
   not copied verbatim: the original used position:fixed and its own
   inline-CSP script since it was a whole standalone page; here it's one
   section among others, so those become position:absolute scoped to
   .intro, and it reuses the site's existing .reveal/whoami mechanisms
   instead of carrying a second copy of each. Two content fixes from the
   original: "EST. 2013" (unverified, the pickup says not to use it) is
   gone, and the lede no longer describes managed services, which Tier1
   no longer offers. Every color here is a theme variable — light mode
   applies here too, same as everywhere else on the page. ---------- */
.intro{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;
  display:flex;align-items:center;justify-content:center;padding:3rem var(--gut)}
.intro-bg{position:absolute;inset:0;z-index:-5;background:
  radial-gradient(ellipse 800px 520px at 28% 22%,var(--intro-r1) 0%,transparent 58%),
  radial-gradient(ellipse 700px 480px at 78% 82%,var(--intro-r2) 0%,transparent 55%),
  linear-gradient(135deg,var(--hero-g1) 0%,var(--hero-g2) 45%,var(--hero-g3) 100%)}
.intro-sheen{position:absolute;inset:0;z-index:-4;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(115deg,transparent 28%,rgba(var(--sheen-rgb),.05) 46%,rgba(var(--sheen-rgb),.14) 50%,rgba(var(--sheen-rgb),.05) 54%,transparent 72%)}
.intro-grid{position:absolute;inset:0;z-index:-3;opacity:.5;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 700px 480px at 50% 42%,#000 0%,transparent 75%);
  mask-image:radial-gradient(ellipse 700px 480px at 50% 42%,#000 0%,transparent 75%)}
#mesh-intro{position:absolute;inset:0;z-index:-2;width:100%;height:100%;opacity:.55}
.intro-vignette{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(ellipse at center,rgba(var(--vignette-rgb),0) 0%,rgba(var(--vignette-rgb),.88) 82%),
  linear-gradient(180deg,rgba(var(--vignette-rgb),.5) 0%,rgba(var(--vignette-rgb),.04) 22%,rgba(var(--vignette-rgb),.6) 100%)}
.intro-mark{position:absolute;z-index:1;width:26px;height:26px;border:1px solid var(--line);pointer-events:none}
.intro-mark.tl{top:28px;left:28px;border-right:0;border-bottom:0}
.intro-mark.tr{top:28px;right:28px;border-left:0;border-bottom:0}
.intro-mark.bl{bottom:28px;left:28px;border-right:0;border-top:0}
.intro-mark.br{bottom:28px;right:28px;border-left:0;border-top:0}
.intro-coord{position:absolute;z-index:1;font:.65rem/1 var(--mono);letter-spacing:.08em;color:var(--muted);opacity:.65;pointer-events:none}
.intro-coord.tlc{top:34px;left:66px}
.intro-coord.brc{bottom:34px;right:66px}
.intro-main{position:relative;z-index:1;text-align:center;max-width:41rem}
.intro-status{display:inline-flex;align-items:center;gap:.55rem;font:.7rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  margin-bottom:2.25rem;padding:.4rem .9rem;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.intro-dot{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(var(--mesh-line-rgb),.4);animation:intro-pulse 2.4s ease-out infinite}
@keyframes intro-pulse{0%{box-shadow:0 0 0 0 rgba(var(--mesh-line-rgb),.4)}70%{box-shadow:0 0 0 7px rgba(var(--mesh-line-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--mesh-line-rgb),0)}}
.intro h1{font:650 clamp(2.3rem,5.6vw,3.6rem)/1.12 var(--sans);letter-spacing:.005em;text-transform:uppercase;color:var(--text)}
.intro-accent{position:relative;color:var(--steel-light);white-space:nowrap}
.intro-accent::after{content:"";position:absolute;left:2px;right:2px;bottom:.06em;height:.09em;background:var(--steel-light);opacity:.35;border-radius:2px}
.intro-lede{margin-top:1.35rem;font:.92rem/1.75 var(--sans);letter-spacing:.03em;text-transform:uppercase;color:var(--muted);max-width:29rem;margin-left:auto;margin-right:auto}
.intro-rule{width:1px;height:52px;background:linear-gradient(180deg,transparent,var(--line),transparent);margin:2.25rem auto 0}
.intro-scroll-hint{margin-top:2.5rem;font:.72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);opacity:.75}
@media (max-width:35rem){
  .intro-mark{width:18px;height:18px}
  .intro-mark.tl,.intro-mark.tr{top:18px}
  .intro-mark.bl,.intro-mark.br{bottom:18px}
  .intro-mark.tl,.intro-mark.bl{left:18px}
  .intro-mark.tr,.intro-mark.br{right:18px}
  .intro-coord{display:none}
}
@media (prefers-reduced-motion:reduce){#mesh-intro{display:none}.intro-dot{animation:none}}

/* ---------- Hero — full-bleed, no boxed side graphic. Theme-aware like
   everywhere else on the page — light mode applies here too, no exceptions. ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(4.5rem,11vw,9rem) 0 clamp(3.5rem,8vw,6.5rem)}
.hero::before{content:"";position:absolute;inset:0;z-index:-3;background:
  linear-gradient(165deg,var(--hero-g1) 0%,var(--hero-g2) 45%,var(--hero-g3) 100%)}
#mesh{position:absolute;inset:0;z-index:-2;width:100%;height:100%;opacity:.85;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--vignette-rgb),.15) 0%,var(--bg) 92%)}
/* matches .wrap's centering exactly, so the hero's left edge lines up with
   every other section's left edge on wide screens — it previously only had
   its own gutter padding with no margin:auto, so it sat noticeably further
   left than everything below it */
.hero-in{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.hero-copy{max-width:52rem}
.hero-kicker{font:500 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--steel-light)}
.hero h2{margin-top:1.5rem;font:700 clamp(2.1rem,5.7vw,4.5rem)/1.05 var(--sans);letter-spacing:-.03em;max-width:17ch;color:var(--text)}
.hero h2 .dim{color:var(--steel-light)}
.lede{margin-top:1.75rem;max-width:34rem;font-size:clamp(.95rem,1.3vw,1.1rem);line-height:1.65;color:var(--muted)}
.actions{margin-top:2.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.75rem}

.btn{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 1.6rem;background:var(--red);color:#fff;border:1px solid var(--red);border-radius:999px;font:600 .92rem/1 var(--sans);letter-spacing:.02em;text-decoration:none;transition:background .2s,border-color .2s,box-shadow .25s,transform .25s var(--ease)}
.btn:hover{background:var(--red-hover);border-color:var(--red-hover);box-shadow:0 8px 24px rgba(178,34,52,.35);transform:translateY(-2px)}
.link{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--steel-light);text-decoration:underline;text-decoration-color:rgba(var(--mesh-line-rgb),.4);text-underline-offset:.3em}
.link:hover{color:var(--text);text-decoration-color:var(--text)}
.link::after{content:"\2192";display:inline-block;margin-left:.5em;text-decoration:none;transition:transform .25s var(--ease)}
.link:hover::after{transform:translateX(4px)}

/* ---------- Sections — editorial rhythm, varied per section, no repeated grid formula ---------- */
.sec{padding:clamp(3.5rem,8vw,6rem) 0;border-top:1px solid var(--line)}
.sec-label{font:500 .72rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.sec h2{margin-top:.75rem;font:650 clamp(1.65rem,3.6vw,2.55rem)/1.15 var(--sans);letter-spacing:-.02em;max-width:20ch}
.prose-lg{margin-top:1.35rem;max-width:42rem;font-size:1.05rem;line-height:1.65;color:var(--muted)}

/* two-up chapters: big numeral + heading, no icons, no hairline card rows */
.chapters{margin-top:3rem;display:grid;gap:2.5rem}
.chapter{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.25rem 1.75rem;align-items:start}
.chapter .num{font:700 clamp(2rem,4.1vw,3.1rem)/1 var(--sans);letter-spacing:-.02em;color:var(--steel);opacity:.55;transition:color .3s var(--ease),opacity .3s var(--ease),transform .3s var(--ease)}
.chapter:hover .num{color:var(--red);opacity:1;transform:translateX(3px)}
.chapter h3{position:relative;display:inline-block;font:650 clamp(1.25rem,2.15vw,1.6rem)/1.25 var(--sans);letter-spacing:-.01em}
.chapter h3::after{content:"";position:absolute;left:0;right:0;bottom:-.2em;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.chapter:hover h3::after{transform:scaleX(1)}
.chapter p{margin-top:.75rem;max-width:36rem;color:var(--muted);font-size:.95rem}
.chapter .link{margin-top:.75rem}
.facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem;max-width:36rem}
.facts li{padding:.45rem 1rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:.82rem;color:var(--steel-light)}
@media (min-width:60rem){
  .chapters{grid-template-columns:1fr 1fr;gap:4rem}
}

/* ---------- Stat strip — rounded tiles, not boxed hairline panel ---------- */
.stats{margin-top:3rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;max-width:58rem}
@media (min-width:45rem){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stat{padding:1.5rem 1.4rem;border-radius:22px;background:var(--surface);border:1px solid var(--line);transition:background-color .25s,transform .25s var(--ease)}
.stat:hover{background:var(--surface-hover);transform:translateY(-3px)}
.stat b{display:block;font:700 clamp(1.4rem,2.5vw,1.95rem)/1 var(--sans);letter-spacing:-.02em}
.stat span{display:block;margin-top:.5rem;font:.72rem/1.4 var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.plain-list{margin-top:1rem;display:grid;gap:.6rem;max-width:40rem}
.plain-list li{position:relative;padding-left:1.1rem;color:var(--muted);font-size:.95rem}
.plain-list li::before{content:"";position:absolute;left:0;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--red)}
.note{margin-top:1.5rem;font-size:.85rem;color:var(--muted);max-width:36rem}

/* ---------- Threat map — fictional, decorative (see site.js) ---------- */
.threatmap{margin-top:2.5rem;padding:clamp(.75rem,2vw,1.5rem);border-radius:22px;border:1px solid var(--line);background:var(--surface)}
.threatmap canvas{width:100%;aspect-ratio:36/14;height:auto}

/* scroll-reveal, once, respects reduced motion.
   Gated behind .js (added by site.js) so content is visible by default —
   if JS is slow, blocked, or fails, nothing stays hidden. */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}

/* ---------- Inner pages ---------- */
/* inner pages: content edges line up with the floating nav pill (60rem) */
.page{max-width:calc(60rem + 2 * var(--gut));margin:0 auto;padding:clamp(7.5rem,10vw,8.5rem) var(--gut) 4rem}
.page h1{font:700 clamp(1.9rem,4.4vw,3.3rem)/1.1 var(--sans);letter-spacing:-.025em;max-width:18ch}
.page .prose-lg{max-width:40rem}
.block{margin-top:3.5rem;padding-top:2.25rem;border-top:1px solid var(--line)}
.block h2{font:650 clamp(1.25rem,2.15vw,1.6rem)/1.25 var(--sans);letter-spacing:-.01em;max-width:22ch}
.block > div{margin-top:1.1rem;max-width:42rem}
.block p{color:var(--muted);font-size:.95rem}
.block p + p{margin-top:1rem}
.block > div > .facts:first-child{margin-top:0}
.page > .prose-lg:not(:nth-child(2)){margin-top:3rem}
@media (min-width:60rem){
  .block{display:grid;grid-template-columns:16rem minmax(0,1fr);gap:2.5rem}
  .block > div{margin-top:0}
}
.contact-list{display:flex;flex-direction:column;gap:.75rem;margin-top:2.25rem;max-width:38rem}
.contact-list div{display:grid;grid-template-columns:4.5rem minmax(0,1fr);align-items:center;gap:1rem;padding:.6rem 1.3rem;border-radius:18px;border:1px solid var(--line);background:var(--surface)}
.contact-list dt{font:500 .72rem/1.9 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.contact-list dd{font-size:1.1rem}
.contact-list a{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration-color:rgba(var(--mesh-line-rgb),.4);text-underline-offset:.3em}

/* ---------- Services page — bento cards with animated line icons and a
   cursor-follow glow, a "server room to boardroom" staircase, and a
   self-drawing engagement timeline. Theme-aware throughout. ---------- */
.svc-page .sec-label{margin-bottom:.9rem}
.svc-page h1{max-width:22ch}
.page.svc-page > .prose-lg:not(:nth-child(2)){margin-top:1.35rem}
.svc-page h1 .dim{color:var(--steel-light)}
.svc-page h2{font:650 clamp(1.1rem,1.7vw,1.3rem)/1.3 var(--sans);letter-spacing:-.01em}

.svc-grid{margin-top:3rem;display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:45rem){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.svc-card.is-full{grid-column:1 / -1}}
@media (min-width:60rem){.svc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.svc-card.is-wide{grid-column:span 2}}
.svc-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  padding:1.6rem 1.6rem 1.75rem;border-radius:22px;border:1px solid var(--line);background:var(--surface);
  transition:border-color .35s var(--ease),transform .35s var(--ease),background-color .35s var(--ease)}
.svc-card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(178,34,52,.16),transparent 60%)}
.svc-card::after{content:"";position:absolute;left:1.6rem;right:1.6rem;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--red),transparent);transform:scaleX(.15);transform-origin:left;opacity:.7;transition:transform .6s var(--ease),opacity .35s}
.svc-card:hover{border-color:rgba(178,34,52,.45);transform:translateY(-3px)}
.svc-card:hover::before{opacity:1}
.svc-card:hover::after{transform:scaleX(1);opacity:1}
.svc-card.is-wide,.svc-card.is-full{background:linear-gradient(135deg,var(--surface-hover),var(--surface) 60%)}
.svc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.35rem}
.svc-num{font:500 .72rem/1 var(--mono);letter-spacing:.14em;color:var(--steel);opacity:.8}
@media (min-width:45rem){
  .svc-card.is-wide .svc-num,.svc-card.is-full .svc-num{position:absolute;right:1.4rem;top:.6rem;z-index:-1;
    font:700 clamp(6rem,11vw,8.5rem)/1 var(--sans);letter-spacing:-.04em;color:var(--steel);opacity:.09;transition:opacity .4s,color .4s}
  .svc-card.is-wide:hover .svc-num,.svc-card.is-full:hover .svc-num{color:var(--red);opacity:.16}
}
.svc-card p{margin-top:.6rem;color:var(--muted);font-size:.92rem;max-width:40rem}
.svc-card .svc-sub{margin-top:.75rem;padding-top:.75rem;border-top:1px dashed var(--line);font-size:.85rem}
.svc-card .facts{margin-top:1rem}

.svc-icon{width:3rem;height:3rem;overflow:visible;fill:none;stroke:var(--steel-light);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svc-icon .r{stroke:var(--red)}
.svc-icon .n{fill:var(--steel-light);stroke:none}
.svc-icon .n.r{fill:var(--red)}
.svc-icon .led{fill:var(--steel);stroke:none}
.svc-icon .d{stroke-dasharray:100;stroke-dashoffset:0}
.svc-card:hover .svc-icon .d{animation:svc-draw 1.1s var(--ease) both}
.svc-card:hover .svc-icon .n{animation:svc-pop .6s var(--ease) both}
.svc-card:hover .svc-icon .led{animation:svc-led 1s steps(2) infinite}
.svc-card:hover .svc-icon .l2{animation-delay:.25s}
.svc-card:hover .svc-icon .l3{animation-delay:.5s}
.svc-icon .spin,.svc-icon .slide{transform-box:fill-box;transform-origin:center;transition:transform .8s var(--ease)}
.svc-card:hover .svc-icon .spin{transform:rotate(180deg)}
.svc-card:hover .svc-icon .slide{transform:translateX(3px)}
@keyframes svc-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes svc-pop{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:none}}
@keyframes svc-led{0%{fill:var(--steel)}50%{fill:#3FE0D0}}
.svc-icon .n{transform-box:fill-box;transform-origin:center}

/* staggered entrance for the cards */
.js .svc-grid .reveal:nth-child(2){transition-delay:.06s}
.js .svc-grid .reveal:nth-child(3){transition-delay:.12s}
.js .svc-grid .reveal:nth-child(4){transition-delay:.06s}
.js .svc-grid .reveal:nth-child(5){transition-delay:.12s}
.js .svc-grid .reveal:nth-child(6){transition-delay:.18s}
.js .svc-grid .reveal:nth-child(7){transition-delay:.24s}

/* server room to boardroom: a rising staircase of three tiers */
.svc-levels{margin-top:clamp(4rem,9vw,6.5rem)}
.svc-levels h2,.svc-process h2{font:650 clamp(1.65rem,3.4vw,2.4rem)/1.15 var(--sans);letter-spacing:-.02em;max-width:20ch}
.levels{position:relative;margin-top:2.25rem;display:grid;gap:1rem}
.level{position:relative;padding:1.5rem 1.5rem 1.6rem;border-radius:22px;border:1px solid var(--line);background:var(--surface)}
.level-dot{position:absolute;top:-6px;left:1.5rem;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--steel-light)}
.l-3{border-color:rgba(178,34,52,.45);background:linear-gradient(160deg,rgba(178,34,52,.1),var(--surface) 55%)}
.l-3 .level-dot{border-color:var(--red);box-shadow:0 0 0 5px rgba(178,34,52,.15)}
.level-tag{display:block;font:500 .72rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--steel-light)}
.level p{margin-top:.6rem;color:var(--muted);font-size:.92rem}
@media (min-width:60rem){
  .levels{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:1.25rem}
  .l-1{margin-top:3rem}.l-2{margin-top:1.5rem}
}

/* engagement timeline: the track draws itself when the section reveals */
.svc-process{margin-top:clamp(4rem,9vw,6.5rem)}
.steps{position:relative;margin-top:2.75rem;display:grid;gap:1.75rem}
.steps li{position:relative;padding-left:3.25rem}
.step-num{position:absolute;left:0;top:-.1rem;display:flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;border-radius:50%;
  border:1px solid var(--line);background:var(--bg);font:600 .85rem/1 var(--mono);color:var(--steel-light);transition:border-color .4s,color .4s,box-shadow .4s}
.steps h3{font:650 1.05rem/1.3 var(--sans)}
.steps p{margin-top:.35rem;color:var(--muted);font-size:.9rem}
.steps::before{content:"";position:absolute;left:1.1rem;top:.5rem;bottom:.5rem;width:1px;background:var(--line)}
.steps::after{content:"";position:absolute;left:1.1rem;top:.5rem;bottom:.5rem;width:1px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform 1.8s var(--ease) .2s}
.svc-process.in .steps::after,html:not(.js) .steps::after{transform:none}
.svc-process.in .step-num{border-color:rgba(178,34,52,.6);color:var(--text);box-shadow:0 0 0 4px rgba(178,34,52,.1)}
.svc-process.in .steps li:nth-child(2) .step-num{transition-delay:.4s}
.svc-process.in .steps li:nth-child(3) .step-num{transition-delay:.75s}
.svc-process.in .steps li:nth-child(4) .step-num{transition-delay:1.1s}
.svc-process.in .steps li:nth-child(5) .step-num{transition-delay:1.45s}
@media (min-width:60rem){
  .steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:1.5rem}
  .steps li{padding-left:0;padding-top:3.25rem}
  .step-num{top:0}
  .steps::before,.steps::after{left:1.1rem;right:calc((100% - 6rem) / 5 - 1.1rem);top:1.1rem;bottom:auto;width:auto;height:1px}
  .steps::after{transform:scaleX(0);transform-origin:left}
  .svc-process.in .steps::after,html:not(.js) .steps::after{transform:none}
}

.svc-cta{margin-top:clamp(4rem,9vw,6rem);padding:clamp(1.6rem,4vw,2.5rem);border-radius:22px;border:1px solid var(--line);
  background:radial-gradient(600px circle at 100% 0%,rgba(178,34,52,.14),transparent 60%),var(--surface);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2rem}
.svc-cta p:first-child{max-width:34rem;color:var(--text);font-size:1rem}
.svc-cta .actions{margin-top:0}

/* ---------- Shared "grace" pieces reused on About, Contact and Home ---------- */
.svc-card h3{font:650 clamp(1.05rem,1.6vw,1.2rem)/1.3 var(--sans);letter-spacing:-.01em}
.svc-card .founder{margin-top:auto;padding-top:1rem;color:var(--text);font-weight:500}

/* About: track record as big-number tiles */
.track{margin-top:3rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (min-width:60rem){.track{grid-template-columns:repeat(4,minmax(0,1fr))}}
.track-item{position:relative;overflow:hidden;padding:1.5rem 1.4rem 1.4rem;border-radius:22px;border:1px solid var(--line);
  background:linear-gradient(160deg,var(--surface-hover),var(--surface) 60%);transition:border-color .35s var(--ease),transform .35s var(--ease)}
.track-item::after{content:"";position:absolute;left:1.4rem;top:0;width:2.5rem;height:2px;background:var(--red);border-radius:2px;transition:width .6s var(--ease)}
.track-item:hover{border-color:rgba(178,34,52,.45);transform:translateY(-3px)}
.track-item:hover::after{width:calc(100% - 2.8rem)}
.track-item b{display:block;font:700 clamp(2rem,4vw,2.8rem)/1 var(--sans);letter-spacing:-.03em;color:var(--text)}
.track-item span{display:block;margin-top:.7rem;font-size:.85rem;line-height:1.5;color:var(--muted)}
.about-grid{margin-top:1rem}
@media (min-width:45rem){.about-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about-grid .svc-card.is-wide{grid-column:auto}}
.how-grid{margin-top:2rem}
@media (min-width:45rem){.how-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.how-grid .svc-top{margin-bottom:1rem}

/* Home: "What we do" as compact linked cards */
.home-grid{margin-top:2.75rem}
@media (min-width:60rem){.home-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.home-card{text-decoration:none;color:inherit;padding:1.4rem 1.4rem 1.5rem}
.home-card .svc-top{margin-bottom:1.1rem}
.home-card p{font-size:.88rem}
.home-card:focus-visible{outline:2px solid var(--steel-light);outline-offset:3px}
.sec .svc-cta{margin-top:1.25rem}
.svc-cta h2{margin-top:0;max-width:24ch}

/* Contact: the form panel gets the same accent bar and cursor glow */
.contact-panel.glow{position:relative;isolation:isolate;overflow:hidden}
.contact-panel.glow::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(178,34,52,.12),transparent 60%)}
.contact-panel.glow:hover::before,.contact-panel.glow:focus-within::before{opacity:1}
.contact-panel.glow::after{content:"";position:absolute;left:clamp(1.4rem,3vw,2.25rem);right:clamp(1.4rem,3vw,2.25rem);top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--red),transparent);transform:scaleX(.15);transform-origin:left;opacity:.7;transition:transform .6s var(--ease),opacity .35s}
.contact-panel.glow:hover::after,.contact-panel.glow:focus-within::after{transform:scaleX(1);opacity:1}
.contact-strip div{transition:background-color .3s var(--ease)}
.contact-strip div:hover{background:var(--surface-hover)}

/* ---------- Work page — each site in a browser frame; hovering (or
   keyboard focus) slowly scrolls the full-page screenshot top to bottom ---------- */
.work-list{margin-top:3rem;display:grid;gap:clamp(3rem,7vw,5rem)}
.work-item{display:grid;gap:1.75rem;align-items:center}
@media (min-width:60rem){
  .work-item{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:2.75rem}
  .work-item:nth-child(even) .work-frame{order:2}
}
.work-frame{display:block;text-decoration:none;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--panel);
  box-shadow:0 24px 60px rgba(0,0,0,.35);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
:root[data-theme="light"] .work-frame{box-shadow:0 24px 60px rgba(21,32,41,.18)}
.work-frame:hover,.work-frame:focus-visible{transform:translateY(-4px);border-color:rgba(178,34,52,.5)}
.work-bar{display:flex;align-items:center;gap:6px;padding:.6rem .85rem;background:var(--surface-hover);border-bottom:1px solid var(--line)}
.work-bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.work-bar i:first-child{background:rgba(178,34,52,.7)}
.work-url{margin-left:.6rem;padding:.2rem .8rem;border-radius:999px;background:var(--bg);font:.72rem/1.4 var(--mono);color:var(--muted)}
.work-screen{position:relative;display:block;height:clamp(16rem,32vw,26rem);overflow:hidden;background:#fff}
/* light and dark captures stacked; the dark layer is clipped to the right
   of a fixed diagonal seam, and both scroll together on hover */
.ws{position:absolute;inset:0;overflow:hidden}
.ws-dark{clip-path:polygon(62% 0,100% 0,100% 100%,38% 100%)}
.ws img{display:block;width:100%;height:auto;transform:translateY(0);transition:transform 9s cubic-bezier(.45,0,.55,1)}
.work-frame:hover .ws img,.work-frame:focus-visible .ws img{transform:translateY(calc(-100% + clamp(16rem,32vw,26rem)))}
.work-screen::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:#B22234;
  clip-path:polygon(61.8% 0,62.2% 0,38.2% 100%,37.8% 100%)}
.ws-tag{position:absolute;bottom:.6rem;z-index:2;padding:.15rem .6rem;border-radius:999px;font:600 .65rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.ws-tag-l{left:.6rem;background:rgba(255,255,255,.9);color:#152029}
.ws-tag-d{right:.6rem;background:rgba(11,18,32,.88);color:#EDF1F5}
@media (prefers-reduced-motion:reduce){.ws img{transition:none}.work-frame:hover .ws img,.work-frame:focus-visible .ws img{transform:none}}
.work-kicker{font:500 .72rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.work-info h2{margin-top:.6rem;font:650 clamp(1.5rem,2.8vw,2rem)/1.2 var(--sans);letter-spacing:-.02em}
.work-info > p{margin-top:.8rem;color:var(--muted);font-size:.95rem;max-width:34rem}
.work-info .facts{margin-top:1.1rem}
.work-info .link{margin-top:.6rem}
.work-frame.is-static{cursor:default}
.work-tag{display:inline-block;vertical-align:middle;margin-left:.4rem;padding:.2rem .7rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:500 .7rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--steel-light)}

/* ---------- Contact page: full-width form first (Chris prefers email),
   details strip below, email first and phone last ---------- */
.contact-panel{margin-top:2.5rem;padding:clamp(1.4rem,3vw,2.25rem);border-radius:22px;border:1px solid var(--line);background:var(--surface)}
.contact-panel h2{font:650 clamp(1.2rem,2vw,1.45rem)/1.25 var(--sans);letter-spacing:-.01em}
.contact-panel .form-status{margin:1.25rem 0 0}
.contact-form{margin-top:1.25rem;display:grid;gap:1.1rem 1.25rem}
@media (min-width:45rem){.contact-form{grid-template-columns:repeat(3,minmax(0,1fr))}.contact-form .field-full{grid-column:1 / -1}}
.contact-form .field{display:grid;gap:.45rem;align-content:start}
.contact-form .field > label{font:500 .72rem/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.contact-form .field > label span{text-transform:none;letter-spacing:0}
.contact-form .field > input,.contact-form .field > textarea{width:100%;padding:.75rem 1rem;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:400 .95rem/1.5 var(--sans);transition:border-color .2s,background-color .2s}
.contact-form .field > textarea{resize:vertical;min-height:9rem}
.contact-form .field > input:focus,.contact-form .field > textarea:focus{outline:none;border-color:var(--steel-light)}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem}
.form-foot .note{margin:0}
.btn{cursor:pointer}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
/* form result: a clear, animated status card. Success replaces the form
   entirely; errors sit above it so the visitor can fix and resend. */
.form-status{--fs:var(--ok);display:flex;align-items:flex-start;gap:1.1rem;padding:1.25rem 1.4rem;border-radius:18px;
  border:1px solid color-mix(in srgb,var(--fs) 55%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--fs) 16%,transparent),color-mix(in srgb,var(--fs) 4%,transparent) 70%),var(--bg);
  box-shadow:0 12px 34px color-mix(in srgb,var(--fs) 14%,transparent);color:var(--text);animation:fs-in .55s var(--ease) both}
.form-status[hidden]{display:none}
.form-status:focus{outline:none}
.form-status.is-error{--fs:var(--red);animation:fs-in .55s var(--ease) both,fs-nudge .5s ease .5s}
.fs-icon{flex:none;width:2.75rem;height:2.75rem;fill:none;stroke:var(--fs);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.fs-ring{stroke-dasharray:100;stroke-dashoffset:100;opacity:.55;animation:svc-draw .8s var(--ease) .15s forwards}
.fs-mark{stroke-dasharray:100;stroke-dashoffset:100;animation:svc-draw .5s var(--ease) .75s forwards}
.fs-title{font:650 1.15rem/1.3 var(--sans);letter-spacing:-.01em;color:var(--text)}
.form-status p + p{margin-top:.3rem;color:var(--muted);font-size:.92rem}
.form-status .link{margin-top:.2rem;min-height:2.25rem}
.form-status a:not(.link){color:var(--text)}
.contact-panel.form-done > h2,.contact-panel.form-done .contact-form{display:none}
.contact-panel.form-done .form-status{margin-top:0}
@keyframes fs-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fs-nudge{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.fs-ring,.fs-mark{stroke-dashoffset:0}}

.contact-strip{margin-top:1.25rem;display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--line);border-radius:22px;background:var(--surface);overflow:hidden}
@media (min-width:45rem){.contact-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
.contact-strip div{padding:1.1rem 1.4rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 -1px -1px 0}
.contact-strip dt{font:500 .72rem/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.contact-strip dd{margin-top:.35rem;font-size:.95rem;color:var(--text)}
.contact-strip a{text-decoration-color:rgba(var(--mesh-line-rgb),.4);text-underline-offset:.3em}
.contact-discount{margin-top:1.25rem;padding:1rem 1.2rem;border-radius:14px;border-left:3px solid var(--red);background:var(--surface);font-size:.88rem;color:var(--text)}

/* ALTCHA spam check: match the site's colours in both themes */
.spam-check altcha-widget{display:block;
  --altcha-border-radius:14px;--altcha-border-color:var(--line);--altcha-color-base:var(--bg);--altcha-color-base-content:var(--text);
  --altcha-color-primary:var(--red);--altcha-color-primary-content:#fff;--altcha-color-success:var(--ok);--altcha-color-error:var(--red);
  --altcha-max-width:100%}

/* ---------- Footer ---------- */
/* side padding lines the footer up with .wrap content on wide screens */
.foot{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 2rem;padding:2rem max(var(--gut),calc((100% - var(--max)) / 2 + var(--gut)));border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.foot a{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration-color:rgba(var(--mesh-line-rgb),.4);text-underline-offset:.3em}

/* inner pages: footer edges match the 60rem content column */
main:has(.page) + .foot{padding-left:max(var(--gut),calc((100% - 60rem) / 2));padding-right:max(var(--gut),calc((100% - 60rem) / 2))}

/* ---------- Easter egg terminal (type "whoami") ---------- */
.terminal-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(6,9,14,.7);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.terminal-overlay.open{opacity:1;visibility:visible}
/* the terminal easter egg stays permanently dark in both themes, like the hero */
.terminal{width:min(30rem,88vw);background:var(--term-bg);border:1px solid var(--term-line);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.55);overflow:hidden;transform:translateY(10px);transition:transform .25s ease}
.terminal-overlay.open .terminal{transform:none}
.terminal-bar{display:flex;gap:6px;padding:.65rem .9rem;background:var(--term-bar-bg);border-bottom:1px solid var(--term-bar-line)}
.terminal-bar span{width:9px;height:9px;border-radius:50%;background:var(--term-dot)}
.terminal-body{min-height:12rem;padding:1.25rem 1.4rem 1.5rem;font:.82rem/1.85 var(--mono);color:var(--term-text);white-space:pre-wrap}
.terminal-body .prompt{color:var(--term-prompt)}
.terminal-body .dim{color:var(--term-dim)}
.terminal-overlay.matrix .terminal-body{color:#39FF88}
.terminal-overlay.matrix .terminal-body .prompt{color:#39FF88}
.terminal-overlay.matrix .terminal-body .dim{color:#2A9E5E}
.cursor{display:inline-block;width:8px;height:1em;margin-left:6px;vertical-align:text-bottom;background:var(--term-prompt);animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #mesh{display:none}
  *,*::before,*::after{transition:none !important;animation:none !important}
}