/* Self-hosted type (03) — zero third-party requests */
@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* NetRxn.com — site skeleton styles (tokens.css supplies all values).
   Zero third-party requests: no external fonts/scripts/embeds anywhere. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--nrx-bg-0);
  color: var(--nrx-text-primary);
  font-family: var(--nrx-font-ui);
}

/* ---------- chrome ---------- */

/* touch semantics: interactive elements never wait on the double-tap-zoom
   gesture arbiter (iOS tap-delay); panning/pinch on the page is untouched */
a, button, input, select, textarea, .province {
  touch-action: manipulation;
}

.hud {
  position: sticky; top: 0; z-index: var(--nrx-z-nav);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--nrx-space-6);
  padding: 0.7rem var(--nrx-gutter);
  background: color-mix(in srgb, var(--nrx-bg-0) 88%, transparent);
  border-bottom: 1px solid var(--nrx-hairline);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* touch devices: a blurred fixed header re-composites every scrolled pixel on
   mobile GPUs — trade the blur for a slightly more opaque bar (same on the
   consult form pane below). Desktop keeps the glass. */
@media (pointer: coarse) {
  .hud {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: color-mix(in srgb, var(--nrx-bg-0) 94%, transparent);
  }
}
.hud .wordmark {
  font-family: var(--nrx-font-display);
  font-weight: var(--nrx-weight-medium);
  font-size: var(--nrx-size-lg);
  letter-spacing: 0.01em;
  color: var(--nrx-text-primary);
  text-decoration: none;
}
/* skip-to-content: first tab stop (06_COMPONENTS §Navigation), visible
   only on keyboard focus */
.skip-link {
  position: absolute; left: var(--nrx-space-3); top: -100px;
  z-index: var(--nrx-z-modal);
  font-family: var(--nrx-font-mono); font-size: var(--nrx-size-xs);
  letter-spacing: var(--nrx-tracking-hud); text-transform: uppercase;
  color: var(--nrx-text-primary); text-decoration: none;
  background: var(--nrx-bg-1); border: 1px solid var(--nrx-focus-ring);
  border-radius: var(--nrx-radius-md);
  padding: var(--nrx-space-2) var(--nrx-space-3);
  transition: top 120ms ease-out;
}
.skip-link:focus { top: var(--nrx-space-3); outline: none; }

.hud nav { display: flex; gap: var(--nrx-space-6); }
.hud nav a {
  font-family: var(--nrx-font-mono); font-size: var(--nrx-size-xs);
  letter-spacing: var(--nrx-tracking-hud); text-transform: uppercase;
  color: var(--nrx-text-muted); text-decoration: none;
}
.hud nav a:hover, .hud nav a:focus-visible { color: var(--nrx-text-primary); }
.hud .hud-social { display: flex; gap: var(--nrx-space-3); align-items: center; }
.hud .hud-social a { color: var(--nrx-text-muted); display: inline-flex; }
.hud .hud-social a:hover, .hud .hud-social a:focus-visible {
  color: var(--nrx-text-primary);
}
.hud .fresh-slot {
  font-family: var(--nrx-font-mono); font-size: var(--nrx-size-xs);
  letter-spacing: var(--nrx-tracking-hud); text-transform: uppercase;
  color: var(--nrx-text-muted);
}
@media (max-width: 760px) { .hud .fresh-slot { display: none; } }
/* narrow viewports: the nav must never force page overflow */
@media (max-width: 560px) {
  .hud { gap: var(--nrx-space-2); }
  .hud nav { gap: var(--nrx-space-3); flex-wrap: wrap; }
  .hud nav a { font-size: 0.62rem; letter-spacing: 0.06em; }
}
@media (max-width: 420px) { .hud .hud-social { display: none; } }

/* ---------- Regime A: scrub stages ---------- */

.scrub { position: relative; }
.scrub.opener { height: 400vh; }
.scrub.interstitial { height: 220vh; }
.scrub .stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.scrub canvas { display: block; width: 100%; height: 100%; }
.scrub .overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none; z-index: var(--nrx-z-overlay-copy);
}
.scrub .overlay p {
  grid-area: 1 / 1; /* all lines share one cell: crossfades hold position,
                       and each line can self-align independently */
  margin: 0; max-width: 34ch; text-align: center;
  font-family: var(--nrx-font-display); font-size: var(--nrx-size-2xl);
  font-weight: var(--nrx-weight-regular); line-height: 1.25;
  color: var(--nrx-text-primary);
  text-wrap: balance;
  text-shadow: 0 1px 26px rgba(4,6,10,0.95), 0 0 10px rgba(4,6,10,0.8),
               0 2px 4px rgba(4,6,10,0.6);
}
.scrub .overlay p.pos-top-right {
  align-self: start; justify-self: end;
  text-align: right; max-width: 26ch;
  margin: 13vh 6vw 0 0;
}
/* the mark waiting at the heart of the dive (pre-baked shadow halo carries
   the contrast against the white spires) */
