/* =========================================================
   Priebe Bridge / Schematic, Site Styles
   Stack: plain HTML + CSS + JS. No build step.
   ========================================================= */

/* ---------- 1. Fonts ------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ---------- 2. Design Tokens ----------------------------- */
:root {
  /* Primary palette */
  --ink: #0A0E14;
  --ink-elevated: #181C22;
  --drafting-paper: #F4F4EE;
  --drafting-paper-alt: #EDEDE5;
  --surface: #FFFFFF;
  --signal-amber: #F5A524;
  --signal-amber-hover: #E29314;

  /* Structural */
  --edge: #C9CDD3;
  --hairline-dark: rgba(201, 205, 211, 0.18);
  --hairline-dark-soft: rgba(201, 205, 211, 0.10);
  --rule-blue: #A8B5C7;
  --muted: #5C6470;
  --body-ink: #2D343D;

  /* Functional */
  --won-green: #22C55E;
  --leak-red: #EF4444;

  /* Tonal text on dark */
  --offwhite: #F4F4EE;
  --body-on-dark: #A8B5C7;
  --muted-on-dark: #5C6470;

  /* Grid + glow */
  --gridline-dark: rgba(168, 181, 199, 0.05);
  --gridline-light: rgba(15, 19, 24, 0.04);
  --amber-glow: rgba(245, 165, 36, 0.15);

  /* Type families */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;

  /* Layout */
  --max-width: 1280px;
  --gutter: 32px;
  --gutter-mobile: 20px;
  --section-pad: 112px;
  --section-pad-mobile: 64px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 260ms;
}

/* ---------- 3. Reset + base ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body-ink);
  /* Ink so the transparent header reads against a dark page until the
     user scrolls onto a paper surface. Every section paints itself. */
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--ink);
  color: var(--offwhite);
  padding: 12px 20px;
  z-index: 1000;
}
.skip-link:focus { top: 0; }

/* ---------- 4. Layout primitives ------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: var(--section-pad) 0; position: relative; }
.section--ink { background: var(--ink); color: var(--offwhite); }
.section--paper { background: var(--drafting-paper); color: var(--body-ink); }
.section--paper-alt { background: var(--drafting-paper-alt); color: var(--body-ink); }
/* Gridline backdrop (About > Core Values). The grid sits behind the container;
   opaque cards mask it, so the lines only show in the gaps and behind the
   heading. Adds schematic texture without touching the cards themselves. */
.section--gridlines::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(10, 14, 20, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 14, 20, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  z-index: 0;
}
.section--gridlines > .container { position: relative; z-index: 1; }

/* ---------- 5. Typography utilities ---------------------- */
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 7vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0 0 24px;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  margin: 0 0 18px;
}

.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}

.body-large {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal-amber);
  margin: 0 0 20px;
}
.eyebrow::before { content: '//'; color: var(--signal-amber); }

.caption {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.wedge { color: var(--signal-amber); font-style: normal; }

.section-head { max-width: 880px; margin-bottom: 56px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center p { margin-left: auto; margin-right: auto; }
.section-head p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--body-ink);
  max-width: 640px;
  /* Vertical-only reset so the --center modifier's horizontal auto margins still win */
  margin-top: 0;
  margin-bottom: 0;
}
.section--ink .section-head h2,
.section--ink .section-head { color: var(--offwhite); }
.section--ink .section-head p { color: var(--body-on-dark); }

/* ---------- 6. Buttons ----------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 0;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* Primary on Ink: amber fill, ink type */
.section--ink .btn-primary,
.btn-primary--on-ink {
  background: var(--signal-amber);
  color: var(--ink);
  border-color: var(--signal-amber);
}
.section--ink .btn-primary:hover,
.btn-primary--on-ink:hover { background: var(--signal-amber-hover); border-color: var(--signal-amber-hover); }

/* Primary on Paper: ink fill */
.btn-primary {
  background: var(--ink);
  color: var(--offwhite);
  border-color: var(--ink);
}
.btn-primary:hover { background: #000; border-color: #000; }

/* Secondary */
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-secondary:hover { background: var(--ink); color: var(--offwhite); }
/* On any dark surface: hero, final-cta, page-hero, ink sections */
.section--ink .btn-secondary,
.hero .btn-secondary,
.final-cta .btn-secondary,
.page-hero .btn-secondary {
  color: var(--offwhite);
  border-color: var(--offwhite);
}
.section--ink .btn-secondary:hover,
.hero .btn-secondary:hover,
.final-cta .btn-secondary:hover,
.page-hero .btn-secondary:hover { background: var(--offwhite); color: var(--ink); }

/* Link button */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--signal-amber);
  border-bottom: 1px solid var(--signal-amber);
  padding-bottom: 4px;
  transition: gap var(--dur-fast) var(--ease-out);
}
.btn-link:hover { gap: 10px; }

/* ---------- 7. Site header ------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(10, 14, 20, 0.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--hairline-dark);
}
.site-header.is-on-paper {
  background: rgba(244, 244, 238, 0.85);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: transparent;
}
.site-header.is-on-paper.is-scrolled { border-bottom-color: var(--edge); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--gutter);
  max-width: var(--max-width);
  margin: 0 auto;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 36px; height: 36px; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text .priebe {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--offwhite);
}
.brand-text .bridge {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 5px;
  color: var(--muted-on-dark);
}
.site-header.is-on-paper .brand-text .priebe { color: var(--ink); }
.site-header.is-on-paper .brand-text .bridge { color: var(--muted); }

.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--offwhite);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav a:hover { color: var(--signal-amber); }
.site-header.is-on-paper .nav a { color: var(--ink); }
.nav .btn { font-size: 13px; padding: 11px 18px; }
.nav .btn-primary {
  background: var(--signal-amber);
  color: var(--ink);
  border-color: var(--signal-amber);
}
.nav .btn-primary:hover { background: var(--signal-amber-hover); border-color: var(--signal-amber-hover); color: var(--surface); }

.nav-toggle {
  display: none;
  color: var(--offwhite);
  font-size: 24px;
  padding: 8px;
}
.site-header.is-on-paper .nav-toggle { color: var(--ink); }

/* ---------- 8. Hero (canvas wave-pulse) ------------------ */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--offwhite);
  /* Fill the viewport below the 72px sticky header, minus one grid (32px)
     so the top of the partner marquee peeks at the bottom on landing. */
  min-height: calc(100vh - 72px - 32px);
  padding: 96px 0 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
.hero canvas#hero-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero-glow {
  position: absolute;
  top: -160px;
  right: -200px;
  width: 820px;
  height: 820px;
  background: radial-gradient(circle, var(--amber-glow) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
}
.hero-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--hairline-dark);
  z-index: 2;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--offwhite);
  max-width: 960px;
  margin: 0 auto 28px;
}
.hero-sub {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--body-on-dark);
  max-width: 640px;
  margin: 0 auto 40px;
}
.hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- 9. Page hero (subpages) ---------------------- */
.page-hero {
  background: var(--ink);
  color: var(--offwhite);
  padding: 144px 0 96px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--gridline-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline-dark) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--offwhite);
  max-width: 800px;
  margin: 0 0 16px;
}
.page-hero p {
  font-size: 18px;
  color: var(--body-on-dark);
  max-width: 640px;
  margin: 0;
}

