/* ═══════════════════════════════════════════════════════════════════════════
   Kirality Labs, Design Layer 4.0
   Loads AFTER index.css. Redefines the brand tokens and re-cuts every existing
   component. No HTML class changes required; see design.md for the full spec.
   Palette (#00FF41 / #0A0A0A / #fbf9f8 / #006e16) and the wordmark are unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Typeface: Haskoy, self-hosted variable (100..800), one 52KB file ───── */
@font-face {
  font-family: 'Haskoy';
  src: url('fonts/haskoy/Haskoy-variable.woff2') format('woff2-variations'),
       url('fonts/haskoy/Haskoy-variable.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ── 2. Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Type stacks. Space Mono is retained as the technical voice: eyebrows,
     labels, data, buttons, terminal panels. Haskoy takes display and body. */
  --font-display:   'Haskoy', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-editorial: 'Haskoy', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:      'Haskoy', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:      'Space Mono', ui-monospace, SFMono-Regular, monospace;

  /* Ink ramp: one warm-neutral scale derived from the existing #1b1c1c / #5f5e5e.
     Every gray on the site resolves to a step on this ramp. */
  --ink-0:   #ffffff;
  --ink-50:  #fbf9f8;
  --ink-100: #f4f2f1;
  --ink-200: #e7e4e3;
  --ink-300: #cbc8c6;
  --ink-400: #9a9795;
  --ink-500: #6f6d6b;
  --ink-600: #504e4c;
  --ink-700: #343230;
  --ink-900: #1b1c1c;
  --ink-950: #0a0a0a;

  /* Hairlines. Tinted, not flat gray, so rules sit on the surface rather than
     on top of it. */
  --rule:        color-mix(in srgb, var(--ink-950) 11%, transparent);
  --rule-strong: color-mix(in srgb, var(--ink-950) 22%, transparent);
  --rule-dark:   rgba(255, 255, 255, .10);
  --rule-dark-strong: rgba(255, 255, 255, .18);
  --color-border: color-mix(in srgb, #0a0a0a 11%, transparent);
  --color-text-secondary: var(--ink-500);
  --secondary: var(--ink-500);

  /* Radii: tightened. Premium reads as a small, consistent radius, not a large one. */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;

  /* Rhythm */
  --section-y: clamp(4.5rem, 3rem + 6vw, 8rem);
  --measure: 68ch;
  --measure-tight: 46ch;

  /* Motion: one easing curve for the whole site. */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .18s;
  --dur: .32s;
  --dur-slow: .6s;

  /* Vector artwork */
  --kv-bg: var(--ink-0);
}

/* ── 3. Base ───────────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: -.003em;
  color: var(--ink-900);
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
}

::selection { background: #00ff41; color: #0a0a0a; }

/* Focus is visible everywhere, and reads as brand rather than as browser default. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.bg-\[\#0A0A0A\] :focus-visible,
.bg-black :focus-visible,
.footer-dark :focus-visible { outline-color: #00ff41; }

/* ── 4. Typography ─────────────────────────────────────────────────────────── */
/* Headlines drop to sentence/title case. The uppercase voice stays alive in the
   eyebrows, labels and data, which is where it carries the most weight. */
.font-headline-lg,
.font-headline-md,
.font-headline-sm {
  text-transform: none;
  font-weight: 600;
  letter-spacing: -.028em;
  text-wrap: balance;
}

h1.font-headline-lg {
  font-size: clamp(2.5rem, 1.35rem + 4.6vw, 4.5rem);
  line-height: 1.015;
  letter-spacing: -.042em;
  font-weight: 600;
}
h2.font-headline-lg {
  font-size: clamp(1.85rem, 1.15rem + 2.4vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -.034em;
}
h3.font-headline-lg,
h3.font-headline-md {
  font-size: clamp(1.1rem, 1rem + .45vw, 1.4rem);
  line-height: 1.28;
  letter-spacing: -.022em;
}
/* Panel headings inside the vertical tabs sit one step up. */
.tabs-vert-panel h3.font-headline-lg { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem); }
/* The impact-section row headings stay small and uppercase: they behave as labels. */
#impact h3.font-headline-md {
  font-family: var(--font-mono) !important;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}

p { text-wrap: pretty; }

.answer-lede,
.tabs-vert-panel p,
#impact p, #problem p {
  max-width: var(--measure);
}
.answer-lede {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-600);
  max-width: 54ch;
}

