/* 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 ---------- */

.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);
}
.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);
}
.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 */
.scrub.opener { height: 940vh; }

/* ---------- 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;
}
.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;
  background:
    radial-gradient(42% 120% at 50% 0%, rgba(214, 222, 235, 0.055), transparent 72%),
    repeating-linear-gradient(180deg,
      rgba(214, 222, 235, 0.04) 0px, rgba(214, 222, 235, 0.04) 1px,
      transparent 1px, transparent 7px);
  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%);
  animation: rippleDrift 14s linear infinite;
}
@keyframes rippleDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 0, 0 112px; }
}
@media (prefers-reduced-motion: reduce) { .mirror-ripple { 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);
}
.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 (door sits behind the content column there) */
.door-cta {
  display: none;
  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);
  background: transparent; cursor: pointer;
  border: 1.5px solid var(--nrx-cta-primary);
  padding: var(--nrx-space-3) var(--nrx-space-5);
  justify-self: start;
  box-shadow: 0 0 18px color-mix(in srgb, var(--nrx-cta-primary) 25%, transparent);
}
.door-cta:hover, .door-cta:focus-visible {
  box-shadow: 0 0 30px color-mix(in srgb, var(--nrx-cta-primary) 50%, 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, button entry, pictured doorway retired.
   This block must stay AFTER every .door-hotspot base rule — media queries add
   no specificity, so at equal specificity only source order makes the
   display:none 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; }
  .consult-form { grid-column: 1; grid-row: auto; }
  .door-cta { display: inline-block; }
  .door-hotspot { display: none; }
}