/* ---------- 10. Partner marquee on Ink ------------------- */
.marquee-band {
  background:
    linear-gradient(to right, rgba(168, 181, 199, 0.08) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--ink);
  padding: 24px 0 16px;
  position: relative;
  overflow: hidden;
}
.marquee-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  padding: 0 var(--gutter);
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.marquee-label::before { content: '//'; color: var(--signal-amber); font-weight: 700; }
.marquee-track-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: pb-marquee 50s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-track a {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 56px;
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.marquee-track a:hover { opacity: 1; }
.marquee-track img { max-height: 32px; width: auto; filter: brightness(1.15); }
@keyframes pb-marquee {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Affiliate disclosure strip under the marquee */
.disclosure-strip {
  background: var(--ink);
  color: var(--muted-on-dark);
  text-align: center;
  padding: 16px var(--gutter);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- 11. Problem to Solution to Result rows ------- */
.psr-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--edge);
}
.psr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 72px 0;
  border-bottom: 1px solid var(--edge);
}
.psr-row.reverse .psr-text { order: 2; }
.psr-row.reverse .psr-flow { order: 1; }

.psr-text { max-width: 540px; }
.psr-marker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal-amber);
  margin-bottom: 16px;
  display: block;
}
.psr-marker::before { content: '// '; }

.psr-block { margin-bottom: 20px; }
.psr-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal-amber);
  display: block;
  margin-bottom: 6px;
}
.psr-label::before { content: '// '; }
.psr-block p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--body-ink);
  margin: 0;
}
.psr-block .tools {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--muted);
}

/* Flow card (vertical chain of numbered steps) */
.flow-card {
  background: var(--surface);
  border: 1px solid var(--edge);
  display: flex;
  flex-direction: column;
}
.flow-card-band {
  display: flex;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--drafting-paper);
}
.flow-body { padding: 24px; }
.flow-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.flow-step {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--edge);
  background: var(--drafting-paper);
}
.flow-step .num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--signal-amber);
  min-width: 28px;
}
.flow-step .label {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.flow-step.is-terminal {
  background: var(--ink);
  border-color: var(--ink);
}
.flow-step.is-terminal .label { color: var(--offwhite); }

.psr-more {
  margin-top: 56px;
  text-align: center;
}

/* ---------- 11b. PSR Flip Cards (interactive) ----------- */
.flip-instruction {
  display: flex;
  justify-content: center;
  margin: 36px auto 28px;
}
.flip-instruction .fi-badge {
  /* Reset button defaults */
  appearance: none;
  border: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  /* Pill */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  background: var(--signal-amber);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.flip-instruction .fi-badge:hover { transform: translateY(-1px); }
.flip-instruction .fi-badge:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.flip-instruction .fi-hand {
  font-size: 18px;
  line-height: 1;
  filter: grayscale(1) brightness(0);
  transition: opacity 200ms ease;
}
.flip-instruction .fi-arrow {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  display: inline-block;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Active (flipped-all) state: ink bg, amber text */
.flip-instruction .fi-badge[aria-pressed="true"] {
  background: var(--ink);
  color: var(--signal-amber);
}
.flip-instruction .fi-badge[aria-pressed="true"] .fi-hand {
  opacity: 0;
  width: 0;
  margin-left: -12px; /* collapse the gap when hidden */
}
.flip-instruction .fi-badge[aria-pressed="true"] .fi-arrow {
  transform: rotate(-180deg);
}
@media (max-width: 540px) {
  .flip-instruction .fi-badge {
    font-size: 11px;
    padding: 10px 16px;
    letter-spacing: 0.12em;
  }
}

.flip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 16px;
  perspective: 1600px;
}

.flip-card {
  /* Reset button styles */
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  /* Card metrics */
  position: relative;
  width: 100%;
  min-height: 380px;
  perspective: 1600px;
  display: block;
}
.flip-card:focus { outline: none; }
.flip-card:focus-visible .flip-card-inner {
  box-shadow: 0 0 0 3px var(--signal-amber);
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 380px;
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.flip-card[aria-pressed="true"] .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 24px;
  border: 1px solid var(--edge);
  overflow: hidden;
  box-sizing: border-box;
}

/* FRONT — paper / light schematic */
.flip-front {
  background: var(--surface);
  background-image:
    linear-gradient(var(--gridline-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline-light) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--ink);
  z-index: 2;
  transform: rotateY(0deg);
  transition: box-shadow 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.flip-card:hover .flip-front {
  box-shadow: 0 18px 48px -28px rgba(10, 14, 20, 0.30);
}
.flip-card:hover .flip-card-inner {
  transform: translateY(-4px);
}
.flip-card[aria-pressed="true"]:hover .flip-card-inner {
  transform: rotateY(180deg) translateY(-4px);
}

/* BACK — dark ink schematic canvas */
.flip-back {
  background: var(--ink);
  color: var(--offwhite);
  transform: rotateY(180deg);
  z-index: 1;
}
.flip-back .flip-grid-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.55;
}
.flip-back::before {
  /* Amber radial glow */
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, var(--amber-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.flip-back > * { position: relative; z-index: 1; }

/* Corner tick marks (drafting-paper detail) */
.flip-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.flip-corner.tl { top: 10px; left: 10px; border-top: 1px solid var(--edge); border-left: 1px solid var(--edge); }
.flip-corner.br { bottom: 10px; right: 10px; border-bottom: 1px solid var(--edge); border-right: 1px solid var(--edge); }
.flip-corner.on-ink { border-color: rgba(168, 181, 199, 0.35); }
.flip-tick {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--signal-amber);
  border-radius: 50%;
}
.flip-corner.tl .flip-tick { top: -3px; left: -3px; }
.flip-corner.br .flip-tick { bottom: -3px; right: -3px; }

/* Head row: chip + sheet stamp */
.flip-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.flip-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--signal-amber);
  padding: 5px 10px;
  border-radius: 2px;
}
.flip-chip.on-ink {
  color: var(--ink);
  background: var(--signal-amber);
}
.flip-stamp {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.flip-stamp.on-ink { color: var(--muted-on-dark); }

/* Small schematic icon (top-right of card head) */
.flip-icon {
  width: 56px;
  height: 56px;
  display: block;
  color: var(--ink);
  flex-shrink: 0;
}
.flip-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.flip-icon .stroke    { stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.flip-icon .stroke-amber { stroke: var(--signal-amber); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flip-icon .fill-amber   { fill: var(--signal-amber); }
.flip-icon .fill-ink     { fill: var(--ink); }

/* Before / After teaser strip on the front of each card */
.flip-ba {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px dashed var(--edge);
  background: var(--drafting-paper);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}
.flip-ba .ba-side {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.flip-ba .ba-side.ba-after { text-align: right; }
.flip-ba .ba-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.flip-ba .ba-value {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flip-ba .ba-after .ba-value { color: var(--signal-amber); }
.flip-ba .ba-arrow {
  font-family: var(--font-mono);
  color: var(--signal-amber);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
@media (max-width: 540px) {
  .flip-ba .ba-value { font-size: 13px; }
  .flip-icon { width: 48px; height: 48px; }
}

/* Body */
.flip-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.flip-body.on-ink {
  justify-content: flex-start;
  padding-top: 4px;
  gap: 0;
}
/* Dashed hairline divider between Solution and Result blocks (Schematic style) */
.flip-body.on-ink .flip-block + .flip-block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed rgba(168, 181, 199, 0.22);
}
.flip-block { display: flex; flex-direction: column; gap: 8px; }

.flip-marker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal-amber);
}
/* Solution eyebrow on dark: bright drafting-paper white (was muted blue-gray) */
.flip-marker.on-ink { color: var(--offwhite); }
.flip-marker.on-ink.amber { color: var(--signal-amber); }

.flip-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.flip-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--body-ink);
  margin: 0;
}
/* Body copy on dark surface: bright drafting-paper white, medium weight,
   looser line-height than the front face (dark surfaces need more air) */
.flip-text.on-ink {
  color: var(--offwhite);
  font-weight: 500;
  line-height: 1.65;
}
.flip-text.on-ink.result {
  color: var(--offwhite);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.65;
}
.flip-text .big-stat {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--signal-amber);
  line-height: 1;
  vertical-align: -3px;
  margin-right: 2px;
}

/* Footer / CTA */
.flip-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--edge);
}
.flip-footer.on-ink {
  border-top: 1px dashed rgba(168, 181, 199, 0.20);
}
.flip-cta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 200ms var(--ease-out);
}
.flip-cta.on-ink { color: var(--muted-on-dark); }
.flip-cta-icon {
  color: var(--signal-amber);
  font-size: 13px;
  display: inline-block;
  transition: transform 400ms var(--ease-out);
}
.flip-card:hover .flip-front .flip-cta { color: var(--ink); }
.flip-card:hover .flip-front .flip-cta-icon { transform: rotate(60deg); }