.scrub .overlay .overlay-mark {
  grid-area: 1 / 1;
  width: min(44vh, 60vw); height: auto;
  will-change: transform, opacity;
}
.placeholder-tag {
  position: absolute; bottom: var(--nrx-space-4); left: 50%;
  transform: translateX(-50%);
  font-family: var(--nrx-font-mono); font-size: var(--nrx-size-xs);
  letter-spacing: var(--nrx-tracking-hud); text-transform: uppercase;
  color: var(--nrx-text-muted);
  background: color-mix(in srgb, var(--nrx-bg-0) 70%, transparent);
  padding: var(--nrx-space-1) var(--nrx-space-3);
}

/* ---------- Regime B panels ---------- */

.panel {
  min-height: 100vh;
  display: grid; place-content: center; gap: var(--nrx-space-8);
  padding: var(--nrx-space-24) var(--nrx-gutter);
  max-width: 100%;
}
.panel h2 {
  margin: 0;
  font-family: var(--nrx-font-display); font-size: var(--nrx-size-3xl);
  font-weight: var(--nrx-weight-medium); line-height: 1.15;
  max-width: 24ch; text-wrap: balance;
}
.panel .body {
  margin: 0; max-width: 58ch;
  color: var(--nrx-text-secondary); line-height: 1.6;
  font-size: var(--nrx-size-md);
}
/* body-copy links read gold against the dark backdrops (UA blue/purple
   vanished there). Deliberately low specificity: the classed link styles
   (.repo-line a, .alt-line a) declared later still win their spots. */
.body a {
  color: var(--nrx-cta-primary);
  text-decoration-color: color-mix(in srgb, var(--nrx-cta-primary) 55%, transparent);
  text-underline-offset: 3px;
}
.body a:hover, .body a:focus-visible {
  color: color-mix(in srgb, var(--nrx-cta-primary) 82%, white);
}
.kicker {
  font-family: var(--nrx-font-mono); font-size: var(--nrx-size-xs);
  letter-spacing: var(--nrx-tracking-hud); text-transform: uppercase;
  color: var(--nrx-text-muted);
}

.readout { display: flex; gap: var(--nrx-space-12); flex-wrap: wrap; }
.readout .num {
  font-family: var(--nrx-font-mono); font-size: var(--nrx-size-3xl);
  font-weight: var(--nrx-weight-medium); font-variant-numeric: tabular-nums;
}
.readout .lab {
  font-family: var(--nrx-font-mono); font-size: var(--nrx-size-xs);
  letter-spacing: var(--nrx-tracking-hud); text-transform: uppercase;
  color: var(--nrx-text-muted); margin-top: var(--nrx-space-2);
}

/* epistemic accents on readouts (02: verified / frontier / no-go) */
.readout .verified .num  { color: var(--nrx-state-verified); }
.readout .frontier .num  { color: var(--nrx-state-frontier); }
.readout .nogo .num      { color: var(--nrx-state-nogo-rim); }
.readout .apex .num      { color: var(--nrx-state-frontier-highlight); }

/* the readout doubles as the atlas legend: each label carries a swatch in
   the scene's own visual language (crystal / void / particulate / beacon) */
.readout .lab::before {
  content: ""; display: inline-block; vertical-align: -1px;
  margin-right: 0.55em; width: 9px; height: 9px;
}
.readout .verified .lab::before {
  border-radius: 3px; border: 1.5px solid var(--nrx-state-verified);
  background: color-mix(in srgb, var(--nrx-state-verified) 25%, transparent);
  box-shadow: inset 0 0 3px var(--nrx-state-verified-glow);
}
.readout .nogo .lab::before {
  border-radius: 50%; background: var(--nrx-state-nogo-void);
  border: 1.5px solid var(--nrx-state-nogo-rim);
}
.readout .frontier .lab::before {
  border-radius: 50%; background: var(--nrx-state-frontier);
  box-shadow: 0 0 5px 1px color-mix(in srgb, var(--nrx-state-frontier) 70%, transparent);
}
.readout .apex .lab::before {
  width: 3px; height: 13px; border-radius: 2px; vertical-align: -3px;
  background: var(--nrx-state-frontier-highlight);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--nrx-state-frontier) 80%, transparent);
}

