/* build: 2026-01-31 */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin-variable-dfda626c.woff2") format('woff2');
}

:root {
  --grid-size: clamp(48px, 5vw, 72px);
  /* The site header's height, and where the page grid's rows start: at the
     header's bottom edge, so the header sits on a grid line and never over a
     cut cell. */
  --header-h: var(--grid-size);
  --grid-row-anchor: var(--header-h);
  --max-width: 1180px;
  --bg: #f4f4f4;
  --bg-grid: rgba(0, 0, 0, 0.12);
  --text-primary: #151515;
  --text-muted: #3b3b3b;
  --text-soft: #2b2b2b;
  --accent: #090909;
  /* The hero headline's lines out of register (another line hovered): their
     own ink and the pale copy that slips off them. */
  --hero-title-off: #4a4a4a;
  --hero-title-copy: rgba(28, 28, 28, 0.24);
  --accent-soft: rgba(0, 0, 0, 0.72);
  --card-bg: rgba(210, 210, 210, 0.92);
  --card-border: rgba(0, 0, 0, 0.2);
  --card-bg-dark: linear-gradient(160deg, rgba(28, 28, 30, 0.96), rgba(16, 16, 17, 0.9));
  --card-border-dark: rgba(255, 255, 255, 0.06);
  --card-shadow-dark: 0 34px 72px rgba(8, 8, 10, 0.46);
  --text-light: #f4f3f0;
  --text-soft-on-dark: rgba(227, 226, 222, 0.72);
  --divider-dark: rgba(230, 235, 245, 0.12);
  --radius-lg: 16px;
  --radius-md: 10px;
  --radius-sm: 6px;
  --hero-body: 1.18rem;
  --hero-tagline: 1rem;
  --section-eyebrow: 1rem;
  --section-subtitle: 1.25rem;
  --about-body: 1.25rem;
  --about-meta: 0.9rem;
  --pill-text: 1rem;
  --outcome-title: 1.375rem;
  --outcome-body: 1.125rem;
  --footer-text: 0.9rem;
  font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  color: var(--text-primary);
  background-color: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* The page grid scrolls with the page: its columns are set from the page's
   width, its rows from the site header's bottom edge (--grid-row-anchor),
   and nothing drawn on it (the hero field, the floor) can slip off it. */
body::before {
  content: '';
  position: absolute;
  inset: 0;
  min-height: 100vh;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(var(--grid-size) - 1px),
      var(--bg-grid) calc(var(--grid-size) - 1px),
      var(--bg-grid) var(--grid-size)
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--grid-size) - 1px),
      var(--bg-grid) calc(var(--grid-size) - 1px),
      var(--bg-grid) var(--grid-size)
    );
  background-position:
    calc(50% - (var(--grid-size) / 2)) 0,
    0 var(--grid-row-anchor);
  background-size: var(--grid-size) var(--grid-size);
  animation: none;
  opacity: 1;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity="0.08"/%3E%3C/svg%3E');
  mix-blend-mode: multiply;
  opacity: 0.35;
  animation: none;
  z-index: 0;
}

#app {
  position: relative;
  z-index: 1;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--accent);
}

.container {
  width: min(calc(100% - var(--grid-size)), var(--max-width));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  height: var(--header-h);
  display: flex;
  align-items: center;
}

.nav {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "brand links";
  align-items: center;
  gap: 18px;
  position: relative;
}

/* On wide screens the header is as wide as the page's content column, so
   its ends line up with the content's edges. */
@media (min-width: 961px) {
  .nav {
    width: min(calc(100% - var(--grid-size)), var(--max-width));
  }
}

/* The emblem (the brand vector in light graphite, no padding round it)
   starts on the content's left edge, as the briefing button ends on its
   right one; the word sits a small gap after it. */
.nav__identity {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}

.nav__brand {
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-weight: 700;
  font-size: inherit;
  color: var(--accent);
}

.nav__emblem-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav__emblem-image {
  width: 30px;
  height: 30px;
  display: block;
}

.nav__toggle {
  grid-area: links;
  justify-self: end;
  display: none;
  border: 0;
  background: rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-sm);
  padding: 8px;
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
  margin: 4px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Open state reads as a clear X; behavior (aria-expanded, Escape,
   outside-click, focus return) is unchanged and lives in JS. */
.nav__toggle[aria-expanded="true"] span:nth-child(1) {
  /* Row pitch is 10px (2px bar + 4px margins that do not collapse in the
     flex column), so ±10px meets both bars on the middle line. */
  transform: translateY(10px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

.nav__links {
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  justify-self: end;
  grid-area: links;
}

.nav__links a {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-bottom: 0;
  line-height: 1;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--accent);
  transition: transform 0.25s ease;
}

.nav__links a:hover,
.nav__links a:focus-visible {
  color: var(--accent);
}

@media (max-width: 960px) {
  .nav__links a {
    color: var(--text-soft);
    font-size: 0.88rem;
    letter-spacing: 0.16em;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
  }

  .nav__links a::after {
    display: none;
  }

  .nav__links a:hover,
  .nav__links a:focus-visible {
    color: var(--accent);
  }
}

.nav__links a:hover::after,
.nav__links a:focus-visible::after {
  transform: scaleX(1);
}

/* The header's call, square like the page's buttons and like the hero's
   primary call: black at rest, it empties to the right on hover and keeps
   its outline. */
.contact-pill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  line-height: 1;
  border: 1px solid var(--accent);
  border-radius: 0;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: inherit;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.contact-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform-origin: right center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-pill:hover::before,
.contact-pill:focus-visible::before {
  transform: scaleX(0);
}

/* Even padding (the nav links drop theirs at the bottom): the label sits
   in the middle of the box, and the box on the links' line. */
.nav__links a.contact-pill {
  padding: 11px 20px;
  color: #f4f4f4;
}

.nav__links a.contact-pill:hover,
.nav__links a.contact-pill:focus-visible {
  color: var(--accent);
}

.nav__links a.contact-pill::after {
  display: none;
}

/* Now and then, once every nine seconds, ten thin white diagonal strokes
   come in from the right and run left across the black, the last of them
   trailing toward the right edge, then fade one after another. They pass
   under the label, are gone under a hand, and never run with reduced
   motion. */
.contact-pill__strokes {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  animation: contact-pill-strokes-run 9s cubic-bezier(0.3, 0.55, 0.25, 1) 3s infinite backwards;
}

.contact-pill__strokes i {
  --i: 0;
  position: absolute;
  top: -40%;
  bottom: -40%;
  right: calc(-8px - var(--i) * 7px);
  width: 1.5px;
  background: #ffffff;
  transform: skewX(-30deg);
  opacity: 0;
  animation: contact-pill-strokes-fade 9s linear calc(3s + var(--i) * 0.1s) infinite backwards;
}

.contact-pill__strokes i:nth-child(2) { --i: 1; }
.contact-pill__strokes i:nth-child(3) { --i: 2; }
.contact-pill__strokes i:nth-child(4) { --i: 3; }
.contact-pill__strokes i:nth-child(5) { --i: 4; }
.contact-pill__strokes i:nth-child(6) { --i: 5; }
.contact-pill__strokes i:nth-child(7) { --i: 6; }
.contact-pill__strokes i:nth-child(8) { --i: 7; }
.contact-pill__strokes i:nth-child(9) { --i: 8; }
.contact-pill__strokes i:nth-child(10) { --i: 9; }

.contact-pill:hover .contact-pill__strokes,
.contact-pill:focus-visible .contact-pill__strokes {
  visibility: hidden;
}

@keyframes contact-pill-strokes-run {
  0% {
    transform: translateX(0);
  }

  17% {
    transform: translateX(-78%);
  }

  100% {
    transform: translateX(-78%);
  }
}

@keyframes contact-pill-strokes-fade {
  0% {
    opacity: 0;
  }

  3% {
    opacity: 0.55;
  }

  13% {
    opacity: 0.55;
  }

  19% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@media (max-width: 960px) {
  .nav__links a.contact-pill {
    padding: 12px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-pill::before {
    transition: none;
  }

  .contact-pill__strokes {
    display: none;
  }
}

.hero {
  position: relative;
  isolation: isolate;
  contain: paint;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(calc(100svh - 68px), 920px);
  padding: clamp(104px, 15vh, 168px) 0 clamp(56px, 12vh, 112px);
  background: transparent;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(120% 85% at 50% 34%, rgba(188, 188, 188, 0.74) 0%, rgba(200, 200, 200, 0.48) 46%, rgba(212, 212, 212, 0) 78%);
}

.hero::after {
  content: none;
}

.grain {
  position: absolute;
  inset: -8%;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity="0.08"/%3E%3C/svg%3E');
  background-size: 220px 220px;
  opacity: 0.16;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 5;
  animation: grainShift 6s steps(6) infinite;
}

.hero .grain {
  display: none;
}

@keyframes grainShift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-3%, 2%, 0);
  }
}

@keyframes heroWaveA {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -360px;
  }
}

@keyframes heroWaveB {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 320px;
  }
}

@keyframes gridPulse {
  0% { background-position: 0% 0%, 100% 100%, 0 0; }
  100% { background-position: -3% 2%, 3% -2%, 0 0; }
}

@keyframes cellGlow {
  0%, 20% { opacity: 0.26; }
  45% { opacity: 0.34; }
  60% { opacity: 0.28; }
  100% { opacity: 0.32; }
}

@keyframes emblemDrift {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(0.6deg) scale(1.006); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes signalSweep {
  0% { transform: translate3d(-1%, 0, 0) scale(1.01); opacity: 0.42; }
  50% { transform: translate3d(1%, 0.6%, 0) scale(1.005); opacity: 0.5; }
  100% { transform: translate3d(0.5%, -0.4%, 0) scale(1); opacity: 0.42; }
}

@keyframes pulseSweep {
  0% { transform: translate3d(-2%, 0, 0); opacity: 0.05; }
  50% { transform: translate3d(2%, 1%, 0); opacity: 0.06; }
  100% { transform: translate3d(1%, -1%, 0); opacity: 0.05; }
}

.hero-inner {
  width: min(calc(100% - 64px), 1040px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 6vh, 64px);
  position: relative;
  z-index: 6;
}

.hero-copy {
  width: min(100%, 760px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--grid-size) / 5);
  text-align: center;
  text-transform: uppercase;
}

.hero-title {
  margin: 0;
  font-size: clamp(1.5rem, 5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--accent);
  cursor: default;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.06em;
  width: fit-content;
  /* Strict heading-box criterion: the h1's own layout box must encompass
     its widest locked line (it stays centered in the hero column, so the
     rendered overhang is unchanged); capping at 100% left scrollWidth >
     clientWidth at 1440px. */
  max-width: none;
  margin-inline: auto;
  text-align: center;
  padding: calc(var(--grid-size) / 8) 0 calc(var(--grid-size) / 6);
  text-wrap: balance;
}

/* All three lines rest near-black and in register. While one is hovered
   (data-trace-active, its rails out) it goes to the accent and stays in
   register; the other two slip out of it, like the alignment check's two
   frames: a pale copy of each slides a few px away from the hovered line
   (up and left above it, down and right below), and slides back in. */
.hero-title__segment {
  display: block;
  white-space: nowrap;
  color: #1c1c1c;
  text-shadow: 0 0 0 rgba(28, 28, 28, 0);
}

.hero-title__segment + .hero-title__segment {
  margin-top: -0.02em;
}

.hero .lead {
  margin: 0;
  max-width: 56ch;
  font-size: var(--hero-body);
  line-height: 1.45;
  color: var(--text-muted);
  text-align: center;
  text-wrap: balance;
}

/* Compact operating-surface rail below the homepage hero. */