/* Placeholder card (dashed style hint) */
.flip-card.is-placeholder .flip-front {
  background-image:
    linear-gradient(var(--gridline-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline-light) 1px, transparent 1px);
  border-style: dashed;
}

/* Responsive */
@media (max-width: 1024px) {
  .flip-grid { gap: 20px; }
  .flip-card { min-height: 360px; }
  .flip-card-inner { min-height: 360px; }
}
@media (max-width: 768px) {
  .flip-grid { grid-template-columns: 1fr; gap: 18px; }
  .flip-face { padding: 24px 22px 22px; }
  .flip-title { font-size: 22px; }
  .flip-text { font-size: 15.5px; }
  .flip-card { min-height: 340px; }
  .flip-card-inner { min-height: 340px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .flip-card-inner { transition: none; }
  .flip-card:hover .flip-card-inner { transform: none; }
}

/* ---------- 12. How It Works step cards ------------------ */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.step-card {
  background: var(--surface);
  border: 1px solid var(--edge);
  display: flex;
  flex-direction: column;
}
.section--ink .step-card {
  background: var(--ink-elevated);
  border-color: var(--hairline-dark);
}
.step-card .num-big {
  font-family: var(--font-display);
  font-size: 88px;
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--ink);
  padding: 36px 32px 0;
}
.section--ink .step-card .num-big { color: var(--offwhite); }
.step-card .num-big em {
  color: var(--signal-amber);
  font-style: normal;
}
.step-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.025em;
  padding: 16px 32px 12px;
  margin: 0;
}
.section--ink .step-card h3 { color: var(--offwhite); }
.step-card p {
  padding: 0 32px 36px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body-ink);
  margin: 0;
}
.section--ink .step-card p { color: var(--body-on-dark); }
/* Steps carousel (single-card with arrow nav) */
.steps-carousel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  gap: 32px;
  max-width: 1040px;
  margin: 0 auto;
}
.steps-arrow {
  /* button reset */
  appearance: none;
  background: transparent;
  margin: 0;
  font: inherit;
  /* visual */
  width: 56px;
  height: 56px;
  align-self: center;
  border-radius: 50%;
  border: 1px solid rgba(168, 181, 199, 0.30);
  color: var(--offwhite);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.steps-arrow:hover:not(:disabled) {
  background: var(--signal-amber);
  border-color: var(--signal-amber);
  color: var(--ink);
  transform: scale(1.05);
}
.steps-arrow:focus-visible {
  outline: 2px solid var(--signal-amber);
  outline-offset: 3px;
}
.steps-arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.steps-arrow svg { width: 22px; height: 22px; }

.steps-track {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: stretch;
}
.steps-track .step-card {
  display: none;
  width: 100%;
}
.steps-track .step-card.is-active {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.steps-track .step-card .step-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.steps-track .step-card .num-big {
  font-size: 120px;
  padding: 44px 44px 0;
}
.steps-track .step-card h3 {
  font-size: 28px;
  padding: 20px 44px 12px;
}
.steps-track .step-card p {
  padding: 0 44px 44px;
  font-size: 17px;
  max-width: 560px;
}

/* Right-column illustration (two-layer sketch, JS-driven).
   The PNG is split into two layers: cream line work (without the
   tie) and the amber tie alone. Layers stack absolutely so they
   align pixel-for-pixel. The lines wipe in top-to-bottom; the
   tie fades in last, after the wipe finishes. All animation is
   driven from main.js via the Web Animations API to dodge
   Chromium's broken clip-path bidirectional transitions. The
   .is-drawn class persists the final state for no-JS / reduced
   motion. */
.step-illustration {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 36px 24px 0;
  min-width: 180px;
}
/* Height-based sizing: pin the stack to 400px tall so every card's
   figure renders at the same physical height regardless of the
   source image's aspect ratio. Width auto-fits the aspect, capped
   to keep wide compositions from blowing out the text column. */
.step-illustration__stack {
  position: relative;
  display: block;
  height: 400px;
  width: fit-content;
  max-width: 420px;
}
.step-illustration__stack > picture {
  display: block;
  height: 100%;
}
.step-illustration__stack > picture.step-illustration__lines {
  position: relative;
  z-index: 1;
}
.step-illustration__stack > picture.step-illustration__accent {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.step-illustration__stack img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 0;
  will-change: opacity, clip-path;
}
.step-card.is-drawn .step-illustration__lines img,
.step-card.is-drawn .step-illustration__accent img {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .step-illustration__stack img { opacity: 1; }
}

/* Step indicator (01 / 03) */
.steps-indicator {
  margin-top: 32px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--muted-on-dark);
}
.steps-indicator .indicator-current {
  color: var(--signal-amber);
  font-weight: 700;
  font-size: 16px;
}
.steps-indicator .indicator-divider {
  margin: 0 12px;
  color: var(--muted-on-dark);
}

@media (max-width: 768px) {
  .steps-carousel {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .steps-arrow {
    grid-row: 2;
    justify-self: center;
  }
  .steps-arrow.steps-prev { grid-column: 1; grid-row: 2; justify-self: start; }
  .steps-arrow.steps-next { grid-column: 1; grid-row: 2; justify-self: end; }
  .steps-track { grid-row: 1; min-height: 320px; }
  .steps-track .step-card.is-active { flex-direction: column; }
  .steps-track .step-card .num-big { font-size: 88px; padding: 32px 28px 0; }
  .steps-track .step-card h3 { font-size: 22px; padding: 16px 28px 12px; }
  .steps-track .step-card p { padding: 0 28px 24px; font-size: 16px; max-width: none; }
  .step-illustration {
    width: 100%;
    min-width: 0;
    padding: 0 28px 28px;
  }
  .step-illustration__stack { height: 280px; max-width: 300px; margin: 0 auto; }
}

.steps-cta { margin-top: 56px; text-align: center; }
.steps-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
}
.steps-cta-caption {
  display: block;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.section--paper .steps-cta-caption { color: var(--muted); }

/* ---------- 13. About blurb (two-column) ----------------- */
.about-blurb {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: center;
}
.about-blurb-photo {
  border: 1px solid var(--edge);
  background: var(--surface);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
.about-blurb-photo .placeholder {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 24px;
  max-width: 280px;
}
.about-blurb-photo .placeholder::before {
  content: '//';
  display: block;
  font-size: 36px;
  color: var(--signal-amber);
  letter-spacing: 0;
  margin-bottom: 12px;
}
.about-blurb-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}
.about-blurb-text h2 { margin-bottom: 24px; }
.about-blurb-text p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--body-ink);
  margin: 0 0 24px;
  max-width: 560px;
}