.fresh {
  font-family: var(--nrx-font-mono); font-size: var(--nrx-size-xs);
  letter-spacing: var(--nrx-tracking-hud); text-transform: uppercase;
  color: var(--nrx-text-muted);
}
.velocity-line {
  font-family: var(--nrx-font-mono); font-size: var(--nrx-size-sm);
  color: var(--nrx-text-secondary); font-variant-numeric: tabular-nums;
}

/* province chips (liveConstellation placeholder) */
.provinces {
  display: grid; gap: var(--nrx-space-3);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  /* viewport-clamped: the panel's max-content column would otherwise let
     the grid force page overflow on narrow screens */
  max-width: min(1080px, calc(100vw - 2 * var(--nrx-gutter)));
}
.province {
  display: flex; flex-direction: column; gap: var(--nrx-space-1);
  padding: var(--nrx-space-4);
  border: 1px solid var(--nrx-hairline);
  /* translucent so the living motif layer reads through (liveConstellation);
     text contrast holds — motif luminance stays low by construction */
  background: color-mix(in srgb, var(--nrx-bg-1) 58%, transparent);
  position: relative;
}
/* :focus (not :focus-visible): a mouse CLICK selects a province exactly
   like tabbing to it — ring + lit corridors (operator ruling) */
.province:focus { outline: 2px solid var(--nrx-focus-ring); outline-offset: 2px; }
.province .province-bridges {
  font-family: var(--nrx-font-mono); font-size: var(--nrx-size-xs);
  color: var(--nrx-text-secondary); letter-spacing: 0.04em;
}

/* liveConstellation canvas — behind the chips, inside the section */
#fields { position: relative; }
#fields .constellation-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
#fields > :not(.constellation-canvas) { position: relative; z-index: 1; }
.province-name { font-weight: var(--nrx-weight-medium); }
.province-meta {
  font-family: var(--nrx-font-mono); font-size: var(--nrx-size-xs);
  color: var(--nrx-text-muted); letter-spacing: var(--nrx-tracking-hud);
  text-transform: uppercase;
}
.province.maturity-established { border-left: 2px solid var(--nrx-state-verified); }
.province.maturity-active      { border-left: 2px solid var(--nrx-brand-structure); }
.province.maturity-forming     { border-left: 2px dashed var(--nrx-state-frontier); }

/* trace placeholder */
.trace-frame {
  display: flex; flex-wrap: wrap; gap: var(--nrx-space-2); align-items: center;
  font-family: var(--nrx-font-mono); font-size: var(--nrx-size-sm);
  color: var(--nrx-text-secondary);
}
.trace-frame .hop {
  padding: var(--nrx-space-2) var(--nrx-space-3);
  border: 1px solid var(--nrx-hairline);
}
.trace-frame .arrow { color: var(--nrx-text-muted); }
.empty-state { color: var(--nrx-text-muted); font-style: italic; }

/* ---------- forms (CTA A/B) ---------- */

form.cta {
  display: grid; gap: var(--nrx-space-4); max-width: 460px;
}
form.cta label {
  display: grid; gap: var(--nrx-space-1);
  font-family: var(--nrx-font-mono); font-size: var(--nrx-size-xs);
  letter-spacing: var(--nrx-tracking-hud); text-transform: uppercase;
  color: var(--nrx-text-muted);
}
form.cta input, form.cta select, form.cta textarea {
  font: inherit; color: var(--nrx-text-primary);
  background: var(--nrx-bg-1);
  border: 1px solid var(--nrx-hairline);
  padding: var(--nrx-space-3);
}
form.cta input:focus-visible, form.cta select:focus-visible,
form.cta textarea:focus-visible {
  outline: 2px solid var(--nrx-focus-ring); outline-offset: 1px;
}
form.cta button {
  font-family: var(--nrx-font-display); font-size: var(--nrx-size-md);
  font-weight: var(--nrx-weight-medium);
  color: var(--nrx-bg-0); background: var(--nrx-cta-primary);
  border: none; padding: var(--nrx-space-3) var(--nrx-space-6);
  cursor: pointer; justify-self: start;
}
form.cta button:hover { filter: brightness(1.08); }
form.cta .hp { position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; }

.lanes { display: grid; gap: var(--nrx-space-2); padding: 0; margin: 0;
  list-style: none; max-width: 58ch; }
.lanes li {
  padding: var(--nrx-space-3) var(--nrx-space-4);
  border: 1px solid var(--nrx-hairline);
  color: var(--nrx-text-secondary);
}

