/* ==========================================================================
   Backstop Cyber — site.css
   Direction: "Laminar". Turbulence resolving into order at a line.
   Dark mode  : instrument room. Cold steel field, signal amber, near-black.
   Light mode : survey plate. Warm paper, ink trace, burnt amber.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Font
   Space Grotesk (variable, wght 300-700), SIL OFL 1.1, vendored in-repo.
   Metric-matched fallback so the swap does not shift layout.
   -------------------------------------------------------------------------- */

/* The primary @font-face is declared ONCE, in the critical inline <style> in
   every page head, so it is available the moment the HTML is parsed. Do not
   re-declare it here: two identical faces produce two font fetches. Only the
   metric-matched fallback lives in this file. */

/* Fallback tuned to Space Grotesk's metrics: kills the swap reflow. */
@font-face {
  font-family: "Backstop Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 97%;
  ascent-override: 98%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg:        #06080b;
  --bg-1:      #0a0d12;
  --bg-2:      #10141a;
  --bg-3:      #161b23;
  --line:      #1b222b;
  --line-2:    #2b3540;

  /* Ink — all values verified >= 4.5:1 against --bg */
  --fg:        #e6ecf2;  /* 16.0:1 */
  --fg-2:      #9aa8b6;  /*  9.0:1 */
  --fg-3:      #75828f;  /*  5.1:1 */

  /* Signal */
  --amber:     #f2a33c;  /*  9.6:1 */
  --amber-hi:  #ffc172;
  --amber-dim: rgba(242, 163, 60, 0.14);
  --ice:       #7fb6d6;  /*  9.1:1 */
  --ice-dim:   rgba(127, 182, 214, 0.12);

  --on-amber:  #06080b;  /*  9.6:1 on --amber */

  /* Canvas base colour handed to the shader */
  --canvas-bg: #06080b;

  /* Type */
  --font: "Backstop Grotesk", "Backstop Fallback", ui-sans-serif, system-ui,
          -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
          "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --step-0:  clamp(1rem, 0.955rem + 0.22vw, 1.125rem);
  --step-1:  clamp(1.125rem, 1.05rem + 0.36vw, 1.3125rem);
  --step-2:  clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem);
  --step-3:  clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem);
  --step-4:  clamp(2.125rem, 1.4rem + 3.4vw, 4rem);
  --step-5:  clamp(2.6rem, 1.1rem + 6.4vw, 5.5rem);

  --label:   0.6875rem;
  --track:   0.16em;

  /* Space */
  --gutter:  clamp(1.25rem, 4.5vw, 4.5rem);
  --measure: 1380px;
  --sect-y:  clamp(5rem, 11vh, 9.5rem);

  /* Motion */
  --ease:      cubic-bezier(0.22, 0.68, 0.16, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur:       0.62s;

  --header-h: 62px;

  /* Position of the backstop line, as a fraction of the hero box.
     site.js measures the copy column and rewrites this so the line always
     lands just clear of the text, at every viewport. This value is the
     zero-JS default. The shader reads the same number. */
  --bound: 55%;

  --scrim:    linear-gradient(90deg, var(--bg) 0%,
                              var(--bg) calc(var(--bound) - 16%),
                              color-mix(in srgb, var(--bg) 74%, transparent) calc(var(--bound) - 4%),
                              transparent calc(var(--bound) + 9%));
}