/* ---------- 14. FAQ accordion ---------------------------- */
.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--edge);
}
.faq-item {
  border-bottom: 1px solid var(--edge);
  background: transparent;
}
.faq-item button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  text-align: left;
  letter-spacing: -0.01em;
  transition: color var(--dur-fast) var(--ease-out);
}
.faq-item button:hover { color: var(--signal-amber); }
.faq-item .stamp-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--signal-amber);
  margin-right: 14px;
  vertical-align: 2px;
}
.faq-item .toggle {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--muted);
  font-weight: 400;
  transition: transform var(--dur-base) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.faq-item[data-open="true"] .toggle {
  transform: rotate(45deg);
  color: var(--signal-amber);
}
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.faq-item[data-open="true"] .faq-panel { grid-template-rows: 1fr; }
.faq-panel-inner {
  overflow: hidden;
  padding: 0 8px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--body-ink);
  max-width: 760px;
}
.faq-item[data-open="true"] .faq-panel-inner { padding: 0 8px 28px; }

/* ---------- 15. Final CTA -------------------------------- */
.final-cta {
  text-align: center;
  padding: 128px 0;
  background: var(--ink);
  color: var(--offwhite);
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--gridline-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline-dark) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.final-cta .container { position: relative; z-index: 1; }
.final-cta h2 {
  color: var(--offwhite);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  margin: 0 auto 20px;
  max-width: 880px;
}
.final-cta h2 .wedge { color: var(--signal-amber); font-style: normal; }
.final-cta p {
  color: var(--body-on-dark);
  font-size: 18px;
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto 36px;
}
.final-cta .cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 24px;
}
.final-cta .disclosure {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  margin: 0;
}

/* ---------- 16. Footer ----------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--body-on-dark);
  padding: 88px 0 32px;
  border-top: 1px solid var(--hairline-dark);
  position: relative;
}
.site-footer h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  margin: 0 0 22px;
}
.site-footer h4::before { content: '// '; color: var(--signal-amber); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--hairline-dark);
}
.footer-brand p {
  color: var(--body-on-dark);
  margin: 16px 0 0;
  max-width: 380px;
  font-size: 14px;
  line-height: 1.65;
}
.footer-grid ul { display: flex; flex-direction: column; gap: 12px; }
.footer-grid a {
  font-size: 14px;
  color: var(--body-on-dark);
}
.footer-grid a:hover { color: var(--signal-amber); }
.footer-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}

/* ---------- 17. Mobile ----------------------------------- */
@media (max-width: 1024px) {
  .psr-row { grid-template-columns: 1fr; gap: 32px; padding: 56px 0; }
  .psr-row.reverse .psr-text,
  .psr-row.reverse .psr-flow { order: initial; }
  .steps-grid { grid-template-columns: 1fr; }
  .about-blurb { grid-template-columns: 1fr; gap: 40px; }
  .about-blurb-photo { max-width: 400px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .section { padding: var(--section-pad-mobile) 0; }
  .hero { min-height: calc(100vh - 72px); padding: 80px 0 80px; }
  .hero h1 { font-size: clamp(36px, 9vw, 56px); }
  .container,
  .header-inner,
  .hero-inner { padding-left: var(--gutter-mobile); padding-right: var(--gutter-mobile); }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--hairline-dark);
    flex-direction: column;
    align-items: flex-start;
    padding: 24px var(--gutter-mobile);
    gap: 16px;
  }
  .nav.is-open { display: flex; }
  .nav-toggle { display: block; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-base { flex-direction: column; align-items: flex-start; }

  .step-card .num-big { font-size: 64px; padding: 28px 24px 0; }
  .step-card h3 { padding: 12px 24px 8px; }
  .step-card p { padding: 0 24px 28px; }
}

/* ---------- 18. Scroll-reveal + micro-interactions ------- */

/* Reveal base — applied via JS data-reveal attribute on intersection. */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Stagger children — child elements reveal in sequence */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
}
[data-stagger].is-revealed > * { opacity: 1; transform: none; }
[data-stagger].is-revealed > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].is-revealed > *:nth-child(2) { transition-delay: 90ms; }
[data-stagger].is-revealed > *:nth-child(3) { transition-delay: 180ms; }
[data-stagger].is-revealed > *:nth-child(4) { transition-delay: 270ms; }
[data-stagger].is-revealed > *:nth-child(5) { transition-delay: 360ms; }
[data-stagger].is-revealed > *:nth-child(6) { transition-delay: 450ms; }

/* Flow-step reveal — chain numbered steps in sequence */
.flow-steps[data-flow-reveal] .flow-step {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity 500ms var(--ease-out),
    transform 500ms var(--ease-out);
}
.flow-steps[data-flow-reveal].is-revealed .flow-step { opacity: 1; transform: none; }
.flow-steps[data-flow-reveal].is-revealed .flow-step:nth-child(1) { transition-delay: 0ms; }
.flow-steps[data-flow-reveal].is-revealed .flow-step:nth-child(2) { transition-delay: 120ms; }
.flow-steps[data-flow-reveal].is-revealed .flow-step:nth-child(3) { transition-delay: 240ms; }
.flow-steps[data-flow-reveal].is-revealed .flow-step:nth-child(4) { transition-delay: 360ms; }
.flow-steps[data-flow-reveal].is-revealed .flow-step:nth-child(5) { transition-delay: 480ms; }

/* ---------- 19. Hero embellishments ---------------------- */

/* Corner stamps — drafting drawing markers in the hero corners */
.hero-stamp {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: hero-stamp-in 800ms 400ms var(--ease-out) forwards;
}
.hero-stamp::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--signal-amber);
}
.hero-stamp.tl { top: 96px; left: 32px; }
.hero-stamp.br { bottom: 24px; right: 32px; }
.hero-stamp.br::before { background: var(--muted-on-dark); }
@keyframes hero-stamp-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Live pulse dot — sits beside SHEET tag, signals "live system" */
.hero-pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal-amber);
  box-shadow: 0 0 0 0 rgba(245, 165, 36, 0.6);
  animation: pulse-amber 1800ms infinite;
}
@keyframes pulse-amber {
  0%   { box-shadow: 0 0 0 0 rgba(245, 165, 36, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(245, 165, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 165, 36, 0); }
}

/* Hero h1 word-stagger — words fade up in sequence on load */
.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  animation: word-in 900ms var(--ease-out) forwards;
}
.hero h1 .word:nth-child(1) { animation-delay: 80ms; }
.hero h1 .word:nth-child(2) { animation-delay: 180ms; }
.hero h1 .word:nth-child(3) { animation-delay: 280ms; }
.hero h1 .word:nth-child(4) { animation-delay: 380ms; }
.hero h1 .word:nth-child(5) { animation-delay: 480ms; }
.hero h1 .word:nth-child(6) { animation-delay: 580ms; }
.hero h1 .word:nth-child(7) { animation-delay: 680ms; }
@keyframes word-in {
  to { opacity: 1; transform: none; }
}
.hero-sub,
.hero-cta {
  opacity: 0;
  transform: translateY(20px);
  animation: word-in 800ms var(--ease-out) forwards;
}
.hero-sub { animation-delay: 820ms; }
.hero-cta { animation-delay: 950ms; }