/* ---------- footer ---------- */

footer.close {
  padding: var(--nrx-space-24) var(--nrx-gutter) var(--nrx-space-12);
  display: grid; gap: var(--nrx-space-4); justify-items: center;
  text-align: center; border-top: 1px solid var(--nrx-hairline);
}
footer.close .wordmark {
  font-family: var(--nrx-font-display); font-size: var(--nrx-size-xl);
  font-weight: var(--nrx-weight-medium);
}
footer.close p { margin: 0; color: var(--nrx-text-muted);
  font-size: var(--nrx-size-sm); }
footer.close a { color: var(--nrx-text-secondary); }

/* ---------- beat backdrops (dimmed 4K stills behind live panels) ---------- */

.panel.has-backdrop {
  position: relative;
  isolation: isolate;
}
.panel.has-backdrop::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--backdrop);
  background-size: cover; background-position: center;
  opacity: 0.33;
}
.panel.has-backdrop::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, var(--nrx-bg-0) 0%, transparent 22%, transparent 72%, var(--nrx-bg-0) 100%),
    radial-gradient(ellipse at 30% 45%, color-mix(in srgb, var(--nrx-bg-0) 62%, transparent) 0%, transparent 70%);
}

/* one continuous journey+helix film: 330 frames over one long sticky stage.
   1040vh keeps the film at its original 940vh pacing with a SMALL tail
   margin (endHold 0.025 ≈ 26vh in the section cfg): just enough scroll for
   the final settled frame to actually render before the unpin — the braid
   keeps moving downward into its reflection, no static dwell (a 100vh hold
   read as a disruptive pause; operator round 2026-07-07). */
.scrub.opener { height: 1040vh; }

/* ---------- liveAtlas — the Resolution Atlas (Regime B) ---------- */
/* 130vh stage with a sticky 100vh pin: the map holds the screen while the
   page travels the extra 30vh (dwell for ignition + exploration). Canvas
   sits behind the pin's DOM layer; the has-backdrop pseudo-elements are at
   z:-1 in the isolated context, so the live render covers the poster
   (which remains the no-WebGL fallback underneath). */
.panel.atlas-stage { min-height: 130vh; padding: 0; display: block; }
.atlas-pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  box-sizing: border-box;
  display: grid; place-content: center; gap: var(--nrx-space-8);
  padding: var(--nrx-space-24) var(--nrx-gutter);
}
#atlas .atlas-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: var(--nrx-z-scene);
}
/* legibility scrim over the render, under the copy column (02 contrast) */
#atlas .atlas-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--nrx-bg-0) 78%, transparent) 0%,
      color-mix(in srgb, var(--nrx-bg-0) 45%, transparent) 34%,
      transparent 58%),
    linear-gradient(180deg, var(--nrx-bg-0) 0%, transparent 14%,
      transparent 86%, var(--nrx-bg-0) 100%);
}
.atlas-pin > :not(.atlas-canvas):not(.atlas-scrim) {
  position: relative; z-index: var(--nrx-z-overlay-copy);
}
/* layer filters — the epistemic toggles (all on by default; the symmetry
   IS the message). Pressed state never encodes by hue alone: border form
   flips solid/dashed with the accent. */
.atlas-filters { display: flex; gap: var(--nrx-space-2); margin-top: var(--nrx-space-3); }
.atlas-filter {
  font: 500 0.72rem/1 var(--nrx-font-mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--nrx-text-secondary);
  background: none; border: 1px solid var(--nrx-hairline);
  border-radius: var(--nrx-radius-pill); padding: 0.5em 1.1em; cursor: pointer;
  transition: color var(--nrx-dur-minor) var(--nrx-ease-soft),
              border-color var(--nrx-dur-minor) var(--nrx-ease-soft),
              opacity var(--nrx-dur-minor) var(--nrx-ease-soft);
}
.atlas-filter:focus-visible { outline: 2px solid var(--nrx-focus-ring); outline-offset: 2px; }
.atlas-filter[aria-pressed="true"] { border-style: solid; color: var(--nrx-text-primary); }
.atlas-filter[aria-pressed="true"][data-layer="verified"] { border-color: var(--nrx-state-verified); }
.atlas-filter[aria-pressed="true"][data-layer="frontier"] { border-color: var(--nrx-state-frontier); }
.atlas-filter[aria-pressed="true"][data-layer="nogo"]     { border-color: var(--nrx-state-nogo-rim); }
.atlas-filter[aria-pressed="false"] { border-style: dashed; opacity: 0.65; }