/* Light mode is art-directed, not inverted: a survey plate on warm stock. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg:        #efede7;
    --bg-1:      #e9e6df;
    --bg-2:      #e2ded5;
    --bg-3:      #d9d4c8;
    --line:      #d2ccbe;
    --line-2:    #b3aa98;
    --fg:        #14171c;  /* 15.2:1 */
    --fg-2:      #3d4550;  /*  9.7:1 */
    --fg-3:      #5b6674;  /*  5.0:1 */
    --amber:     #8f4e02;  /*  5.5:1 */
    --amber-hi:  #6d3a00;
    --amber-dim: rgba(143, 78, 2, 0.12);
    --ice:       #1d5878;  /*  6.4:1 */
    --ice-dim:   rgba(29, 88, 120, 0.10);
    --on-amber:  #f7f5f0;
    --canvas-bg: #efede7;
    --scrim:     linear-gradient(90deg, var(--bg) 0%,
                                 var(--bg) calc(var(--bound) - 16%),
                                 color-mix(in srgb, var(--bg) 78%, transparent) calc(var(--bound) - 4%),
                                 transparent calc(var(--bound) + 9%));
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:        #efede7;
  --bg-1:      #e9e6df;
  --bg-2:      #e2ded5;
  --bg-3:      #d9d4c8;
  --line:      #d2ccbe;
  --line-2:    #b3aa98;
  --fg:        #14171c;
  --fg-2:      #3d4550;
  --fg-3:      #5b6674;
  --amber:     #8f4e02;
  --amber-hi:  #6d3a00;
  --amber-dim: rgba(143, 78, 2, 0.12);
  --ice:       #1d5878;
  --ice-dim:   rgba(29, 88, 120, 0.10);
  --on-amber:  #f7f5f0;
  --canvas-bg: #efede7;
  --scrim:     linear-gradient(90deg, var(--bg) 0%,
                               var(--bg) calc(var(--bound) - 16%),
                               color-mix(in srgb, var(--bg) 78%, transparent) calc(var(--bound) - 4%),
                               transparent calc(var(--bound) + 9%));
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--amber); color: var(--on-amber); }

/* --------------------------------------------------------------------------
   4. Primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.label {
  font-family: var(--mono);
  font-size: var(--label);
  line-height: 1.4;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.label--sig { color: var(--amber); }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 46ch;
  text-wrap: pretty;
}

h1, h2, h3 { font-weight: 500; text-wrap: balance; }

.h-display {
  font-size: var(--step-5);
  line-height: 0.94;
  letter-spacing: -0.038em;
  font-weight: 500;
  margin: 0;
}
.h-sect {
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 500;
  max-width: 18ch;
  text-wrap: balance;
}
.h-card {
  font-size: var(--step-2);
  line-height: 1.14;
  letter-spacing: -0.022em;
  font-weight: 500;
}

.skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--amber);
  color: var(--on-amber);
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: top 0.18s var(--ease);
}
.skip:focus-visible { top: 12px; }

/* Focus: a machined bracket, never a browser default. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Hairline with a survey tick — the recurring "backstop line" motif. */
.rule {
  position: relative;
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}
.rule::after {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  width: 44px;
  height: 7px;
  background: var(--amber);
  transform-origin: left center;
}

/* --------------------------------------------------------------------------
   5. Reveal system — no-JS safe (styles only apply once .js is set)
   -------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  will-change: opacity, transform;
}
.js .reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.75s var(--ease-out) var(--d, 0ms),
              transform 0.85s var(--ease-out) var(--d, 0ms);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; will-change: auto; }
  .js .reveal.is-in { transition: none; }
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .hdr {
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
  }
}
.hdr.is-stuck { border-bottom-color: var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); }

.hdr__in {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 40px);
  width: 100%;
}

/* Progress hairline: transform-only. */
.hdr__prog {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left center;
}
@media (prefers-reduced-motion: reduce) { .hdr__prog { display: none; } }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fg);
  margin-right: auto;
  flex-shrink: 0;
}
.brand__mk { width: 22px; height: 22px; flex: 0 0 22px; }
.brand__mk .bar { fill: var(--fg-3); }
.brand__mk .stop { fill: var(--amber); }
.brand:hover .bar { fill: var(--fg-2); }
.brand__tx {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.brand__tx b { font-weight: 400; color: var(--fg-3); }

.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav a {
  position: relative;
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-decoration: none;
  /* WCAG 2.2 AA 2.5.8: every nav target clears 24x24 CSS px. */
  padding: 8px 5px;
  min-width: 24px;
  text-align: center;
  transition: color 0.2s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 4px;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease);
}
.nav a:hover, .nav a[aria-current="true"] { color: var(--fg); }
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }

.hdr__tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.theme-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  color: var(--fg-3);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.theme-btn:hover { color: var(--fg); border-color: var(--fg-3); }
.theme-btn svg { width: 15px; height: 15px; }
.theme-btn .i-sun { display: none; }
:root[data-theme="light"] .theme-btn .i-sun { display: block; }
:root[data-theme="light"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-btn .i-sun { display: block; }
  :root:not([data-theme="dark"]) .theme-btn .i-moon { display: none; }
}
.no-js .theme-btn { display: none; }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --bx: 0px; --by: 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0.95rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--amber);
  border-radius: 2px;
  background: var(--amber);
  color: var(--on-amber);
  cursor: pointer;
  overflow: hidden;
  transform: translate3d(var(--bx), var(--by), 0);
  transition: transform 0.45s var(--ease-out), background 0.25s var(--ease),
              border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn__t { position: relative; z-index: 1; }
.btn__a {
  position: relative;
  z-index: 1;
  width: 9px; height: 9px;
  flex: 0 0 9px;
  transition: transform 0.4s var(--ease-out);
}
.btn:hover { background: var(--amber-hi); border-color: var(--amber-hi); }
.btn:hover .btn__a { transform: translateX(4px); }
.btn:active { transform: translate3d(var(--bx), calc(var(--by) + 1px), 0); }

.btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-2);
}
.btn--ghost:hover { background: transparent; border-color: var(--amber); color: var(--amber); }

.btn--sm { padding: 0.62rem 1.05rem; font-size: 0.6875rem; }

@media (prefers-reduced-motion: reduce) {
  .btn { transform: none !important; transition: background 0.2s, border-color 0.2s, color 0.2s; }
  .btn:hover .btn__a { transform: none; }
}

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  text-decoration: none;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line-2);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.tlink:hover { color: var(--amber); border-bottom-color: var(--amber); }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: min(94svh, 900px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(3rem, 9vh, 7rem) clamp(2rem, 5vh, 4rem);
  overflow: clip;
}

.hero__fx {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.hero__fx canvas { width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s var(--ease); }
.hero__fx canvas.is-live { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__fx canvas { transition: none; } }

/* Zero-JS / zero-WebGL fallback field: pure CSS, still on-concept. */
.hero__fx::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Same story with no canvas at all: a dashed front line, a solid backstop,
     traffic only on the downstream side, and nothing past the backstop.
     Layer order: backstop, front line (dashed via a repeating gradient),
     traffic rulings. */
  background:
    linear-gradient(90deg,
      transparent 0 calc(var(--bound) - 0.1%),
      var(--amber) var(--bound),
      transparent calc(var(--bound) + 0.18%) 100%),
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--fg-3) 85%, transparent) 0 14px,
      transparent 14px 22px
    ),
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--ice) 46%, transparent) 0 1px,
      transparent 1px 9px
    );
  /* Front line sits 26% into the field, matching the shader. */
  background-size:
    100% 100%,
    2px 100%,
    calc((100% - var(--bound)) * 0.74) 100%;
  background-position:
    0 0,
    calc(var(--bound) + (100% - var(--bound)) * 0.26) 0,
    100% 0;
  background-repeat: no-repeat, no-repeat, no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 0 88%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 88%, transparent 100%);
  opacity: 0.7;
}
.hero__fx.has-gl::before { display: none; }