/* Hero scroll-cue — animated chevron at bottom */
.hero-scroll-cue {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  opacity: 0;
  animation: hero-stamp-in 800ms 1300ms var(--ease-out) forwards;
}
.hero-scroll-cue::after {
  content: '';
  width: 1px;
  height: 24px;
  background: linear-gradient(to bottom, var(--signal-amber), transparent);
  animation: cue-bounce 2200ms infinite ease-in-out;
}
@keyframes cue-bounce {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* ---------- 20. PSR row enhancements --------------------- */
.psr-row { position: relative; }
/* Numbered chip on each row for stronger rhythm */
.psr-chip {
  position: absolute;
  top: 32px;
  right: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.psr-chip::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--edge);
}
.psr-row.reverse .psr-chip { right: auto; left: 0; }
.psr-row.reverse .psr-chip::before { order: 2; }
@media (max-width: 1024px) {
  .psr-chip { position: static; margin-bottom: 16px; }
  .psr-row.reverse .psr-chip::before { order: initial; }
}

/* PSR block separators between problem/solution/result */
.psr-block { position: relative; padding-bottom: 20px; }
.psr-block + .psr-block { padding-top: 20px; border-top: 1px dashed var(--edge); }

/* Flow card hover — subtle lift */
.flow-card { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.flow-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px rgba(10, 14, 20, 0.18);
}

/* Connecting line down the flow steps */
.flow-steps { position: relative; }
.flow-steps::before {
  content: '';
  position: absolute;
  left: 35px;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: repeating-linear-gradient(to bottom, var(--edge) 0, var(--edge) 4px, transparent 4px, transparent 8px);
  z-index: 0;
}
.flow-step { position: relative; z-index: 1; }

/* ---------- 21. Step cards (How It Works) ---------------- */
.step-card {
  position: relative;
  overflow: hidden;
}
/* Hover lift only on cards that aren't in the single-card carousel */
.steps-grid .step-card {
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.steps-grid .step-card:hover {
  transform: translateY(-3px);
  border-color: var(--signal-amber);
}
.steps-grid .step-card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 0;
  background: var(--signal-amber);
  transition: width 400ms var(--ease-out);
}
.steps-grid .step-card:hover::after { width: 100%; }

/* ---------- 22. About blurb improvements ----------------- */
.about-blurb-photo {
  background:
    linear-gradient(135deg, var(--ink) 0%, var(--ink-elevated) 100%);
  border-color: var(--hairline-dark);
  position: relative;
}
.about-blurb-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--gridline-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline-dark) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.about-blurb-photo::after {
  /* Amber corner accent (pushed in past the rounded corner) */
  content: '';
  position: absolute;
  top: 22px;
  right: 22px;
  width: 18px;
  height: 18px;
  border-top: 1px solid var(--signal-amber);
  border-right: 1px solid var(--signal-amber);
  z-index: 2;
}
.about-blurb-photo .placeholder {
  color: var(--body-on-dark);
  position: relative;
  z-index: 1;
}
.about-blurb-photo .placeholder::before { color: var(--signal-amber); }

/* ---------- 23. Subpage components ----------------------- */

/* Page hero with eyebrow + stamp */
.page-hero { padding-top: 168px; }
.page-hero .stamp {
  position: absolute;
  top: 96px;
  right: var(--gutter);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  z-index: 1;
}
.page-hero .stamp::before { content: '// '; color: var(--signal-amber); }

/* Process step cards — used on how-it-works.
   Namespaced as .process-card to avoid colliding with the home-page
   carousel's .step-card. Cards sit in normal page flow and scroll
   freely in both directions. */
#process .section-head p { max-width: 760px; }
.process-cards {
  position: relative;
  margin-top: 28px;
}
.process-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  align-items: start;
  padding: 44px 48px;
  margin-bottom: 32px;
  min-height: 350px;
  background: var(--surface);
  border: 1px solid var(--edge);
  overflow: hidden;
  transition: border-color 320ms var(--ease-out);
}
.process-card:last-child { margin-bottom: 0; }
/* Amber top hairline */
.process-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--signal-amber);
}
/* Corner callout tick (top-right) */
.process-card__corner {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 14px;
  height: 14px;
  border-top: 1px solid var(--edge);
  border-right: 1px solid var(--edge);
  pointer-events: none;
}
.process-card:hover { border-color: var(--ink); }
.process-card__index {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.process-card__num {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--ink);
}
.process-card:first-child .process-card__num { color: var(--signal-amber); }
.process-card__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.process-card__meta::before { content: '// '; color: var(--signal-amber); }
.process-card h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}
.process-card .lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--body-ink);
  margin: 0 0 20px;
  max-width: 640px;
}
.process-card .detail {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
  max-width: 640px;
}
@media (max-width: 768px) {
  #process .section-head { margin-bottom: 40px; }
  .process-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 32px 28px;
    margin-bottom: 20px;
    min-height: 0;
  }
  .process-card__num { font-size: 72px; }
  .process-card .lede { font-size: 17px; }
}

/* Speed timeline (How It Works) — replaces the case-file problems block.
   Horizontal 4-step timeline on desktop, vertical on mobile. */
.timeline {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.tl-step { display: flex; flex-direction: column; gap: 12px; }
.tl-track { display: flex; align-items: center; height: 14px; }
.tl-dot {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--signal-amber);
}
.tl-line { flex: 1 1 auto; height: 1px; margin-left: 10px; background: var(--edge); }
.tl-step:last-child .tl-line { display: none; }
.tl-day {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal-amber);
}
.tl-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.tl-desc { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }
@media (max-width: 768px) {
  .timeline { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
  .tl-track { display: none; }
  .tl-step {
    position: relative;
    padding: 0 0 28px 26px;
    margin-left: 6px;
    border-left: 1px solid var(--edge);
  }
  .tl-step::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--signal-amber);
  }
  .tl-step:last-child { border-left-color: transparent; padding-bottom: 0; }
}

/* Full PSR list for how-it-works — same layout but tighter */
.psr-full .psr-row { padding: 56px 0; }

/* Team / Mission grid for About */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.about-grid h2 { margin-bottom: 24px; }
.about-grid p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--body-ink);
  margin: 0 0 18px;
}
@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Team grid for About — three-up portrait cards */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 56px;
}
.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Stage wrapper exists so the snake SVG can render OVER the photo's
   1.5px Ink border. .team-photo has overflow:hidden which clips at the
   padding edge, so children of .team-photo can never extend into the
   border area. The stage has no border of its own — its padding edge IS
   the photo's outer edge — so an SVG positioned inset:0 inside it can
   paint stroke onto the border. The stage also enforces overflow:hidden
   + border-radius:16px so any half-stroke that would extend past the
   photo's rounded outer shape gets clipped cleanly. */
.team-photo-stage {
  position: relative;
  width: 100%;
  max-width: 260px;
  margin: 0 0 24px;
  border-radius: 16px;
  overflow: hidden;
}
.team-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-elevated) 100%);
}
.team-photo::before {
  /* Gridline backdrop (Schematic technical-drawing texture) */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--gridline-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline-dark) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 1;
}
.team-photo img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* Snake — amber segment slowly tracing the photo border, staggered per card.
   SVG sibling of .team-photo (inside .team-photo-stage), positioned to fill
   the full photo box so the stroke can paint onto the border line itself. */