/* node explorer — keyboard walk (roving cursor) + gloss. The explorer layer
   never intercepts pointer events; hover hit-testing is JS-side. */
#atlas .atlas-explorer {
  position: absolute; inset: 0; z-index: var(--nrx-z-hud) !important;
  pointer-events: none;
}
#atlas .atlas-explorer:focus-visible {
  outline: 2px solid var(--nrx-focus-ring); outline-offset: -2px;
}
.atlas-cursor {
  position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border: 1.5px solid var(--nrx-focus-ring); border-radius: 50%;
  transition: left var(--nrx-dur-minor) var(--nrx-ease-settle),
              top var(--nrx-dur-minor) var(--nrx-ease-settle);
}
.atlas-gloss {
  position: absolute; max-width: 22rem; padding: var(--nrx-space-3);
  background: color-mix(in srgb, var(--nrx-bg-0) 88%, transparent);
  border: 1px solid var(--nrx-hairline); border-radius: var(--nrx-radius-md);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px); font-size: 0.82rem; line-height: 1.45;
}
.atlas-gloss .gloss-kind {
  font-family: var(--nrx-font-mono); font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--nrx-state-nogo-rim);
}
.atlas-gloss .gloss-false { color: var(--nrx-text-primary); font-style: italic;
  margin: 0.35em 0; }
.atlas-gloss .gloss-id {
  font-family: var(--nrx-font-mono); font-size: 0.72rem;
  color: var(--nrx-text-secondary); word-break: break-all;
}

/* ---------- mark hero (brand open — plays on arrival, no scroll needed) ---------- */

.mark-hero {
  /* full first viewport MINUS the sticky HUD, so the Scroll cue sits above
     the fold on arrival */
  position: relative; height: calc(100vh - 3.5rem); overflow: hidden;
  display: grid; place-items: center;
  background: #16191D; /* film shadow tone while the first frame decodes */
  animation: heroIn 1.4s var(--nrx-ease-soft) both;
}
.mark-hero .ambient {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1.18);
  filter: blur(60px) brightness(0.55) saturate(1.05);
}
.mark-hero .film {
  position: relative; z-index: 1;
  /* leaves clearance for the sticky HUD above and the scroll cue below */
  width: min(78vh, 94vw); height: min(78vh, 94vw);
  object-fit: cover;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}
.mark-hero::before,
.mark-hero::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 2;
  pointer-events: none;
}
.mark-hero::before { /* settle beneath the HUD */
  top: 0; height: 14vh;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nrx-bg-0) 85%, transparent), transparent);
}
.mark-hero::after { /* bridge the film's grey sky into the page floor;
                       ends on a SOLID bg-0 band so the next section's top
                       fade meets it on identical pixels — no seam line */
  bottom: 0; height: 26vh;
  background: linear-gradient(180deg, transparent 0%,
    color-mix(in srgb, var(--nrx-bg-0) 55%, transparent) 52%,
    var(--nrx-bg-0) 86%, var(--nrx-bg-0) 100%);
}
.hero-cue {
  position: absolute; bottom: var(--nrx-space-8); left: 50%;
  transform: translateX(-50%); z-index: 3;
  display: grid; justify-items: center; gap: var(--nrx-space-2);
  font-family: var(--nrx-font-mono); font-size: var(--nrx-size-xs);
  letter-spacing: var(--nrx-tracking-hud); text-transform: uppercase;
  color: var(--nrx-text-muted); text-decoration: none;
  opacity: 0; transition: opacity 1.2s var(--nrx-ease-soft);
}
.hero-cue.show { opacity: 1; }
.hero-cue:hover, .hero-cue:focus-visible { color: var(--nrx-text-primary); }
.hero-cue .chev { animation: cueFloat 2.2s ease-in-out infinite; }
@keyframes heroIn { from { opacity: 0; } }
@keyframes cueFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) {
  .mark-hero { animation: none; }
  .hero-cue .chev { animation: none; }
}

/* helix scrub settles into the community panel's dark top */
.scrub.fade-bottom .stage::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 12vh; z-index: 1;
  background: linear-gradient(0deg, var(--nrx-bg-0) 0%, var(--nrx-bg-0) 10%,
    transparent 100%);
  pointer-events: none;
}

/* floating film-mode control (engine/autoplay.js): re-engages the auto
   scroll ride through the opening film; visible only inside the scrub */