@keyframes systemMarkerPulse {
  0%, 100% {
    opacity: 0.58;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@media (max-width: 900px) {
  :root {
    --header-h: calc(var(--grid-size) * 0.9);
  }

  .site-header {
    padding: 0 24px;
  }

  .nav {
    width: min(calc(100% - 40px), var(--max-width));
  }

  .hero {
    padding: clamp(80px, 18vh, 120px) 0 clamp(60px, 14vh, 100px);
    min-height: calc(100svh - 68px);
  }

  .hero-inner {
    width: min(calc(100% - 80px), 720px);
    gap: 32px;
  }

  .hero-copy {
    width: 100%;
    gap: 28px;
  }

  .origin-badge {
    gap: 4px;
  }

  .hero-origin {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    gap: 6px;
    margin-top: -4px;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .page-main {
    gap: 80px;
  }

  .subpage-hero {
    padding: clamp(100px, 20vh, 140px) 0 48px;
  }

  .subpage-hero__title {
    font-size: clamp(2.1rem, 8vw, 3rem);
  }
}

.hero-title::before,
.hero-title::after {
  content: none; /* disable decorative overlays behind title */
}

.hero-title::before {}
.hero-title::after {}

.lead {
  margin: 22px 0 0;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-muted);
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  letter-spacing: 0.02em;
  text-transform: none;
}

.hero .lead strong {
  color: var(--text-soft);
  font-weight: 400;
}

.hero-actions {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-actions .btn {
  min-width: clamp(220px, 18vw, 280px);
}

.hero-subline {
  margin: 10px auto 0;
  font-size: var(--hero-tagline);
  letter-spacing: 0.084em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-align: center;
  text-wrap: balance;
}

.hero-official-note {
  margin: 16px auto 0;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}

.page-main {
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.subpage-hero {
  padding: clamp(120px, 22vh, 160px) 0 60px;
  text-align: center;
}

.subpage-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.subpage-hero__title {
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.subpage-hero__lead {
  margin: 0 auto;
  max-width: 62ch;
  font-size: clamp(1rem, 2vw, 1.18rem);
  color: var(--text-muted);
}

/* Buttons: square corners and flat, like the grid they sit on. The primary
   call is black and empties to the right on hover, its arrow stepping
   forward; the secondary one fills black from the left. */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn.primary {
  background: transparent;
  color: #f4f4f4;
  border-color: var(--accent);
}

/* The primary call is the secondary's opposite: black at rest, it empties
   to the right on hover and keeps its outline. */
.btn.primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform-origin: right center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn.primary:hover::before,
.btn.primary:focus-visible::before {
  transform: scaleX(0);
}

.btn.primary::after {
  content: "\2192";
  margin-left: 0.9em;
  letter-spacing: 0;
  transition: transform 0.25s ease;
}

.btn.primary:hover,
.btn.primary:focus-visible {
  color: var(--accent);
}

.btn.primary:hover::after,
.btn.primary:focus-visible::after {
  transform: translateX(4px);
}

.btn.secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

.btn.secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn.secondary:hover,
.btn.secondary:focus-visible {
  color: #f4f4f4;
}

.btn.secondary:hover::before,
.btn.secondary:focus-visible::before {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .btn.primary::before,
  .btn.primary::after,
  .btn.secondary::before {
    transition: none;
  }
}

.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.origin-badge__letter--u,
.origin-badge__letter--s,
.origin-badge__letter--a {
  will-change: transform, opacity, color, text-shadow;
}

@keyframes usaLetterDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0.35px, -0.4px, 0);
  }
  75% {
    transform: translate3d(-0.32px, 0.45px, 0);
  }
}

@keyframes usaRedWave {
  0%, 100% {
    color: #b51220;
  }
  50% {
    color: #df2533;
  }
}

@keyframes usaWhiteWave {
  0%, 100% {
    color: #f7f9ff;
    text-shadow: 0 0 4px rgba(30, 40, 50, 0.25);
  }
  45% {
    color: #eef2ff;
    text-shadow: 0 0 6px rgba(60, 80, 110, 0.25);
  }
  50% {
    color: #ffffff;
    text-shadow: 0 0 4px rgba(30, 40, 50, 0.2);
  }
}

@keyframes usaBlueWave {
  0%, 100% {
    color: #123672;
  }
  50% {
    color: #1b4b9e;
  }
}

@media (prefers-reduced-motion: reduce) {
  .origin-badge__letter--u,
  .origin-badge__letter--s,
  .origin-badge__letter--a {
    animation: none;
    text-shadow: none;
    transform: none !important;
  }

  .origin-badge__flag-image {
    transition: none;
    transform: scale(1) translateY(0);
  }
}

.section {
  padding: var(--grid-size) 0;
}

.section--hero + .section--about {
  margin-top: calc(var(--grid-size) * 1);
}

.section--about {
  padding-top: calc(var(--grid-size) * 0.6);
  padding-bottom: calc(var(--grid-size) * 0.9);
  margin-bottom: 0;
}

.section--affiliations {
  padding: calc(var(--grid-size) * 0.1) 0 calc(var(--grid-size) * 0.9);
}

.section--affiliations .section__header {
  margin: -6px auto 16px;
}

.section--work {
  padding-top: max(0px, calc(var(--grid-size) * 0.85 - var(--grid-size) * 8));
}

.section--work .section__header {
  margin-top: 0;
}

.section--services {
  padding-bottom: max(40px, calc(clamp(140px, 17vw, 240px) - var(--grid-size) * 13));
}

.section--services .section__header h2,
.section--work .section__header h2 {
  font-size: clamp(1.5rem, 5vw, 3.25rem);
  line-height: 0.95;
}

.section__header {
  max-width: 780px;
  margin: -14px auto 32px;
  text-transform: uppercase;
  text-align: center;
}

.section__eyebrow {
  margin: 0 0 32px;
  letter-spacing: 0.28em;
  font-size: var(--section-eyebrow);
  color: var(--text-soft);
}

.section__header h2 {
  margin: 0;
  font-size: clamp(1.5rem, 5vw, 3.25rem);
  letter-spacing: -0.01em;
}

.section__headline-lock {
  /* Keeps the authored <br> line breaks while letting a line that is
     physically wider than its container wrap instead of clipping or
     overflowing the page (e.g. long section headlines at mid widths). */
  display: inline;
  white-space: normal;
}

.section--about .section__header h2 {
  line-height: 1.02;
}

.section--about .section__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  margin: 0 0 28px;
  max-width: none;
}

.section--about .section__eyebrow,
.section--about .section__tagline,
.section--about .section__header h2 {
  width: 100%;
  text-align: left;
}

.section--about .section__eyebrow {
  margin-bottom: 18px;
}

.section__lead {
  margin: 18px auto 0;
  font-size: var(--section-subtitle);
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-transform: none;
  line-height: 1.45;
}

.section__tagline {
  margin: 12px 0 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: var(--about-meta);
  color: var(--text-soft);
}

.section__subline {
  margin: 10px auto 0;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.section__lead--left {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: 460px;
  color: #1a1a1a;
}

.affiliations-grid {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 20px);
  align-items: stretch;
}

.affiliation-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.08);
}

.affiliation-card__logo {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.affiliation-card__logo img {
  max-width: min(120px, 100%);
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: saturate(0.95);
}

.affiliation-card__logo--text {
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  letter-spacing: 0.22em;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.6);
}

.affiliation-card__logo--text span {
  display: inline-block;
  transform: translateY(1px);
}

.affiliation-card__text {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-soft);
  line-height: 1.4;
}

@media (max-width: 980px) {
  .affiliations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .affiliations-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hero-affiliations {
  margin-top: 56px;
}

.hero-affiliations__shell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 100%;
  margin: 0 auto;
}

.hero-affiliations__viewport {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.hero-affiliations__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 18px 0;
  width: 100%;
}

/* Each item carries its own side margins (not a flex gap), so the doubled
   strip below is exactly two equal copies. */
.hero-affiliations__item {
  flex: 0 0 auto;
  width: 200px;
  margin-inline: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

/* Every logo sits in a box of one height, so the captions line up. */
.hero-affiliations__logo {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The running strip: one row, twice over, sliding left by one copy so the
   seam never shows, fading in and out at the edges. application.js sets
   its duration (a steady speed) and a start that puts USSOCOM mid-strip. */
.hero-affiliations[data-marquee="on"] .hero-affiliations__viewport {
  overflow: hidden;
  justify-content: flex-start;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.hero-affiliations[data-marquee="on"] .hero-affiliations__grid {
  flex-wrap: nowrap;
  width: max-content;
  justify-content: flex-start;
  animation: affiliations-marquee var(--marquee-duration, 60s) linear var(--marquee-delay, 0s) infinite;
}

.hero-affiliations[data-marquee="on"] .hero-affiliations__viewport:hover .hero-affiliations__grid,
.hero-affiliations[data-paused] .hero-affiliations__grid,
.hero-affiliations[data-offscreen] .hero-affiliations__grid {
  animation-play-state: paused;
}

@keyframes affiliations-marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-affiliations__grid {
    animation: none !important;
  }
}

/* Pause and play: moving content needs a way to stop it (WCAG 2.2.2). */
.hero-affiliations__toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
}

.hero-affiliations__toggle[hidden] {
  display: none;
}

.hero-affiliations__toggle:hover,
.hero-affiliations__toggle:focus-visible {
  color: var(--text-primary);
}

.hero-affiliations__toggle svg {
  width: 16px;
  height: 16px;
}

.hero-affiliations__toggle[aria-pressed="true"] .hero-affiliations__pause,
.hero-affiliations__toggle[aria-pressed="false"] .hero-affiliations__play {
  display: none;
}

/* One optical size for every logo: each gets about the same area, so a
   wide wordmark runs low and a compact mark runs tall. The files carry no
   transparent margins, so the box is the logo. */
.hero-affiliations__logo img {
  height: calc(var(--logo-h, 36px) * var(--logo-scale, 1));
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: saturate(1.02) contrast(1.02);
}

.hero-affiliations__item--sof-atl { --logo-h: 40px; }
.hero-affiliations__item--palantir { --logo-h: 30px; }
.hero-affiliations__item--sewp { --logo-h: 52px; }
.hero-affiliations__item--usf { --logo-h: 27px; }
.hero-affiliations__item--tampa-bay { --logo-h: 40px; }
.hero-affiliations__item--military-bay { --logo-h: 17px; }
.hero-affiliations__item--embarc { --logo-h: 41px; }
.hero-affiliations__item--fleetwerx { --logo-h: 28px; }

.hero-affiliations__item--fleetwerx .hero-affiliations__logo img {
  filter: saturate(1.08) contrast(1.12);
}

.affiliation-identity {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.affiliation-wordmark {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-affiliations__logo .affiliation-wordmark {
  min-height: 42px;
  font-size: 0.72rem;
  letter-spacing: 0.075em;
}

.hero-affiliations__logo .affiliation-identity {
  gap: 8px;
}

/* The SBA certifications stand still under the carousel: the "certified,
   veteran-owned" of the headline. */
.credential-badges {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(16px, 2vw, 24px);
}

.credential-badges__badge {
  display: block;
  width: clamp(48px, 4.6vw, 60px);
  height: auto;
}

.hero-affiliations__text {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: -2px;
}

.hero-affiliations__text--sewp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hero-affiliations__name {
  color: var(--text-primary);
  font-weight: 800;
}

.hero-affiliations__role {
  font-size: 0.62rem;
  letter-spacing: 0.07em;
}

@media (max-width: 900px) {
  .hero-affiliations__item {
    width: 170px;
    margin-inline: 12px;
  }

  .hero-affiliations {
    --logo-scale: 0.9;
  }

  .hero-affiliations__logo img {
    max-width: 170px;
  }
}

/* The trust statement: the headline beside its copy, one sentence to a
   line, and the evidence legend across the full width under both. */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "text"
    "media";
  row-gap: clamp(28px, 4vw, 52px);
  align-items: start;
}

.about-copy {
  grid-area: text;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  margin-top: 12px;
}

.about-copy .section__lead--left {
  max-width: none;
  margin: 0 0 24px;
}

.about-copy__line {
  display: block;
}

.about-copy .about-copy__link {
  margin: 0;
}

@media (min-width: 901px) {
  .section--about .about-copy .section__header {
    margin: 0;
  }

  /* Small enough for the longest sentence to keep to one line of its half. */
  .section--about .about-copy__lead {
    font-size: min(var(--section-subtitle), 1.75vw);
  }
}

@keyframes panelReveal {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes signalSweep {
  0% {
    transform: translateX(-130%) skewX(-18deg);
    opacity: 0;
  }
  35% {
    opacity: 0.45;
  }
  60% {
    transform: translateX(115%) skewX(-18deg);
    opacity: 0.25;
  }
  100% {
    transform: translateX(160%) skewX(-18deg);
    opacity: 0;
  }
}

@media (max-width: 900px) {
  .about-copy {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Home sections sit two grid rows apart: application.js sets each one's top
   padding (--grid-rhythm) so its headline starts two rows below the last
   grid row the section before it reaches - the hero's floor, the evidence
   legend, the case cards. Without script, two rows of padding. */
html.page-home main > section[data-grid-rhythm] {
  margin-top: 0;
  padding-top: var(--grid-rhythm, calc(2 * var(--grid-size)));
}

html.page-home main > section[data-grid-rhythm]:has(+ section[data-grid-rhythm]) {
  padding-bottom: 0;
}

.card-motion-ready .about-copy[data-animate] {
  opacity: 0;
  transform: translateY(8px);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.card-motion-ready .about-copy.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.feature-grid,
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 34px;
}

.deliverables {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  grid-template-rows: repeat(2, minmax(120px, auto));
  gap: clamp(12px, 1.2vw, 22px) clamp(14px, 1.4vw, 26px);
  position: relative;
  z-index: 2;
  justify-content: center;
  align-content: center;
  max-width: min(720px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.deliverables li {
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 0;
  padding: 14px 16px;
  letter-spacing: 0.08em;
  font-size: var(--pill-text);
  text-align: center;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4));
  min-width: 180px;
  max-width: 210px;
  width: clamp(180px, 18vw, 210px);
  min-height: 104px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #050608;
  box-shadow: 0 18px 44px rgba(7, 10, 20, 0.14);
}

.deliverables__title {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-wrap: balance;
}

.deliverables__body {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: 0.01em;
  text-transform: none;
  text-wrap: pretty;
}

.deliverables__body strong {
  font-weight: 700;
}

.deliverables.is-primed li {
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s ease,
    border-color 0.45s ease,
    opacity 0.45s ease;
  opacity: 0;
  transform: translateY(24px) scale(0.94);
}

.deliverables.is-primed li.is-visible,
.deliverables.is-primed li[data-animate="ready"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.deliverables li:nth-child(1) {
  justify-self: start;
  align-self: start;
}

.deliverables li:nth-child(2) {
  justify-self: end;
  align-self: start;
}

.deliverables li:nth-child(3) {
  justify-self: start;
  align-self: end;
}

.deliverables li:nth-child(4) {
  justify-self: end;
  align-self: end;
}

.deliverables.is-primed li.is-visible,
.deliverables.is-primed li[data-animate="ready"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.deliverables li:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 28px 66px rgba(6, 10, 18, 0.26);
  border-color: rgba(0, 0, 0, 0.3);
}

/* Only a mouse raises a card: a tap on a phone would leave it raised. */
@media (hover: hover) and (pointer: fine) {
  .deliverables li:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 66px rgba(6, 10, 18, 0.26);
    border-color: rgba(0, 0, 0, 0.3);
  }
}

.deliverables li.is-beam-active {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(4, 7, 14, 0.28);
  border-color: rgba(0, 0, 0, 0.32);
}

.deliverables-diagram {
  position: relative;
  margin-top: calc(var(--grid-size) * -1 + 20px);
  padding: clamp(60px, 8vw, 120px) 0;
  isolation: isolate;
  /* Layout only: paint containment would cut the cards' shadows off at the
     diagram's edge instead of letting them fade out. */
  contain: layout;
  min-height: clamp(420px, 50vw, 540px);
}

.diagram-beams {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.diagram-beams svg {
  width: 100%;
  height: 100%;
  display: block;
}

.diagram-beams__path {
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: rgba(255, 255, 255, 0.95);
  mix-blend-mode: screen;
  stroke-opacity: 0.85;
  stroke-dasharray: 16 8;
  animation: none;
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.65));
  transition: stroke-opacity 0.3s ease, filter 0.3s ease, stroke-width 0.3s ease;
}

.diagram-beams__path.is-active {
  stroke-opacity: 1;
  stroke-width: 2.6;
  filter: drop-shadow(0 0 32px rgba(255, 255, 255, 1));
  stroke-dasharray: 18 6;
  animation: beamActive 0.9s linear infinite;
}

/* At rest a beam's dashes drift slowly on toward the emblem, a calm echo
   of the lit beam's run, while the section is in view and motion is
   allowed. */
@media (prefers-reduced-motion: no-preference) {
  .diagram-beams__path {
    animation: beamIdle 3s linear infinite;
  }

  .section--services[data-motion-state="paused"] .diagram-beams__path {
    animation-play-state: paused;
  }
}

@keyframes beamIdle {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -24;
  }
}

@keyframes beamActive {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -24;
  }
}
.diagram-emblem {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(180px, 20vw, 280px);
  height: clamp(180px, 20vw, 280px);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.diagram-emblem__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.35));
  animation: emblemPulse 8s ease-in-out infinite;
}