/* Scrim: guarantees WCAG contrast for every glyph sitting over the canvas.
   Horizontal pass protects the copy column; the bottom pass grounds the field
   and protects the spec strip, whose right-hand items sit over live traffic. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(0deg,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 82%, transparent) 13%,
      transparent 26%),
    var(--scrim);
}

.hero__in { position: relative; display: grid; gap: clamp(1.5rem, 3vh, 2.25rem); }
@media (min-width: 900px) { .hero__in { max-width: min(100%, 44rem); } }
@media (min-width: 1500px) { .hero__in { max-width: min(100%, 47rem); } }

.hero__eyebrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero__eyebrow .tick {
  width: 26px; height: 1px; background: var(--amber); flex: 0 0 26px;
}

.hero h1 { max-width: 14ch; }
.hero h1 .w { display: inline-block; }
.hero h1 .amb { color: var(--amber); }

.js .hero h1 .w {
  opacity: 0;
  transform: translate3d(0, 0.42em, 0);
  animation: wordIn 0.9s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 42ms + 60ms);
}
@keyframes wordIn {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero h1 .w { opacity: 1; transform: none; animation: none; }
}

.hero__sub { max-width: 52ch; font-size: var(--step-1); color: var(--fg-2); line-height: 1.55; text-wrap: pretty; }
.hero__cta { display: flex; align-items: center; gap: clamp(16px, 3vw, 28px); flex-wrap: wrap; }

/* Spec strip — states the operating model up front, in instrument voice. */
.spec {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--line);
  margin-top: clamp(2rem, 6vh, 3.5rem);
}
.spec li {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px clamp(12px, 2vw, 22px) 14px 0;
  border-right: 1px solid var(--line);
}
.spec li:last-child { border-right: 0; }
.spec li:not(:first-child) { padding-left: clamp(12px, 2vw, 22px); }
.spec b { display: block; color: var(--fg); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0; text-transform: none; font-family: var(--font); }
.spec .no { color: var(--fg-3); }
.spec .no b { color: var(--fg-2); }

/* --------------------------------------------------------------------------
   9. Section shell — survey plate: sticky marker column + content column
   -------------------------------------------------------------------------- */

.sect { position: relative; padding-block: var(--sect-y); border-top: 1px solid var(--line); }
.sect--flush { border-top: 0; }

.plate { display: grid; gap: clamp(2rem, 5vh, 3.25rem); }

.plate__mark { display: flex; align-items: baseline; gap: 14px; }
.plate__mark .n {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: var(--track);
  color: var(--amber);
}
.plate__mark .t {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--fg-3);
}

.plate__head { display: grid; gap: 1.25rem; }