/* The mono voice: smaller, wider, quieter. */
.eyebrow {
  font-size: .6875rem;
  letter-spacing: .14em;
  /* ink-400 lands at 2.8:1 on the light surface; ink-500 clears AA at this size.
     .is-light below keeps ink-400 for eyebrows on the dark sections. */
  color: var(--ink-500);
  margin-bottom: 1.25rem;
}
.eyebrow::before { font-weight: 400; opacity: .9; }
.eyebrow.is-light { color: var(--ink-400); }

.font-label-sm, .font-mono-data { letter-spacing: .08em; }

/* ── 5. Rhythm ─────────────────────────────────────────────────────────────── */
.py-24 { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.pt-32 { padding-top: calc(var(--section-y) * 1.25); }
.pb-32 { padding-bottom: calc(var(--section-y) * 1.25); }

/* ── 6. Hairlines ──────────────────────────────────────────────────────────── */
.border-\[\#E5E5E5\] { border-color: var(--rule); }
.border-\[\#262626\] { border-color: var(--rule-dark); }
.bg-\[\#E5E5E5\] { background-color: var(--rule); }

/* ── 7. Header ─────────────────────────────────────────────────────────────── */
.site-header {
  background: color-mix(in srgb, var(--ink-50) 82%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--rule);
}
.announce-bar {
  background: var(--ink-950);
  color: var(--ink-400);
  font-size: .625rem;
  letter-spacing: .12em;
  padding: .5rem 1rem;
}
.navbar-inner { height: 3.75rem; }
#navbar a[href="index.html"] {
  font-family: var(--font-mono) !important;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.nav-drop-btn, .nav-link-dark {
  font-size: .6875rem;
  letter-spacing: .12em;
  color: var(--ink-600);
}
.nav-drop-panel {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(10,10,10,.04), 0 18px 40px -12px rgba(10,10,10,.14);
  padding: 1.5rem;
}
.nav-drop-item { border-radius: var(--r-sm); }

/* ── 8. Buttons ────────────────────────────────────────────────────────────── */
/* The neon glow is removed. On a light page a colored drop shadow is the single
   loudest thing on screen, and it is what made the CTAs read as a template. */
.btn-premium, .btn-primary { border-radius: var(--r-md); }
.btn-premium {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .6875rem;
  letter-spacing: .12em;
  padding: .95rem 2rem;
  box-shadow: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-premium:hover {
  box-shadow: none;
  transform: none;
}
.btn-premium::before { transition: transform var(--dur) var(--ease); }
.btn-ghost, .btn-primary { border-radius: var(--r-md); }

/* The outlined secondary CTA in the hero. */
.border-2.border-black\/40 {
  border-width: 1px;
  border-color: var(--rule-strong);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  letter-spacing: .12em;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

/* ── 9. Cards and panels ───────────────────────────────────────────────────── */
.card-lift-brutalist, .card-lift, .usecase-card, .fieldnote-card {
  border-radius: var(--r-lg);
}
.card-lift-brutalist {
  border: 1px solid var(--rule);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card-lift-brutalist:hover {
  transform: translateY(-2px);
  box-shadow: none;
  border-color: var(--rule-strong);
}
.card-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(10,10,10,.04), 0 14px 30px -14px rgba(10,10,10,.16);
}
.usecase-card {
  border-color: var(--rule);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* The card no longer inverts to black on hover. Inversion moved four cards at once
   and fought the section; a hairline and a 2px lift does the same job quietly. */
.usecase-card:hover {
  background: var(--ink-0);
  color: inherit;
  border-color: var(--rule-strong);
  transform: translateY(-2px);
}
.usecase-card:hover p { color: var(--ink-500); }

.compare-grid {
  border-radius: var(--r-lg);
  border-color: var(--rule);
  background: var(--rule);
}
.compare-item { padding: 2.25rem; }
.compare-item:hover { background: var(--ink-50); }

.tabs-vert { border-radius: var(--r-xl); border-color: var(--rule); }
.tabs-vert-nav { border-right-color: var(--rule); background: var(--ink-50); }
.tabs-vert-label { border-radius: var(--r-sm); font-size: .6875rem; letter-spacing: .1em; }

.fieldnote-card {
  border-color: var(--rule);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fieldnote-card:hover { transform: translateY(-2px); box-shadow: none; border-color: var(--rule-strong); }
.fieldnote-glyph { font-size: 1.375rem; }

/* ── 10. Terminal panels ───────────────────────────────────────────────────── */
.viz-window {
  border-radius: var(--r-lg);
  border-color: var(--rule-dark);
  font-size: .6875rem;
}
.viz-head { border-bottom-color: var(--rule-dark); padding: .65rem .95rem; }
.viz-line { border-color: rgba(255,255,255,.07); border-radius: var(--r-sm); }
.viz-bar { height: 2px; border-radius: 0; background: rgba(255,255,255,.09); }

/* ── 11. Hero ──────────────────────────────────────────────────────────────── */
/* The dot paper is halved in weight and masked so it fades out before it reaches
   the copy, instead of running edge to edge behind it. */
.hero-grid-light {
  background-image: radial-gradient(rgba(10,10,10,.085) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(120% 85% at 50% 18%, #000 18%, transparent 74%);
          mask-image: radial-gradient(120% 85% at 50% 18%, #000 18%, transparent 74%);
}

/* The four-node topology row becomes a hairline rail rather than four boxes. */
.hero-diagram { gap: 0; margin-top: 3.5rem; }
.hero-diagram.is-light .hd-node,
.hd-node {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 1.5rem;
  min-width: 0;
  gap: .85rem;
}
.hero-diagram.is-light .hd-node:hover,
.hd-node:hover { background: transparent; border: 0; }
.hero-diagram.is-light .hd-icon,
.hd-icon {
  width: auto; height: auto;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--ink-600);
  transition: color var(--dur) var(--ease);
}
.hero-diagram.is-light .hd-node:hover .hd-icon { color: var(--primary); }
.hero-diagram.is-light .hd-label,
.hd-label { color: var(--ink-900); font-size: .6875rem; letter-spacing: .11em; }
.hero-diagram.is-light .hd-label span,
.hd-label span { color: var(--ink-400); font-size: .5875rem; letter-spacing: .1em; }
.hero-diagram.is-light .hd-connector,
.hd-connector { width: 48px; background: var(--rule-strong); }
.hero-diagram.is-light .hd-connector::after,
.hd-connector::after { background: var(--primary); width: 4px; height: 4px; }

.proof-strip { font-size: .6875rem; letter-spacing: .12em; column-gap: 2.5rem; }
.proof-strip strong { color: var(--ink-950); }

/* ── 12. Vector artwork ────────────────────────────────────────────────────── */
/* Every illustration on the site is one thin-stroke schematic drawn on the same
   grid: 1.5px stroke, round caps, currentColor, no fill except deliberate nodes. */
.kv {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
/* stroke-width is in viewBox units, so it scales with the drawing. Each size
   sets the value that lands on ~1.5 rendered pixels, which is what keeps the
   whole illustration set looking like one hand. */
.kv-24   { width: 24px; height: 24px; stroke-width: 5.8; }   /* 96 units -> 24px */
.kv-32   { width: 32px; height: 32px; stroke-width: 4.4; }
.kv-40   { width: 40px; height: 40px; stroke-width: 3.5; }
.kv-56   { width: 56px; height: 56px; stroke-width: 2.5; }
.kv-hero {
  width: min(100%, 600px);
  aspect-ratio: 3 / 2;
  height: auto;
  stroke-width: .62;                                         /* 240 units -> 600px */
  color: var(--ink-600);
  --kv-accent: var(--primary);
  margin-inline: auto;
}
.is-dark .kv, .bg-black .kv, .footer-dark .kv { --kv-bg: var(--ink-950); }

/* ── 13. Motion ────────────────────────────────────────────────────────────── */
.reveal, .reveal-left, .reveal-right {
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal-left  { transform: translate(-24px, 0); }
.reveal-right { transform: translate(24px, 0); }
.icon { transition: none; }

/* The hidden half of the reveal only applies once the site script has confirmed
   it is running and can add .visible. Without it (no JS, a script error, a page
   built without the site script) the copy stays fully readable. */
html:not(.js-reveal) .reveal,
html:not(.js-reveal) .reveal-left,
html:not(.js-reveal) .reveal-right {
  opacity: 1 !important;
  transform: none !important;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
  .pulse-dot { animation: none; }
}

/* ── 14. Footer ────────────────────────────────────────────────────────────── */
.footer-display-logo {
  font-family: var(--font-mono);
  color: rgba(255,255,255,.07);
  letter-spacing: -.02em;
}
.footer-col-title { color: var(--ink-400); letter-spacing: .14em; }
.footer-link { color: var(--ink-400); font-size: .6875rem; }

/* ── 15. Forms ─────────────────────────────────────────────────────────────── */
.field-input { border-radius: var(--r-md) !important; border-color: var(--rule-strong) !important; }
.field-input:focus { border-width: 1px; box-shadow: 0 0 0 3px rgba(0,255,65,.18); }

/* ── 16. Hero artwork placement ────────────────────────────────────────────── */
.kv-hero-wrap {
  width: 100%;
  margin: 3.5rem 0 0;
  display: flex;
  justify-content: center;
}
.kv-hero-wrap + .hero-diagram {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
  width: 100%;
  max-width: 780px;
}
.hero-overture .hero-diagram { max-width: 720px; width: 100%; }
@media (max-width: 768px) {
  .kv-hero { width: 100%; }
  .kv-hero-wrap + .hero-diagram { border-top: 0; padding-top: 0; }
}

/* Ink-weight variant for illustrations that carry a section on their own. */
.kv-ink { color: var(--ink-700); }
.kv-64  { width: 64px; height: 64px; stroke-width: 2.2; }

/* ── 17. Utilities the hand-maintained sheet is missing ────────────────────
   gap-10 and gap-1.5 are used in the markup but were never defined, so those
   grids have been running with no gutter. Adding them here rather than editing
   index.css keeps the layer self-contained. */
.gap-10 { gap: 2.5rem; }
.gap-1\.5 { gap: .375rem; }
.space-y-0 > * + * { margin-top: 0; }

/* UI-scale glyphs drawn on a 24 unit grid. Same stroke-width arithmetic as above. */
.kv24-16 { width: 16px; height: 16px; stroke-width: 2.2; }
.kv24-20 { width: 20px; height: 20px; stroke-width: 1.8; }
.kv24-24 { width: 24px; height: 24px; stroke-width: 1.6; }
.kv24-40 { width: 40px; height: 40px; stroke-width: 1;   }
.kv24-56 { width: 56px; height: 56px; stroke-width: .72; }

@media (max-width: 768px) {
  /* The topology rail stacks on mobile; keep the connector a vertical hairline. */
  .hero-diagram.is-light .hd-connector,
  .hd-connector { width: 1px; height: 28px; }
  .hd-node { padding: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. THE FIELD

   The site's signature. A deformable field of hairlines, generated by
   pseo/gen-field.mjs, that renders the thesis literally: turbulent on the
   left (a market nobody has sorted), one coherent swell through the middle
   (the system), perfectly parallel on the right (customers, in order).

   Loaded as a CSS background so all pages share one cached asset. The fields
   are the only place on the site where a visual is allowed to be large.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* 140px tile of fractal noise. Two percent of it is enough to stop large
     flat areas of #0A0A0A from banding on cheap panels, and it is what makes
     the black read as printed rather than as a hex value. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.grain::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--grain);
  opacity: .05;
  mix-blend-mode: overlay;
}

/* ── The overture: the one full-bleed dark moment on the page ─────────────── */
.hero-overture {
  background: var(--ink-950);
  color: #fff;
  isolation: isolate;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* cover, never a stretch. The field carries its own sky, so it fills the
   whole overture rather than being pasted along the bottom edge. */
.hero-overture::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('assets/field-hero-dark.svg') center bottom / cover no-repeat;
}
/* The scrim: the wave is allowed to run behind the copy, but not to compete
   with it. Sits above the field, below the type. Kept light, because the
   drawing is the point. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(44% 30% at 50% 40%,
      rgba(10, 10, 10, .94) 0%, rgba(10, 10, 10, .78) 55%, rgba(10, 10, 10, 0) 100%),
    linear-gradient(to bottom, rgba(10, 10, 10, .85) 0%, rgba(10, 10, 10, 0) 20%);
}
.hero-overture > * { position: relative; z-index: 2; }

/* The practice rail floats on the wave on its own plate. */
.hero-overture .hero-diagram {
  background: rgba(10, 10, 10, .74);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg);
  padding: 1.5rem .5rem;
  margin-top: 4.5rem;
  margin-bottom: 1.5rem;
}

.hero-overture .eyebrow { color: var(--ink-400); }
.hero-overture h1 { color: #fff; }
.hero-overture .answer-lede { color: rgba(255, 255, 255, .68); }

/* The secondary CTA inverts to a hairline on black. */
.hero-overture .border-2.border-black\/40 {
  border-color: rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .9);
  background: rgba(10, 10, 10, .55);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.hero-overture .border-2.border-black\/40:hover {
  border-color: #00ff41;
  color: #00ff41;
}

/* The practice rail, sitting on the field. */
.hero-overture .hero-diagram.is-light .hd-icon { color: rgba(255, 255, 255, .85); }
.hero-overture .hero-diagram.is-light .hd-node:hover .hd-icon { color: #00ff41; }
.hero-overture .hero-diagram.is-light .hd-label { color: #fff; }
.hero-overture .hero-diagram.is-light .hd-label span { color: rgba(255, 255, 255, .66); }
.hero-overture .hero-diagram.is-light .hd-connector { background: rgba(255, 255, 255, .2); }
.hero-overture .hero-diagram.is-light .hd-connector::after { background: #00ff41; }

/* ── Load choreography ────────────────────────────────────────────────────
   The hero is above the fold, so it animates on load rather than waiting for
   the scroll observer. Same curve and the same 0.08s step as everything else. */
@keyframes field-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes field-settle {
  from { opacity: 0; transform: translateY(56px) scaleY(1.06); }
  to   { opacity: 1; transform: none; }
}
.hero-overture .eyebrow,
.hero-overture h1,
.hero-overture .answer-lede,
.hero-overture .hero-cta-row,
.hero-overture .hero-diagram {
  /* No opacity:0 base, and `backwards` rather than `forwards`. The resting
     state is opaque; the transparent state exists only while the animation is
     pending. If animations never run (a crawler, a reduced-motion context, a
     paused tab) the copy still renders, which matters here because one of
     these elements is the h1. */
  animation: field-rise .8s var(--ease) backwards;
}
.hero-overture .eyebrow      { animation-delay: .08s; }
.hero-overture h1            { animation-delay: .16s; }
.hero-overture .answer-lede  { animation-delay: .26s; }
.hero-overture .hero-cta-row { animation-delay: .36s; }
.hero-overture .hero-diagram { animation-delay: .52s; }
.hero-overture::after {
  transform-origin: bottom;
  animation: field-settle 1.5s var(--ease) .2s backwards;
}

/* ── Field bands: the rule between sections, drawn instead of ruled ───────── */
.field-band {
  height: 64px;
  background: url('assets/field-band-light.svg') center bottom / cover no-repeat;
  pointer-events: none;
  /* Dissolved at both ends. A band that runs edge to edge reads as a scanline
     glitch; one that fades out reads as a drawn rule. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.field-band.is-dark { background-image: url('assets/field-band-dark.svg'); }
.field-band.is-flip { transform: scaleX(-1); }

/* ── The field returns for the closing statement ──────────────────────────── */
.closing-field { position: relative; isolation: isolate; }
.closing-field::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 70%;
  z-index: 0;
  pointer-events: none;
  background: url('assets/field-hero-dark.svg') center bottom / cover no-repeat;
  opacity: .5;
  transform: scaleX(-1);
  /* Partial alpha through the middle keeps the water quiet behind the copy and
     strong again underneath it, without a second scrim element. */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.28) 26%, rgba(0,0,0,.34) 52%, #000 78%);
          mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.28) 26%, rgba(0,0,0,.34) 52%, #000 78%);
}
.closing-field > * { position: relative; z-index: 2; }

/* ── Header over the overture ─────────────────────────────────────────────── */
#navbar.over-hero {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none !important;
}
#navbar.over-hero .navbar-inner > a:first-child { color: #fff; }
#navbar.over-hero .nav-drop-btn,
#navbar.over-hero .nav-link-dark { color: rgba(255, 255, 255, .74); }
#navbar.over-hero .nav-drop-btn:hover,
#navbar.over-hero .nav-link-dark:hover { color: #00ff41; }
#navbar.over-hero .hamburger-bar { background: #fff; }
#navbar.over-hero .btn-premium.bg-black {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
}
#navbar.over-hero .btn-premium.bg-black:hover { border-color: #00ff41; }
#navbar { transition: background .4s var(--ease), border-color .4s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .hero-overture .eyebrow, .hero-overture h1, .hero-overture .answer-lede,
  .hero-overture .hero-cta-row, .hero-overture .hero-diagram,
  .hero-overture::after {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .hero-overture::after { opacity: 1; }
}

/* ── The wash: the field at a whisper, so large dark blocks have a ground ─── */
.field-wash { position: relative; isolation: isolate; }
.field-wash::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('assets/field-hero-dark.svg') right bottom / cover no-repeat;
  opacity: .3;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 55%, #000 100%);
}
.field-wash > * { position: relative; z-index: 2; }

/* ── Scroll-linked depth ──────────────────────────────────────────────────
   Progressive enhancement. Where scroll-driven animations are supported the
   field drifts and dims as the overture leaves, which reads as parallax
   without a scroll listener or a rAF loop. Everywhere else, nothing happens. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes field-drift {
      to { transform: translateY(-14%) scale(1.06); opacity: .25; }
    }
    .hero-overture::after {
      animation: field-settle 1.5s var(--ease) .2s backwards,
                 field-drift linear both;
      animation-timeline: auto, view();
      animation-range: normal, exit 0% exit 100%;
    }
  }
}

/* ── The overture on small screens ────────────────────────────────────────
   A 92vh hero with a tall crest gets cramped on a phone, so the field is
   given more of the frame and the rail plate loses its blur (which is
   expensive on mobile GPUs for very little payoff at that size). */
@media (max-width: 768px) {
  .hero-overture { min-height: auto; padding-top: 9rem; padding-bottom: 4rem; }
  /* cover on a tall narrow frame scales the field up by 1.5x and leaves a
     magnified fragment of the curl sitting behind the copy. Size by width
     instead, so the field keeps its proportions and occupies a band along the
     bottom, with the crop biased to the crest. */
  .hero-overture::after {
    background-size: 200% auto;
    background-position: 10% bottom;
  }
  .hero-scrim {
    background: radial-gradient(150% 46% at 50% 34%,
      rgba(10, 10, 10, .96) 0%, rgba(10, 10, 10, .8) 48%, rgba(10, 10, 10, 0) 82%);
  }
  .hero-overture .hero-diagram {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background: rgba(10, 10, 10, .72);
    margin-top: 3rem;
    padding: 1.25rem .5rem;
  }
  .field-band { height: 48px; }
}

/* ── The light field, for generated page heroes ────────────────────────────
   /gtm/ and /solutions/ heroes stay light: the overture is a homepage moment
   and stops being one if every page opens with it. They get the same drawing
   at a whisper, anchored to the bottom of the hero, in place of dot paper. */
.hero-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('assets/field-hero-light.svg') center bottom / cover no-repeat;
  opacity: .5;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 55%, #000 100%);
}
@media (max-width: 768px) {
  .hero-field { background-size: 200% auto; background-position: 10% bottom; }
}