@keyframes emblemPulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.32));
  }
  50% {
    transform: scale(1.03);
    filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.38));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.32));
  }
}

@media (min-width: 1100px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@keyframes beamFlow {
  0% {
    stroke-dashoffset: 0;
    opacity: 0.8;
  }
  100% {
    stroke-dashoffset: -320;
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wave-path--highlight {
    animation: none;
  }
}

.feature,
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 18px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.feature {
  padding: 26px;
}

.feature:focus-within,
.card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
  border-color: rgba(0, 0, 0, 0.24);
}

@media (hover: hover) and (pointer: fine) {
  .feature:hover,
  .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
    border-color: rgba(0, 0, 0, 0.24);
  }
}

.feature h3,
.card h3 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.feature p,
.card p {
  margin: 0;
  color: var(--text-soft);
  letter-spacing: 0.01em;
  text-transform: none;
  font-size: 0.9rem;
  line-height: 1.4;
}

.section--cta .cta {
  background: transparent;
  border-radius: 0;
  border: none;
  padding: clamp(48px, 8vw, 72px);
  text-align: center;
  box-shadow: none;
}

.section--cta .cta h2 {
  margin: 0;
  text-transform: uppercase;
}

.section--cta .cta p {
  margin: 20px auto 32px;
  max-width: 60ch;
  color: var(--text-muted);
  text-transform: none;
}

.section--cta .cta__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* The briefing request as a console, like the case maps' consoles. It
   sits on the page grid: an even number of cells wide, centred on the
   page's middle column line, and moved down onto a row line
   (application.js, data-grid-snap). Its frame traces itself once when it
   comes into view; its bar counts the fields filled in and lights when
   all are. */
.contact-console.console {
  width: min(calc(var(--grid-size) * 12), 100%);
  margin: var(--grid-snap, 0px) auto 0;
  text-align: left;
  /* A deeper, flatter black than the map consoles: no sheen on the form. */
  background: linear-gradient(160deg, #121214, #0a0a0b 60%);
}

@media (min-width: 1100px) {
  .contact-console.console {
    width: calc(var(--grid-size) * 10);
  }
}

.contact-console__count {
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}

.contact-console.is-ready .contact-console__count {
  color: var(--con-ink);
}

.contact-console.is-ready .live::before {
  background: #8ed8ac;
  box-shadow: 0 0 0 4px rgba(142, 216, 172, 0.12), 0 0 14px rgba(142, 216, 172, 0.45);
}

.contact-console__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  padding: 22px 20px 20px;
}

.contact-console__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.contact-console__field--full {
  grid-column: 1 / -1;
}

.contact-console__label {
  color: var(--con-ink-2);
}

.contact-console__field input,
.contact-console__field textarea {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin: 0;
  border: 1px solid var(--con-rule-2);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.025);
  color: var(--con-ink);
  padding: 11px 12px;
  font: inherit;
  font-size: 0.95rem;
  resize: vertical;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.contact-console__field input::placeholder,
.contact-console__field textarea::placeholder {
  color: rgba(227, 226, 222, 0.45);
}

.contact-console__field input:focus,
.contact-console__field textarea:focus {
  outline: none;
  border-color: var(--con-ink);
  background: rgba(255, 255, 255, 0.05);
}

.contact-console__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: calc(100% - 40px);
  min-height: 48px;
  margin: 0 20px 20px;
  border: 1px solid var(--con-rule-2);
  border-radius: 0;
  background: transparent;
  color: var(--con-ink-3);
  font-weight: 600;
  cursor: not-allowed;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.contact-console__submit:not(:disabled) {
  border-color: var(--con-ink);
  background: var(--con-ink);
  color: var(--con);
  cursor: pointer;
}

.contact-console__submit:not(:disabled):hover {
  background: #ffffff;
}

.contact-console__submit:focus-visible {
  outline: 2px solid;
  outline-color: #f4f4f4;
  outline-offset: 3px;
}

.section--cta .cta .contact-console__status {
  max-width: none;
  margin: 0;
  padding: 0 20px 18px;
  color: var(--con-ink-2);
}

.section--cta .cta .contact-console__status:empty {
  display: none;
}

.section--cta .cta .contact-console__status.is-success {
  color: #8ed8ac;
}

.section--cta .cta .contact-console__status.is-error {
  color: #ff8da1;
}

/* The trace: a bright head runs once around the frame, just inside its
   edge, from the middle of the top and back, drawing a glowing line behind
   it. The head fades just before the line closes; then the line fades. */
.contact-console__trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.45));
}

.contact-console__trace path {
  fill: none;
  stroke: #ffffff;
  opacity: 0;
}

.contact-console__trail {
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.contact-console__head {
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0.04 0.96;
  stroke-dashoffset: 0.04;
}

.contact-console.is-traced .contact-console__trail {
  animation: contact-trail 2.8s cubic-bezier(0.35, 0, 0.25, 1) forwards;
}

.contact-console.is-traced .contact-console__head {
  animation: contact-head 2.8s cubic-bezier(0.35, 0, 0.25, 1) forwards;
}

@keyframes contact-trail {
  0% {
    stroke-dashoffset: 1;
    opacity: 1;
  }

  72% {
    stroke-dashoffset: 0;
  }

  80% {
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes contact-head {
  0% {
    stroke-dashoffset: 0.04;
    opacity: 1;
  }

  62% {
    opacity: 1;
  }

  72% {
    stroke-dashoffset: -0.96;
    opacity: 0;
  }

  100% {
    stroke-dashoffset: -0.96;
    opacity: 0;
  }
}

/* The bar, the fields and the button come in one after another. */
.contact-console[data-reveal] .console__bar,
.contact-console[data-reveal] .contact-console__field,
.contact-console[data-reveal] .contact-console__submit {
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.contact-console[data-reveal="pending"] .console__bar,
.contact-console[data-reveal="pending"] .contact-console__field,
.contact-console[data-reveal="pending"] .contact-console__submit {
  opacity: 0;
  transform: translateY(8px);
}

.contact-console[data-reveal="shown"] .console__bar { transition-delay: 0.2s; }
.contact-console[data-reveal="shown"] .contact-console__field:nth-child(1) { transition-delay: 0.35s; }
.contact-console[data-reveal="shown"] .contact-console__field:nth-child(2) { transition-delay: 0.45s; }
.contact-console[data-reveal="shown"] .contact-console__field:nth-child(3) { transition-delay: 0.55s; }
.contact-console[data-reveal="shown"] .contact-console__field:nth-child(4) { transition-delay: 0.65s; }
.contact-console[data-reveal="shown"] .contact-console__submit { transition-delay: 0.8s, 0.8s, 0s, 0s, 0s; }

@media (max-width: 700px) {
  .contact-console__fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

.site-footer {
  padding: 42px 0 54px;
  background: transparent;
  border-top: none;
  color: var(--text-primary);
}

/* The company record in one small centred line; on narrow screens it
   breaks only between its parts, each keeping its separator. */
.footer-record {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  text-align: center;
}

.footer-record > span {
  white-space: nowrap;
}

.system-line {
  display: block;
  padding: 18px 0;
  font-size: 0.64rem;
  letter-spacing: 0.3em;
}

button.cta {
  border: 0;
  background: rgba(0, 0, 0, 0.78);
  color: #f4f4f4;
  border-radius: var(--radius-sm);
  padding: 12px 28px;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

button.cta:hover,
button.cta:focus-visible {
  background: var(--accent);
  color: #121316;
}

/* Responsive */

@media (max-width: 960px) {
  .nav {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand links";
    gap: 12px;
    padding: 0 18px;
  }

  .nav__toggle {
    display: inline-flex;
  }

  .nav__emblem-image {
    width: 28px;
    height: 28px;
  }

  .nav__brand {
    font-size: 1.05rem;
    letter-spacing: 0.3em;
  }

  .nav__links {
    position: absolute;
    top: calc(var(--grid-size) + 4px);
    right: 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: #f7f7f6;
    border: 1px solid rgba(9, 9, 9, 0.22);
    border-radius: var(--radius-md);
    padding: 10px 18px 14px;
    display: none;
    color: var(--text-primary);
    min-width: 264px;
    box-shadow: 0 24px 56px rgba(9, 9, 9, 0.22);
  }

  .nav__links li {
    border-top: 1px solid rgba(9, 9, 9, 0.1);
  }

  .nav__links li:first-child {
    border-top: 0;
  }

  .nav__links li:last-child {
    border-top: 0;
    padding-top: 10px;
  }

  .nav__links.is-open {
    display: flex;
  }

  .hero-inner {
    width: calc(100% - 64px);
    --hero-grid-bias: 0px;
  }

  .hero-title {
    font-size: clamp(2.4rem, 12vw, 4rem);
  }

  .section {
    padding-left: 32px;
    padding-right: 32px;
  }

}

@media (max-width: 640px) {
  .container {
    width: calc(100% - 32px);
  }

  .usf-demo {
    padding: 32px 16px 48px;
    gap: 20px;
  }

  .usf-status-strip {
    grid-template-columns: 1fr;
  }

  .usf-alert-grid,
  .usf-narratives__grid {
    grid-template-columns: 1fr;
  }

  .usf-demo__sync {
    flex-direction: column;
    align-items: flex-start;
  }

  .usf-demo__refresh {
    width: 100%;
    justify-content: space-between;
  }

  .hero {
    padding-top: 0;
    padding-bottom: clamp(32px, 14vh, 90px);
    min-height: calc(85vh - 68px);
    align-items: center;
    justify-content: flex-start;
  }

  .hero .grain {
    display: none !important;
  }

  .hero-inner {
    width: calc(100% - 40px);
    margin: 0 auto;
    text-align: center;
    align-items: center;
    row-gap: 24px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
  }

  .section--cta .cta {
    padding: 40px 0 56px;
  }

  .hero-official-note {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
  }

  .page-main {
    gap: 64px;
  }

  .subpage-hero {
    padding: 100px 0 40px;
  }

  .subpage-hero__eyebrow {
    letter-spacing: 0.2em;
    font-size: 0.68rem;
  }

  .subpage-hero__title {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  .section__header {
    margin-bottom: 40px;
  }

  .feature,
  .card {
    padding: 24px;
  }

}

@media (max-width: 480px) {
  :root {
    --header-h: 68px;
  }

  .nav {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 4px 12px 4px calc(12px + env(safe-area-inset-left, 0px));
    grid-template-columns: auto auto;
    grid-template-areas: "brand links";
    gap: 6px;
    justify-content: space-between;
  }

  .nav__identity {
    justify-self: start;
    gap: 9px;
  }

  .nav__brand {
    letter-spacing: 0.18em;
    font-size: 0.9rem;
  }

  .nav__toggle {
    padding: 6px;
  }

  .hero {
    padding: calc(72px + env(safe-area-inset-top, 0px) + clamp(0px, 6vh, 40px)) 0 clamp(45px, 16vh, 90px);
    min-height: calc(85vh - 68px);
    align-items: center;
    justify-content: flex-start;
  }

  .hero .grain {
    display: none !important;
  }

  .hero-inner {
    width: min(calc(100% - 48px), 500px);
    margin: 0 auto;
    row-gap: 28px;
    align-items: center;
    text-align: center;
    --hero-grid-bias: 0px;
  }

  .hero-title {
    font-size: clamp(2.3rem, 11vw, 3.2rem);
    letter-spacing: 0.03em;
    line-height: 1.15;
    text-align: center;
  }

  .hero-title__segment {
    white-space: normal;
  }

  .hero .lead {
    font-size: clamp(1.05rem, 4vw, 1.22rem);
    line-height: 1.4;
    text-align: center;
    margin: 0 auto;
  }

  .hero-official-note {
    margin-top: 20px;
  }

  .section--cta .cta {
    padding: 36px 0 48px;
  }

  .section--about .section__lead {
    font-size: 1.2rem;
    line-height: 1.68;
    letter-spacing: 0.006em;
  }
}

@media (max-width: 900px) {
  .section--services[data-motion-state="paused"] .diagram-beams__path.is-active,
  .section--services[data-motion-state="paused"] .diagram-emblem__image {
    animation-play-state: paused !important;
  }

  @supports (content-visibility: auto) {
    html.page-home .section--about,
    html.page-home .section--work,
    html.page-home .section--cta {
      content-visibility: auto;
    }

    html.page-home .section--about {
      contain-intrinsic-size: auto 1100px;
    }

    html.page-home .section--work {
      contain-intrinsic-size: auto 1240px;
    }

    html.page-home .section--cta {
      contain-intrinsic-size: auto 820px;
    }
  }
}

/* MOBILE DAGR LAYOUT  ----------------------------------------------- */
@media (max-width: 768px) {
  body::after {
    content: none;
  }

  /* 1. HEADER */
  /* Fixed below the safe area: the grid's rows start at its bottom edge. */
  :root {
    --grid-row-anchor: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  }

  .site-header {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 40;
    padding: 6px 0;
  }

  .nav {
    padding: 0 16px;
  }

  .nav__toggle {
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.78);
  }

  /* 2. HERO */
  /* The headline sits up to two grid rows lower, so the wall above it has
     room for its channel, a registration and a cell element; on a short
     phone less, so the calls to action stay on the first screen. */
  .hero {
    padding:
      calc(
        72px + env(safe-area-inset-top, 0px) + clamp(12px, 8vh, 50px) +
          clamp(0px, 100svh - 700px, 2 * var(--grid-size))
      )
      0 clamp(50px, 16vh, 100px);
    min-height: calc(88vh - 68px);
    align-items: center;
    justify-content: flex-start;
  }

  .hero,
  .section {
    scroll-margin-top: calc(78px + env(safe-area-inset-top, 0px));
  }

  .hero .grain {
    display: none;
  }

  .hero-inner {
    width: min(calc(100% - 48px), 520px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    text-align: center;
    --hero-grid-bias: 0px;
  }

  .hero-title {
    font-size: clamp(2.2rem, 8.5vw, 3rem);
    line-height: 1.14;
    max-width: 100%;
    margin: 0;
    text-align: center;
  }

  .hero .lead {
    max-width: 100%;
    margin: 0 auto;
    font-size: clamp(1rem, 4vw, 1.2rem);
    line-height: 1.38;
    text-align: center;
  }

  .hero-subline {
    margin-top: 6px;
    margin-bottom: 0;
    font-size: 0.88rem;
    letter-spacing: 0.08em;
    text-align: center;
  }

  /* 3. CTA BUTTONS */
  .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    margin: 12px 0 0;
    width: 100%;
  }

  .hero-actions .btn {
    flex: none;
    width: min(320px, 100%);
    padding: 12px 18px;
    font-size: 0.94rem;
  }

  .hero-actions .btn.primary {
    box-shadow: none;
  }

  .hero-actions .btn.secondary {
    box-shadow: none;
  }

  /* 4. ABOUT / TEXT BLOCK */
  .section--about {
    padding-top: 24px;
    margin-bottom: 0;
  }

  .section--about .section__header h2 {
    font-size: 1.25rem;
    margin-bottom: 6px;
  }

  .section--about .section__tagline {
    font-size: 0.86rem;
    max-width: 80%;
    margin: 0 auto 14px auto;
  }

  .section--about .section__lead {
    max-width: 92%;
    margin: 0 auto 18px auto;
    font-size: 1.07rem;
    line-height: 1.58;
    letter-spacing: 0.01em;
  }

  html,
  body {
    overflow-x: hidden;
  }

  /* 6. HIDE WAVES / ORB */
  .hero .grain,
  .pipe-diagram,
  .pipe-orb,
  .pipe-wave {
    display: none !important;
  }

  .diagram-beams {
    display: block;
    z-index: 0;
    opacity: 0.65;
  }

  .diagram-beams__path {
    stroke-width: 2.4;
    stroke-opacity: 0.95;
    filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.75));
  }

  .diagram-beams__path.is-active {
    stroke-width: 3.2;
    stroke-opacity: 1;
    filter: drop-shadow(0 0 36px rgba(255, 255, 255, 0.95));
  }

  .diagram-emblem {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(140px, 34vw, 200px);
    height: clamp(140px, 34vw, 200px);
    margin: 0;
    opacity: 0.55;
    z-index: 1;
    pointer-events: none;
  }

  .diagram-emblem__image {
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.24));
  }

  .deliverables-diagram {
    margin-top: calc(var(--grid-size) * -0.5);
    padding-top: 48px;
    padding-bottom: 48px;
    position: relative;
    contain: layout;
    overflow: visible;
  }

  /* 7. WHAT WE DELIVER HEADER */
  .section--services .section__eyebrow {
    margin-top: 12px;
    margin-bottom: 4px;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
  }

  .section--services .section__header h2,
  .section--work .section__header h2 {
    margin-top: 0;
    margin-bottom: 6px;
    font-size: 1.25rem;
    line-height: 0.95;
  }

  .section--services .section__lead {
    margin-top: 0;
    margin-bottom: 14px;
    font-size: 0.86rem;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  /* 8. CAPABILITIES / OUTCOMES CARDS */

  .deliverables {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(30px, 9vw, 42px) minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(64px, auto));
    gap: 12px;
    margin-top: 24px;
    width: min(100%, 360px);
    max-width: calc(100vw - 20px);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
  }

  .deliverables li {
    max-width: 100%;
    width: 100%;
    min-width: 0;
    min-height: 96px;
    padding: 14px 10px;
    z-index: 2;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4));
    color: #050608;
    box-shadow: 0 18px 44px rgba(7, 10, 20, 0.14);
  }

  .deliverables__title {
    max-width: 94%;
    margin-inline: auto;
    font-size: 0.72rem;
    line-height: 1.1;
    letter-spacing: 0.028em;
  }

  .deliverables__body {
    font-size: 0.72rem;
    line-height: 1.35;
  }

  .deliverables li:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .deliverables li:nth-child(2) {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }

  .deliverables li:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }

  .deliverables li:nth-child(4) {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
  }

  .deliverables__body strong {
    font-size: inherit;
    font-weight: 700;
  }

  .deliverables li {
    font-size: 0.86rem;
    line-height: 1.35;
  }
}