@media (min-width: 1080px) {
  .plate { grid-template-columns: 190px minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .plate__mark {
    position: sticky;
    top: calc(var(--header-h) + 40px);
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  .plate__body { display: grid; gap: clamp(2.5rem, 5vh, 4rem); }
}

/* --------------------------------------------------------------------------
   10. Problem — three beats as spec entries with generative survey diagrams
   -------------------------------------------------------------------------- */

.beats { display: grid; gap: clamp(2rem, 4vh, 3rem); counter-reset: beat; }

.beat {
  display: grid;
  gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.beat__top { display: flex; align-items: center; gap: 14px; }
.beat__n {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: var(--track);
  color: var(--fg-3);
}
.beat h3 { font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.022em; }
.beat p { color: var(--fg-2); max-width: 62ch; text-wrap: pretty; }

.beat__dia { width: 100%; height: auto; margin-top: 0.5rem; }
.beat__dia .ax   { stroke: var(--line-2); stroke-width: 1; fill: none; }
.beat__dia .noi  { fill: var(--ice); opacity: 0.34; }
.beat__dia .cap  { stroke: var(--amber); stroke-width: 1.5; fill: none; stroke-dasharray: 5 4; }
.beat__dia .cell { fill: var(--ice); }
.beat__dia .stale{ fill: var(--line-2); }
.beat__dia .node { fill: var(--fg-3); }
.beat__dia .node--hot { fill: var(--amber); }
.beat__dia .edge { stroke: var(--line-2); stroke-width: 1; fill: none; }
.beat__dia .edge--hot { stroke: var(--amber); stroke-width: 1.25; }
/* Axis labels live in HTML, not inside the SVG. Text inside a viewBox scales
   with the box, so a 7px label became ~4px on a phone. Out here it is a fixed,
   legible size at every width. */
.beat__fig { margin: 0.5rem 0 0; display: grid; gap: 0.55rem; }
.beat__cap {
  display: flex;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: var(--label);
  line-height: 1.4;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.beat__cap b { font-weight: 400; color: var(--amber); }
.beat__cap i { font-style: normal; color: var(--ice); }

.js .beat__dia .sweep { transform: scaleX(0); transform-origin: left center; }
.js .beat.is-in .beat__dia .sweep {
  transform: scaleX(1);
  transition: transform 1.15s var(--ease-out) 0.15s;
}
@media (prefers-reduced-motion: reduce) {
  .js .beat__dia .sweep { transform: none; transition: none; }
}

.close-note {
  margin-top: clamp(2rem, 4vh, 3rem);
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 2px solid var(--amber);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--fg);
  max-width: 54ch;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   11. Services
   -------------------------------------------------------------------------- */

.cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 860px) { .cards { grid-template-columns: 1fr 1fr; } }

.card {
  position: relative;
  background: var(--bg);
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
  display: grid;
  gap: 1.1rem;
  align-content: start;
  overflow: hidden;
  transition: background 0.4s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--amber);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.55s var(--ease-out);
}
.card:hover, .card:focus-within { background: var(--bg-1); }
.card:hover::before, .card:focus-within::before { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
  .card::before { transition: none; }
}

.card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; }
.card__n { font-family: var(--mono); font-size: var(--label); letter-spacing: var(--track); color: var(--fg-3); }

/* Each service gets its own generated geometric mark. */
.card__mk { width: 62px; height: 62px; flex: 0 0 62px; opacity: 0.95; }
.card__mk .s  { stroke: var(--fg-3); stroke-width: 1; fill: none; }
.card__mk .s2 { stroke: var(--line-2); stroke-width: 1; fill: none; }
.card__mk .f  { fill: var(--amber); }
.card__mk .r  { stroke: var(--amber); stroke-width: 1.25; fill: none; }
.card:hover .card__mk .s { stroke: var(--fg-2); }

.card p { color: var(--fg-2); text-wrap: pretty; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.35rem; }
.chips li {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 4px 8px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   12. Engagement — a finite run with a marked start and end
   -------------------------------------------------------------------------- */

.run { display: grid; gap: 0; }
.run__bar {
  display: none;
  position: relative;
  height: 1px;
  background: var(--line-2);
  margin-bottom: 2.25rem;
}
.run__bar span {
  position: absolute;
  top: -5px;
  width: 1px;
  height: 11px;
  background: var(--amber);
}
.run__bar span:first-child { left: 0; }
.run__bar span:last-child { right: 0; }
.run__bar em {
  position: absolute;
  top: 12px;
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--fg-3);
  font-style: normal;
}
.run__bar em:first-of-type { left: 0; }
.run__bar em:last-of-type { right: 0; }

.steps { display: grid; gap: clamp(2rem, 4vh, 2.75rem); }
@media (min-width: 940px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3vw, 3rem); }
  .run__bar { display: block; margin-top: 1rem; margin-bottom: 3.25rem; }
}

.step { display: grid; gap: 0.9rem; align-content: start; padding-top: 1.5rem; border-top: 1px solid var(--line); }
@media (min-width: 940px) { .step { border-top: 0; padding-top: 0; } }
.step__n {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--amber);
}
.step__n i { width: 7px; height: 7px; background: var(--amber); font-style: normal; flex: 0 0 7px; }
.step h3 { font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.022em; }
.step p { color: var(--fg-2); text-wrap: pretty; }

.handoff { display: grid; gap: 8px; margin-top: 0.4rem; }
.handoff li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  font-size: var(--step--1);
  color: var(--fg-2);
  line-height: 1.5;
}
.handoff li::before {
  content: "";
  width: 8px; height: 1px;
  background: var(--amber);
  margin-top: 0.72em;
}

/* --------------------------------------------------------------------------
   13. Fit
   -------------------------------------------------------------------------- */

.fit { display: grid; gap: clamp(2rem, 4vh, 3rem); }
@media (min-width: 900px) { .fit { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); } }