.film-play {
  position: fixed; left: 50%; bottom: 5vh;
  transform: translateX(-50%);
  z-index: calc(var(--nrx-z-nav) - 1);
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--nrx-text-primary);
  background: color-mix(in srgb, var(--nrx-bg-0) 60%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--nrx-cta-primary) 60%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--nrx-cta-primary) 22%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s var(--nrx-ease-soft), box-shadow 0.3s var(--nrx-ease-soft);
}
.film-play svg { margin-left: 2px; }
.film-play.show { opacity: 1; pointer-events: auto; }
.film-play:hover, .film-play:focus-visible {
  border-color: var(--nrx-cta-primary);
  box-shadow: 0 0 34px color-mix(in srgb, var(--nrx-cta-primary) 50%, transparent);
}
.film-play:focus-visible { outline: 2px solid var(--nrx-focus-ring); outline-offset: 3px; }

/* opener scrub eases in from the hero's dark tail */
.scrub.fade-top .stage::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 26vh; z-index: 1;
  background: linear-gradient(180deg, var(--nrx-bg-0) 0%, var(--nrx-bg-0) 14%,
    transparent 100%);
  pointer-events: none;
}

/* ---------- community stack (provinces + join share one backdrop) ---------- */

.panel-stack {
  position: relative;
  isolation: isolate;
}
.panel-stack::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--backdrop);
  background-size: 100% auto; background-position: top center;
  background-repeat: no-repeat;
  opacity: 0.33;
}
/* mirror exactness at the seam: the film above draws with COVER, which is
   height-driven on any viewport narrower than the footage's 16:9 — the braid
   fills 100vh with its sides cropped. Match that scale so the reflection is
   exactly as wide as the film's final frame (the width-fit base rule stays,
   correct for 16:9-and-flatter viewports where cover is width-driven). */
@media (max-aspect-ratio: 16/9) {
  .panel-stack::before { background-size: auto 100vh; }
}
/* phones/small tablets decode a center-cut 1920-wide variant instead of the
   full 3840-wide render where one exists (--backdrop-m inline): portrait
   cover shows only the middle slice anyway, and the 33MP decode + GPU upload
   hitched the first touch-scroll into these panels */
@media (max-width: 820px) {
  .panel.has-backdrop::before,
  .panel-stack::before { background-image: var(--backdrop-m, var(--backdrop)); }
}
.panel-stack::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, var(--nrx-bg-0) 0%, transparent 9%,
      transparent 34%, var(--nrx-bg-0) 62%),
    radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--nrx-bg-0) 55%, transparent) 0%, transparent 70%);
}
.panel-stack .panel { min-height: 88vh; }

/* water-line shimmer where the braid meets its reflection: faint horizontal
   ripple lines drifting downward under a fading mask, plus a soft specular
   pool centered where the braid lands */
.mirror-ripple {
  position: absolute; top: 0; left: 0; right: 0; height: 16vh;
  z-index: 0; pointer-events: none;
  overflow: hidden;
  background: radial-gradient(42% 120% at 50% 0%, rgba(214, 222, 235, 0.055), transparent 72%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95), transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95), transparent 85%);
}
/* the drifting lines ride a translateY loop on an oversized child layer —
   compositor-only. (Animating background-position here repainted a full-width
   band every frame, forever: measurable touch-scroll jank on phones right
   where the film hands off.) 112px = 16 pattern periods, so the loop seam
   is invisible. */
.mirror-ripple::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: -112px; bottom: -112px;
  background: repeating-linear-gradient(180deg,
      rgba(214, 222, 235, 0.04) 0px, rgba(214, 222, 235, 0.04) 1px,
      transparent 1px, transparent 7px);
  animation: rippleDrift 14s linear infinite;
  will-change: transform;
}
@keyframes rippleDrift {
  from { transform: translateY(0); }
  to   { transform: translateY(112px); }
}
@media (prefers-reduced-motion: reduce) { .mirror-ripple::before { animation: none; } }

/* community panel: public-repo pointer under the form */
.repo-line { display: flex; align-items: center; gap: var(--nrx-space-3); }
.repo-line a {
  color: var(--nrx-text-secondary);
  display: inline-flex; line-height: 0;
}
.repo-line a:hover, .repo-line a:focus-visible { color: var(--nrx-cta-primary); }

/* ---------- consulting door (single CTA; form crossfades in place) ---------- */

/* three-column stage: copy left, the pictured doorway centered, and the
   intake form arrives on the RIGHT — the open state balances the page
   around the door instead of jumping the layout */