@media (max-width: 480px) {
  .section--about .section__header h2,
  .section--services .section__header h2,
  .section--work .section__header h2 {
    max-width: 94%;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(1rem, 4.2vw, 1.16rem);
    line-height: 1.02;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }

  .nav {
    padding: 4px 12px 4px calc(12px + env(safe-area-inset-left, 0px));
  }

  .nav__identity {
    transform: none;
  }
}

/* DAGR content foundation -------------------------------------------- */

.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

/* Cards and chips read like the home case cards: square, flat, one
   hairline. */
.content-card {
  padding: 24px;
  background: var(--case-paper);
  border: 1px solid var(--case-rule);
}

/* The research flow: three numbered steps as an ordered list of cards,
   and under them the line on who decides. */
.research-flow {
  margin: 0;
  padding: 0;
  list-style: none;
}

.content-card__step {
  margin: 0 0 14px;
  color: var(--text-muted);
}

/* Medium screens: two steps, then the third centred at the same width. */
@media (min-width: 481px) and (max-width: 960px) {
  .research-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .research-flow > * {
    grid-column: span 2;
  }

  .research-flow > :nth-child(3) {
    grid-column: 2 / span 2;
  }
}

/* Platform keeps one axis, centred like the home page: the title, the two
   cards that say what DAGR does and where it fits, and each section
   heading with its lead above the cards. */
.page-platform .subpage-hero {
  text-align: center;
}

.page-platform .subpage-hero__title {
  margin-inline: auto;
}

.platform-hero__cards {
  max-width: 880px;
  margin: 28px auto 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: left;
}

/* The labels read like the step titles below: bold capitals. */
.platform-hero__cards .content-card__title {
  font-weight: 700;
  line-height: 1.6;
  color: var(--text-primary);
}

.platform-hero__cards .content-card__body {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-muted);
}