.fit__col { display: grid; gap: 1.25rem; align-content: start; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.fit__col h3 { font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.022em; }
.fit__col--no { border-top-color: var(--line-2); }

.fit__list { display: grid; gap: 1rem; }
.fit__list li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; color: var(--fg-2); text-wrap: pretty; }
.fit__list li b { color: var(--fg); font-weight: 500; }
.fit__list svg { width: 12px; height: 12px; margin-top: 0.52em; }
.fit__list .yes svg { stroke: var(--amber); }
.fit__list .no svg  { stroke: var(--fg-3); }
.fit__list svg { fill: none; stroke-width: 1.5; }

/* --------------------------------------------------------------------------
   14. Credibility strip
   -------------------------------------------------------------------------- */

.creds { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 620px) { .creds { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .creds { grid-template-columns: repeat(4, 1fr); } }

.cred {
  background: var(--bg);
  padding: clamp(1.5rem, 2.4vw, 2rem) clamp(1.25rem, 2vw, 1.75rem);
  display: grid;
  gap: 0.85rem;
  align-content: start;
}
.cred__mk { width: 40px; height: 40px; }
.cred__mk .s { stroke: var(--fg-3); stroke-width: 1; fill: none; }
.cred__mk .f { fill: var(--amber); }
.cred dt { font-family: var(--mono); font-size: var(--label); letter-spacing: var(--track); text-transform: uppercase; color: var(--fg-3); }
.cred dd { margin: 0; font-size: var(--step-1); line-height: 1.3; color: var(--fg); letter-spacing: -0.018em; }
.cred__note { font-size: var(--step--1); line-height: 1.55; color: var(--fg-3); max-width: 44ch; text-wrap: pretty; }

/* Two substantiated facts read better as a pair than as a thin four-up. */
@media (min-width: 620px) { .creds--pair { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .creds--pair { grid-template-columns: 1fr 1fr; } }
.creds--pair .cred { padding: clamp(1.75rem, 3vw, 2.5rem); gap: 1rem; }
.creds--pair .cred dd { font-size: var(--step-2); }

.fill {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--amber);
  background: var(--amber-dim);
  border: 1px dashed var(--amber);
  border-radius: 2px;
  padding: 1px 6px;
  white-space: normal;
}

/* --------------------------------------------------------------------------
   15. Contact + form
   -------------------------------------------------------------------------- */

.contact { display: grid; gap: clamp(2rem, 5vh, 3rem); }
@media (min-width: 1000px) { .contact { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 5vw, 5rem); } }

.contact__side { display: grid; gap: 1.5rem; align-content: start; }
.contact__side .lede { max-width: 38ch; }

.form { display: grid; gap: 1.15rem; }
.f-row { display: grid; gap: 1.15rem; }
@media (min-width: 620px) { .f-row { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 7px; }
.field > label {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--fg-3);
}
.field > label .req { color: var(--amber); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  color: var(--fg);
  font-size: var(--step-0);
  line-height: 1.5;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 148px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-3); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--fg-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--amber);
  background: var(--bg-2);
  outline: 2px solid transparent;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.field select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
  color: var(--fg);
}
.field select option { background: var(--bg-2); color: var(--fg); }

.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--amber); }

.f-err { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--amber); min-height: 0; }
.f-err:empty { display: none; }
.f-err::before { content: "\2715  "; }

/* Honeypot: clipped rather than display:none, so a naive bot still fills it,
   and excluded from the tab order and the accessibility tree. */
.hp input { width: 1px; min-width: 0; padding: 0; border: 0; }
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.f-foot { display: grid; gap: 1rem; margin-top: 0.35rem; }
.f-note { font-size: var(--step--1); color: var(--fg-3); line-height: 1.55; max-width: 58ch; text-wrap: pretty; }
.f-note b { color: var(--fg-2); font-weight: 500; }

.f-status {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  line-height: 1.55;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--amber);
  border-radius: 2px;
  background: var(--bg-1);
  color: var(--fg);
}
.f-status:empty { display: none; }

.turnstile-slot { min-height: 66px; }
.no-js .turnstile-slot { min-height: 0; }