.team-photo-stage .snake {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}
.team-photo-stage .snake-track {
  /* dasharray + dashoffset + animation are all set inline by
     setupTeamSnakes() in main.js using the real getTotalLength() so only
     ONE segment ever appears on the perimeter (Chrome ignores SVG
     pathLength for stroke-dasharray). Single clean amber line, no glow
     halos — the layered drop-shadow filter was reading as multiple
     parallel lines instead of one snake. */
  fill: none;
  stroke: var(--signal-amber);
  stroke-width: 2;          /* slightly wider than the 1.5px Ink border for visibility */
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
@media (prefers-reduced-motion: reduce) {
  .team-photo-stage .snake-track { opacity: 0; }
}
.team-role {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.team-role::before { content: '// '; color: var(--signal-amber); }
.team-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  color: var(--ink);
}
.team-bio {
  font-size: 15px;
  line-height: 1.65;
  color: var(--body-ink);
  margin: 0 0 18px;
  flex: 1;
  max-width: 320px;
}
.team-email {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--signal-amber);
  padding-bottom: 2px;
  align-self: center;
  word-break: break-word;
  transition: color 200ms var(--ease-out);
}
.team-email:hover { color: var(--signal-amber); }
.team-phone {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  align-self: center;
  margin-top: 6px;
  transition: color 200ms var(--ease-out);
}
.team-phone:hover { color: var(--signal-amber); }
@media (max-width: 1024px) {
  .team-grid { grid-template-columns: 1fr; gap: 48px; max-width: 480px; margin-left: auto; margin-right: auto; }
}

.value-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.value-card {
  background: var(--surface);
  border: 1px solid var(--edge);
  padding: 32px 28px;
  position: relative;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.value-card:hover {
  border-color: var(--signal-amber);
  transform: translateY(-2px);
}
.value-card .val-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--signal-amber);
  margin-bottom: 16px;
  display: block;
}
.value-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--ink);
}
.value-card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--body-ink);
  margin: 0;
}
@media (max-width: 768px) {
  .value-list { grid-template-columns: 1fr; }
}

/* Partner portfolio grid (About) */
/* "What we cover" capability band (About) — replaces the named partner grid.
   Same drafting-grid hairlines, but category-only with a numbered chip; no
   vendor names, so it stays short and gives nothing away. */
.coverage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid var(--edge);
  border-left: 1px solid var(--edge);
}
.coverage-cell {
  border-right: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  padding: 28px 24px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background var(--dur-base) var(--ease-out);
}
.coverage-cell:hover { background: var(--drafting-paper); }
.coverage-index {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--signal-amber);
}
.coverage-cat {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
@media (max-width: 1024px) {
  .coverage-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .coverage-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Stats strip (About — animated count-up) */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline-dark);
  border-bottom: 1px solid var(--hairline-dark);
  margin: 0;
}
.stat {
  padding: 40px 28px;
  border-right: 1px solid var(--hairline-dark);
  text-align: left;
}
.stat:last-child { border-right: none; }
.stat .stat-num {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--offwhite);
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.stat .stat-num .unit { color: var(--signal-amber); font-size: 0.5em; font-weight: 700; }
.stat .stat-label {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.section--ink .stat .stat-num { color: var(--offwhite); }
.section--paper .stat .stat-num { color: var(--ink); }
.section--paper .stat .stat-label { color: var(--muted); }
.section--paper .stat { border-right-color: var(--edge); }
.section--paper .stat-strip { border-color: var(--edge); }
@media (max-width: 768px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--hairline-dark); }
}

/* "What we have built" statement — replaces the old stat strip on About.
   A clean lead paragraph on the dark section, with the trades accented amber. */
.built-statement {
  max-width: 920px;
  margin-top: 8px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline-dark);
}
.built-statement p {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 27px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--offwhite);
}
.built-statement .hl { color: var(--signal-amber); font-weight: 600; }
@media (max-width: 768px) {
  .built-statement { padding-top: 20px; }
  .built-statement p { font-size: 19px; line-height: 1.55; }
}

/* ---------- 24. Contact form ----------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: stretch;
}
@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
}

.contact-form {
  background: var(--surface);
  border: 1px solid var(--edge);
  padding: 40px;
  position: relative;
}
.contact-form::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 32px;
  height: 32px;
  border-top: 2px solid var(--signal-amber);
  border-left: 2px solid var(--signal-amber);
}
.contact-form .form-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contact-form .form-title::before { content: '// Step 01 of 02'; color: var(--signal-amber); }
.contact-form .form-title .step-meta { color: var(--muted); }
.contact-form h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 4px 0 28px;
}

.form-row { margin-bottom: 22px; }
.form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 540px) { .form-row.two { grid-template-columns: 1fr; } }

.form-row label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.form-row label .req { color: var(--signal-amber); margin-left: 4px; }
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background-color: var(--drafting-paper);
  border: 1px solid var(--edge);
  border-radius: 0;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.form-row textarea { resize: vertical; min-height: 120px; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--signal-amber);
  background-color: var(--surface);
}
.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--muted); }

.form-submit {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.form-submit .btn { padding: 16px 28px; }
.form-submit .meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Contact sidebar */
.contact-side h3 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.contact-side p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--body-ink);
  margin: 0 0 24px;
  max-width: 360px;
}
.contact-side .direct-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--edge);
  padding-top: 24px;
}
.contact-side .direct-list .item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-side .direct-list .item .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-side .direct-list .item .lbl::before { content: '// '; color: var(--signal-amber); }
.contact-side .direct-list .item .val {
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
}
.contact-side .direct-list .item a:hover { color: var(--signal-amber); }

.contact-success {
  display: none;
  background: var(--ink);
  color: var(--offwhite);
  padding: 56px 40px;
  position: relative;
  border-left: 3px solid var(--signal-amber);
  margin-top: 24px;
}
.contact-success.is-shown { display: block; }
.contact-success h3 {
  font-family: var(--font-display);
  font-size: 28px;
  margin: 0 0 12px;
  color: var(--offwhite);
}
.contact-success p {
  color: var(--body-on-dark);
  max-width: 480px;
  margin: 0 0 20px;
}
.contact-success .next {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}

/* ---------- 24b. Contact — drafting-sheet treatment ----- */

/* Section reads as a drafting surface */
.contact-section { position: relative; overflow: hidden; }
.contact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--gridline-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline-light) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}
.contact-section > .container { position: relative; z-index: 1; }

/* Section corner callouts (drafting markers) */
.sheet-callout {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sheet-callout::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--signal-amber);
}
.sheet-callout.tl { top: 30px; left: var(--gutter); }
.sheet-callout.br { bottom: 30px; right: var(--gutter); }
.sheet-callout.br::before { background: var(--edge); }
@media (max-width: 1024px) { .sheet-callout { display: none; } }

/* Form card head band (dimension stamp) */
.form-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -40px -40px 0;
  padding: 12px 40px;
  border-bottom: 1px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-sheet-head .fsh-tag::before { content: '// '; color: var(--signal-amber); }

/* Two-step progress rail */
.form-progress {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 28px 0 24px;
  padding: 0;
  list-style: none;
}
.form-progress .fp-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 2px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-progress .fp-step.is-active { border-top-color: var(--signal-amber); color: var(--ink); }
.form-progress .fp-num { font-weight: 700; color: var(--muted); }
.form-progress .fp-step.is-active .fp-num { color: var(--signal-amber); }

/* Bottom-right corner bracket on the form card */
.contact-form::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 32px;
  height: 32px;
  border-bottom: 2px solid var(--edge);
  border-right: 2px solid var(--edge);
  pointer-events: none;
}