.consult-copy {
  grid-column: 1; grid-row: 1;
  display: grid; gap: var(--nrx-space-8); align-content: center;
}
.consult-form {
  grid-column: 3; grid-row: 1;
  position: relative; z-index: 1;
  display: grid; gap: var(--nrx-space-6); align-content: start;
  padding: var(--nrx-space-8);
  border: 1px solid var(--nrx-hairline);
  background: color-mix(in srgb, var(--nrx-bg-0) 74%, transparent);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  /* the pane must always fit the viewport: cap + internal scroll as the
     last resort, and clear the sticky hud when scrollIntoView lands it */
  max-height: calc(100vh - 9rem);
  overflow-y: auto;
  scroll-margin-top: 5rem;
}
/* shorter desktop windows: compress the pane's chrome before the internal
   scrollbar ever has to appear */
@media (max-height: 1000px) and (min-width: 1281px) {
  .consult-form { padding: var(--nrx-space-6); gap: var(--nrx-space-4); }
  .consult-form h3 { font-size: var(--nrx-size-xl); }
  .consult-form form.cta { gap: var(--nrx-space-3); }
  .consult-form textarea { height: 4.6rem; }
}
@media (pointer: coarse) {
  .consult-form {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: color-mix(in srgb, var(--nrx-bg-0) 92%, transparent);
  }
}
.consult-form[hidden] { display: none; }
.consult-form:not([hidden]) { animation: paneIn 0.35s var(--nrx-ease-soft) both; }
@keyframes paneIn { from { opacity: 0; transform: translateX(14px); } }
.consult-form h3 {
  margin: 0;
  font-family: var(--nrx-font-display); font-size: var(--nrx-size-2xl);
  font-weight: var(--nrx-weight-medium); line-height: 1.15;
}
.pane-close {
  position: absolute; top: var(--nrx-space-3); right: var(--nrx-space-3);
  background: transparent; border: none; cursor: pointer;
  color: var(--nrx-text-muted); font-size: var(--nrx-size-lg); line-height: 1;
  padding: var(--nrx-space-2);
}
.pane-close:hover, .pane-close:focus-visible { color: var(--nrx-text-primary); }
.pane-close:focus-visible { outline: 2px solid var(--nrx-focus-ring); }
.alt-line {
  margin: 0;
  font-family: var(--nrx-font-mono); font-size: var(--nrx-size-xs);
  letter-spacing: var(--nrx-tracking-hud); text-transform: uppercase;
  color: var(--nrx-text-muted);
}
.alt-line a { color: var(--nrx-text-secondary); text-underline-offset: 3px; }
.alt-line a:hover, .alt-line a:focus-visible { color: var(--nrx-cta-primary); }

/* narrow-screen entry: the doorway as a COMPONENT — the same gold frame +
   mark-medallion language as the pictured desktop door, scaled to a UI
   element (hidden on desktop; flex on narrow screens, media block below) */
.door-cta {
  display: none;
  flex-direction: column; align-items: center; gap: var(--nrx-space-4);
  background: transparent; border: none; padding: var(--nrx-space-2);
  cursor: pointer; justify-self: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.door-cta-frame {
  width: 118px; aspect-ratio: 3 / 5;   /* the pictured doorway's proportions */
  display: grid; place-items: center;
  border: 2px solid color-mix(in srgb, var(--nrx-cta-primary) 55%, transparent);
  border-radius: var(--nrx-radius-sm);
  background: radial-gradient(ellipse at 50% 92%,
    color-mix(in srgb, var(--nrx-cta-primary) 16%, transparent) 0%,
    color-mix(in srgb, var(--nrx-cta-primary) 5%, transparent) 45%,
    transparent 75%);
  box-shadow: 0 0 26px color-mix(in srgb, var(--nrx-cta-primary) 28%, transparent),
              inset 0 0 20px color-mix(in srgb, var(--nrx-cta-primary) 14%, transparent);
  transition: box-shadow 0.4s var(--nrx-ease-soft), border-color 0.4s var(--nrx-ease-soft);
}
.door-cta-frame img {
  width: 38%; height: auto;
  margin-top: -38%;   /* medallion rests at eye level, like the pictured door */
  opacity: 0.9;
}
.door-cta-label {
  font-family: var(--nrx-font-mono); font-size: var(--nrx-size-sm);
  letter-spacing: var(--nrx-tracking-hud); text-transform: uppercase;
  color: var(--nrx-text-primary);
}
.door-cta:hover .door-cta-frame,
.door-cta:focus-visible .door-cta-frame,
.door-cta:active .door-cta-frame {
  border-color: var(--nrx-cta-primary);
  box-shadow: 0 0 44px color-mix(in srgb, var(--nrx-cta-primary) 60%, transparent),
              inset 0 0 30px color-mix(in srgb, var(--nrx-cta-primary) 28%, transparent);
}
.door-cta:focus-visible { outline: 2px solid var(--nrx-focus-ring); outline-offset: 3px; }

/* the room is the panel's stage: doorway dead-center (it is centered in the
   room image, so cover keeps it centered at every viewport), copy left,
   form right. Below 1280px the columns collapse and the button takes over. */
#consult {
  grid-template-columns: minmax(0, 30rem) minmax(160px, 1fr) minmax(0, 30rem);
  place-content: stretch; align-items: center;
}
#consult.has-backdrop::before {
  background-position: 50% center;
  opacity: 0.45;
}
.door-hotspot {
  position: absolute; z-index: 1;
  display: grid; place-items: center;
  background: transparent; padding: 0; cursor: pointer;
  border: 2px solid color-mix(in srgb, var(--nrx-cta-primary) 55%, transparent);
  border-radius: var(--nrx-radius-sm);
  box-shadow: 0 0 26px color-mix(in srgb, var(--nrx-cta-primary) 28%, transparent),
              inset 0 0 20px color-mix(in srgb, var(--nrx-cta-primary) 14%, transparent);
  transition: box-shadow 0.4s var(--nrx-ease-soft), border-color 0.4s var(--nrx-ease-soft);
}
/* the mark reads as a peephole: a small medallion centered on the door
   and raised to eye level, its gold ring catching the doorway's light */