.ns-note {
  font-size: var(--step--1);
  color: var(--fg-2);
  border: 1px dashed var(--line-2);
  border-radius: 2px;
  padding: 0.9rem 1rem;
  line-height: 1.55;
}

.btn[aria-disabled="true"], .btn:disabled { opacity: 0.55; pointer-events: none; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.ftr { border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 6vh, 4rem) 2rem; }
.ftr__grid { display: grid; gap: 2rem; }
@media (min-width: 800px) { .ftr__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem; } }

.ftr__stmt { font-size: var(--step--1); color: var(--fg-3); max-width: 56ch; line-height: 1.6; text-wrap: pretty; }
.ftr__links { display: flex; flex-wrap: wrap; gap: 4px 22px; align-content: start; }
.ftr__links a {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-decoration: none;
  /* 2.5.8 again: this is a link list, not prose, so the inline-link
     exception does not cover it. */
  padding: 6px 0;
  min-height: 24px;
  min-width: 24px;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.ftr__links a:hover { color: var(--amber); border-bottom-color: var(--amber); }

.ftr__base {
  margin-top: clamp(2rem, 5vh, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* --------------------------------------------------------------------------
   18. Long-form pages (privacy / terms / status)
   -------------------------------------------------------------------------- */

.doc { padding-block: clamp(3rem, 8vh, 6rem) var(--sect-y); }
.doc__head { display: grid; gap: 1.25rem; max-width: 62ch; }
.doc__head h1 { font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.03em; font-weight: 500; }

.notice {
  margin-top: 2rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--amber);
  border-left-width: 2px;
  border-radius: 2px;
  background: var(--amber-dim);
  color: var(--fg);
  font-size: var(--step--1);
  line-height: 1.6;
  max-width: 72ch;
}
.notice b { font-weight: 600; }

.doc__body { margin-top: clamp(2.5rem, 6vh, 4rem); max-width: 72ch; display: grid; gap: 2.25rem; }
.doc__body section { display: grid; gap: 0.9rem; scroll-margin-top: calc(var(--header-h) + 24px); }
.doc__body h2 {
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.022em;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.doc__body h3 { font-size: var(--step-1); line-height: 1.3; color: var(--fg); }
.doc__body p, .doc__body li { color: var(--fg-2); text-wrap: pretty; }
.doc__body ul { display: grid; gap: 0.6rem; }
.doc__body ul li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; }
.doc__body ul li::before { content: ""; width: 8px; height: 1px; background: var(--line-2); margin-top: 0.75em; }
.doc__body a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.doc__body a:hover { color: var(--amber-hi); }
.doc__body dl { display: grid; gap: 0.9rem; }
.doc__body dt { font-family: var(--mono); font-size: var(--label); letter-spacing: var(--track); text-transform: uppercase; color: var(--fg-3); }
.doc__body dd { margin: 0; color: var(--fg-2); }

.toc { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 1.5rem; }
.toc a {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding: 5px 0;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}
.toc a:hover { color: var(--amber); border-bottom-color: var(--amber); }

.status-page { min-height: 64svh; display: grid; align-content: center; padding-block: clamp(4rem, 12vh, 8rem); }
.status-page__in { display: grid; gap: 1.5rem; max-width: 56ch; }
.status-page h1 { font-size: var(--step-3); line-height: 1.08; letter-spacing: -0.028em; font-weight: 500; }
.status-page p { color: var(--fg-2); text-wrap: pretty; }
.status-page .actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 0.5rem; }

/* --------------------------------------------------------------------------
   19. Mobile art direction
   The hero is re-composed, not shrunk: headline on clean stock, then the
   field enters below it as a horizontal band terminating at the backstop.
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {
  :root { --header-h: 56px; }

  .hero {
    min-height: 0;
    padding-block: clamp(2.5rem, 7vh, 4rem) 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  /* Copy first, then the field, then the spec strip. The headline never
     sits over the canvas on a phone — it sits on clean stock above it. */
  .hero__copy { order: 1; }
  .hero__fx   { order: 2; }
  .hero__spec { order: 3; }
  .hero__in { gap: 1.4rem; }
  .hero h1 { max-width: 13ch; }
  .hero__sub { font-size: var(--step-0); }
  .hero__cta { gap: 14px; }
  .hero__cta .btn { flex: 1 1 auto; }

  /* Field becomes a band under the copy. No text sits over it. */
  .hero__fx {
    position: relative;
    inset: auto;
    z-index: 0;
    width: 100%;
    height: 46svh;
    max-height: 380px;
    min-height: 240px;
    margin-top: clamp(2rem, 5vh, 3rem);
  }
  .hero__fx::before {
    background:
      linear-gradient(180deg,
        transparent 0 15.9%,
        var(--amber) 15.9% 16.4%,
        transparent 16.4% 100%),
      repeating-linear-gradient(
        90deg,
        color-mix(in srgb, var(--fg-3) 85%, transparent) 0 14px,
        transparent 14px 22px
      ),
      repeating-linear-gradient(
        90deg,
        color-mix(in srgb, var(--ice) 46%, transparent) 0 1px,
        transparent 1px 9px
      );
    background-size: 100% 100%, 100% 2px, 100% 42%;
    background-position: 0 0, 0 42%, 0 100%;
    background-repeat: no-repeat, no-repeat, no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 0 76%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0 76%, transparent 100%);
  }
  .hero__scrim { display: none; }

  .spec { margin-top: clamp(1.5rem, 4vh, 2.25rem); border-top: 0; }
  .spec li {
    flex: 1 1 100%;
    border-right: 0;
    border-top: 1px solid var(--line);
    padding: 12px 0;
  }
  .spec li:not(:first-child) { padding-left: 0; }

  .card { padding: 1.5rem 1.25rem; }
  .card__mk { width: 46px; height: 46px; flex: 0 0 46px; }

  .ftr__base { flex-direction: column; gap: 8px; }
}