/* Custom select chevron — kills the native-dropdown tell */
.form-row select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23F5A524' stroke-width='1.5' stroke-linecap='square'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* ----- Inverted Ink side panel ----- */
.contact-side--ink {
  position: relative;
  background: var(--ink);
  color: var(--offwhite);
  padding: 40px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.contact-side--ink::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--gridline-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline-dark) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.contact-side--ink::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 32px;
  height: 32px;
  border-bottom: 2px solid var(--signal-amber);
  border-right: 2px solid var(--signal-amber);
  pointer-events: none;
}
.contact-side--ink > * { position: relative; z-index: 1; }

.contact-side--ink .cs-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -40px -40px 28px;
  padding: 12px 40px;
  border-bottom: 1px solid var(--hairline-dark);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.contact-side--ink .cs-tag::before { content: '// '; color: var(--signal-amber); }

.contact-side--ink h3 { color: var(--offwhite); margin: 0 0 16px; }
.contact-side--ink p { color: var(--body-on-dark); }
.contact-side--ink .direct-list { border-top-color: var(--hairline-dark); }
.contact-side--ink .direct-list .item .lbl { color: var(--muted-on-dark); }
.contact-side--ink .direct-list .item .val { color: var(--offwhite); }
.contact-side--ink .direct-list .item a:hover { color: var(--signal-amber); }

.contact-side--ink .cs-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--hairline-dark);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.contact-side--ink .cs-foot-brand::before { content: '// '; color: var(--signal-amber); }

/* Contact responsive tightening */
@media (max-width: 540px) {
  .contact-form { padding: 28px 22px; }
  .form-sheet-head { margin: -28px -22px 0; padding: 12px 22px; }
  .contact-side--ink { padding: 28px 22px; }
  .contact-side--ink .cs-sheet-head { margin: -28px -22px 24px; padding: 12px 22px; }
}

/* ---------- 24c. Contact — multi-step intake form ------- */

/* Three-column progress rail + completed-step state */
.form-progress--three { grid-template-columns: repeat(3, 1fr); }
.form-progress .fp-step.is-done {
  border-top-color: var(--signal-amber);
  color: var(--ink);
}
.form-progress .fp-step.is-done .fp-num { color: var(--signal-amber); }

/* Keep card height steady so the layout does not jump between steps */
.contact-form--steps { min-height: 460px; display: flex; flex-direction: column; }

/* Each step is a fieldset; only the active one shows.
   Motion is the JS-driven card flip (setupContactForm), which sets
   inline transform/opacity per step. Backface-hidden + centered
   origin give the flip a clean edge-on midpoint. */
.form-step {
  display: none;
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0; /* allow grid children to shrink inside fieldset */
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.form-step.is-active { display: block; }

/* Step heading + subhead */
.step-legend {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 4px 0 6px;
}
.step-sub {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 28px;
}

/* Big, visible question labels in Space Grotesk */
.q-block { margin-bottom: 26px; }
.form-row.two .q-block { margin-bottom: 0; }
.q-block label.q {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 14px;
}
.q-block label.q .req { color: var(--signal-amber); margin-left: 4px; font-weight: 600; }

/* Inline validation */
.form-row input.is-invalid,
.form-row select.is-invalid,
.form-row textarea.is-invalid { border-color: var(--leak-red); }
.q-error {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--leak-red);
}

/* Step navigation row */
.form-nav {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.form-nav--end { justify-content: flex-end; }
.form-nav .btn { padding: 14px 26px; }

/* Back button — secondary on light surface */
.btn-back {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-back:hover { background: var(--ink); color: var(--offwhite); }
.arrow--back { display: inline-block; }

/* Submitted screen — stamp + redo */
.contact-success .cs-stamp {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal-amber);
  margin-bottom: 16px;
}
.btn-redo {
  margin-top: 28px;
  background: transparent;
  border: 1px solid var(--hairline-dark);
  color: var(--offwhite);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 12px 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-redo:hover { border-color: var(--signal-amber); color: var(--signal-amber); }

@media (max-width: 540px) {
  .step-legend { font-size: 24px; }
  .q-block label.q { font-size: 18px; }
  .contact-form--steps { min-height: 0; }
  .form-nav .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- 25. Legal page ------------------------------- */
.legal {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 0;
}
.legal h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  margin: 48px 0 16px;
  letter-spacing: -0.02em;
}
.legal h2:first-child { margin-top: 0; }
.legal p,
.legal li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--body-ink);
  margin: 0 0 16px;
}
.legal ul { padding-left: 20px; list-style: disc; margin-bottom: 20px; }
.legal .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--edge);
}

/* =========================================================
   27. How It Works rebuild (Sheet 02)
   Sticky sub-nav, video frame, case files, blueprint stub
   ========================================================= */

/* ---------- 27.1 Sticky sub-nav ------------------------- */
.subnav {
  position: sticky;
  top: 76px;
  z-index: 40;
  background: rgba(10, 14, 20, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hairline-dark);
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}
.subnav.is-revealed {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.subnav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}
.subnav-stamp {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  flex-shrink: 0;
}
.subnav-list {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.subnav-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--body-on-dark);
  padding: 6px 4px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.subnav-list a:hover { color: var(--offwhite); }
.subnav-list a.is-active {
  color: var(--signal-amber);
  border-bottom-color: var(--signal-amber);
}
.subnav-num {
  font-weight: 700;
  color: var(--signal-amber);
}
@media (max-width: 768px) {
  .subnav-inner { gap: 16px; padding: 10px var(--gutter-mobile); }
  .subnav-stamp { display: none; }
  .subnav-list { gap: 14px; flex-wrap: wrap; }
  .subnav-list a { font-size: 10px; letter-spacing: 0.14em; }
  .subnav-label { display: none; }
  .subnav-num { font-size: 12px; }
}

/* ---------- 27.2 Video section ------------------------- */
.video-section {
  padding-top: 88px;
  padding-bottom: 96px;
}
.video-section .section-head {
  margin-bottom: 40px;
}

/* Merged hero + video on how-it-works: center the hero heading inside
   the gridlined page-hero and keep the gap above the video stage. */
.page-hero--video {
  padding-top: 56px;
}
.page-hero--video .section-head {
  margin-bottom: 40px;
}
.page-hero--video h1 {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
/* .page-hero p sets margin:0, which beats .section-head--center's auto
   margins and pins the subhead left. Re-center it here. */
.page-hero--video .section-head--center p {
  margin-left: auto;
  margin-right: auto;
}

.video-stage {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  /* 120px horizontal/vertical padding gives the particle canvas
     breathing room around the 960px-wide frame inside. Negative
     vertical margins prevent the padding from inflating section flow. */
  padding: 120px 120px;
  margin-top: -120px;
  margin-bottom: -120px;
}

.video-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
/* During the rush-in, lift the canvas above the video frame (z-index 2)
   so the converging particles overlay the playing video instead of being
   clipped at the frame edge. pointer-events stays none so the video and
   its controls remain interactive underneath. */
.video-particles.is-overlay {
  z-index: 5;
}

.video-frame {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border: 1px solid rgba(168, 181, 199, 0.4);
  outline: 1px solid rgba(168, 181, 199, 0.22);
  outline-offset: 8px;
}

@media (max-width: 768px) {
  .video-stage {
    padding: 64px 24px;
    margin-top: -64px;
    margin-bottom: -64px;
  }
}

.video-frame__chrome {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.video-frame__chip {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  padding: 0 8px;
  background: var(--signal-amber);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.video-frame__stamp {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.video-frame__stamp--tr { top: 18px; right: 16px; color: var(--signal-amber); }
.video-frame__stamp--bl { bottom: 16px; left: 16px; }
.video-frame__stamp--br {
  bottom: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--signal-amber);
}
.video-frame__tick {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--signal-amber);
}

.video-frame__canvas {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}

/* Real video element. Letterboxes vertical content inside the 16:9 frame
   against the ink background, so the chrome reads consistently regardless
   of source aspect ratio. */
.video-frame__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* `cover` fills the 16:9 frame by cropping top/bottom of vertical sources.
     For the final 16:9 horizontal video this becomes a no-op. If you need
     to bias the crop up or down, set `object-position: center 30%` etc. */
  object-fit: cover;
  object-position: center center;
  background: var(--ink);
  display: block;
  z-index: 1;
  /* Poster frame is visible from the start (overlay grid + play button sit on
     top) so the particle handoff lands on a real thumbnail, not a blank frame.
     The video frames replace the poster seamlessly once playback begins. */
  opacity: 1;
  transition: opacity 220ms var(--ease-out);
}
.video-frame.is-playing .video-frame__video { opacity: 1; }
.video-frame.is-playing .video-frame__grid,
.video-frame.is-playing .video-frame__play,
.video-frame.is-playing .video-frame__title { opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease-out); }
/* While the clip buffers on first play, pulse the play button so the click
   reads as registered during the load lag (before playback actually begins). */