.door-emblem {
  position: absolute; left: 37%; bottom: 61%;
  width: 26%; height: auto;
  opacity: 0.85;
  transition: opacity 0.4s var(--nrx-ease-soft);
  pointer-events: none;
}
.door-hotspot:hover .door-emblem,
.door-hotspot:focus-visible .door-emblem,
.door-hotspot[aria-expanded="true"] .door-emblem { opacity: 1; }
.door-hotspot::after {
  content: "Request an engagement";
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--nrx-font-mono); font-size: var(--nrx-size-sm);
  letter-spacing: var(--nrx-tracking-hud); text-transform: uppercase;
  color: var(--nrx-text-primary);
  text-shadow: 0 1px 14px rgba(4, 6, 10, 0.95), 0 0 8px rgba(4, 6, 10, 0.8);
}
.door-hotspot[aria-expanded="true"]::after { content: "Close"; }
.door-hotspot:hover, .door-hotspot:focus-visible {
  border-color: var(--nrx-cta-primary);
  box-shadow: 0 0 44px color-mix(in srgb, var(--nrx-cta-primary) 60%, transparent),
              inset 0 0 30px color-mix(in srgb, var(--nrx-cta-primary) 28%, transparent);
}
.door-hotspot[aria-expanded="true"] {
  /* stepped through: light floods out of the doorway */
  border-color: var(--nrx-cta-primary);
  background: radial-gradient(ellipse at 50% 88%,
    color-mix(in srgb, var(--nrx-cta-primary) 30%, transparent) 0%,
    color-mix(in srgb, var(--nrx-cta-primary) 10%, transparent) 45%,
    transparent 75%);
  box-shadow: 0 0 60px color-mix(in srgb, var(--nrx-cta-primary) 65%, transparent),
              inset 0 0 46px color-mix(in srgb, var(--nrx-cta-primary) 32%, transparent);
}
.door-hotspot:focus-visible { outline: 2px solid var(--nrx-focus-ring); outline-offset: 4px; }
/* collapse below 1280px: single column, doorway-component entry, pictured
   doorway retired. Opening the form SWAPS it into the copy column's grid cell
   (crossfade in place — no stacking, mirroring the desktop's in-place arrive).
   This block must stay AFTER every .door-hotspot/.door-cta base rule — media
   queries add no specificity, so at equal specificity only source order makes
   these overrides win (regression: mark emblem stamped over the open form on
   phones when this sat above the base rules). */
@media (max-width: 1280px) {
  #consult { grid-template-columns: minmax(0, 36rem); place-content: center start; }
  .consult-copy {
    grid-column: 1; grid-row: 1;
    transition: opacity 0.25s var(--nrx-ease-soft), visibility 0.25s;
  }
  .consult-form { grid-column: 1; grid-row: 1; }
  #consult.entered .consult-copy { opacity: 0; visibility: hidden; }
  .door-cta { display: flex; }
  .door-hotspot { display: none; }
  /* single column: the pane enters vertically, not from the right */
  .consult-form:not([hidden]) { animation: paneInY 0.35s var(--nrx-ease-soft) both; }
}
@keyframes paneInY { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) {
  .consult-form:not([hidden]) { animation: none; }
  .consult-copy { transition: none; }
}