/* The section nav needs real room. Below that it becomes the drawer rather
   than compressing into an unreadable strip. */
@media (max-width: 940px) {
  .nav { display: none; }
}
@media (max-width: 620px) {
  .hdr__tools .btn { display: none; }
  /* Without JS there is no drawer and no theme switch, so the header has room
     for the primary CTA. Never leave a no-JS reader without one. */
  .no-js .hdr__tools .btn { display: inline-flex; }
}
@media (max-width: 360px) {
  .brand__tx b { display: none; }
}

/* Mobile nav drawer (progressively enhanced; no JS = links live in footer) */
.menu-btn {
  display: none;
  width: 34px; height: 34px;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  color: var(--fg-2);
  cursor: pointer;
}
.menu-btn svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.4; fill: none; }
.menu-btn .x { display: none; }
.menu-btn[aria-expanded="true"] .x { display: block; }
.menu-btn[aria-expanded="true"] .b { display: none; }
@media (max-width: 940px) { .js .menu-btn { display: grid; } }

.drawer {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  z-index: 55;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 1rem var(--gutter) 1.75rem;
  display: grid;
  gap: 2px;
  transform: translate3d(0, -8px, 0);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.26s var(--ease), transform 0.26s var(--ease), visibility 0s 0.26s;
}
.drawer.is-open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
/* :not(.btn) matters — a bare `.drawer a` rule outranks `.btn` on specificity
   and repaints the drawer's primary CTA in body-text grey on amber, which is
   about 1.1:1. Keep the exclusion. */
.drawer a:not(.btn) {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  text-decoration: none;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.drawer a:not(.btn):last-of-type { border-bottom: 0; }
.drawer .btn { margin-top: 1rem; }
@media (min-width: 941px) { .drawer { display: none; } }
@media (prefers-reduced-motion: reduce) { .drawer { transition: opacity 0.01s, visibility 0s; transform: none; } }

/* --------------------------------------------------------------------------
   20. Print
   -------------------------------------------------------------------------- */

@media print {
  .hdr, .hero__fx, .drawer, .skip, .turnstile-slot { display: none !important; }
  body { background: #fff; color: #000; }
  .sect { padding-block: 1.5rem; break-inside: avoid; }
}