.video-frame.is-buffering .video-frame__play { animation: vfpBuffer 1s ease-in-out infinite; }
@keyframes vfpBuffer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .video-frame.is-buffering .video-frame__play { animation: none; }
}

.video-frame__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.18;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(168, 181, 199, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 181, 199, 0.18) 1px, transparent 1px);
  background-size: 32px 32px;
}

.video-frame__play {
  position: relative;
  z-index: 2;
  width: 96px;
  height: 96px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.video-frame__play svg { width: 100%; height: 100%; display: block; }
.video-frame__play .vfp-ring {
  fill: none;
  stroke: var(--signal-amber);
  stroke-width: 2.5;
  transition: fill var(--dur-fast) var(--ease-out);
}
.video-frame__play .vfp-triangle {
  fill: var(--signal-amber);
  transition: fill var(--dur-fast) var(--ease-out);
}
.video-frame__play:hover .vfp-ring,
.video-frame__play:focus-visible .vfp-ring { fill: var(--signal-amber); }
.video-frame__play:hover .vfp-triangle,
.video-frame__play:focus-visible .vfp-triangle { fill: var(--ink); }
.video-frame__play:focus-visible {
  outline: 2px solid var(--offwhite);
  outline-offset: 6px;
}

.video-frame__title {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  text-align: center;
  padding: 0 24px;
}

.video-caption-row {
  max-width: 960px;
  margin: 18px auto 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.video-caption-left { color: var(--body-on-dark); }
.video-caption-rule {
  max-width: 960px;
  margin: 10px auto 0;
  height: 1px;
  background: var(--hairline-dark);
}

@media (max-width: 768px) {
  .video-section { padding-top: 64px; padding-bottom: 72px; }
  .video-frame { outline-offset: 4px; }
  .video-frame__chip { top: 10px; left: 10px; height: 20px; font-size: 11px; }
  .video-frame__stamp { font-size: 9px; letter-spacing: 0.16em; }
  .video-frame__stamp--tr { top: 12px; right: 10px; }
  .video-frame__stamp--bl { bottom: 10px; left: 10px; }
  .video-frame__stamp--br { bottom: 10px; right: 10px; }
  .video-frame__play { width: 64px; height: 64px; }
  .video-frame__title { font-size: 10px; letter-spacing: 0.18em; }
  .video-caption-row { flex-direction: column; gap: 6px; }
}

/* ---------- 27.3 Sample blueprint stub card ------------ */
.blueprint-card {
  margin-top: 64px;
  background: var(--surface);
  border: 1px solid var(--edge);
  outline: 1px solid rgba(168, 181, 199, 0.22);
  outline-offset: 6px;
  max-width: 720px;
}
.blueprint-card__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--edge);
  background: var(--drafting-paper);
}
.blueprint-card__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  background: var(--ink);
  color: var(--signal-amber);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.blueprint-card__stamp {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.blueprint-card__body {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.blueprint-card__body p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--body-ink);
  margin: 0;
  max-width: 520px;
}

/* ---------- 27.4 Case-file grid ------------------------ */
.case-file-grid {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.case-file {
  background: var(--surface);
  border: 1px solid var(--edge);
  outline: 1px solid rgba(168, 181, 199, 0.22);
  outline-offset: 6px;
  position: relative;
}

.case-file__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 28px 24px;
  border-bottom: 1px solid var(--edge);
  background: var(--drafting-paper);
}
.case-file__stamp {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.case-file__stamp::before { content: '// '; color: var(--signal-amber); }
.case-file__title-row {
  display: flex;
  align-items: baseline;
  gap: 24px;
}
.case-file__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--signal-amber);
  flex-shrink: 0;
}
.case-file__num-total {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 500;
}
.case-file__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
}

.case-file__body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  padding: 32px 28px 40px;
  align-items: start;
}
.case-file--reverse .case-file__body { grid-template-columns: 1fr 1.4fr; }
.case-file--reverse .case-file__col--text { order: 2; }
.case-file--reverse .case-file__col--flow { order: 1; }

.case-file__col--text {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.case-file__block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-file__marker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal-amber);
}
.case-file__block p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--body-ink);
  margin: 0;
  max-width: 560px;
}

.case-file__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px;
  background: var(--ink);
  color: var(--offwhite);
  border-left: 3px solid var(--signal-amber);
  max-width: 420px;
}
.case-file__stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--signal-amber);
}
.case-file__stat-arrow {
  color: var(--offwhite);
  margin: 0 4px;
}
.case-file__stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--body-on-dark);
}

.case-file__tools-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.case-file__tool {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--drafting-paper);
  border: 1px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink);
  font-weight: 600;
}
.case-file__tool--service {
  background: transparent;
  border-color: var(--signal-amber);
  color: var(--signal-amber);
  letter-spacing: 0.14em;
  font-weight: 500;
}

.case-file__col--flow .flow-card {
  background: var(--drafting-paper-alt);
}

/* Mobile: stack everything */
@media (max-width: 900px) {
  .case-file__body { grid-template-columns: 1fr; gap: 32px; padding: 28px 22px 32px; }
  .case-file--reverse .case-file__body { grid-template-columns: 1fr; }
  .case-file--reverse .case-file__col--text,
  .case-file--reverse .case-file__col--flow { order: initial; }
  .case-file__head { padding: 14px 22px 20px; }
  .case-file__num { font-size: 48px; }
  .case-file__title-row { gap: 18px; }
  .case-file-grid { gap: 40px; }
}

/* ---------- 27.5 "More coming" rule ------------------- */
.case-file-more {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.case-file-more__rule {
  display: block;
  width: 100%;
  max-width: 720px;
  height: 1px;
  background: var(--edge);
  position: relative;
}
.case-file-more__rule::before,
.case-file-more__rule::after {
  content: '';
  position: absolute;
  top: -3px;
  width: 7px;
  height: 7px;
  background: var(--signal-amber);
}
.case-file-more__rule::before { left: 0; }
.case-file-more__rule::after { right: 0; }
.case-file-more__text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin: 0;
}

/* ---------- 26. Reduced motion --------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  [data-reveal],
  [data-stagger] > *,
  .flow-steps[data-flow-reveal] .flow-step,
  .hero h1 .word,
  .hero-sub,
  .hero-cta {
    opacity: 1 !important;
    transform: none !important;
  }
}