@media (max-width: 700px) {
  .platform-hero__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

.page-platform .page-main .section__header {
  display: block;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.page-platform .page-main .section__header .section__lead {
  margin-inline: auto;
}

.content-card__title {
  margin: 0 0 10px;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.content-card__body {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-soft);
}

.content-card__body a {
  text-decoration: underline;
}

.section__footnote {
  margin: 26px 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.section__footnote a {
  text-decoration: underline;
}

.section__footnote--center {
  text-align: center;
}

.section__scope {
  max-width: 760px;
  margin: clamp(22px, 3vw, 30px) auto 0;
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: center;
  color: var(--text-soft);
}

/* Multi-source domain grid (3 + 3 on desktop) */

.source-domains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .source-domains {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.source-domains__item {
  padding: 18px 20px;
  background: var(--case-paper);
  border: 1px solid var(--case-rule);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* Credentials section wraps the affiliations carousel outside the hero */

.section--credentials .hero-affiliations {
  margin-top: 40px;
}

/* Evidence-trail chain (Evidence page): source to review, one line */

/* About: scannable programs & affiliations list (local logos only) */

/* Compact CTA for internal pages */

/* The closing call repeats the header's call wherever the header shows it
   (wide screens), so it is dropped there; below 961px the header's call
   sits in the menu and the closing call is the one in view. Either way the
   page ends with the same air before the footer as the home page's contact
   block: its note's 32px margin, the call's padding, the section's. */
@media (min-width: 961px) {
  .section--cta-compact {
    display: none;
  }

  .page-main.page-main--grid > section:has(+ .section--cta-compact) {
    padding-bottom: calc(32px + clamp(48px, 8vw, 72px) + var(--grid-size));
  }
}

.section--cta-compact .cta {
  padding: clamp(26px, 4vw, 40px);
}

.section--cta-compact .cta__actions {
  margin-top: 20px;
}

@media (max-width: 960px) {
  .page-main .section.section--cta-compact {
    padding-bottom: 48px;
  }

  .section--cta-compact .cta.cta--compact {
    padding-bottom: calc(32px + clamp(48px, 8vw, 72px));
  }
}

@media (max-width: 700px) {
  .page-main .section.section--cta-compact {
    padding-bottom: 32px;
  }

  .section--cta-compact .cta.cta--compact {
    padding-bottom: 68px;
  }
}

.cta__notice {
  margin: 22px auto 0;
  max-width: 560px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-soft);
  text-align: center;
}

/* DAGR V2 visual system ---------------------------------------------- */

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  background: var(--accent);
  color: #f4f4f4;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  color: #ffffff;
  outline: 2px solid #0f0f0f;
  outline-offset: 3px;
}

:focus-visible {
  outline: 2px solid #0f0f0f;
  outline-offset: 3px;
}

#main-content {
  scroll-margin-top: calc(var(--grid-size) + 12px);
}

.nav__toggle {
  min-width: 44px;
  min-height: 44px;
}

.contact-pill {
  min-height: 44px;
}

/* Evidence legend: the evidence workflow in the hero's own marks -------- */
/* The figure is drawn in page-grid cells (one SVG user unit is one cell)
   and set on the page grid: centred on it by an even width on wide
   screens; application.js ([data-grid-snap]) moves it down onto a row line
   (--grid-snap), on phones across onto the column line nearest the copy's
   edge (--grid-snap-x), and sets --px, one CSS pixel in cells, for its
   hairlines. Wide screens read a row of sixteen cells: observations over
   the channel, the steps standing on it, their labels under it. Phones
   read a column of six: the channel across the top, the steps down its
   first column, the labels beside them. One change runs the steps in turn
   on a 16 s cycle while the figure is in view; between turns each step's
   mark rests faintly in its cell, and that is all a still figure shows. */

.evidence-flow {
  --px: 0.0139;
  --evidence-ink: #09090b;
  --evidence-label: #5c5c5c;
  --evidence-label-on: #09090b;
  grid-area: media;
  position: relative;
  justify-self: center;
  width: calc(16 * var(--grid-size));
  height: calc(4 * var(--grid-size));
  margin: var(--grid-snap, 0px) 0 0;
}

.evidence-flow__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.evidence-flow__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* Half a pixel up and left: a stroke on a cell's edge then covers the
     page grid's own line pixel exactly. */
  transform: translate(-0.5px, -0.5px);
  fill: none;
  stroke-width: var(--px);
}

.evidence-flow__svg--col {
  display: none;
}

.evidence-flow__obs {
  fill: rgba(9, 9, 9, 0.28);
}

.evidence-flow__obs--live {
  fill: #0f0f0f;
}

.evidence-flow__ring {
  fill: none;
  stroke: rgba(9, 9, 9, 0.45);
}

/* A marked observation's echo: a hairline copy of its ring that the motion
   below sends out when the change reaches its step. */
.evidence-flow__echo {
  fill: none;
  stroke: rgba(9, 9, 9, 0.5);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.evidence-flow__spine {
  stroke-opacity: 0.3;
}

.evidence-flow__tick {
  stroke: rgba(9, 9, 11, 0.28);
}

.evidence-flow__tick--lead {
  stroke: rgba(9, 9, 11, 0.42);
}

.evidence-flow__svg--row .evidence-flow__ticks {
  --evidence-drift: 2.5px;
}

.evidence-flow__svg--col .evidence-flow__ticks {
  --evidence-drift: -2.5px;
}

.evidence-flow__frame--dashed {
  stroke-dasharray: calc(3 * var(--px)) calc(3 * var(--px));
}

/* Each step's mark at rest. */
.evidence-flow__rest .evidence-flow__hatch {
  stroke: rgba(9, 9, 11, 0.1);
}

.evidence-flow__rest .evidence-flow__brackets {
  stroke: rgba(9, 9, 11, 0.32);
}

.evidence-flow__rest .evidence-flow__link {
  stroke: rgba(9, 9, 11, 0.2);
}

.evidence-flow__rest .evidence-flow__walls {
  stroke: rgba(9, 9, 11, 0.14);
}

.evidence-flow__rest .evidence-flow__frame {
  stroke: rgba(9, 9, 11, 0.26);
}

.evidence-flow__rest .evidence-flow__frame--dashed {
  stroke: rgba(9, 9, 11, 0.18);
}

.evidence-flow__rest .evidence-flow__loop {
  stroke: rgba(9, 9, 11, 0.28);
}

.evidence-flow__rest .evidence-flow__nib {
  stroke: rgba(9, 9, 11, 0.6);
}

.evidence-flow__rest .evidence-flow__scanline {
  stroke: rgba(9, 9, 11, 0.3);
}

.evidence-flow__rest .evidence-flow__band {
  opacity: 0.3;
}

/* The change's run: nothing shows until it plays. */
.evidence-flow__pulse,
.evidence-flow__carry,
.evidence-flow__exit {
  stroke: var(--evidence-ink);
  opacity: 0;
}

.evidence-flow__pulse {
  stroke-dasharray: 0.24 3;
}

.evidence-flow__carry {
  stroke-dasharray: 0.5 3;
}

.evidence-flow__exit {
  stroke-dasharray: 0.2 3;
}

.evidence-flow__spike {
  stroke: rgba(9, 9, 11, 0.72);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
}

/* The pen: one hatch line after another (dashes restart on every subpath,
   so each line is a path of its own, --k its place in the order). */
.evidence-flow__run .evidence-flow__hatch {
  stroke: rgba(9, 9, 11, 0.24);
  opacity: 0;
}

.evidence-flow__run .evidence-flow__hatch path {
  stroke-dasharray: 1 3;
  stroke-dashoffset: 1;
}

.evidence-flow__run .evidence-flow__brackets {
  stroke: rgba(9, 9, 11, 0.55);
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

.evidence-flow__run .evidence-flow__walls {
  stroke: rgba(9, 9, 11, 0.2);
  opacity: 0;
}

.evidence-flow__run .evidence-flow__walls--watch {
  stroke: var(--evidence-ink);
}

.evidence-flow__run .evidence-flow__walls--scan {
  stroke: rgba(9, 9, 11, 0.3);
}

.evidence-flow__run .evidence-flow__link {
  stroke: rgba(9, 9, 11, 0.42);
  stroke-dasharray: 0 3;
}

.evidence-flow__run .evidence-flow__frame--dashed {
  stroke: rgba(9, 9, 11, 0.22);
  opacity: 0;
}

.evidence-flow__frame-slide {
  opacity: 0;
}

/* The later frame's edges; at the end each opens out onto its wall. */
.evidence-flow__edge {
  stroke: var(--evidence-ink);
  transform-box: fill-box;
  transform-origin: center;
}

.evidence-flow__edge--t {
  --open-y: -0.24px;
  --open-sx: 1.923;
}

.evidence-flow__edge--b {
  --open-y: 0.24px;
  --open-sx: 1.923;
}

.evidence-flow__edge--l {
  --open-x: -0.24px;
  --open-sy: 1.923;
}

.evidence-flow__edge--r {
  --open-x: 0.24px;
  --open-sy: 1.923;
}

.evidence-flow__trace {
  stroke: rgba(9, 9, 11, 0.26);
  stroke-dasharray: 1 3;
  stroke-dashoffset: 1;
}

.evidence-flow__head {
  stroke: rgba(9, 9, 11, 0.6);
  stroke-dasharray: 0.02 3;
  opacity: 0;
}

.evidence-flow__scan {
  opacity: 0;
}

.evidence-flow__run .evidence-flow__scanline {
  stroke: rgba(9, 9, 11, 0.45);
}

/* The labels, on the same cells as the drawing. */
.evidence-flow__legend {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(16, var(--grid-size));
  grid-template-rows: repeat(4, var(--grid-size));
}

.evidence-flow__label {
  grid-row: 4;
  padding: calc(var(--grid-size) * 0.16) 0 0 calc(var(--grid-size) * 0.14);
  font-size: clamp(0.62rem, calc(var(--grid-size) * 0.165), 0.74rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--evidence-label);
}

.evidence-flow__label span {
  display: block;
}

/* The integrate step's note: where reviewed output can go besides a brief. */
.evidence-flow__label .evidence-flow__sublabel {
  display: block;
  margin-top: 0.3em;
  font-size: 0.95em;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: none;
  text-wrap: balance;
}

.evidence-flow__label:nth-child(1) {
  grid-column: 1 / span 4;
}

.evidence-flow__label:nth-child(2) {
  grid-column: 5 / span 2;
}

.evidence-flow__label:nth-child(3) {
  grid-column: 7 / span 2;
}

.evidence-flow__label:nth-child(4) {
  grid-column: 9 / span 2;
}

.evidence-flow__label:nth-child(5) {
  grid-column: 11 / span 2;
}

.evidence-flow__label:nth-child(6) {
  grid-column: 13 / span 2;
}

.evidence-flow__label:nth-child(7) {
  grid-column: 15 / span 2;
}

@media (max-width: 859px) {
  .evidence-flow {
    justify-self: start;
    width: calc(6 * var(--grid-size));
    height: calc(10 * var(--grid-size));
    margin-left: var(--grid-snap-x, 0px);
  }

  .evidence-flow__svg--row {
    display: none;
  }

  .evidence-flow__svg--col {
    display: block;
  }

  .evidence-flow__legend {
    grid-template-columns: repeat(6, var(--grid-size));
    grid-template-rows: repeat(10, var(--grid-size));
  }

  .evidence-flow__label:nth-child(n) {
    grid-column: 2 / -1;
    align-self: center;
    padding: 0 0 0 calc(var(--grid-size) * 0.25);
    font-size: 0.72rem;
  }

  .evidence-flow__label:nth-child(1) {
    grid-row: 3;
  }

  .evidence-flow__label:nth-child(2) {
    grid-row: 4;
  }

  .evidence-flow__label:nth-child(3) {
    grid-row: 5;
  }

  .evidence-flow__label:nth-child(4) {
    grid-row: 6;
  }

  .evidence-flow__label:nth-child(5) {
    grid-row: 7;
  }

  .evidence-flow__label:nth-child(6) {
    grid-row: 8;
  }

  .evidence-flow__label:nth-child(7) {
    grid-row: 9;
  }

  .evidence-flow__label span {
    display: inline;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .evidence-flow[data-motion-state="active"] .evidence-flow__ticks {
    animation: evidenceTickDrift 12.5s linear infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__obs:not(.evidence-flow__obs--live) {
    --observation-fade-duration: 9.8s;
    --observation-fade-delay: -1.2s;
    --observation-peak-opacity: 0.92;
    transform-box: fill-box;
    transform-origin: center;
    animation: evidenceObservationFade var(--observation-fade-duration) linear var(--observation-fade-delay) infinite;
    will-change: opacity, transform;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__obs:not(.evidence-flow__obs--live):nth-of-type(2) {
    --observation-fade-duration: 12.6s;
    --observation-fade-delay: -8.4s;
    --observation-peak-opacity: 0.74;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__obs:not(.evidence-flow__obs--live):nth-of-type(3) {
    --observation-fade-duration: 10.9s;
    --observation-fade-delay: -5.7s;
    --observation-peak-opacity: 0.84;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__obs:not(.evidence-flow__obs--live):nth-of-type(4) {
    --observation-fade-duration: 13.4s;
    --observation-fade-delay: -2.9s;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__obs:not(.evidence-flow__obs--live):nth-of-type(5) {
    --observation-fade-duration: 9.2s;
    --observation-fade-delay: -6.8s;
    --observation-peak-opacity: 0.78;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__obs:not(.evidence-flow__obs--live):nth-of-type(6) {
    --observation-fade-duration: 11.7s;
    --observation-fade-delay: -0.6s;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__obs:not(.evidence-flow__obs--live):nth-of-type(7) {
    --observation-fade-duration: 14.1s;
    --observation-fade-delay: -10.3s;
    --observation-peak-opacity: 0.72;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__obs:not(.evidence-flow__obs--live):nth-of-type(8) {
    --observation-fade-duration: 10.1s;
    --observation-fade-delay: -4.4s;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__obs:not(.evidence-flow__obs--live):nth-of-type(9) {
    --observation-fade-duration: 12.9s;
    --observation-fade-delay: -7.6s;
    --observation-peak-opacity: 0.8;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__obs:not(.evidence-flow__obs--live):nth-of-type(10) {
    --observation-fade-duration: 9.6s;
    --observation-fade-delay: -3.2s;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__obs:not(.evidence-flow__obs--live):nth-of-type(11) {
    --observation-fade-duration: 13.7s;
    --observation-fade-delay: -11.1s;
    --observation-peak-opacity: 0.76;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__obs--live {
    animation: evidenceObsPulse 3.8s ease-in-out infinite alternate;
  }

  /* Each marked observation pings as the change below reaches its step,
     on the run's 16 s cycle: the spike rising under it (detect, 0.95 s),
     the frames locking into register (assessment cue, 5.8 s), the scan
     landing (verify, 10.8 s). */
  .evidence-flow[data-motion-state="active"] .evidence-flow__echo {
    animation: evidenceEcho 16s cubic-bezier(0.2, 0.6, 0.3, 1) var(--echo-at, 0s) infinite;
  }

  /* One change through the steps: every part runs the same 16 s cycle,
     started at its step's moment (s): pulse 0, spike 0.6, detect 0.8,
     link 2, carry 3.1, align 3.6, carry 5.9, watch 6.4, carry 8.9,
     scan 9.4, carry 10.9, exit 11.4; then a rest until 16. */
  .evidence-flow[data-motion-state="active"] .evidence-flow__pulse {
    animation: evidencePulse 16s linear infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__spike {
    animation: evidenceSpike 16s linear 0.6s infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__run .evidence-flow__brackets {
    animation: evidenceBrackets 16s linear 0.8s infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__run .evidence-flow__hatch {
    animation: evidenceHatch 16s linear 0.8s infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__run .evidence-flow__hatch path {
    animation: evidenceHatchLine 16s linear infinite;
    animation-delay: calc(0.95s + var(--k) * 0.045s);
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__rest--detect {
    animation: evidenceRestDetect 16s linear 0.8s infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__run .evidence-flow__link {
    animation: evidenceLink 16s linear 2s infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__walls--from {
    animation: evidenceLinkFrom 16s linear 2s infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__walls--to {
    animation: evidenceLinkTo 16s linear 2s infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__rest--link {
    animation: evidenceRestLink 16s linear 2s infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__carry {
    animation: evidenceCarry 16s linear 3.1s infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__carry--2 {
    animation-delay: 5.9s;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__carry--3 {
    animation-delay: 8.9s;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__carry--4 {
    animation-delay: 10.9s;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__run .evidence-flow__frame--dashed {
    animation: evidenceAlignA 16s linear 3.6s infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__frame-slide {
    animation: evidenceAlignB 16s linear 3.6s infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__edge {
    animation: evidenceAlignOpen 16s linear 3.6s infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__rest--align {
    animation: evidenceRestAlign 16s linear 3.6s infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__trace {
    animation: evidenceTrace 16s linear 6.4s infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__head {
    animation: evidenceHead 16s linear 6.4s infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__walls--watch {
    animation: evidenceWatchLock 16s linear 6.4s infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__rest--watch {
    animation: evidenceRestWatch 16s linear 6.4s infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__scan {
    animation: evidenceScan 16s linear 9.4s infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__walls--scan {
    animation: evidenceScanLand 16s linear 9.4s infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__rest--scan {
    animation: evidenceRestScan 16s linear 9.4s infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__exit {
    animation: evidenceExit 16s linear 11.4s infinite;
  }

  /* Each label darkens while its step plays. */
  .evidence-flow[data-motion-state="active"] .evidence-flow__label {
    animation: evidenceLabel 16s linear infinite;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__label:nth-child(2) {
    animation-delay: 0.6s;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__label:nth-child(3) {
    animation-delay: 2s;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__label:nth-child(4) {
    animation-delay: 3.6s;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__label:nth-child(5) {
    animation-delay: 6.4s;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__label:nth-child(6) {
    animation-delay: 9.4s;
  }

  .evidence-flow[data-motion-state="active"] .evidence-flow__label:nth-child(7) {
    animation-delay: 11.4s;
  }
}

@keyframes evidenceEcho {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }

  12.5%,
  100% {
    opacity: 0;
    transform: scale(3.4);
  }
}

@keyframes evidenceObsPulse {
  from {
    fill-opacity: 0.55;
  }
  to {
    fill-opacity: 1;
  }
}

@keyframes evidenceObservationFade {
  0%,
  10% {
    opacity: 0.06;
    transform: scale(0.86);
  }

  22%,
  34% {
    opacity: var(--observation-peak-opacity);
    transform: scale(1);
  }

  100% {
    opacity: 0.04;
    transform: scale(0.9);
  }
}

@keyframes evidenceTickDrift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--evidence-drift));
  }
}

@keyframes evidencePulse {
  0% {
    stroke-dashoffset: 0.24;
    opacity: 0;
  }

  0.625% {
    opacity: 0.5;
  }

  4.25% {
    opacity: 0.5;
  }

  5% {
    stroke-dashoffset: -1;
    opacity: 0;
  }

  100% {
    stroke-dashoffset: -1;
    opacity: 0;
  }
}

@keyframes evidenceCarry {
  0% {
    stroke-dashoffset: 0.5;
    opacity: 0;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }

  0.5% {
    opacity: 0.5;
  }

  2.625% {
    opacity: 0.5;
  }

  3.125% {
    stroke-dashoffset: -1;
    opacity: 0;
  }

  100% {
    stroke-dashoffset: -1;
    opacity: 0;
  }
}

@keyframes evidenceExit {
  0% {
    stroke-dashoffset: 0.2;
    opacity: 0;
    animation-timing-function: cubic-bezier(0.4, 0, 0.9, 0.6);
  }

  0.75% {
    opacity: 0.5;
  }

  4.375% {
    opacity: 0.5;
  }

  7.5% {
    stroke-dashoffset: -1;
    opacity: 0;
  }

  100% {
    stroke-dashoffset: -1;
    opacity: 0;
  }
}

@keyframes evidenceSpike {
  0% {
    transform: scaleY(0);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }

  2.813% {
    transform: scaleY(1);
  }

  8.125% {
    transform: scaleY(1);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }

  16.875% {
    transform: scaleY(0);
  }

  100% {
    transform: scaleY(0);
  }
}

@keyframes evidenceBrackets {
  0% {
    opacity: 0;
    transform: scale(1.1);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }

  2.188% {
    opacity: 1;
    transform: scale(1);
  }

  15% {
    opacity: 1;
  }

  18.75% {
    opacity: 0;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes evidenceHatch {
  0% {
    opacity: 1;
  }

  11.25% {
    opacity: 1;
  }

  16.25% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes evidenceHatchLine {
  0% {
    stroke-dashoffset: 1;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }

  1.125% {
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dashoffset: 0;
  }

  50.063%,
  100% {
    stroke-dashoffset: 1;
  }
}

@keyframes evidenceLink {
  0% {
    stroke-dasharray: 0 3;
    stroke-dashoffset: 0;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }

  5.625% {
    stroke-dasharray: 1 3;
    stroke-dashoffset: 0;
  }

  10% {
    stroke-dasharray: 1 3;
    stroke-dashoffset: 0;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }

  14.375% {
    stroke-dasharray: 0 3;
    stroke-dashoffset: -1;
  }

  100% {
    stroke-dasharray: 0 3;
    stroke-dashoffset: -1;
  }
}

@keyframes evidenceLinkFrom {
  0% {
    opacity: 0;
  }

  1.375% {
    opacity: 1;
  }

  10% {
    opacity: 1;
  }

  14.375% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes evidenceLinkTo {
  0%,
  5.625% {
    opacity: 0;
  }

  7% {
    opacity: 1;
  }

  10% {
    opacity: 1;
  }

  14.375% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes evidenceAlignA {
  0% {
    opacity: 0;
  }

  2.5% {
    opacity: 1;
  }

  12.5% {
    opacity: 1;
  }

  14.063% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes evidenceAlignB {
  0%,
  1.875% {
    opacity: 0;
    transform: translate(0.1px, -0.1px);
  }

  3.75% {
    opacity: 0.36;
  }

  4.375% {
    transform: translate(0.1px, -0.1px);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }

  12.5% {
    opacity: 0.36;
    transform: translate(0, 0);
  }

  14.063% {
    opacity: 0.46;
  }

  17.5% {
    opacity: 0.46;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }

  20.625% {
    opacity: 0.16;
  }

  24.375% {
    opacity: 0;
    transform: translate(0, 0);
  }

  100% {
    opacity: 0;
    transform: translate(0, 0);
  }
}

@keyframes evidenceAlignOpen {
  0% {
    transform: none;
  }

  17.5% {
    transform: none;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }

  20.625% {
    transform: translate(var(--open-x, 0px), var(--open-y, 0px)) scale(var(--open-sx, 1), var(--open-sy, 1));
  }

  24.375% {
    transform: translate(var(--open-x, 0px), var(--open-y, 0px)) scale(var(--open-sx, 1), var(--open-sy, 1));
  }

  24.438% {
    transform: none;
  }

  100% {
    transform: none;
  }
}

@keyframes evidenceTrace {
  0%,
  1.25% {
    stroke-dashoffset: 1;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.333, 0.256, 0.667, 0.513);
  }

  15% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  15.125% {
    stroke-dashoffset: 0;
    opacity: 0;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes evidenceHead {
  0% {
    stroke-dashoffset: 0.02;
    opacity: 0;
  }

  1.25% {
    stroke-dashoffset: 0.02;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.333, 0.256, 0.667, 0.513);
  }

  15% {
    stroke-dashoffset: -0.98;
    opacity: 1;
  }

  15.125% {
    stroke-dashoffset: -0.98;
    opacity: 0;
  }

  100% {
    stroke-dashoffset: -0.98;
    opacity: 0;
  }
}

@keyframes evidenceWatchLock {
  0%,
  15% {
    opacity: 0;
  }

  15.313% {
    opacity: 0.46;
  }

  16% {
    opacity: 0.46;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }

  18.375% {
    opacity: 0.26;
  }

  18.5% {
    opacity: 0.26;
  }

  22.875% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes evidenceScan {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  1.25% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }

  8.75% {
    transform: translateY(0.96px);
  }

  11.25% {
    opacity: 1;
  }

  15% {
    opacity: 0;
    transform: translateY(0.96px);
  }

  100% {
    opacity: 0;
    transform: translateY(0.96px);
  }
}

@keyframes evidenceScanLand {
  0%,
  8.75% {
    opacity: 0;
  }

  9.75% {
    opacity: 1;
  }

  11.25% {
    opacity: 1;
  }

  15% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes evidenceRestDetect {
  0% {
    opacity: 1;
  }

  1.25%,
  18.75% {
    opacity: 0;
  }

  22.5%,
  100% {
    opacity: 1;
  }
}

@keyframes evidenceRestLink {
  0% {
    opacity: 1;
  }

  1.25%,
  14.375% {
    opacity: 0;
  }

  18.125%,
  100% {
    opacity: 1;
  }
}

@keyframes evidenceRestAlign {
  0% {
    opacity: 1;
  }

  1.563%,
  24.375% {
    opacity: 0;
  }

  28.125%,
  100% {
    opacity: 1;
  }
}

@keyframes evidenceRestWatch {
  0% {
    opacity: 1;
  }

  1.25%,
  22.875% {
    opacity: 0;
  }

  26.625%,
  100% {
    opacity: 1;
  }
}

@keyframes evidenceRestScan {
  0% {
    opacity: 1;
  }

  1.25%,
  15% {
    opacity: 0;
  }

  18.75%,
  100% {
    opacity: 1;
  }
}

@keyframes evidenceLabel {
  0% {
    color: var(--evidence-label);
  }

  1.25% {
    color: var(--evidence-label-on);
  }

  13.75% {
    color: var(--evidence-label-on);
  }

  16.875% {
    color: var(--evidence-label);
  }

  100% {
    color: var(--evidence-label);
  }
}

@media (max-width: 768px) {
  .section--about .section__header {
    margin: 0 0 20px;
  }

  .section--about .section__header h2 {
    font-size: 1.6rem;
    max-width: none;
    margin: 0 0 6px;
    line-height: 1.05;
    letter-spacing: -0.01em;
  }

  .section--about .section__tagline {
    margin: 0 0 8px;
    max-width: none;
  }

  .section--about .section__lead {
    max-width: none;
    margin: 0 0 16px;
    font-size: 1rem;
  }
}

@media (max-width: 960px) {
  .hero-title {
    font-size: clamp(1.7rem, 4.8vw, 2.4rem);
    line-height: 1.12;
  }

  .hero-title__segment {
    white-space: normal;
    text-wrap: balance;
  }

  .nav__links a {
    padding: 10px 0;
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: clamp(1.55rem, 7vw, 2.05rem);
    line-height: 1.14;
  }
}

#main-content:focus,
#main-content:focus-visible {
  outline: none;
}

/* DAGR V2 - Gate 5B layer -------------------------------------------- */

/* Inner pages: one editorial system ---------------------------------- */

.page-main {
  gap: 0;
}

.subpage-hero {
  padding: clamp(96px, 16vh, 136px) 0 clamp(32px, 6vh, 52px);
  text-align: left;
}

.subpage-hero__eyebrow {
  margin: 0 0 20px;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  color: var(--text-muted);
}

.subpage-hero__title {
  margin: 0 0 20px;
  max-width: 22ch;
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
}

.subpage-hero__lead {
  margin: 0 0 14px;
  max-width: 62ch;
  font-size: clamp(1rem, 1.6vw, 1.13rem);
}

.subpage-hero__lead--note {
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.subpage-hero .container::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: clamp(28px, 5vh, 44px);
  background: rgba(9, 9, 9, 0.2);
}

.page-main .section {
  padding: clamp(30px, 4.5vw, 48px) 0;
}

.page-main .section > .container::before {
  content: '';
  display: block;
  height: 1px;
  margin-bottom: clamp(20px, 4vw, 40px);
  background: rgba(9, 9, 9, 0.14);
}

/* The principles diagram was sized for the homepage; on internal pages
   trim its reserved height so it does not open a large empty field. */
.section--services .deliverables-diagram {
  margin-top: 0;
  padding: clamp(36px, 5vw, 72px) 0;
  min-height: clamp(320px, 34vw, 430px);
}

/* The four values in page-grid cells, like the evidence legend: a figure
   ten cells wide, centred on the page's middle column line, and five rows
   tall - each card three cells by two, the top pair on its first two rows,
   the bottom pair on its last two, the emblem in the four cells between the
   pairs. application.js ([data-grid-snap]) tells the diagram how far down
   its next row line is (--grid-snap), and the figure starts a row below
   that line, so every card's corners sit on grid crossings. The diagram
   pads down to the line rather than taking a margin, which would fold into
   the heading's. Phones keep their own two-by-two, too narrow for two
   cards three cells wide. */
@media (min-width: 769px) {
  .section--services .deliverables-diagram {
    padding: calc(var(--grid-snap, 0px) + var(--grid-size)) 0 0;
    min-height: 0;
  }

  .deliverables {
    grid-template-columns: repeat(10, var(--grid-size));
    grid-template-rows: repeat(5, var(--grid-size));
    gap: 0;
    width: calc(10 * var(--grid-size));
    max-width: none;
  }

  .deliverables li {
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 0;
    padding: 8px calc(var(--grid-size) * 0.2);
    font-size: min(var(--pill-text), calc(var(--grid-size) * 0.26));
  }

  .deliverables li:nth-child(1) {
    grid-area: 1 / 1 / 3 / 4;
    place-self: stretch;
  }

  .deliverables li:nth-child(2) {
    grid-area: 1 / 8 / 3 / 11;
    place-self: stretch;
  }

  .deliverables li:nth-child(3) {
    grid-area: 4 / 1 / 6 / 4;
    place-self: stretch;
  }

  .deliverables li:nth-child(4) {
    grid-area: 4 / 8 / 6 / 11;
    place-self: stretch;
  }

  .diagram-emblem {
    top: calc(var(--grid-snap, 0px) + 3.5 * var(--grid-size));
    width: calc(4 * var(--grid-size));
    height: calc(4 * var(--grid-size));
  }
}

.page-main .section__header {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  column-gap: clamp(28px, 5vw, 72px);
  align-items: start;
  max-width: none;
  margin: 0;
  text-align: left;
}

.page-main .section__header .section__eyebrow {
  grid-column: 1;
  grid-row: 1 / span 9;
  margin: 8px 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  color: var(--text-muted);
}

.page-main .section__header h2,
.page-main .section__header .section__lead,
.page-main .section__header .section__footnote {
  grid-column: 2;
}

.page-main .section__header h2 {
  margin: 0;
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  line-height: 1.06;
}

.page-main .section__headline-lock {
  white-space: normal;
}

.page-main .section__header .section__lead {
  margin: 16px 0 0;
  max-width: 62ch;
  font-size: 1.06rem;
}

.page-main .section__header .section__footnote {
  margin: 18px 0 0;
  max-width: 62ch;
  text-transform: none;
  line-height: 1.6;
}

.page-main .content-grid {
  margin-top: clamp(24px, 4vw, 40px);
}

@media (max-width: 700px) {
  .page-main .section__header {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-main .section__header .section__eyebrow {
    grid-row: auto;
    margin: 0 0 14px;
  }

  .page-main .section__header h2,
  .page-main .section__header .section__lead,
  .page-main .section__header .section__footnote {
    grid-column: 1;
  }

  .subpage-hero {
    padding-top: calc(84px + env(safe-area-inset-top, 0px));
  }
}

/* Touch-target floor for remaining controls -------------------------- */

.nav__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.section__footnote a,
.content-card__body a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
}

.subpage-hero + .section > .container::before {
  content: none;
}

/* ==== Mobile responsive closure ====================================== */
/* Phone-first reflow pass. Desktop (>=768px) composition is unchanged. */

/* Strict heading-box criterion: a heading's layout box must encompass
   its content (scrollWidth <= clientWidth) at every viewport. The
   operational-problem h2 holds an unbreakable word slightly wider than
   its grid column at mid widths; fit-content lets the box grow into the
   adjacent column gap exactly where the text already rendered. */
.section--about .section__header h2 {
  width: fit-content;
  max-width: none;
}

/* The toggle is displayed as inline-flex, which laid its three bars out
   in a row - reading as one long minus. Stack them into a real
   three-line menu glyph. */
@media (max-width: 960px) {
  .nav__toggle {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

/* Headings: release the desktop line-locks below 640px so headings wrap
   normally and can never clip; balance wrapping where supported. */
@media (max-width: 640px) {
  .section__headline-lock {
    display: inline;
    white-space: normal;
  }

  h1,
  h2,
  h3 {
    overflow-wrap: break-word;
  }

  .section__header h2,
  .subpage-hero__title {
    text-wrap: balance;
    max-width: calc(100vw - 32px);
  }

  /* Card prose readability on phones (desktop typography untouched) */
  .content-card__body {
    font-size: 0.95rem;
    line-height: 1.62;
  }

  /* Trim reserved heights on phones */
  .section--services .deliverables-diagram {
    padding: 28px 0;
    min-height: 280px;
  }
}

/* Operational problem: copy above a full-width schematic on phones */
@media (max-width: 600px) {
  .about-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "text"
      "media";
  }

  .evidence-flow {
    max-width: none;
    justify-self: start;
  }

  /* Use-case cards: Challenge / How DAGR Helps / Output stack vertically */
}

/* Narrow-tablet band: deliberate two-column grids. Incomplete last rows
   are centered at equal width by the RC2 composition block at the end of
   this file - last cards are never stretched to fill a row. */
@media (min-width: 481px) and (max-width: 767px) {
  .source-domains {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phones: single-column reading flow; compact label grids stay 2-up */
@media (max-width: 480px) {
  .content-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .source-domains {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .source-domains__item {
    padding: 14px 12px;
    font-size: 0.72rem;
  }
}

/* Hero CTAs: stacked, nearly full width, tight gap */
@media (max-width: 430px) {
  .hero-actions {
    width: 100%;
    gap: 10px;
  }

  .hero-actions .btn {
    min-width: 0;
    width: 100%;
  }
}

/* About affiliations: two columns on phones, one under 420px */

/* Footer on phones: a little less air around the one-line record. */
@media (max-width: 700px) {
  .site-footer {
    padding: 36px 0 44px;
  }
}

/* Page rhythm refinement --------------------------------------------- */

/* Platform keeps its full information density, but shorter section and
   grid intervals reduce the repeated-card cadence. */
.page-platform .page-main .content-grid,
.page-platform .page-main .source-domains {
  margin-top: clamp(20px, 3vw, 32px);
}

@media (max-width: 700px) {
  .page-platform .content-grid,
  .page-platform .source-domains {
    gap: 14px;
  }

  .page-platform .content-card {
    padding: 20px 18px;
  }

  .page-platform .section__footnote {
    margin-top: 18px;
  }

  html.page-home .section--about {
    padding-top: 20px;
    padding-bottom: 38px;
  }

  html.page-home .section--credentials {
    padding-block: 36px;
  }

  html.page-home .section--credentials .hero-affiliations {
    margin-top: 28px;
  }

  html.page-home .section--cta {
    padding-block: 32px;
  }

  html.page-home .section--cta .cta {
    padding: 28px 0 36px;
  }
}

/* ==== Hero signal field ============================================== */
/* One canvas drawn on the page grid (source channels, registered cells)
   sits above the hero veil (.hero::before, z 5) and below the copy (z 7).
   Cursor cell inspection and the headline rails are fine-pointer only
   (JS-gated). */
.hero-signal {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-inner {
  z-index: 7;
}

.hero-title__segment {
  transition:
    color 220ms ease,
    text-shadow 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hero-title__segment[data-trace-active] {
  color: var(--accent);
}

/* Above the hovered line: out of register up and to the left. */
.hero-title:has(.hero-title__segment--mid[data-trace-active], .hero-title__segment--deep[data-trace-active]) .hero-title__segment--soft,
.hero-title:has(.hero-title__segment--deep[data-trace-active]) .hero-title__segment--mid {
  color: var(--hero-title-off);
  text-shadow: -3px -2px 0 var(--hero-title-copy);
}

/* Below it: down and to the right. */
.hero-title:has(.hero-title__segment--soft[data-trace-active], .hero-title__segment--mid[data-trace-active]) .hero-title__segment--deep,
.hero-title:has(.hero-title__segment--soft[data-trace-active]) .hero-title__segment--mid {
  color: var(--hero-title-off);
  text-shadow: 3px 2px 0 var(--hero-title-copy);
}

@media (prefers-reduced-motion: reduce) {
  .hero-title__segment {
    transition: none;
  }
}

/* ==== Case files: the SOCOM demo's first three cases ================== */
/* Home shows each case as a small card with its lead signal; /use-cases
   shows the case file: the question, the headline figures, the map
   walk-through, the signals read against their own baseline, the
   assessment, and the record behind it. Maps and signals sit on the dark
   console, the demo's DAGR output surface. Lane colours are the demo's,
   one set for the page ground (--l-*) and one for the console (--c-*). */

:root {
  --l-official: #2f74b8;
  --l-physical: #9c6414;
  --l-narrative: #b24c7d;
  --l-market: #6b7178;
  --con: #161618;
  --con-2: #1d1d20;
  --con-ink: #f4f3f0;
  --con-ink-2: rgba(227, 226, 222, 0.76);
  --con-ink-3: rgba(227, 226, 222, 0.55);
  --con-rule: rgba(230, 235, 245, 0.11);
  --con-rule-2: rgba(230, 235, 245, 0.24);
  --c-official: #4f93d6;
  --c-physical: #c0822a;
  --c-narrative: #cf6d98;
  --c-market: #b9c0c6;
  --sea: #0f1012;
  --land: #232327;
  --coast: rgba(230, 235, 245, 0.34);
  --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --case-paper: #fbfbfa;
  --case-rule: rgba(9, 9, 9, 0.12);
  --case-rule-2: rgba(9, 9, 9, 0.24);
  --case-ink-3: #676765;
}

.mono {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c, currentColor);
  flex: none;
}

.dot--ring {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--c, currentColor);
}

/* -- Home: three small cards ------------------------------------------ */

.case-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 18px;
  background: var(--case-paper);
  border: 1px solid var(--case-rule);
}

.case-card__beat {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 10px;
  margin: 0;
  color: var(--case-ink-3);
}

.case-card__beat > * {
  white-space: nowrap;
}

.case-card__beat b {
  color: var(--text-primary);
  font-weight: 500;
}

.case-card__title {
  margin: 0;
  font-size: 1.24rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-transform: none;
  text-wrap: balance;
}

.case-card__take {
  flex: 1;
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.case-card__signal {
  padding-top: 12px;
  border-top: 1px solid var(--case-rule);
}

.case-card__signal svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.case-card__signal p {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 8px 0 0;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--case-ink-3);
}

.case-card__signal b {
  color: var(--text-primary);
  font-weight: 500;
}

.case-card__signal small {
  margin-left: 6px;
  font-size: inherit;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--case-ink-3);
}

.case-card__signal .s-band {
  fill: rgba(9, 9, 9, 0.07);
}

.case-card__signal .s-line {
  stroke: var(--c);
}

.case-card__signal .s-grid {
  stroke: rgba(9, 9, 9, 0.08);
}

.case-card__signal .s-ev {
  stroke: rgba(9, 9, 9, 0.38);
}

.case-card__signal .s-gap {
  fill: rgba(9, 9, 9, 0.03);
}

.case-card__signal .s-dot {
  fill: var(--c);
  stroke: var(--case-paper);
}

.case-card__signal .s-flag {
  fill: var(--text-primary);
}

.case-card__signal .s-flag--o {
  fill: none;
  stroke: rgba(9, 9, 9, 0.6);
}

.case-card__link {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 980px) {
  .case-cards {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    margin-inline: auto;
  }
}

/* -- The case file ---------------------------------------------------- */

.case-files .container {
  display: grid;
}

.case-file {
  /* Behind the case tabs, the script keeps them in view above the case. */
  scroll-margin-top: var(--case-landing, calc(var(--header-h) + 24px));
}

/* The page title is kept for screen readers and search only. */
.case-files__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The use-cases page reads in the grid rhythm: the case tabs start two
   grid rows below the site header, the open case's map hangs from them, and
   the closing call starts two rows below, with no rules between them.
   Without script the tabs stay hidden and the cases stack two rows below
   the header and a row apart. application.js sets each block's top padding
   (--grid-rhythm); without script, the rows each block asks for. */
.page-main--grid {
  gap: 0;
}

.page-main--grid [data-grid-rhythm] {
  margin-top: 0;
  padding-top: var(--grid-rhythm, calc(2 * var(--grid-size)));
}

.page-main--grid [data-grid-rhythm][data-grid-gap="1"] {
  padding-top: var(--grid-rhythm, var(--grid-size));
}

.page-main--grid .subpage-hero,
.page-main--grid .case-files {
  padding-bottom: 0;
}

.page-main--grid .case-files {
  padding-top: 0;
}

.page-main--grid .subpage-hero__title {
  margin-bottom: 0;
}

.page-main--grid .subpage-hero__lead {
  margin-top: 18px;
}

/* Each block ends at its own content; the next one's padding sets the gap. */
.page-main--grid > section:not(:last-child) {
  padding-bottom: 0;
}

.page-main--grid .subpage-hero .container::after,
.page-main--grid .section > .container::before {
  content: none;
}

/* Case tabs: the page's three words set on the open case's map, one cell
   each, square and flat like the site's buttons, as wide as the map. The
   open tab is a dark block in the colour of the map's bar that runs into
   it; switching, it glides under the words to the new tab, and the words
   invert where it passes. The row covers the map's top rule. */
.case-tabs-row[hidden],
.case-file[hidden] {
  display: none;
}

.case-tabs-row {
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
}

.case-tabs-row[hidden] ~ .case-file {
  margin-top: var(--grid-size);
}

.case-tabs-row[hidden] + .case-file {
  margin-top: calc(2 * var(--grid-size));
}

.case-tabs {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--case-rule-2);
  border-bottom: 0;
  background: var(--case-paper);
}

.case-tabs__glider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: calc(100% / 3);
  background: var(--con-2);
  transform: translateX(calc(var(--case-tab, 0) * 100%));
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .case-tabs[data-glide] .case-tabs__glider {
    transition: transform 0.6s cubic-bezier(0.7, 0, 0.2, 1);
  }
}

.case-tabs__tab {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  min-height: calc(var(--grid-size) - 1px);
  padding: 4px 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.case-tabs__tab + .case-tabs__tab {
  border-left: 1px solid var(--case-rule-2);
}

.case-tabs__tab:hover:not([aria-selected="true"]) {
  background: #ffffff;
}

.case-tabs__tab[aria-selected="true"] {
  cursor: default;
}

.case-tabs__name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

/* The words take their tone from what lies under them: dark on the paper,
   light on the dark tab, split while it passes. */
.case-tabs__n,
.case-tabs__beat,
.case-tabs__title {
  color: #ffffff;
  mix-blend-mode: difference;
}

.case-tabs__n {
  color: #c0c0bf;
}

.case-tabs__beat {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The case title sits in its tab where three fit side by side, under the
   tab's step, and the title in the map's bar gives way to it. Narrower, the
   tab keeps to its step, one grid row tall, and the title stays in the
   bar. */
.case-tabs__title {
  display: none;
}

@media (min-width: 961px) {
  .case-tabs__tab {
    justify-content: flex-start;
    gap: 8px;
    padding: 14px 20px 16px;
  }

  .case-tabs__title {
    display: block;
    font-size: clamp(1rem, 0.55rem + 0.75vw, 1.1rem);
    font-weight: 500;
    line-height: 1.3;
    text-wrap: balance;
  }

  [data-case-tabs-ready] .case-file__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Switching cases, the dark console stays put and changes what it shows,
   like a screen: the open case's bar, map and steps fade and blur away
   toward the old tab's side, the console eases to the new case's height,
   and the new case comes in from the other side, its map wiping in from
   that edge out of a blur while its bar and steps rise into place one
   after another. Reduced motion switches at once. */
.page-main--grid .case-files {
  overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
  .case-file[data-case-leave="next"] { --case-shift: -14px; }
  .case-file[data-case-leave="prev"] { --case-shift: 14px; }
  .case-file[data-case-enter="next"] { --case-shift: 18px; }
  .case-file[data-case-enter="prev"] { --case-shift: -18px; }

  .case-file[data-case-leave] .console__bar > *,
  .case-file[data-case-leave] .strait__grid {
    animation: case-out 0.17s cubic-bezier(0.5, 0, 0.75, 0) forwards;
  }

  .walkfig[data-morph] {
    transition: height 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  }

  .case-file[data-case-enter] .console__bar > * {
    animation: case-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(0.04s + var(--rise, 0) * 0.06s);
  }

  .case-file[data-case-enter="next"] .walkfig .map {
    animation: case-map-next 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.04s both;
  }

  .case-file[data-case-enter="prev"] .walkfig .map {
    animation: case-map-prev 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.04s both;
  }

  .case-file[data-case-enter] .walk > li {
    animation: case-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(0.12s + var(--rise, 0) * 0.06s);
  }

  .case-file[data-case-enter] .console__bar > :nth-child(2),
  .case-file[data-case-enter] .walk > li:nth-child(2) { --rise: 1; }
  .case-file[data-case-enter] .console__bar > :nth-child(3),
  .case-file[data-case-enter] .walk > li:nth-child(3) { --rise: 2; }
  .case-file[data-case-enter] .walk > li:nth-child(4) { --rise: 3; }
  .case-file[data-case-enter] .walk > li:nth-child(n + 5) { --rise: 4; }
}

@keyframes case-out {
  to {
    opacity: 0;
    transform: translateX(var(--case-shift, 0px));
    filter: blur(4px);
  }
}

@keyframes case-in {
  from {
    opacity: 0;
    transform: translateX(var(--case-shift, 0px));
  }
}

@keyframes case-map-next {
  from {
    clip-path: inset(0 0 0 100%);
    filter: blur(10px);
  }

  to {
    clip-path: inset(0);
    filter: blur(0);
  }
}

@keyframes case-map-prev {
  from {
    clip-path: inset(0 100% 0 0);
    filter: blur(10px);
  }

  to {
    clip-path: inset(0);
    filter: blur(0);
  }
}

@keyframes case-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* On a phone the tab keeps its number over its word, in type small
   enough for CORRELATE to fit a third of a 320px screen. */
@media (max-width: 640px) {
  .case-tabs__tab {
    padding: 4px 10px;
  }

  .case-tabs__name {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .case-tabs__n {
    font-size: 0.62rem;
  }

  .case-tabs__beat {
    font-size: clamp(0.72rem, 3.4vw, 0.9rem);
    letter-spacing: 0.04em;
  }
}

/* The case title opens its map's bar wherever the tabs do not carry it:
   on narrower screens, and without script. */
.case-file__title {
  flex: 1 0 100%;
  margin: 0 0 4px;
  font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--con-ink);
  text-wrap: balance;
}

/* -- The console: maps and signals ------------------------------------- */

.console {
  position: relative;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, 0.04), transparent 60%),
    linear-gradient(160deg, var(--con-2), var(--con) 55%);
  color: var(--con-ink);
  border: 1px solid var(--con-rule);
  box-shadow: 0 40px 80px -50px rgba(8, 8, 10, 0.75);
}

.console :focus-visible {
  outline-color: var(--con-ink);
}

.console__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 16px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--con-rule);
  color: var(--con-ink-3);
}

.live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--con-ink-2);
}

.live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-market);
  box-shadow: 0 0 0 4px rgba(185, 192, 198, 0.1), 0 0 14px rgba(185, 192, 198, 0.35);
}

/* A case's map bar is solid, for its tab to run into. */
.walkfig > .console__bar {
  background: var(--con-2);
}

/* A case's map opens on the case's point, in plain type, with its place
   and time beside it or, when the bar runs out of room, under it. */
.console__theme {
  flex: 1 1 26em;
  align-items: flex-start;
  min-width: 0;
  font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--con-ink);
  text-wrap: pretty;
}

.console__theme::before {
  flex: none;
  margin-top: calc((1.4em - 7px) / 2);
}

.strait__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
}

.walkfig .map {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 540;
  overflow: hidden;
  background: var(--sea);
  border-right: 1px solid var(--con-rule);
}

.walkfig .map > svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.m-sea { fill: var(--sea); }
.m-grid { fill: none; stroke: rgba(230, 235, 245, 0.055); stroke-width: 1; }
.m-land { fill: var(--land); }
.m-coast { fill: none; stroke: var(--coast); stroke-width: 1.2; stroke-linejoin: round; }
.m-border { fill: none; stroke: rgba(230, 235, 245, 0.22); stroke-width: 1; stroke-dasharray: 2 4; }
.m-isl { fill: #303036; }
.m-perim { fill: #3b3b41; stroke: var(--c-physical); stroke-width: 1.4; }
.m-band { fill: none; stroke: rgba(230, 235, 245, 0.05); stroke-width: 26; stroke-linecap: round; transition: stroke 0.3s; }
.m-lane { fill: none; stroke: rgba(230, 235, 245, 0.38); stroke-width: 1.2; stroke-dasharray: 6 6; transition: stroke 0.3s, stroke-width 0.3s; }
.m-gate { fill: rgba(185, 192, 198, 0.07); stroke: rgba(185, 192, 198, 0.4); stroke-width: 1; stroke-dasharray: 3 3; transition: fill 0.3s, stroke 0.3s; }
.m-ships circle { fill: var(--con-ink); opacity: 0.8; transition: fill 0.3s; }
.m-halo { fill: none; stroke: var(--c-physical); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.m-ink { fill: none; stroke: rgba(230, 235, 245, 0.55); stroke-width: 1.2; }
.m-ink-fill { fill: rgba(230, 235, 245, 0.55); }
.m-land--dim { fill: #1c1c20; }
.m-land--ru { fill: #252529; }
.m-land--by { fill: #232327; }
.m-land--ua,
.m-land--nk { fill: #31323a; }
.m-land--sk { fill: #27272c; }
.m-edge { stroke: rgba(230, 235, 245, 0.2); stroke-width: 0.8; stroke-linejoin: round; }
.m-edge--hot { stroke: rgba(230, 235, 245, 0.52); stroke-width: 1.1; }
.m-occ { fill: url(#hatch-occ); opacity: 0.7; pointer-events: none; transition: opacity 0.3s; }
.m-hatch { stroke: rgba(230, 235, 245, 0.28); stroke-width: 1.2; }
.m-dim { fill: none; stroke: rgba(230, 235, 245, 0.5); stroke-width: 1; stroke-dasharray: 2 3; }
.m-arc { fill: none; stroke: rgba(192, 130, 42, 0.38); stroke-width: 1.4; stroke-dasharray: 3 5; stroke-linecap: round; transition: stroke 0.3s; }
.m-drones { opacity: 0.3; transition: opacity 0.3s; }
.m-drones circle { fill: var(--c-physical); }
.m-hits,
.m-downed { fill: none; stroke: var(--c-official); stroke-width: 1.6; stroke-linecap: round; opacity: 0.45; transition: opacity 0.3s; }
.m-city { fill: var(--con-ink); }
.m-town { fill: rgba(227, 226, 222, 0.72); transition: fill 0.3s; }
.m-pulse { fill: none; stroke: var(--c-official); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.m-ring { fill: none; stroke: var(--c-physical); stroke-width: 1.4; stroke-dasharray: 6 5; opacity: 0.5; transition: opacity 0.3s; }
.m-ring--far { stroke-dasharray: 2 5; }
.m-ringfill { fill: rgba(192, 130, 42, 0.035); }
.m-lead { fill: none; stroke: rgba(230, 235, 245, 0.35); stroke-width: 1; stroke-dasharray: 2 3; transition: stroke 0.3s; }
.m-radius { fill: none; stroke: rgba(230, 235, 245, 0.35); stroke-width: 1; }
.m-tick { fill: var(--c-physical); }

/* Each step of the walk-through lights its part of the map. */
.strait[data-step="2"] .m-lane { stroke: var(--c-physical); stroke-width: 1.7; }
.strait[data-step="2"] .m-band { stroke: rgba(192, 130, 42, 0.13); }
.strait[data-step="2"] .m-ships circle { fill: var(--c-physical); opacity: 1; }
.strait[data-step="3"] .m-gate { fill: rgba(185, 192, 198, 0.26); stroke: var(--c-market); stroke-dasharray: none; }
.strait[data-step="1"] .m-halo { opacity: 1; }
#ukr-map[data-step="1"] .m-arc { stroke: var(--c-physical); }
#ukr-map[data-step="1"] .m-drones { opacity: 1; }
#ukr-map[data-step="2"] .m-hits { opacity: 1; }
#ukr-map[data-step="2"] .m-pulse,
#kor-map[data-step="3"] .m-pulse { opacity: 1; }
#ukr-map[data-step="3"] .m-lead { stroke: var(--c-physical); }
#ukr-map[data-step="3"] .inset { border-color: var(--c-physical); opacity: 1; }
#ukr-map[data-step="3"] .i-halo { opacity: 1; }
#ukr-map[data-step="4"] .m-downed { opacity: 1; }
#ukr-map[data-step="4"] .m-occ { opacity: 1; }
#kor-map .m-pulse { stroke: var(--c-physical); }
#kor-map[data-step="3"] .m-ring { opacity: 1; }
#kor-map[data-step="1"] .m-town--seoul,
#kor-map[data-step="2"] .m-town--pyong { fill: var(--c-official); }

.walkfig .pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  transform: translate(-5px, -50%);
  background: none;
  border: 0;
  color: var(--con-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0.62;
  transition: opacity 0.25s;
}

.walkfig .pin i {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 3px rgba(15, 16, 18, 0.9);
}

.walkfig .pin i.ring {
  background: var(--sea);
  box-shadow: inset 0 0 0 2px var(--c), 0 0 0 3px rgba(15, 16, 18, 0.9);
}

.walkfig .pin span {
  display: grid;
  gap: 1px;
  padding: 4px 8px;
  background: rgba(12, 12, 14, 0.8);
  border: 1px solid var(--con-rule);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}

.walkfig .pin small {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--con-ink-3);
}

.walkfig .pin--left {
  flex-direction: row-reverse;
  transform: translate(calc(-100% + 5px), -50%);
}

.walkfig .pin:hover,
.walkfig[data-step="1"] .pin[data-go="1"],
.walkfig[data-step="2"] .pin[data-go="2"],
.walkfig[data-step="3"] .pin[data-go="3"],
.walkfig[data-step="4"] .pin[data-go="4"] {
  opacity: 1;
}

.walkfig[data-step="1"] .pin[data-go="1"] span,
.walkfig[data-step="2"] .pin[data-go="2"] span,
.walkfig[data-step="3"] .pin[data-go="3"] span,
.walkfig[data-step="4"] .pin[data-go="4"] span {
  border-color: var(--con-rule-2);
}

.strait .pin--n {
  visibility: hidden;
}

.strait[data-step="4"] .pin--n {
  visibility: visible;
}

.walkfig .geo {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  font-family: var(--f-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(227, 226, 222, 0.4);
  white-space: nowrap;
  pointer-events: none;
}

.walkfig .geo--sea { color: rgba(143, 170, 189, 0.62); }
.walkfig .geo--strait { color: rgba(227, 226, 222, 0.7); letter-spacing: 0.2em; }
.walkfig .geo--tick { font-size: 0.56rem; letter-spacing: 0.08em; color: rgba(227, 226, 222, 0.34); }
.walkfig .geo--r { transform: translate(-100%, -50%); }
.walkfig .geo--l { transform: translate(0, -50%); }
.walkfig .geo--tag {
  padding: 2px 7px;
  background: rgba(12, 12, 14, 0.82);
  border: 1px solid var(--con-rule);
  color: var(--con-ink-2);
  letter-spacing: 0.1em;
}
.walkfig .geo--city {
  transform: translate(8px, -50%);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: none;
  color: rgba(227, 226, 222, 0.55);
}

.walkfig .inset {
  position: absolute;
  left: 1.6%;
  top: 1.8%;
  width: 34%;
  max-width: 220px;
  margin: 0;
  padding: 8px 10px 6px;
  background: rgba(12, 12, 14, 0.88);
  border: 1px solid var(--con-rule-2);
  color: var(--con-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0.82;
  transition: border-color 0.3s, opacity 0.3s;
}

.walkfig .inset:hover {
  opacity: 1;
}

.walkfig .inset svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 4px;
}

.inset__h {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--con-ink-2);
  font-size: 0.56rem;
}

.i-ring { fill: rgba(230, 235, 245, 0.03); stroke: rgba(230, 235, 245, 0.42); stroke-width: 1.2; stroke-dasharray: 4 3; }
.i-center { fill: var(--con-ink); }
.i-ref { fill: var(--c-physical); }
.i-halo { fill: none; stroke: var(--c-physical); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.i-scale { fill: none; stroke: rgba(230, 235, 245, 0.6); stroke-width: 1.2; }
.i-txt { fill: var(--con-ink); font-family: inherit; font-size: 11px; font-weight: 600; }
.i-txt--dim { fill: rgba(227, 226, 222, 0.6); font-family: var(--f-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.04em; }

.walk {
  display: grid;
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.walk li + li {
  border-top: 1px solid var(--con-rule);
}

.walk__btn {
  position: relative;
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 18px 22px 18px 24px;
  background: none;
  border: 0;
  color: var(--con-ink-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
}

.walk__btn:hover {
  background: rgba(255, 255, 255, 0.03);
}

.walk__btn[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.06);
  color: var(--con-ink);
}

.walk__btn[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 2px;
  background: var(--con-ink);
}

.walk__n {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--con-ink-3);
}

.walk__t {
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--con-ink);
}

.walk__d {
  font-size: 0.92rem;
  line-height: 1.45;
}

.walk__src {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--con-ink-3);
  font-size: 0.62rem;
}

.s-band { fill: rgba(230, 235, 245, 0.1); }
.s-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.s-grid { stroke: rgba(230, 235, 245, 0.07); stroke-width: 1; }
.s-ev { stroke: rgba(230, 235, 245, 0.34); stroke-width: 1; stroke-dasharray: 2 3; }
.s-gap { fill: rgba(230, 235, 245, 0.05); }
.s-dot { fill: var(--c); stroke: #18181b; stroke-width: 2; }
.s-flag { fill: #f4f3f0; }
.s-flag--o { fill: none; stroke: rgba(227, 226, 222, 0.76); stroke-width: 1.2; }

@media (max-width: 920px) {
  .strait__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .walkfig .map {
    border-right: 0;
    border-bottom: 1px solid var(--con-rule);
  }
}

@media (max-width: 620px) {
  .walkfig .geo--minor,
  .walkfig .geo--tick,
  .walkfig .pin small {
    display: none;
  }

  .walkfig .pin span {
    padding: 3px 6px;
    font-size: 0.72rem;
  }

  .walkfig .geo {
    font-size: 0.56rem;
    letter-spacing: 0.18em;
  }

  .walkfig .inset {
    width: 46%;
    padding: 6px 7px 4px;
  }

  .inset__h {
    font-size: 0.5rem;
  }

  .walkfig .geo--tag {
    padding: 1px 5px;
    font-size: 0.52rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .live::before {
    animation: caseLive 4.2s ease-in-out infinite;
  }

  .strait[data-step="1"] .m-halo,
  #ukr-map[data-step="2"] .m-pulse,
  #kor-map[data-step="3"] .m-pulse {
    animation: caseHalo 2.8s ease-out infinite;
  }

  .strait[data-step="1"] .m-halo--b,
  #ukr-map[data-step="2"] .m-pulse--b,
  #kor-map[data-step="3"] .m-pulse--b {
    animation-delay: 1.4s;
  }

  #ukr-map[data-step="3"] .i-halo {
    animation: caseHalo 2.4s ease-out infinite;
  }
}

@keyframes caseLive {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

@keyframes caseHalo {
  0% {
    transform: scale(0.55);
    opacity: 0.95;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

/* ==== RC2 visual polish: row composition + card reveal ============== */
/* Contract: center incomplete CARD ROWS (equal-width last rows, never a
   stretched last card); one shared child reveal driven ONLY by the
   existing parent [data-animate].is-visible IntersectionObserver;
   restrained desktop-only hover. Excluded by scoping: .deliverables/beam
   geometry, .evidence-flow, hero. */

/* -- Shared child reveal. Parents already carry [data-animate] and gain
      .is-visible once from the existing observer; children fade/rise
      once with a short monotonic stagger (cap 300ms). animation-name
      stays none - no keyframes, no loops. Border/box-shadow transition
      with zero delay doubles as the restrained hover channel.
      PROGRESSIVE ENHANCEMENT: the hidden state exists only under
      html.card-motion-ready, which setupRevealAnimations() adds solely
      when it is actually driving reveals - no JS or no
      IntersectionObserver leaves every card fully visible. */

.card-motion-ready .content-grid[data-animate] > .content-card,
.card-motion-ready .source-domains[data-animate] > .source-domains__item,
.card-motion-ready .case-cards[data-animate] > .case-card {
  opacity: 0;
  transform: translateY(9px);
  animation-name: none;
  transition:
    opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms ease,
    box-shadow 200ms ease;
  transition-delay: var(--card-stagger, 0ms), var(--card-stagger, 0ms), 0ms, 0ms;
}

.card-motion-ready .content-grid[data-animate].is-visible > .content-card,
.card-motion-ready .source-domains[data-animate].is-visible > .source-domains__item,
.card-motion-ready .case-cards[data-animate].is-visible > .case-card {
  opacity: 1;
  transform: translateY(0);
}

.card-motion-ready .content-grid[data-animate] > :nth-child(2),
.card-motion-ready .source-domains[data-animate] > :nth-child(2),
.card-motion-ready .case-cards[data-animate] > :nth-child(2) {
  --card-stagger: 50ms;
}

.card-motion-ready .content-grid[data-animate] > :nth-child(3),
.card-motion-ready .source-domains[data-animate] > :nth-child(3),
.card-motion-ready .case-cards[data-animate] > :nth-child(3) {
  --card-stagger: 100ms;
}

.card-motion-ready .content-grid[data-animate] > :nth-child(4),
.card-motion-ready .source-domains[data-animate] > :nth-child(4),
.card-motion-ready .case-cards[data-animate] > :nth-child(4) {
  --card-stagger: 150ms;
}

.card-motion-ready .content-grid[data-animate] > :nth-child(5),
.card-motion-ready .source-domains[data-animate] > :nth-child(5),
.card-motion-ready .case-cards[data-animate] > :nth-child(5) {
  --card-stagger: 200ms;
}

.card-motion-ready .content-grid[data-animate] > :nth-child(6),
.card-motion-ready .source-domains[data-animate] > :nth-child(6),
.card-motion-ready .case-cards[data-animate] > :nth-child(6) {
  --card-stagger: 250ms;
}

.card-motion-ready .content-grid[data-animate] > :nth-child(n + 7),
.card-motion-ready .source-domains[data-animate] > :nth-child(n + 7),
.card-motion-ready .case-cards[data-animate] > :nth-child(n + 7) {
  --card-stagger: 300ms;
}

/* -- Restrained hover: fine-pointer devices only. Border/shadow ink
      only - no transform, so touch hover-transform is absent by
      construction. Use-case cards stay noninteractive; source-domain
      labels and affiliations get border emphasis only. */
@media (hover: hover) and (pointer: fine) {
  .content-grid[data-animate] > .content-card:hover {
    border-color: rgba(9, 9, 9, 0.34);
    box-shadow: 0 10px 26px rgba(9, 9, 9, 0.08);
  }

  .source-domains[data-animate] > .source-domains__item:hover {
    border-color: rgba(9, 9, 9, 0.34);
  }
}

/* -- Reduced motion: cards render settled, no transitions, no delay.
      (Second safety belt - the script also never adds the enhancement
      class under reduced motion; same-prefix selectors later in the
      cascade guarantee the override either way.) */
@media (prefers-reduced-motion: reduce) {
  .card-motion-ready .content-grid[data-animate] > .content-card,
  .card-motion-ready .source-domains[data-animate] > .source-domains__item,
  .card-motion-ready .case-cards[data-animate] > .case-card {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0ms;
  }
}