/* ==========================================================================
   RawROI — Design System
   Raw Data. Real Revenue. RawROI.
   --------------------------------------------------------------------------
   Contents
   01. Tokens
   02. Reset & base
   03. Typography
   04. Layout primitives
   05. Navigation
   06. Buttons
   07. Cards & surfaces
   08. Hero
   09. Section components
   10. System diagram
   11. Evidence
   12. FAQ
   13. Forms
   14. Footer
   15. Editorial / article
   16. Cursor
   17. Motion & reveal
   18. Responsive
   19. Reduced motion & print
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   ========================================================================== */
:root {
  /* Core palette — locked */
  --obsidian: #0D0D0D;      /* dominant background */
  --slate: #141414;         /* cards, panels, surfaces */
  --slate-raised: #181818;  /* nested surfaces */

  /* Extended tonal range.
     The palette stays locked, but two tones 3 points apart cannot build depth.
     These sit either side of the locked values so sections can actually read as
     foreground and background rather than one flat sheet. */
  --pit: #080808;           /* deepest recess — behind everything */
  --trench: #0A0A0A;        /* recessed bands */
  --riser: #121212;         /* lifted band */
  --ridge: #161616;         /* highest surface */
  --white: #FFFFFF;         /* headlines, nav, key UI */
  --iron: #8A8A8A;          /* body copy, metadata — 5.63:1 on obsidian */
  --iron-dim: #808080;      /* tertiary metadata — 4.92:1 on obsidian (AA) */
  --edge: #222222;          /* dividers, structural lines */
  --edge-soft: #1B1B1B;     /* faintest rules */
  --orange: #BC3823;        /* Blood Orange — max ~3% of interface */
  --orange-text: #D65440;   /* accessible variant, small text on dark only */
  --orange-deep: #9A2C1A;   /* pressed state */

  /* Contrast note (WCAG 2.2 AA, 4.5:1 for normal text):
     The brief suggested #D24A32 as the brighter orange for small text, but it
     measures 4.41:1 on #0D0D0D — marginally short. #D65440 reads the same at a
     glance and clears AA on both #0D0D0D (4.81:1) and #141414 (4.56:1).
     Likewise --iron-dim was lifted from #6A6A6A (3.59:1, fails) to #808080.
     --orange (#BC3823) is 3.45:1 and is therefore never used for small text —
     only as a CTA background (white on it is 5.63:1), for the large display
     "Profit" in the hero, and for non-informational rules and markers. */

  /* Type */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* Responsive type scale */
  --fs-mono: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem);
  --fs-sm: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --fs-body: clamp(0.9375rem, 0.91rem + 0.16vw, 1.0625rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  --fs-h5: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --fs-h4: clamp(1.125rem, 1.06rem + 0.32vw, 1.375rem);
  --fs-h3: clamp(1.375rem, 1.24rem + 0.62vw, 1.875rem);
  --fs-h2: clamp(1.75rem, 1.44rem + 1.42vw, 3rem);
  --fs-h1: clamp(2.25rem, 1.66rem + 2.7vw, 4.5rem);
  --fs-statement: clamp(1.625rem, 1.16rem + 2.1vw, 3.25rem);

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Section rhythm — deliberately varied, not uniform */
  --section-y: clamp(4rem, 3rem + 5vw, 8rem);
  --section-y-tight: clamp(3rem, 2.4rem + 3vw, 5rem);
  --section-y-loose: clamp(5rem, 3.6rem + 7vw, 11rem);

  /* Structure */
  --maxw: 1280px;
  --maxw-narrow: 780px;
  --maxw-mid: 1040px;
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --nav-h: 76px;

  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.4s;

  /* RAW SIGNAL motion tokens — one weighted language across the site. */
  --motion-quiet: 220ms;
  --motion-system: 480ms;
  --motion-signature: 820ms;
  --motion-page: 340ms;
  --ease-signal: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-lock: cubic-bezier(0.2, 0.82, 0.25, 1);
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--iron);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

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

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--orange-text);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--orange); color: var(--white); }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 200;
  background: var(--white);
  color: var(--obsidian);
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--white);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); letter-spacing: -0.035em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.028em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); line-height: 1.25; }
h5 { font-size: var(--fs-h5); line-height: 1.3; }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: #A5A5A5;
  max-width: 62ch;
}

strong, b { color: #C9C9C9; font-weight: 600; }

.accent { color: var(--orange); }

/* Monospaced technical markers — a signature of the system */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--iron-dim);
  font-weight: 400;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--iron);
  margin: 0 0 var(--sp-5);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--orange);
  flex: 0 0 auto;
}

/* Section index number, e.g. 04 / SERVICES */
.section-index {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--iron-dim);
  display: block;
  margin-bottom: var(--sp-4);
}
.section-index b { color: var(--orange-text); font-weight: 400; }

/* ==========================================================================
   04. LAYOUT PRIMITIVES
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--maxw-narrow); }
.wrap--mid { max-width: var(--maxw-mid); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: var(--section-y-tight); }
.section--loose { padding-block: var(--section-y-loose); }
.section--surface { background: #101010; }

.rule {
  height: 1px;
  background: var(--edge);
  border: 0;
  margin: 0;
}

/* Structural technical rule with a label */
.rule-labelled {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
}
.rule-labelled::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--edge);
}

.section-head { max-width: 68ch; margin-bottom: var(--sp-8); }
.section-head--wide { max-width: 82ch; }

/* Asymmetric editorial split — avoids the uniform grid look */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--sticky > :first-child { position: sticky; top: calc(var(--nav-h) + 2rem); }

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

/* Subtle technical grid backdrop */
.gridlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: clamp(60px, 8vw, 110px) clamp(60px, 8vw, 110px);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
}

/* ==========================================================================
   05. NAVIGATION
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
}
.nav.is-scrolled {
  background: rgba(13, 13, 13, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--edge);
}

.nav__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

.nav__logo { display: flex; align-items: center; flex: 0 0 auto; position: relative; }
.nav__logo img { height: 26px; width: auto; transition: transform var(--motion-system) var(--ease-lock); }
.nav__logo::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 15px;
  height: 15px;
  border: 1px solid transparent;
  border-radius: 50%;
  translate: 0 -50%;
  pointer-events: none;
}
.nav__logo:hover img,
.nav__logo:focus-visible img { transform: translateX(2px); }
.nav__logo:hover::after,
.nav__logo:focus-visible::after { animation: logo-route-pulse 460ms var(--ease-lock) 1; }
@keyframes logo-route-pulse {
  0% { border-color: transparent; scale: 0.72; opacity: 0; }
  45% { border-color: var(--orange); opacity: 0.8; }
  100% { border-color: transparent; scale: 1.45; opacity: 0; }
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 0.5rem + 1.6vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  font-size: var(--fs-sm);
  color: var(--iron);
  letter-spacing: 0.01em;
  position: relative;
  padding-block: 0.5rem;
  transition: color 0.25s var(--ease);
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--white); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: var(--sp-4); flex: 0 0 auto; }

/* Mobile toggle */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: border-color 0.25s var(--ease);
}
.nav__toggle:hover { border-color: #333; }
.nav__toggle span {
  position: absolute;
  left: 50%;
  width: 18px; height: 1.5px;
  background: var(--white);
  transform: translateX(-50%);
  transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
}
.nav__toggle span:nth-child(1) { top: 17px; }
.nav__toggle span:nth-child(2) { top: 21.5px; }
.nav__toggle span:nth-child(3) { top: 26px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateX(-50%) translateY(4.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateX(-50%) translateY(-4.5px) rotate(-45deg); }

/* Mobile drawer */
.nav__drawer {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  background: var(--obsidian);
  border-top: 1px solid var(--edge);
  padding: var(--sp-7) var(--gutter) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease), visibility 0.32s;
  overflow-y: auto;
  z-index: 99;
}
.nav__drawer.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav__drawer a.nav__drawer-link {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  color: var(--white);
  padding-block: 0.65rem;
  border-bottom: 1px solid var(--edge-soft);
  display: flex;
  align-items: baseline;
  gap: 1rem;
  letter-spacing: -0.02em;
}
.nav__drawer a.nav__drawer-link i {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-style: normal;
  color: var(--iron-dim);
  letter-spacing: 0.1em;
}
.nav__drawer .btn { margin-top: var(--sp-5); justify-content: center; }
.nav__drawer-meta { margin-top: auto; padding-top: var(--sp-6); }

body.nav-open { overflow: hidden; }

/* ==========================================================================
   06. BUTTONS
   ========================================================================== */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: var(--edge);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.25s var(--ease);
  will-change: transform;
  text-align: center;
}
.btn svg { flex: 0 0 auto; transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

/* Primary — Blood Orange, used sparingly */
.btn--primary {
  --btn-bg: var(--orange);
  --btn-fg: var(--white);
  --btn-bd: var(--orange);
  font-weight: 600;
}
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--orange-deep);
  transform: translateY(101%);
  transition: transform 0.4s var(--ease-out);
  z-index: -1;
}
.btn--primary:hover::before { transform: translateY(0); }

/* Secondary — outline */
.btn--ghost { --btn-bd: #2E2E2E; }
.btn--ghost:hover { --btn-bd: #4A4A4A; background: rgba(255,255,255,0.025); }

/* Tertiary — inline text link with arrow.
   Vertical padding brings it to a >=24px tap target (WCAG 2.2 SC 2.5.8);
   the underline is offset to sit just under the text, not the padding box. */
.btn--link {
  padding: 0.34rem 0;
  border: 0;
  border-radius: 0;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow: visible;
}
.btn--link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 1px;
  width: 100%; height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.btn--link:hover::after { transform: scaleX(1); }

.btn--sm { padding: 0.6rem 1.1rem; font-size: var(--fs-sm); }
.btn--wide { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}

/* ==========================================================================
   07. CARDS & SURFACES
   ========================================================================== */
.card {
  background: var(--slate);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  position: relative;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.card:hover { border-color: #2C2C2C; }

.card__num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--orange-text);
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: var(--sp-4);
}
.card__title { color: var(--white); font-family: var(--font-display); font-size: var(--fs-h4); margin: 0 0 var(--sp-3); letter-spacing: -0.02em; line-height: 1.22; }
.card__body { font-size: var(--fs-sm); line-height: 1.65; margin: 0; }

/* Hairline grid of cards sharing borders — reads as an instrument panel */
.panelgrid {
  display: grid;
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  overflow: hidden;
}
.panelgrid > * {
  background: var(--slate);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  margin: 0;
  transition: background 0.35s var(--ease);
}
.panelgrid > *:hover { background: var(--slate-raised); }
.panelgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panelgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Contrast columns (Fragmented model vs RawROI model) */
.contrast {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  overflow: hidden;
}
.contrast__col {
  background: var(--slate);
  padding: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
}
.contrast__col--ours { background: #151313; }
.contrast__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--iron-dim);
  margin-bottom: var(--sp-2);
}
.contrast__title { font-size: var(--fs-h4); margin-bottom: var(--sp-5); }
.contrast__col--ours .contrast__title { color: var(--white); }
.contrast__col--ours .contrast__label { color: var(--orange-text); }

/* Marked list — technical ticks, not emoji */
.marklist { list-style: none; margin: 0; padding: 0; }
.marklist li {
  position: relative;
  padding-left: 1.6rem;
  padding-block: 0.55rem;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--edge-soft);
  line-height: 1.55;
}
.marklist li:last-child { border-bottom: 0; }
.marklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.05em;
  width: 8px; height: 1px;
  background: var(--iron-dim);
}
.marklist--ours li::before { background: var(--orange); width: 10px; }
.marklist--ours li { color: #A8A8A8; }
.marklist--plain li { border-bottom: 0; padding-block: 0.35rem; }

/* Function tags (operating team) */
.tags { display: flex; flex-wrap: wrap; gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: var(--r-md); overflow: hidden; }
.tag {
  background: var(--slate);
  padding: 1.1rem 1.35rem;
  flex: 1 1 220px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #B4B4B4;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.tag:hover { background: var(--slate-raised); color: var(--white); }
.tag::before { content: ""; width: 5px; height: 5px; background: var(--orange); flex: 0 0 auto; }

/* Quick links row — used on the 404 page to offer a way back into the site */
.quicklinks {
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--edge);
}
.quicklinks a {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--iron);
  position: relative;
  display: inline-block;
  /* keeps the row a >=24px tap target (WCAG 2.2 SC 2.5.8) */
  padding-block: 0.45rem;
  transition: color 0.25s var(--ease);
}
.quicklinks a::after {
  content: "";
  position: absolute;
  /* sits just under the text, not at the edge of the tap padding */
  left: 0; bottom: 0.3rem;
  width: 100%; height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.quicklinks a:hover { color: var(--white); }
.quicklinks a:hover::after { transform: scaleX(1); }

/* Editorial statement block */
.statement {
  font-family: var(--font-display);
  font-size: var(--fs-statement);
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--white);
  max-width: 22ch;
  margin: 0;
  font-weight: 600;
}
.statement--wide { max-width: 34ch; }

/* Callout / note */
.note {
  border-left: 2px solid var(--orange);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  font-size: var(--fs-sm);
  color: #9E9E9E;
  max-width: 68ch;
}
.note--box {
  border: 1px solid var(--edge);
  border-left: 2px solid var(--orange);
  border-radius: var(--r-sm);
  padding: var(--sp-5);
  background: var(--slate);
}

/* Definition rows (About: what Raw means / what ROI means) */
.defrow { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: var(--sp-6); padding-block: var(--sp-5); border-top: 1px solid var(--edge); }
.defrow dt { font-family: var(--font-display); color: var(--white); font-size: var(--fs-h5); letter-spacing: -0.015em; }
.defrow dd { margin: 0; font-size: var(--fs-sm); }

/* ==========================================================================
   08. HERO
   ========================================================================== */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(3.5rem, 2rem + 7vw, 7.5rem));
  padding-bottom: clamp(3.5rem, 2rem + 6vw, 7rem);
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 2; }

.hero__title {
  font-size: var(--fs-h1);
  max-width: 17ch;
  margin-bottom: var(--sp-5);
}
.hero__title .accent { color: var(--orange); }

.hero__lead { max-width: 58ch; margin-bottom: var(--sp-6); }

.hero__note {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  color: var(--iron-dim);
  margin-top: var(--sp-5);
  max-width: 60ch;
  line-height: 1.7;
  text-transform: none;
}

/* Page hero (interior pages) — shorter, no flow diagram */
.pagehero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(3rem, 2rem + 4vw, 5.5rem));
  padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  border-bottom: 1px solid var(--edge);
  overflow: hidden;
}
.pagehero__title { max-width: 20ch; font-size: var(--fs-h1); }

/* ==========================================================================
   09. SECTION COMPONENTS
   ========================================================================== */
/* Services list — numbered editorial rows, not a card grid */
.svc-row {
  display: grid;
  /* number · icon · title · body */
  grid-template-columns: 3rem 2.25rem minmax(0, 1fr) minmax(0, 1.35fr);
  gap: var(--sp-5);
  padding-block: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  border-top: 1px solid var(--edge);
  align-items: start;
  transition: background 0.35s var(--ease);
}
.svc-row:last-of-type { border-bottom: 1px solid var(--edge); }
.svc-row:hover { background: rgba(255,255,255,0.014); }
.svc-row__num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--orange-text);
  letter-spacing: 0.1em;
  padding-top: 0.45rem;
}
.svc-row__title { font-size: var(--fs-h4); margin: 0; letter-spacing: -0.02em; }
.svc-row__body { font-size: var(--fs-sm); margin: 0; }

/* Engagement phases */
.phase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--edge);
}
.phase:last-of-type { border-bottom: 1px solid var(--edge); }
.phase__label { font-family: var(--font-display); color: var(--white); font-size: var(--fs-h5); letter-spacing: -0.015em; }
.phase__stage { display: block; font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--orange-text); letter-spacing: 0.12em; margin-bottom: var(--sp-2); }
.phase__body { font-size: var(--fs-sm); margin: 0; }

/* Big full-bleed CTA band */
.ctaband {
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  background: linear-gradient(180deg, #111111 0%, #0C0C0C 100%);
  padding-block: var(--section-y);
  position: relative;
  overflow: hidden;
}
.ctaband__title { max-width: 20ch; }

/* ==========================================================================
   10. SYSTEM DIAGRAM
   ========================================================================== */
.system {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}

.system__list { list-style: none; margin: 0; padding: 0; position: relative; }
.system__list::before {
  content: "";
  position: absolute;
  left: 11px; top: 14px; bottom: 14px;
  width: 1px;
  background: var(--edge);
}
.system__progress {
  position: absolute;
  left: 11px; top: 14px; bottom: 14px;
  width: 1px;
  background: var(--orange);
  transform: scaleY(var(--system-stage-progress, 0));
  transform-origin: top;
  transition: transform var(--motion-signature) var(--ease-lock);
}

.system__item { position: relative; }
.system__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: none;
  border: 0;
  padding: 0.7rem 0.5rem 0.7rem 0;
  cursor: pointer;
  text-align: left;
  color: var(--iron);
  transition: color 0.3s var(--ease);
  position: relative;
}
.system__btn:hover { color: var(--white); }
.system__dot {
  flex: 0 0 auto;
  width: 23px; height: 23px;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: var(--obsidian);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--iron-dim);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
  position: relative;
  z-index: 1;
}
.system__name { font-size: var(--fs-sm); font-weight: 500; letter-spacing: -0.005em; }
.system__btn[aria-selected="true"] { color: var(--white); }
.system__btn[aria-selected="true"] .system__dot { border-color: var(--orange); color: var(--white); background: var(--orange); }

.system__panel {
  background: var(--slate);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  min-height: 300px;
}
.system__panel[hidden] { display: none; }
.system__panel-idx { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--orange-text); letter-spacing: 0.14em; display: block; margin-bottom: var(--sp-4); }
.system__panel-title { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.system__panel-lead { font-size: var(--fs-body); color: #A0A0A0; margin-bottom: var(--sp-6); max-width: 58ch; }
.system__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); margin: 0; }
.system__meta dt { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--iron-dim); margin-bottom: 0.4rem; }
.system__meta dd { margin: 0; font-size: var(--fs-sm); color: #9C9C9C; line-height: 1.55; }
.system__meta .is-failure dt { color: var(--orange-text); }
.stage-signal {
  display: grid;
  grid-template-columns: auto minmax(7rem, 1fr) auto;
  gap: 1rem;
  align-items: end;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--edge);
}
.stage-signal__label { color: var(--iron-dim); font: 500 0.58rem/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.stage-signal__plot { height: 56px; display: flex; align-items: end; gap: clamp(0.35rem, 1vw, 0.8rem); padding-inline: 0.5rem; background-image: linear-gradient(to top, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 100% 18px; }
.stage-signal__bar { flex: 1 1 0; max-width: 34px; height: var(--v); background: #2A2A2A; transform: scaleY(0); transform-origin: bottom; animation: stage-signal-rise 520ms var(--ease-lock) forwards; animation-delay: calc(var(--i) * 45ms); position: relative; }
.stage-signal__bar::after { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--orange); opacity: calc(.28 + var(--i) * .12); }
.stage-signal__output { color: var(--white); text-align: right; }
@keyframes stage-signal-rise { to { transform: scaleY(1); } }

/* Detailed stage blocks (system.html) */
.stage {
  border-top: 1px solid var(--edge);
  padding-block: clamp(2rem, 1.4rem + 2vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
}
.stage:last-of-type { border-bottom: 1px solid var(--edge); }
.stage__aside { position: sticky; top: calc(var(--nav-h) + 2rem); }
.stage__idx { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--orange-text); letter-spacing: 0.14em; display: block; margin-bottom: var(--sp-3); }
.stage__title { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.stage__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); margin: 0; }
.stage__grid dt { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--iron-dim); margin-bottom: 0.4rem; }
.stage__grid dd { margin: 0 0 0.25rem; font-size: var(--fs-sm); line-height: 1.55; }
.stage__grid .full { grid-column: 1 / -1; }

/* Feedback loop diagram */
.loop { display: grid; place-items: center; padding-block: var(--sp-6); }
.loop svg { width: 100%; max-width: 560px; height: auto; overflow: visible; }
.loop__ring { fill: none; stroke: var(--edge); stroke-width: 1; }
.loop__arc { fill: none; stroke: var(--orange); stroke-width: 1.5; stroke-linecap: round; }
.loop__label { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.1em; fill: var(--iron); text-transform: uppercase; }
.loop__node { fill: var(--obsidian); stroke: #333; stroke-width: 1; }
.loop__center { font-family: var(--font-display); font-size: 15px; fill: var(--white); letter-spacing: -0.02em; }

/* ==========================================================================
   11. EVIDENCE
   ========================================================================== */
.evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-5); }

.ev-card {
  background: var(--slate);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ev-card__shot { border-bottom: 1px solid var(--edge); background: #0F0F0F; }
.ev-card__shot img { width: 100%; height: auto; display: block; }
.ev-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); flex: 1; }
.ev-card__industry { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-text); }
.ev-card dl { margin: 0; display: grid; gap: var(--sp-3); }
.ev-card dt { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--iron-dim); }
.ev-card dd { margin: 0.25rem 0 0; font-size: var(--fs-sm); line-height: 1.55; }
.ev-card__period { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--edge-soft); font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--iron-dim); letter-spacing: 0.08em; }

/* Empty-state panel shown while no verified assets exist */
.ev-empty {
  border: 1px dashed #2A2A2A;
  border-radius: var(--r-md);
  padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  background: #101010;
  max-width: 70ch;
}

/* ==========================================================================
   12. FAQ
   ========================================================================== */
.faq { border-top: 1px solid var(--edge); }
.faq__item { border-bottom: 1px solid var(--edge); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  background: none;
  border: 0;
  padding: 1.4rem 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  color: var(--white);
  letter-spacing: -0.015em;
  line-height: 1.35;
  transition: color 0.25s var(--ease);
}
.faq__q:hover { color: #D8D8D8; }
.faq__icon { flex: 0 0 auto; position: relative; width: 14px; height: 14px; margin-top: 5px; }
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  background: var(--orange);
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}
.faq__icon::before { left: 0; top: 6.5px; width: 14px; height: 1.5px; }
.faq__icon::after { left: 6.5px; top: 0; width: 1.5px; height: 14px; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(90deg); opacity: 0; }

.faq__a {
  overflow: hidden;
  height: 0;
  transition: height 0.4s var(--ease);
}
.faq__a-inner { padding-bottom: 1.5rem; max-width: 72ch; font-size: var(--fs-sm); }

/* ==========================================================================
   13. FORMS
   ========================================================================== */
.form { display: grid; gap: var(--sp-5); }

.field { display: grid; gap: 0.5rem; }
.field__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--iron);
}
.field__label .req { color: var(--orange-text); }

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--slate);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  padding: 0.85rem 1rem;
  color: var(--white);
  font-size: var(--fs-body);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
  appearance: none;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: #5A5A5A; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #2E2E2E; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--orange);
  background: var(--slate-raised);
  outline: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8A8A' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.field select option { background: var(--slate); color: var(--white); }

.field__error {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--orange-text);
  letter-spacing: 0.06em;
  min-height: 0;
  display: none;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--orange-text); }
.field.has-error .field__error { display: block; }

.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }

/* Honeypot */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form__consent { font-size: var(--fs-sm); color: var(--iron-dim); max-width: 60ch; }
.form__consent a { color: var(--iron); border-bottom: 1px solid var(--edge); }
.form__consent a:hover { color: var(--white); }
.form__submit-status { margin: -0.5rem 0 0; color: var(--iron); font: 500 0.62rem/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.form.is-submitting .btn[type="submit"] { position: relative; color: transparent; pointer-events: none; }
.form.is-submitting .btn[type="submit"] svg { opacity: 0; }
.form.is-submitting .btn[type="submit"]::before {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0;
  height: 2px;
  background: rgba(255,255,255,.16);
}
.form.is-submitting .btn[type="submit"]::after {
  content: "Submitting / secure post";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--white);
  font: 600 0.68rem/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(90deg, transparent 0 42%, rgba(255,255,255,.08) 50%, transparent 58%) 0 0 / 220% 100%;
  animation: form-signal 720ms linear infinite;
}
@keyframes form-signal { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .form.is-submitting .btn[type="submit"]::after { animation: none !important; } }

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.footer {
  border-top: 1px solid var(--edge);
  padding-block: var(--sp-8) var(--sp-6);
  background: #0B0B0B;
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--sp-7) var(--sp-6);
  padding-bottom: var(--sp-8);
}
/* The footer lockup carries the tagline, so it needs enough size for
   "ACQUISITION & GROWTH PARTNER" to stay legible — it sets at roughly 1/13th
   of the lockup width and turns to mush much below this. */
.footer__logo img {
  width: clamp(300px, 28vw, 400px);
  height: auto;
  margin-bottom: var(--sp-5);
}
.footer__pitch { font-size: var(--fs-sm); max-width: 36ch; color: var(--iron-dim); }
/* Class-based, not tag-based: the footer column headings are <h2> so the
   document never skips heading levels (they used to be <h5> straight after an
   <h2>, which jumped two levels on every page). Styling stays identical. */
.footer__col-title {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--iron-dim);
  font-weight: 400;
  margin: 0 0 var(--sp-4);
  line-height: 1.3;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
/* inline-block + padding lifts each link to a >=24px tap target
   (WCAG 2.2 SC 2.5.8) while keeping the original vertical rhythm. */
.footer__col a {
  font-size: var(--fs-sm);
  color: var(--iron);
  display: inline-block;
  padding-block: 0.28rem;
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}
.footer__col a:hover { color: var(--white); transform: translateX(3px); }

.footer__bottom {
  border-top: 1px solid var(--edge);
  padding-top: var(--sp-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.footer__mantra {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #B0B0B0;
}
.footer__mantra b { color: var(--orange-text); font-weight: 400; }
.footer__legal { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--iron-dim); letter-spacing: 0.08em; }

/* ==========================================================================
   15. EDITORIAL / ARTICLE
   ========================================================================== */
.article { max-width: 68ch; margin-inline: auto; }
.article__meta {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--iron-dim);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--edge);
}
.article__meta span:not(:last-child)::after { content: ""; }

.article h2 { font-size: var(--fs-h3); margin-top: var(--sp-8); margin-bottom: var(--sp-4); }
.article h3 { font-size: var(--fs-h4); margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.article p { margin-bottom: var(--sp-5); }
.article ul, .article ol { margin: 0 0 var(--sp-5); padding-left: 1.25rem; }
.article li { margin-bottom: 0.6rem; }
.article li::marker { color: var(--orange-text); }
.article blockquote {
  margin: var(--sp-6) 0;
  padding-left: var(--sp-5);
  border-left: 2px solid var(--orange);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--white);
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.article__lead { font-size: var(--fs-lead); color: #A5A5A5; line-height: 1.55; }

/* Insight index cards */
.insight-list { display: grid; gap: 1px; background: var(--edge); border-block: 1px solid var(--edge); }
.insight-item {
  background: var(--obsidian);
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: var(--sp-5);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem) 0;
  transition: background 0.35s var(--ease);
}
.insight-item:hover { background: #101010; }
.insight-item__title { font-size: var(--fs-h4); margin-bottom: var(--sp-3); transition: transform 0.35s var(--ease); }
.insight-item:hover .insight-item__title { transform: translateX(4px); }
.insight-item__excerpt { font-size: var(--fs-sm); margin-bottom: var(--sp-4); }

/* Prose pages (privacy/terms) */
.prose { max-width: 72ch; }
.prose h2 { font-size: var(--fs-h3); margin-top: var(--sp-7); }
.prose h3 { font-size: var(--fs-h5); margin-top: var(--sp-5); }
.prose ul { padding-left: 1.25rem; margin-bottom: var(--sp-5); }
.prose li { margin-bottom: 0.5rem; font-size: var(--fs-sm); }
.prose p { font-size: var(--fs-sm); }

/* ==========================================================================
   16. CURSOR
   ========================================================================== */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  will-change: transform;
}
.cursor-dot {
  width: 5px; height: 5px;
  background: var(--white);
  border-radius: 50%;
  margin: -2.5px 0 0 -2.5px;
}
.cursor-ring {
  width: 30px; height: 30px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  margin: -15px 0 0 -15px;
  transition: width 0.28s var(--ease), height 0.28s var(--ease),
              margin 0.28s var(--ease), border-color 0.28s var(--ease),
              opacity 0.3s var(--ease), background 0.28s var(--ease);
}
body.cursor-ready .cursor-dot,
body.cursor-ready .cursor-ring { opacity: 1; }
.cursor-ring.is-active {
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  border-color: var(--orange);
  background: rgba(188, 56, 35, 0.06);
}
.cursor-dot.is-active { opacity: 0; }

@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ==========================================================================
   17. MOTION & REVEAL
   ========================================================================== */
/* Content is visible by default. The hidden-then-revealed state is applied
   ONLY when JS has confirmed it can drive the animation (html.js-anim).
   If JS fails, is blocked, or the observer never fires, every section still
   renders normally — the animation is an enhancement, never a gate. */
.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.js-anim [data-reveal].is-visible { opacity: 1; transform: none; }

/* Text-mask reveal for statements */
.js-anim [data-reveal="mask"] { opacity: 1; transform: none; }
[data-reveal="mask"] .mask-line { display: block; overflow: hidden; }
.js-anim [data-reveal="mask"] .mask-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 0.85s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.js-anim [data-reveal="mask"].is-visible .mask-line > span { transform: none; }

/* Line-draw for structural rules */
.js-anim [data-reveal="line"] {
  opacity: 1;
  transform: none;
  transform-origin: left;
  scale: 0 1;
  transition: scale 0.9s var(--ease-out);
}
.js-anim [data-reveal="line"].is-visible { scale: 1 1; }

/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .system { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }


}

@media (max-width: 900px) {
  :root { --nav-h: 68px; }

  .nav__menu, .nav__actions .btn { display: none; }
  .nav__toggle { display: block; }

  .split, .split--even { grid-template-columns: minmax(0, 1fr); }
  .split--sticky > :first-child { position: static; }

  .contrast { grid-template-columns: minmax(0, 1fr); }
  .panelgrid--3, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* System diagram becomes an accessible one-open mobile timeline. */
  .system { grid-template-columns: minmax(0, 1fr); }
  .system__list { display: block; }
  .system__panels { display: none; }
  .system__item > .system__panel { margin: 0.35rem 0 1rem 2.05rem; min-height: 0; border-radius: 0; animation: system-panel-in var(--motion-system) var(--ease-lock) both; }
  .system__btn { min-height: 48px; }
  .system__btn[aria-expanded="true"] .system__name { color: var(--white); }
  .system__progress { display: none; }
  @keyframes system-panel-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

  .stage { grid-template-columns: minmax(0, 1fr); }
  .stage__aside { position: static; }

  .svc-row { grid-template-columns: 2.5rem 2rem minmax(0, 1fr); }
  .svc-row__body { grid-column: 3; }

  .phase { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .insight-item { grid-template-columns: minmax(0, 1fr); }
  .defrow { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
}

@media (max-width: 640px) {
  .panelgrid--2, .panelgrid--3,
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }

  .form__row { grid-template-columns: minmax(0, 1fr); }
  .system__meta, .stage__grid { grid-template-columns: minmax(0, 1fr); }
  .stage-signal { grid-template-columns: minmax(0, 1fr) auto; gap: 0.55rem 0.75rem; }
  .stage-signal__plot { grid-column: 1 / -1; grid-row: 1; min-width: 0; height: 46px; padding-inline: 0; }
  .stage-signal__label { grid-row: 2; }
  .stage-signal__output { grid-column: 2; }
  .footer__top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .btn-row .btn { width: 100%; }
  .hero__title { max-width: 100%; }
  .statement, .statement--wide { max-width: 100%; }
  .evidence-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 380px) {
  :root { --gutter: 1.1rem; }
  .tag { flex-basis: 100%; }
}

/* ==========================================================================
   19. REDUCED MOTION & PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* All content must be immediately visible and fully functional */
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-reveal="line"] { scale: 1 1 !important; }
  [data-reveal="mask"] .mask-line > span { transform: none !important; }

  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ==========================================================================
   19b. ICON SYSTEM
   --------------------------------------------------------------------------
   One sprite, referenced with <use>. Every icon is a 24x24 stroke drawing that
   inherits currentColor, so a single colour rule drives idle/active states.
   Blood Orange appears only on .ico-accent paths — the moving or critical
   detail — never on the whole glyph.
   ========================================================================== */
.icon {
  width: var(--ico-size, 24px);
  height: var(--ico-size, 24px);
  flex: 0 0 auto;
  color: var(--iron);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: color 0.35s var(--ease), transform 0.35s var(--ease);
  overflow: visible;
}
.icon--lg { --ico-size: 40px; stroke-width: 1.35; }

/* Blood Orange is reserved for the accent path only */
.icon .ico-accent { color: var(--iron); transition: color 0.35s var(--ease); }
.icon.is-active,
:hover > .icon,
button:hover .icon,
.is-active .icon { color: #C9C9C9; }
.icon.is-active .ico-accent,
button:hover .icon .ico-accent,
.is-active .icon .ico-accent,
a:hover .icon .ico-accent { color: var(--orange); }

/* Path draw-in on first reveal */
.js-anim .icon .ico-draw {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 0.9s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.js-anim .icon.is-drawn .ico-draw { stroke-dashoffset: 0; }

/* Small directional nudge on hover — no bounce, no spin.
   (.xindex__btn is a <button>, so it is already covered.) */
button:hover .icon,
a:hover .icon { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .js-anim .icon .ico-draw { stroke-dashoffset: 0 !important; transition: none !important; }
  .icon { transition: none !important; }
  button:hover .icon, a:hover .icon { transform: none !important; }
}

/* ==========================================================================
   19d. MODEL COMPARISON
   --------------------------------------------------------------------------
   The two lists are always present in the DOM (never hover-gated). The stage
   above them animates between a broken chain of isolated parts and one
   connected path, which is the argument the copy is making.
   ========================================================================== */
.compare__switch {
  display: inline-flex;
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: var(--sp-6);
}
.compare__switch button {
  background: var(--slate);
  border: 0;
  padding: 0.65rem 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--iron);
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.compare__switch button:hover { color: var(--white); }
.compare__switch button[aria-pressed="true"] { background: var(--orange); color: var(--white); }

.compare__stage {
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: var(--pit);
  padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  margin-bottom: var(--sp-6);
  overflow: hidden;
}
.compare__stage svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Nodes drift apart and dim in the fragmented state, then lock into a line */
.cmp-node rect { fill: var(--slate); stroke: #303030; stroke-width: 1; transition: stroke 0.7s var(--ease), fill 0.7s var(--ease); }
.cmp-node text { font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.08em; fill: var(--iron-dim); text-transform: uppercase; transition: fill 0.7s var(--ease); }
.cmp-node { transition: transform 0.9s var(--ease-out); }

.cmp-link { stroke: #262626; stroke-width: 1; stroke-dasharray: 3 4; transition: stroke 0.7s var(--ease), opacity 0.7s var(--ease); }
.cmp-flow { stroke: var(--orange); stroke-width: 1.75; fill: none; stroke-linecap: round; opacity: 0; transition: opacity 0.6s var(--ease); }
.cmp-return, .cmp-loop { stroke: #555; stroke-width: 0.8; fill: none; stroke-dasharray: 3 4; opacity: 0; transition: opacity 0.6s var(--ease); }
.cmp-pulse, .cmp-return-pulse { fill: var(--white); opacity: 0; }
.cmp-end rect { fill: var(--slate); stroke: #303030; stroke-width: 1; transition: stroke 0.7s var(--ease), fill 0.7s var(--ease); }

/* FRAGMENTED: parts offset vertically, links dashed and dead */
.compare__stage[data-mode="fragmented"] .cmp-node[data-i="1"] { transform: translateY(-14px); }
.compare__stage[data-mode="fragmented"] .cmp-node[data-i="2"] { transform: translateY(11px); }
.compare__stage[data-mode="fragmented"] .cmp-node[data-i="3"] { transform: translateY(-8px); }
.compare__stage[data-mode="fragmented"] .cmp-node[data-i="4"] { transform: translateY(15px); }
.compare__stage[data-mode="fragmented"] .cmp-node[data-i="5"] { transform: translateY(-11px); }
.compare__stage[data-mode="fragmented"] .cmp-node[data-i="6"] { transform: translateY(9px); }

/* CONNECTED: everything aligns, the route lights, revenue activates */
.compare__stage[data-mode="connected"] .cmp-node { transform: translateY(0); }
.compare__stage[data-mode="connected"] .cmp-node rect { stroke: #4A4A4A; }
.compare__stage[data-mode="connected"] .cmp-node text { fill: #C4C4C4; }
.compare__stage[data-mode="connected"] .cmp-link { opacity: 0; }
.compare__stage[data-mode="connected"] .cmp-flow,
.compare__stage[data-mode="connected"] .cmp-return,
.compare__stage[data-mode="connected"] .cmp-loop { opacity: 1; }
.compare__stage[data-mode="connected"] .cmp-end rect { stroke: var(--orange); fill: rgba(188,56,35,0.12); }
.compare__stage[data-mode="connected"] .cmp-pulse { animation: cmp-pulse 2.6s var(--ease) 0.35s 3; }
.compare__stage[data-mode="connected"] .cmp-return-pulse { animation: cmp-return 2.8s var(--ease) 0.9s 3; }
@keyframes cmp-pulse {
  0%   { opacity: 0; transform: translateX(0); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--cmp-dist, 560px)); }
}
@keyframes cmp-return {
  0% { opacity: 0; transform: translateX(0); }
  12% { opacity: 0.75; }
  88% { opacity: 0.75; }
  100% { opacity: 0; transform: translateX(var(--cmp-return, -416px)); }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-node, .cmp-link, .cmp-flow, .cmp-return, .cmp-loop, .cmp-end rect { transition: none !important; }
  .compare__stage[data-mode="connected"] .cmp-pulse,
  .compare__stage[data-mode="connected"] .cmp-return-pulse { animation: none !important; opacity: 1; }
}

/* ==========================================================================
   19c. INTERACTIVE INDEX (industries / capabilities)
   --------------------------------------------------------------------------
   Replaces repeated card grids: a numbered selectable list on the left driving
   one detail panel on the right. Below 900px it becomes an accordion so all
   content stays reachable without hover.
   ========================================================================== */
.xindex {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: start;
}

.xindex__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--edge); }
.xindex__item { border-bottom: 1px solid var(--edge); }

.xindex__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: none;
  border: 0;
  padding: 0.95rem 0.25rem;
  cursor: pointer;
  text-align: left;
  color: var(--iron);
  transition: color 0.3s var(--ease), padding-left 0.35s var(--ease);
  position: relative;
}
.xindex__btn::before {
  content: "";
  position: absolute;
  left: -0.25rem; top: 50%;
  width: 2px; height: 0;
  background: var(--orange);
  transform: translateY(-50%);
  transition: height 0.35s var(--ease);
}
.xindex__btn:hover { color: var(--white); }
.xindex__btn[aria-selected="true"] { color: var(--white); padding-left: 0.9rem; }
.xindex__btn[aria-selected="true"]::before { height: 60%; }

.xindex__num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  color: var(--iron-dim);
  flex: 0 0 auto;
  transition: color 0.3s var(--ease);
}
.xindex__btn[aria-selected="true"] .xindex__num { color: var(--orange-text); }
.xindex__name {
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 0.88rem + 0.28vw, 1.125rem);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

/* Detail panel */
.xindex__panel {
  background: var(--slate);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,0.9);
}
.xindex__panel[hidden] { display: none; }

.xindex__panel-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--edge);
}
.xindex__panel-title { font-size: var(--fs-h4); margin: 0; letter-spacing: -0.02em; }

.xindex__meta { margin: 0; display: grid; gap: var(--sp-4); }
.xindex__meta dt {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--iron-dim);
  margin-bottom: 0.35rem;
}
.xindex__meta dd { margin: 0; font-size: var(--fs-sm); line-height: 1.6; }
.xindex__meta .is-leak dt { color: var(--orange-text); }

/* Related stage chips */
.stagechips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.stagechip {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #B4B4B4;
  border: 1px solid var(--edge);
  border-radius: 2px;
  padding: 0.3rem 0.55rem;
  background: var(--pit);
  white-space: nowrap;
}
.stagechip b { color: var(--orange-text); font-weight: 400; }

/* On the narrowest phones a chip like "05 Conversion Infrastructure" is wider
   than the column, so let the label wrap rather than force a scrollbar. */
@media (max-width: 380px) {
  .stagechip { white-space: normal; }
}

@media (max-width: 900px) {
  /* Below 900px every panel is shown, so the selector list would repeat all
     nine names a second time. Drop the list and let the panels stand alone as
     a numbered vertical index — the same treatment the system diagram uses. */
  .xindex { grid-template-columns: minmax(0, 1fr); }
  .xindex__list { display: none; }

  .xindex__panels {
    counter-reset: xindex;
    display: grid;
    gap: var(--sp-4);
    position: relative;
    padding-left: 1.75rem;
  }
  .xindex__panels::before {
    content: "";
    position: absolute;
    left: 0; top: 1.5rem; bottom: 1.5rem;
    width: 1px;
    background: var(--edge);
  }
  /* relative, not static — the timeline dot below anchors to each panel.
     min-width:0 is required: grid items default to min-width:auto, so the
     nowrap stage chips inside would otherwise force the panel wider than its
     column and push the page into horizontal overflow at 320px. */
  .xindex__panel { position: relative; top: auto; min-width: 0; counter-increment: xindex; }
  .xindex__panel::before {
    content: "";
    position: absolute;
    left: 0; top: 2rem;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--orange);
    transform: translateX(-4px);
  }
  /* Restore the index number the hidden list was carrying */
  .xindex__panel-head::before {
    content: counter(xindex, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.12em;
    color: var(--orange-text);
    align-self: flex-start;
    padding-top: 0.35rem;
  }
}

.xindex__route { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; gap: 0.6rem; align-items: center; margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--edge); color: var(--iron-dim); font: 500 0.55rem/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.xindex__route i { height: 1px; background: var(--edge); overflow: hidden; }
.xindex__route i::after { content: ""; display: block; width: 100%; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: left; animation: xroute 520ms var(--ease-signal) forwards; }
.xindex__route b { color: var(--white); font-weight: 500; }
@keyframes xroute { to { transform: scaleX(1); } }

@media (max-width: 900px) {
  /* Real mobile accordion: each selected detail panel sits directly beneath its trigger. */
  .xindex__list { display: block; }
  .xindex__panels { display: none; }
  .xindex__item > .xindex__panel { position: relative; top: auto; margin: 0 0 var(--sp-4); border-radius: 0; box-shadow: none; }
  .xindex__item > .xindex__panel::before,
  .xindex__item > .xindex__panel .xindex__panel-head::before { display: none; }
  .xindex__btn[aria-expanded="true"] { color: var(--white); padding-left: 0.9rem; }
  .xindex__btn[aria-expanded="true"]::before { height: 60%; }
  .xindex__btn[aria-expanded="true"] .xindex__num { color: var(--orange-text); }
}
@media (max-width: 640px) {
  .xindex__route { grid-template-columns: auto 1fr auto; }
  .xindex__route span:nth-of-type(n+3), .xindex__route i:nth-of-type(n+2), .xindex__route b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .xindex__route i::after { animation: none !important; transform: scaleX(1); }
}
/* ==========================================================================
   20. ATMOSPHERE
   --------------------------------------------------------------------------
   Depth without gradients-as-decoration. Three stacked, extremely low-opacity
   layers: film grain, a directional key light, and an edge vignette. Together
   they stop the matte black reading as flat paper. All are non-interactive and
   sit behind content.
   ========================================================================== */
.atmos {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* The grain layer is deliberately oversized (inset:-50%) so its drift never
     exposes an edge — clip it here so it can never affect document width. */
  overflow: hidden;
}

/* Film grain — inline SVG turbulence, no network request, no image asset */
.atmos__grain {
  position: absolute;
  inset: -50%;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
}
/* Grain drifts almost imperceptibly so it never looks like a static texture */
.atmos__grain { animation: grain-drift 8s steps(6) infinite; }
@keyframes grain-drift {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(-3%, 2%); }
  33%  { transform: translate(2%, -3%); }
  50%  { transform: translate(-2%, -2%); }
  66%  { transform: translate(3%, 1%); }
  83%  { transform: translate(-1%, 3%); }
  100% { transform: translate(0, 0); }
}

/* Soft directional key light from upper-left — the single strongest cue that
   the surface has form. Kept under 4% or it reads as a generic software glow. */
.atmos__light {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 18% -10%, rgba(255,255,255,0.038) 0%, transparent 55%),
    radial-gradient(90% 60% at 88% 8%, rgba(188,56,35,0.030) 0%, transparent 45%);
}

/* Vignette pushes the edges back so the centre reads as the lit plane */
.atmos__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 100% at 50% 35%, transparent 45%, rgba(0,0,0,0.55) 100%);
}

/* Content sits above the atmosphere */
.nav, main, .footer { position: relative; z-index: 1; }

/* ==========================================================================
   21. SECTION RHYTHM
   --------------------------------------------------------------------------
   Replaces the mechanical light/dark stripe. Sections now differ by elevation,
   edge treatment, and width — so the page has a cadence instead of a pattern.
   ========================================================================== */
.section--recessed {
  background: var(--trench);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.028), inset 0 -1px 0 rgba(255,255,255,0.028);
}
.section--raised {
  background: linear-gradient(180deg, var(--riser) 0%, #101010 100%);
  border-block: 1px solid var(--edge);
}

/* A quiet transition band — deliberate empty beat between dense sections */
.interlude {
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
  border-block: 1px solid var(--edge-soft);
  background: var(--pit);
  overflow: hidden;
}
.interlude__inner {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  flex-wrap: wrap;
}
.interlude__mark {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--iron-dim);
  white-space: nowrap;
}
.interlude__line {
  flex: 1;
  height: 1px;
  min-width: 60px;
  background: linear-gradient(90deg, var(--edge) 0%, var(--orange) 50%, var(--edge) 100%);
  transform-origin: left;
}

/* Full-bleed editorial statement — breaks the contained-column monotony */
.manifesto {
  position: relative;
  padding-block: var(--section-y-loose);
  background: var(--pit);
  overflow: hidden;
}
.manifesto__rule {
  width: 100%;
  height: 1px;
  background: var(--edge);
  margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.5rem);
  transform-origin: left;
}
.manifesto__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: end;
}
.manifesto__lead {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.75rem);
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: var(--white);
  margin: 0;
}
.manifesto__lead em { font-style: normal; color: var(--orange); }
.manifesto__support { font-size: var(--fs-body); color: #9E9E9E; margin: 0; max-width: 54ch; }

/* ==========================================================================
   22. HERO — ASYMMETRIC SPLIT
   ========================================================================== */
/* The pitch column must clear the fold on a 1280x720 desktop, so the top
   padding is tighter here than on the interior page heroes, and the columns
   align to the top rather than centring (centring pushed the CTAs down by
   half the height difference between the two columns). */
.hero--split {
  padding-top: calc(var(--nav-h) + clamp(1.75rem, 1rem + 2.6vw, 3.5rem));
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
  align-items: start;
}

/* Left column keeps every conversion element above the fold */
.hero__pitch { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   PHILOSOPHY INSTALLATION (right column)
   Not a card: an instrument panel with a corner-bracketed frame.
   -------------------------------------------------------------------------- */
.rawprinciple {
  position: relative;
  padding: clamp(1.25rem, 1rem + 1.1vw, 1.9rem);
  background:
    linear-gradient(155deg, rgba(22,22,22,0.92) 0%, rgba(10,10,10,0.92) 100%);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.035) inset,
    0 30px 70px -30px rgba(0,0,0,0.9);
  overflow: hidden;
}

/* Technical corner brackets — reads as instrumentation, not decoration */
.rawprinciple::before,
.rawprinciple::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--orange);
  opacity: 0.65;
  pointer-events: none;
}
.rawprinciple::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.rawprinciple::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

.rawprinciple__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--edge);
}
.rawprinciple__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--iron);
  margin: 0;
}
.rawprinciple__tag b { color: var(--orange-text); font-weight: 400; }
.rawprinciple__status {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  color: var(--iron-dim);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.rawprinciple__status::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--orange);
  animation: pulse-dot 2.8s var(--ease) infinite;
}
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

.rawprinciple__quote {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.94rem + 0.62vw, 1.4375rem);
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--white);
  font-weight: 500;
  text-wrap: balance;
}
.rawprinciple__quote span { display: block; }
.rawprinciple__cite {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--iron);
  font-style: normal;
  margin-bottom: var(--sp-5);
}
.rawprinciple__cite::before { content: "— "; color: var(--orange-text); }

.rawprinciple__translation {
  display: grid;
  gap: 0.5rem;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--edge);
  margin-top: var(--sp-5);
}
.rawprinciple__row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--sp-3);
  align-items: baseline;
  font-size: var(--fs-sm);
}
.rawprinciple__row dt {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-text);
}
.rawprinciple__row dd { margin: 0; color: #9E9E9E; }

/* --------------------------------------------------------------------------
   ACQUISITION MAP — the animated metaphor
   -------------------------------------------------------------------------- */
.navmap {
  position: relative;
  margin-bottom: var(--sp-4);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  background: var(--pit);
  overflow: hidden;
}
.navmap svg { display: block; width: 100%; height: auto; }

/* On short desktop viewports the panel is trimmed further so the pitch column
   keeps its whole above-the-fold budget. */
@media (min-width: 981px) and (max-height: 860px) {
  .navmap svg { max-height: 190px; width: auto; margin-inline: auto; }
  .rawprinciple__quote { font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem); }
  .rawprinciple__translation { margin-top: var(--sp-4); }
}

.navmap__grid { stroke: rgba(255,255,255,0.05); stroke-width: 0.5; }
.navmap__sea  { fill: rgba(255,255,255,0.012); }

/* Discarded routes — the winds that lead nowhere */
.navmap__ghost {
  fill: none;
  stroke: #2A2A2A;
  stroke-width: 1;
  stroke-dasharray: 3 4;
  transform: translate(var(--nav-shift-x, 0), var(--nav-shift-y, 0));
  transition: transform var(--motion-quiet) var(--ease);
}
.navmap__ghost-end { fill: none; stroke: #2A2A2A; stroke-width: 1; }

/* The committed route */
.navmap__route {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(188,56,35,0.45));
}
.js-anim .navmap__route { stroke-dasharray: var(--rlen, 600); stroke-dashoffset: var(--rlen, 600); }
.navmap.is-live .navmap__route { animation: route-draw 2.8s var(--ease-out) 0.3s forwards; }
@keyframes route-draw { to { stroke-dashoffset: 0; } }

/* Signal travelling the committed route */
.navmap__signal { fill: var(--white); opacity: 0; }
.navmap.is-live .navmap__signal {
  animation: signal-run 4.2s var(--ease) 2.6s 2;
  offset-path: var(--route-path);
}
@keyframes signal-run {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}

.navmap__waypoint { fill: var(--pit); stroke: #3A3A3A; stroke-width: 1; }
.navmap__waypoint--live { stroke: var(--orange); }

/* Destination — profitable acquisition, not a place */
.navmap__port-ring {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1;
  opacity: 0.5;
}
.navmap.is-live .navmap__port-ring { animation: port-ping 3.4s var(--ease-out) 2; }
@keyframes port-ping {
  0%   { r: 9; opacity: 0.55; }
  70%  { r: 20; opacity: 0; }
  100% { r: 20; opacity: 0; }
}
.navmap__port-core { fill: var(--orange); }

.navmap__label {
  font-family: var(--font-mono);
  font-size: 6.5px;
  letter-spacing: 0.12em;
  fill: var(--iron-dim);
  text-transform: uppercase;
}
.navmap__label--live { fill: #C4C4C4; }
.navmap__label--port { fill: var(--orange-text); }
.navmap__coord { font-family: var(--font-mono); font-size: 5.5px; fill: #4A4A4A; letter-spacing: 0.08em; transform: translate(var(--nav-shift-x-inverse, 0), var(--nav-shift-y-inverse, 0)); transition: transform var(--motion-quiet) var(--ease); }

/* Compass rose — restrained directional geometry */
.navmap__compass { stroke: #333; stroke-width: 0.75; fill: none; }
.navmap__compass-n { fill: var(--orange); }

.navmap__scan {
  stroke: rgba(188,56,35,0.5);
  stroke-width: 0.75;
}
.navmap.is-live .navmap__scan { animation: scan-sweep 6s linear 1; transform-origin: 50% 50%; }
@keyframes scan-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ==========================================================================
   23. MOTION ADDITIONS
   ========================================================================== */
/* Pointer-following surface light on panel cards.
   main.js writes --mx/--my on hover; the panel needs its own stacking context
   for the pseudo-element to anchor, hence position:relative + isolation. */
.panelgrid > * {
  --mx: 50%;
  --my: 50%;
  position: relative;
  isolation: isolate;
}
.panelgrid > *::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(188,56,35,0.09), transparent 62%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
  z-index: -1;
}
.panelgrid > *:hover::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .panelgrid > *::before { display: none; }
}

/* Clip reveal for evidence imagery */
[data-reveal="clip"] { opacity: 1; transform: none; }
.js-anim [data-reveal="clip"] { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease-out); transition-delay: var(--delay, 0ms); }
.js-anim [data-reveal="clip"].is-visible { clip-path: inset(0 0 0 0); }
/* A deep-linked visual must not wait on IntersectionObserver before it can be read. */
.js-anim [data-reveal="clip"]:target { clip-path: inset(0 0 0 0); }

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .manifesto__body { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 640px) {
  .rawprinciple__row { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .interlude__inner { gap: var(--sp-4); }
}

/* Atmosphere and map motion must respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .atmos__grain { animation: none !important; }
  .rawprinciple__status::before { animation: none !important; }
  .navmap__route { stroke-dashoffset: 0 !important; animation: none !important; }
  .navmap__signal, .navmap__port-ring, .navmap__scan { animation: none !important; }
  .navmap__signal { opacity: 1; }
  .js-anim [data-reveal="clip"] { clip-path: none !important; }
}

/* ==========================================================================
   24. CREATIVE SIGNAL LAB + OPERATIONAL VISUALS
   ========================================================================== */
/* Speed-to-lead belongs inside Stage 06, not in a detached marketing section. */
.speed-signal {
  margin-top: var(--sp-6);
  padding: clamp(1.1rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--edge);
  background: #0A0A0A;
  overflow: hidden;
}
.speed-signal__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-5);
  align-items: end;
}
.speed-signal__head h4 {
  max-width: 34ch;
  margin-top: 0.45rem;
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.25rem);
  line-height: 1.28;
}
.speed-signal__switch,
.signal-lab__tabs {
  display: flex;
  border: 1px solid var(--edge);
  background: var(--obsidian);
}
.speed-signal__switch button,
.signal-lab__tabs button {
  min-height: 44px;
  padding: 0.75rem 1rem;
  border: 0;
  color: var(--iron);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: color 180ms var(--ease), background 180ms var(--ease);
}
.speed-signal__switch button + button,
.signal-lab__tabs button + button { border-left: 1px solid var(--edge); }
.speed-signal__switch button[aria-pressed="true"],
.signal-lab__tabs button[aria-selected="true"] {
  color: var(--white);
  background: var(--slate-raised);
  box-shadow: inset 0 -1px 0 var(--orange);
}
.speed-signal__route {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: var(--sp-6);
}
.speed-signal__line {
  position: absolute;
  top: 12px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, var(--orange), rgba(188,56,35,0.35));
  transform-origin: left;
  transition: transform 500ms var(--ease-out), opacity 250ms var(--ease);
}
.speed-signal__node {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  color: var(--iron);
  text-align: center;
  transition: opacity 280ms var(--ease), transform 350ms var(--ease), color 280ms var(--ease);
}
.speed-signal__node::before {
  content: "";
  z-index: 1;
  width: 24px;
  height: 24px;
  border: 1px solid #444;
  background: #0A0A0A;
  transform: rotate(45deg);
  transition: border-color 280ms var(--ease), background 280ms var(--ease);
}
.speed-signal__node i {
  position: absolute;
  z-index: 2;
  top: 6px;
  color: var(--iron-dim);
  font: 500 0.52rem/1 var(--font-mono);
  font-style: normal;
}
.speed-signal__node b { max-width: 12ch; font-size: 0.72rem; line-height: 1.35; font-weight: 500; }
.speed-signal[data-mode="fast"] .speed-signal__node::before { border-color: var(--orange); }
.speed-signal[data-mode="fast"] .speed-signal__node.is-outcome { color: var(--white); }
.speed-signal[data-mode="fast"] .speed-signal__node.is-outcome::before { background: var(--orange); }
.speed-signal[data-mode="delayed"] .speed-signal__line { transform: scaleX(0.48); opacity: 0.45; }
.speed-signal[data-mode="delayed"] .speed-signal__node:nth-of-type(n+4) { opacity: 0.32; transform: translateY(3px); }
.speed-signal[data-mode="delayed"] .speed-signal__node.is-outcome::before { border-style: dashed; }
.speed-signal__readout {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--edge-soft);
  color: #B4B4B4;
  font-size: var(--fs-sm);
}

/* Creative Signal Lab: conceptual direct-response structures, never fake proof. */
.signal-lab {
  margin-top: clamp(4rem, 3rem + 4vw, 7rem);
  border: 1px solid var(--edge);
  background: #090909;
  overflow: hidden;
}
.signal-lab__head {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(18rem, 1fr);
  gap: var(--sp-7);
  align-items: end;
  padding: clamp(1.4rem, 1rem + 2vw, 2.5rem);
  border-bottom: 1px solid var(--edge);
}
.signal-lab__head h3 { margin-top: 0.5rem; font-size: clamp(1.65rem, 1.3rem + 1.8vw, 2.7rem); }
.signal-lab__head > p { max-width: 58ch; justify-self: end; color: var(--iron); }
.signal-lab__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-width: 0 0 1px; }
.signal-lab__tabs button { display: flex; align-items: center; gap: 0.7rem; min-height: 56px; text-align: left; }
.signal-lab__tabs button span { color: var(--orange-text); }
.creative-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(23rem, 0.95fr);
  min-height: 610px;
  animation: creative-panel-in 420ms var(--ease-out) both;
}
.creative-panel[hidden] { display: none; }
@keyframes creative-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.creative-panel__visual {
  position: relative;
  min-height: 610px;
  overflow: hidden;
  background: #111;
}
.creative-panel__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,4,4,0.08) 20%, rgba(4,4,4,0.9) 100%);
  pointer-events: none;
}
.creative-panel__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.05);
  transition: transform 850ms var(--ease-out), filter 450ms var(--ease);
}
.creative-panel:hover .creative-panel__visual img { transform: scale(1.018); filter: saturate(0.82) contrast(1.06); }
.creative-frame {
  position: absolute;
  z-index: 2;
  left: clamp(1.2rem, 1rem + 2vw, 2.5rem);
  right: clamp(1.2rem, 1rem + 2vw, 2.5rem);
  bottom: clamp(1.2rem, 1rem + 2vw, 2.5rem);
}
.creative-frame__label {
  display: inline-flex;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(255,255,255,0.22);
  color: #D0D0D0;
  background: rgba(9,9,9,0.72);
  font: 500 0.62rem/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.creative-frame p {
  max-width: 18ch;
  margin: 0.85rem 0 1.1rem;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.25rem + 2vw, 3.1rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.creative-frame p.is-updating { animation: creative-copy 260ms var(--ease-out); }
@keyframes creative-copy { 50% { opacity: 0; transform: translateY(5px); } }
.creative-frame__cta { display: inline-flex; gap: 0.75rem; align-items: center; color: var(--white); font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.creative-frame__cta i { color: var(--orange-text); font-style: normal; }
.creative-panel__console { display: flex; flex-direction: column; padding: clamp(1.4rem, 1rem + 2vw, 2.5rem); border-left: 1px solid var(--edge); }
.hook-stack { display: grid; gap: 1px; margin-top: var(--sp-4); background: var(--edge); border: 1px solid var(--edge); }
.hook-stack button {
  min-height: 48px;
  padding: 0.85rem 1rem;
  border: 0;
  color: var(--iron);
  background: #0D0D0D;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  text-align: left;
  transition: color 180ms var(--ease), background 180ms var(--ease), padding 220ms var(--ease);
}
.hook-stack button:hover { color: var(--white); padding-left: 1.2rem; }
.hook-stack button.is-selected { color: var(--white); background: var(--slate-raised); box-shadow: inset 2px 0 0 var(--orange); }
.creative-panel__meta { margin-top: var(--sp-6); }
.creative-panel__meta div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--sp-4); padding: 0.8rem 0; border-top: 1px solid var(--edge-soft); }
.creative-panel__meta dt { color: var(--iron-dim); font: 500 0.62rem/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.creative-panel__meta dd { color: #B8B8B8; font-size: var(--fs-sm); }
.creative-panel__status { display: flex; align-items: center; gap: 0.55rem; margin-top: auto; padding-top: var(--sp-5); color: var(--iron-dim); font: 500 0.6rem/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.creative-panel__status span { width: 6px; height: 6px; background: var(--orange); }
.signal-lab__route { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; align-items: center; gap: 0.8rem; padding: 1rem clamp(1.4rem, 1rem + 2vw, 2.5rem); border-top: 1px solid var(--edge); color: var(--iron-dim); font: 500 0.58rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.signal-lab__route i { height: 1px; background: linear-gradient(90deg, var(--orange), var(--edge)); }
.signal-lab__route .is-active { color: var(--white); }

/* Evidence discipline is shown as a verification route rather than an empty box. */
.evidence-protocol { position: relative; border: 1px solid var(--edge); background: #0A0A0A; overflow: hidden; }
.evidence-protocol::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(188,56,35,0.75), transparent);
  opacity: 0;
  pointer-events: none;
}
.evidence-protocol.is-visible::after { animation: evidence-scan 1.5s var(--ease-out) 240ms 1 both; }
@keyframes evidence-scan { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.evidence-protocol__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr); gap: var(--sp-7); padding: clamp(1.4rem, 1rem + 2vw, 2.5rem); border-bottom: 1px solid var(--edge); }
.evidence-protocol__intro h3 { max-width: 28ch; margin-top: 0.6rem; font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2.05rem); }
.evidence-protocol__intro > p { color: var(--iron); }
.evidence-protocol__route { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: clamp(1.5rem, 1rem + 2vw, 2.4rem); list-style: none; }
.evidence-protocol__route::before { content: ""; position: absolute; top: 2.15rem; left: 7%; right: 7%; height: 1px; background: var(--edge); }
.evidence-protocol__route li { position: relative; display: grid; justify-items: center; gap: 0.75rem; padding: 0 0.55rem; color: var(--iron); text-align: center; }
.evidence-protocol__route span { z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #444; color: var(--orange-text); background: #0A0A0A; font: 500 0.58rem/1 var(--font-mono); }
.evidence-protocol__route b { max-width: 16ch; font-size: 0.72rem; line-height: 1.4; font-weight: 500; }
.evidence-protocol__foot { display: flex; justify-content: space-between; gap: var(--sp-5); align-items: center; padding: 1.1rem clamp(1.4rem, 1rem + 2vw, 2.5rem); border-top: 1px solid var(--edge); }
.evidence-protocol__foot p { max-width: 60ch; color: var(--iron-dim); font-size: var(--fs-sm); }

/* Specialist coordination map: operating system, not employee org chart. */
.ops-map { margin-top: var(--sp-6); }
.ops-map__field {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(5rem, auto));
  gap: 1px;
  padding: 1px;
  border: 1px solid var(--edge);
  background: var(--edge);
}
.ops-map__core { grid-column: 2; grid-row: 2; position: relative; display: grid; place-content: center; min-height: 8rem; padding: 1rem; color: var(--white); background: #090909; text-align: center; }
.ops-map__core span { color: var(--iron-dim); font: 500 0.58rem/1 var(--font-mono); letter-spacing: 0.09em; text-transform: uppercase; }
.ops-map__core b { margin-top: 0.55rem; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.05; text-transform: uppercase; }
.ops-map__core i { position: absolute; right: 0.8rem; bottom: 0.8rem; width: 7px; height: 7px; background: var(--orange); box-shadow: 0 0 0 5px rgba(188,56,35,0.08); }
.ops-map__field button { min-height: 5rem; padding: 0.85rem; border: 0; color: var(--iron); background: #111; font: 500 0.64rem/1.35 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; transition: color 180ms var(--ease), background 180ms var(--ease); }
.ops-map__field button:hover,
.ops-map__field button:focus-visible,
.ops-map__field button.is-active { color: var(--white); background: var(--slate-raised); box-shadow: inset 0 0 0 1px #343434; }
.ops-map__field button:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.ops-map__field button:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.ops-map__field button:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.ops-map__field button:nth-of-type(4) { grid-column: 3; grid-row: 2; }
.ops-map__field button:nth-of-type(5) { grid-column: 3; grid-row: 3; }
.ops-map__field button:nth-of-type(6) { grid-column: 2; grid-row: 3; }
.ops-map__field button:nth-of-type(7) { grid-column: 1; grid-row: 3; }
.ops-map__field button:nth-of-type(8) { grid-column: 1; grid-row: 2; }
.ops-map__readout { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--sp-4); padding: 1rem 1.1rem; border: 1px solid var(--edge); border-top: 0; background: #0A0A0A; }
.ops-map__readout span { color: var(--orange-text); font: 500 0.62rem/1.5 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; }
.ops-map__readout b { color: #B8B8B8; font-size: var(--fs-sm); font-weight: 400; }

.ops-map__field { position: relative; isolation: isolate; }
.ops-map__links { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ops-map__links path { fill: none; stroke: #303030; stroke-width: 0.28; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; transition: stroke var(--motion-system) var(--ease), opacity var(--motion-system) var(--ease); }
.ops-map__links path.is-active { stroke: var(--orange); stroke-width: 0.55; animation: ops-data-in 760ms linear infinite; }
.ops-map__core, .ops-map__field button { position: relative; z-index: 1; }
.ops-map.is-focused .ops-map__field button:not(.is-active) { opacity: 0.48; }
.ops-map__field button { transition: color var(--motion-quiet) var(--ease), background var(--motion-quiet) var(--ease), opacity var(--motion-system) var(--ease); }
.ops-map__readout { grid-template-columns: 10rem minmax(0, 1fr) auto; align-items: center; }
.ops-map__readout em { color: var(--iron-dim); font: 500 0.58rem/1.4 var(--font-mono); font-style: normal; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }
@keyframes ops-data-in { to { stroke-dashoffset: -14; } }
@media (max-width: 640px) {
  .ops-map__links { display: none; }
  .ops-map__readout { grid-template-columns: minmax(0, 1fr); }
  .ops-map__readout em { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .ops-map__links path.is-active { animation: none !important; } }
/* The existing engagement phases gain one progressive route. */
.engagement-path { position: relative; padding-left: 2.4rem; }
.engagement-path__track { position: absolute; top: 0; bottom: 0; left: 0.55rem; width: 1px; background: var(--edge); }
.engagement-path__track i { display: block; width: 1px; height: 100%; background: var(--orange); transform: scaleY(var(--engagement-progress, 0)); transform-origin: top; transition: transform 650ms var(--ease-out); }
.engagement-path .phase { position: relative; }
.engagement-path .phase::before { content: ""; position: absolute; top: 1.75rem; left: -2.15rem; width: 9px; height: 9px; border: 1px solid #555; background: var(--obsidian); transform: rotate(45deg); transition: border-color 220ms var(--ease), background 220ms var(--ease); }
.engagement-path .phase.is-active::before { border-color: var(--orange); background: var(--orange); }

@media (max-width: 900px) {
  .signal-lab__head,
  .creative-panel,
  .evidence-protocol__intro { grid-template-columns: minmax(0, 1fr); }
  .signal-lab__head > p { justify-self: start; }
  .creative-panel__visual { min-height: 540px; }
  .creative-panel__console { border-left: 0; border-top: 1px solid var(--edge); }
  .evidence-protocol__route { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 1.7rem; }
  .evidence-protocol__route::before { display: none; }
  .speed-signal__head { grid-template-columns: minmax(0, 1fr); }
  .speed-signal__switch { width: max-content; max-width: 100%; }
}

@media (max-width: 640px) {
  .signal-lab__tabs { grid-template-columns: minmax(0, 1fr); }
  .signal-lab__tabs button + button { border-left: 0; border-top: 1px solid var(--edge); }
  .creative-panel__visual { min-height: 0; aspect-ratio: 4 / 5; }
  .creative-panel__meta div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .signal-lab__route { grid-template-columns: auto 1fr auto; row-gap: 0.7rem; }
  .signal-lab__route span:nth-of-type(n+4),
  .signal-lab__route i:nth-of-type(n+3) { display: none; }
  .speed-signal__route { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; padding-left: 1.8rem; }
  .speed-signal__line { top: 4%; bottom: 4%; left: 11px; right: auto; width: 1px; height: auto; transform-origin: top; }
  .speed-signal[data-mode="delayed"] .speed-signal__line { transform: scaleY(0.48); }
  .speed-signal__node { grid-template-columns: 24px minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; }
  .speed-signal__node i { left: 8px; top: 9px; }
  .speed-signal__node b { max-width: none; }
  .evidence-protocol__route { grid-template-columns: minmax(0, 1fr); padding-left: 3.8rem; }
  .evidence-protocol__route li { grid-template-columns: 28px minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; }
  .evidence-protocol__route b { max-width: none; }
  .evidence-protocol__foot { align-items: flex-start; flex-direction: column; }
  .ops-map__field { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .ops-map__core { grid-column: 1 / -1; grid-row: auto; }
  .ops-map__field button:nth-of-type(n) { grid-column: auto; grid-row: auto; }
  .ops-map__readout { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .engagement-path { padding-left: 1.8rem; }
  .engagement-path .phase::before { left: -1.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .creative-panel,
  .creative-frame p.is-updating,
  .evidence-protocol.is-visible::after { animation: none !important; }
  .creative-panel__visual img,
  .speed-signal__line,
  .speed-signal__node,
  .engagement-path__track i { transition: none !important; }
  .creative-panel:hover .creative-panel__visual img { transform: none !important; }
}

/* ==========================================================================
   24B. CAPABILITY CONSOLE
   ========================================================================== */
.cap-console {
  display: grid;
  grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.28fr);
  margin-top: var(--sp-7);
  border: 1px solid var(--edge);
  background: var(--pit);
  overflow: hidden;
}
.cap-console__index { margin: 0; padding: 0; list-style: none; border-right: 1px solid var(--edge); background: #0B0B0B; }
.cap-console__index li + li { border-top: 1px solid var(--edge-soft); }
.cap-console__index button {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 24px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  min-height: 72px;
  padding: 0.9rem 1rem;
  border: 0;
  color: var(--iron);
  background: transparent;
  text-align: left;
  transition: color var(--motion-quiet) var(--ease), background var(--motion-quiet) var(--ease), padding var(--motion-system) var(--ease-lock);
}
.cap-console__index button::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--orange); transform: scaleY(0); transition: transform var(--motion-system) var(--ease-lock); }
.cap-console__index button:hover { color: var(--white); background: #101010; padding-left: 1.15rem; }
.cap-console__index button[aria-selected="true"] { color: var(--white); background: var(--slate-raised); }
.cap-console__index button[aria-selected="true"]::after { transform: scaleY(1); }
.cap-console__index button span { color: var(--orange-text); font: 500 0.6rem/1 var(--font-mono); }
.cap-console__index button b { font-size: 0.82rem; line-height: 1.25; font-weight: 600; }
.cap-console__panels { min-width: 0; }
.cap-console__panel { min-height: 510px; padding: clamp(1.4rem, 1rem + 2vw, 2.6rem); animation: cap-panel-in var(--motion-system) var(--ease-lock) both; }
.cap-console__panel[hidden] { display: none; }
.cap-console__panel header { display: flex; align-items: center; gap: 1rem; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--edge); }
.cap-console__panel header h3 { margin-top: 0.35rem; font-size: clamp(1.55rem, 1.25rem + 1.4vw, 2.5rem); }
.cap-console__lead { max-width: 62ch; margin: var(--sp-6) 0; color: #B2B2B2; font-size: var(--fs-lead); }
.cap-console__panel dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--edge); border: 1px solid var(--edge); }
.cap-console__panel dl div { min-height: 118px; padding: 1rem; background: #0D0D0D; }
.cap-console__panel dt { margin-bottom: 0.55rem; color: var(--iron-dim); font: 500 0.62rem/1.3 var(--font-mono); letter-spacing: 0.09em; text-transform: uppercase; }
.cap-console__panel dd { color: #B8B8B8; font-size: var(--fs-sm); }
.cap-route { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; gap: 0.7rem; align-items: center; margin-top: var(--sp-6); color: var(--iron-dim); font: 500 0.58rem/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.cap-route i { height: 1px; background: var(--edge); overflow: hidden; }
.cap-route i::after { content: ""; display: block; width: 100%; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: left; animation: cap-route-draw 520ms var(--ease-signal) forwards; }
.cap-route .is-active, .cap-route b { color: var(--white); font-weight: 500; }
@keyframes cap-panel-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes cap-route-draw { to { transform: scaleX(1); } }

@media (max-width: 900px) {
  .cap-console { grid-template-columns: minmax(0, 1fr); }
  .cap-console__index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-right: 0; border-bottom: 1px solid var(--edge); }
  .cap-console__index li + li { border-top: 0; }
  .cap-console__index li { border-right: 1px solid var(--edge-soft); border-bottom: 1px solid var(--edge-soft); }
  .cap-console__index button { grid-template-columns: 1.6rem 22px minmax(0, 1fr); min-height: 78px; padding: 0.8rem; }
  .cap-console__panel { min-height: 0; }
}
@media (max-width: 640px) {
  .cap-console__index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap-console__index button { grid-template-columns: 1.4rem minmax(0, 1fr); min-height: 68px; }
  .cap-console__index .icon { display: none; }
  .cap-console__panel dl { grid-template-columns: minmax(0, 1fr); }
  .cap-console__panel dl div { min-height: 0; }
  .cap-route { grid-template-columns: auto 1fr auto; }
  .cap-route span:nth-of-type(n+3), .cap-route i:nth-of-type(n+2), .cap-route b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cap-console__panel, .cap-route i::after { animation: none !important; }
  .cap-route i::after { transform: scaleX(1); }
}
/* ==========================================================================
   24C. INTERNAL PAGE SIGNAL ROUTES
   ========================================================================== */
.page-route {
  --page-route-progress: 0;
  position: relative;
  max-width: 880px;
  margin-top: clamp(2rem, 1.25rem + 3vw, 4rem);
  padding-block: 1rem 0.2rem;
  border-top: 1px solid var(--edge);
}
.page-route__head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.page-route__head output { color: var(--iron-dim); font: 500 0.58rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.page-route__track { position: absolute; z-index: 0; left: 9px; right: 9px; top: 3.82rem; height: 1px; background: var(--edge); overflow: hidden; }
.page-route__track i { display: block; width: 100%; height: 1px; background: var(--orange); transform: scaleX(var(--page-route-progress)); transform-origin: left; transition: transform var(--motion-signature) var(--ease-signal); }
.page-route__nodes { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--route-count, 5), minmax(0, 1fr)); }
.page-route__nodes button {
  display: grid;
  justify-items: start;
  gap: 0.65rem;
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--iron-dim);
  background: transparent;
  text-align: left;
  transition: color var(--motion-quiet) var(--ease);
}
.page-route__nodes button:not(:first-child) { justify-items: center; text-align: center; }
.page-route__nodes button:last-child { justify-items: end; text-align: right; }
.page-route__nodes button i { display: block; width: 9px; height: 9px; border: 1px solid #4A4A4A; background: var(--obsidian); transform: rotate(45deg); transition: border-color var(--motion-system) var(--ease-lock), background var(--motion-system) var(--ease-lock), scale var(--motion-quiet) var(--ease); }
.page-route__nodes button span { max-width: 14ch; overflow-wrap: anywhere; font: 500 0.6rem/1.25 var(--font-mono); letter-spacing: 0.055em; text-transform: uppercase; }
.page-route__nodes button:hover { color: var(--white); }
.page-route__nodes button:hover i { scale: 1.22; }
.page-route__nodes button[aria-pressed="true"] { color: var(--white); }
.page-route__nodes button[aria-pressed="true"] i { border-color: var(--orange); background: var(--orange); }
.page-route--broken .page-route__track { background: repeating-linear-gradient(90deg, #363636 0 8px, transparent 8px 15px); }
.page-route--broken .page-route__track i { background: repeating-linear-gradient(90deg, var(--orange) 0 8px, transparent 8px 15px); }

@media (max-width: 640px) {
  .page-route { margin-top: var(--sp-6); }
  .page-route__head { align-items: flex-end; }
  .page-route__head output { max-width: 15ch; text-align: right; }
  .page-route__nodes { grid-template-columns: repeat(var(--route-count, 5), minmax(0, 1fr)); }
  .page-route__nodes button span { font-size: 0.51rem; }
}
@media (prefers-reduced-motion: reduce) {
  .page-route__track i, .page-route__nodes button, .page-route__nodes button i { transition: none !important; }
}
/* ==========================================================================
   25. RAW SIGNAL — PAGE MOTION, ORIENTATION ROUTE, CONTEXT CURSOR
   ========================================================================== */
.page-signal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--obsidian);
  transform: translateY(0);
  transition: transform 420ms var(--ease-signal);
  pointer-events: auto;
  overflow: hidden;
}
.page-signal::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 44px 44px;
}
.page-signal__core { position: relative; display: grid; justify-items: center; gap: 1rem; }
.page-signal__mark { width: 42px; height: 42px; object-fit: contain; opacity: 0; transform: scale(0.86); }
.page-signal__route { display: flex; align-items: center; gap: 0.7rem; }
.page-signal__origin,
.page-signal__destination { width: 7px; height: 7px; border: 1px solid var(--orange); transform: rotate(45deg); }
.page-signal__destination { background: var(--orange); }
.page-signal__track { width: min(34vw, 250px); height: 1px; background: #292929; overflow: hidden; }
.page-signal__track i { display: block; width: 100%; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: left; }
.page-signal__code { color: var(--iron-dim); font: 500 0.58rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.page-signal.is-full .page-signal__mark { animation: entrance-mark 360ms var(--ease-lock) 80ms forwards; }
.page-signal.is-full .page-signal__track i { animation: entrance-route 460ms var(--ease-signal) 180ms forwards; }
.page-signal.is-revealed { transform: translateY(-101%); transition-duration: 380ms; transition-delay: 430ms; pointer-events: none; }
.page-signal.is-quick.is-revealed { transition-duration: 300ms; transition-delay: 90ms; }
.page-signal.is-exiting { transform: translateY(0); transition-duration: var(--motion-page); transition-delay: 0ms; pointer-events: auto; }
.page-signal.is-exiting .page-signal__track i { animation: entrance-route var(--motion-page) var(--ease-signal) forwards; }
body.is-transitioning { overflow: hidden; }
@keyframes entrance-mark { to { opacity: 1; transform: scale(1); } }
@keyframes entrance-route { to { transform: scaleX(1); } }

.raw-progress {
  position: fixed;
  z-index: 35;
  top: 50%;
  right: max(12px, calc((100vw - var(--maxw)) / 2 - 42px));
  display: grid;
  grid-template-columns: auto 8px;
  gap: 0.7rem;
  align-items: center;
  translate: 0 -50%;
  pointer-events: none;
}
.raw-progress__code {
  color: var(--iron-dim);
  font: 500 0.56rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  rotate: 180deg;
}
.raw-progress__rail { position: relative; width: 1px; height: 176px; background: #292929; }
.raw-progress__fill { position: absolute; inset: 0; background: var(--orange); transform: scaleY(var(--raw-progress, 0)); transform-origin: top; will-change: transform; }
.raw-progress__node { position: absolute; top: calc(var(--raw-progress, 0) * 100%); left: 50%; width: 7px; height: 7px; background: var(--orange); translate: -50% -50%; transform: rotate(45deg); transition: top var(--motion-quiet) linear; }

@media (hover: hover) and (pointer: fine) {
  body.cursor-ready,
  body.cursor-ready a,
  body.cursor-ready button,
  body.cursor-ready [role="button"] { cursor: none; }
  body.cursor-ready input,
  body.cursor-ready textarea { cursor: text; }
  body.cursor-ready select { cursor: default; }
}
.cursor-ring { --cursor-angle: 0deg; --cursor-stretch: 1; display: grid; place-items: center; border: 0 !important; }
.cursor-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,0.38);
  border-radius: 50%;
  transform: rotate(var(--cursor-angle)) scaleX(var(--cursor-stretch));
  transition: border-color var(--motion-quiet) var(--ease), background var(--motion-quiet) var(--ease), transform 100ms linear;
}
.cursor-label {
  position: relative;
  color: var(--white);
  font: 600 0.5rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  opacity: 0;
  transition: opacity var(--motion-quiet) var(--ease);
}
.cursor-ring.is-active::before { border-color: var(--orange); background: rgba(188,56,35,0.06); }
.cursor-ring.has-context { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
.cursor-ring.has-context::before { border-color: var(--orange); background: rgba(13,13,13,0.84); }
.cursor-ring.has-context .cursor-label { opacity: 1; }
.cursor-ring.is-form { opacity: 0 !important; }
.cursor-dot.has-context { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--orange); opacity: 1; }

@media (max-width: 1180px), (hover: none), (pointer: coarse) { .raw-progress { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .page-signal, .raw-progress, .cursor-dot, .cursor-ring { display: none !important; }
  .nav__logo img { transition: none !important; }
  .nav__logo:hover img, .nav__logo:focus-visible img { transform: none !important; }
  .nav__logo::after { animation: none !important; }
  .system__progress, .stage-signal__bar { transition: none !important; animation: none !important; }
  .stage-signal__bar { transform: scaleY(1); }
}
/* ==========================================================================
   26. FOCUSED CREATIVE PASS / RAW SIGNAL
   Distinct explanatory motion, finite playback, and visual continuity.
   ========================================================================== */

/* A quiet signal spine connects the homepage chapters without turning every
   section into the same composition. */
.page-home main { position: relative; isolation: isolate; }
.page-home main::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: min(88vh, 760px);
  bottom: 5rem;
  left: max(12px, calc((100vw - var(--maxw)) / 2 - 24px));
  width: 1px;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.12) 0 8px, transparent 8px 17px);
  opacity: .34;
  pointer-events: none;
}
.page-home main > section { position: relative; z-index: 1; }
.atmos__grain { animation: none; }

/* Hero philosophy is an editorial instrument, not a rounded card. */
.page-home .rawprinciple {
  border-radius: 0;
  padding: clamp(1.1rem, .8rem + 1.2vw, 1.75rem);
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(148deg, rgba(20,20,20,.98), rgba(7,7,7,.98));
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 30px 100%, 0 calc(100% - 30px));
  box-shadow: 0 38px 90px -44px rgba(0,0,0,.95);
}
.page-home .rawprinciple__head { margin-bottom: .75rem; }
.page-home .navmap {
  margin-inline: calc(clamp(1.1rem, .8rem + 1.2vw, 1.75rem) * -1);
  margin-bottom: 0;
  border-inline: 0;
  border-radius: 0;
  background: rgba(5,5,5,.55);
}
.page-home .rawprinciple__quote {
  position: relative;
  z-index: 2;
  width: min(92%, 30rem);
  margin: -3.1rem 0 .45rem;
  padding: 1.05rem 1.1rem .4rem;
  background: linear-gradient(90deg, rgba(8,8,8,.97) 78%, transparent);
  text-shadow: 0 2px 20px #000;
}
.page-home .rawprinciple__quote span { overflow: hidden; }
.js-anim .page-home .rawprinciple:not(.is-visible) .rawprinciple__quote span { transform: translateY(105%); opacity: 0; }
.page-home .rawprinciple.is-visible .rawprinciple__quote span {
  animation: principle-line-in 390ms var(--ease-out) both;
}
.page-home .rawprinciple.is-visible .rawprinciple__quote span:nth-child(2) { animation-delay: 65ms; }
.page-home .rawprinciple.is-visible .rawprinciple__quote span:nth-child(3) { animation-delay: 130ms; }
.page-home .rawprinciple__cite { margin-left: 1.1rem; margin-bottom: .9rem; }
.page-home .rawprinciple__translation { margin-top: .7rem; }
@keyframes principle-line-in { from { opacity: 0; transform: translateY(75%); } to { opacity: 1; transform: none; } }
.page-home .rawprinciple__status::before { animation: pulse-dot 650ms var(--ease) 2; }
.page-home .navmap.is-live .navmap__route { animation-duration: 760ms; animation-delay: 120ms; }
.page-home .navmap.is-live .navmap__signal { animation-duration: 1050ms; animation-delay: 780ms; animation-iteration-count: 1; }
.page-home .navmap.is-live .navmap__port-ring { animation-duration: 850ms; animation-delay: 760ms; animation-iteration-count: 2; }
.page-home .navmap.is-live .navmap__scan { animation-duration: 1200ms; animation-iteration-count: 1; }

/* Eight mechanisms: each stage explains a different system behaviour. */
.stage-mechanism {
  display: grid;
  grid-template-columns: minmax(7rem, .7fr) minmax(15rem, 1.8fr) minmax(7rem, .7fr);
  gap: clamp(.9rem, 1.8vw, 1.6rem);
  align-items: center;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--edge);
}
.stage-mechanism__label,
.stage-mechanism__output {
  color: var(--iron-dim);
  font: 500 .58rem/1.35 var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.stage-mechanism__output { color: var(--white); text-align: right; }
.stage-mechanism__canvas {
  position: relative;
  min-width: 0;
  height: 108px;
  border-inline: 1px solid var(--edge-soft);
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 100% 27px,
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 42px 100%;
  overflow: hidden;
}
.stage-mechanism__canvas > div { position: absolute; inset: 0; }
.stage-mechanism__canvas b,
.stage-mechanism__canvas em { position: absolute; color: var(--iron); font: 500 .52rem/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; font-style: normal; }

.mechanism-radar i { position: absolute; left: 50%; top: 50%; border: 1px solid #333; border-radius: 50%; transform: translate(-50%,-50%); }
.mechanism-radar i:nth-child(1) { width: 30px; height: 30px; }
.mechanism-radar i:nth-child(2) { width: 62px; height: 62px; }
.mechanism-radar i:nth-child(3) { width: 94px; height: 94px; }
.mechanism-radar__sweep { position: absolute; left: 50%; top: 50%; width: 45px; height: 1px; background: linear-gradient(90deg, var(--orange), transparent); transform-origin: left; }
.mechanism-radar__target { right: 20%; top: 24%; width: 6px; height: 6px; border: 1px solid var(--orange); transform: rotate(45deg); }
.mechanism-radar em { left: 1rem; bottom: .65rem; }
.stage-mechanism.is-animating .mechanism-radar__sweep { animation: mech-sweep 740ms linear 1 both; }
.stage-mechanism.is-animating .mechanism-radar__target { animation: mech-lock 420ms var(--ease-lock) 520ms both; }
@keyframes mech-sweep { from { transform: rotate(-100deg); opacity: 0; } 20% { opacity: 1; } to { transform: rotate(260deg); opacity: .25; } }
@keyframes mech-lock { from { transform: rotate(45deg) scale(2.4); opacity: 0; } to { transform: rotate(45deg) scale(1); opacity: 1; } }

.mechanism-align { display: grid; align-content: center; gap: 15px; padding: 0 4.5rem 0 1rem; }
.mechanism-align span { position: relative; display: block; height: 1px; background: #333; transform: translateY(var(--y)); }
.mechanism-align span::before { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border: 1px solid #555; background: #0c0c0c; }
.mechanism-align i { position: absolute; right: 3.25rem; top: 18px; bottom: 18px; width: 1px; background: var(--orange); }
.mechanism-align b { right: .6rem; bottom: .6rem; }
.stage-mechanism.is-animating .mechanism-align span { animation: mech-align 550ms var(--ease-lock) both; }
@keyframes mech-align { to { transform: translateY(0); background: linear-gradient(90deg, #333, var(--orange)); } }

.mechanism-creative span { position: absolute; top: 20px; width: 78px; height: 64px; padding: .55rem; border: 1px solid #333; background: #101010; transform: translateX(-50%) rotate(var(--r)); }
.mechanism-creative span:nth-child(1) { left: 30%; --r:-5deg; }
.mechanism-creative span:nth-child(2) { left: 50%; --r:2deg; }
.mechanism-creative span:nth-child(3) { left: 70%; --r:5deg; border-color: rgba(188,56,35,.72); }
.mechanism-creative span i { color: var(--orange-text); font: 500 .52rem/1 var(--font-mono); font-style: normal; }
.mechanism-creative span b { left: .55rem; bottom: .55rem; }
.mechanism-creative em { right: .6rem; bottom: .55rem; }
.stage-mechanism.is-animating .mechanism-creative span { animation: mech-card 480ms var(--ease-lock) both; }
.stage-mechanism.is-animating .mechanism-creative span:nth-child(2) { animation-delay: 60ms; }
.stage-mechanism.is-animating .mechanism-creative span:nth-child(3) { animation-delay: 120ms; }
@keyframes mech-card { from { opacity: 0; transform: translate(-50%, 12px) rotate(0); } to { opacity: 1; transform: translateX(-50%) rotate(var(--r)); } }

.mechanism-media { display: grid; align-content: center; gap: 12px; padding: 0 1rem; }
.mechanism-media span { display: grid; grid-template-columns: 3.8rem minmax(0,1fr); gap: .75rem; align-items: center; color: var(--iron-dim); font: 500 .5rem/1 var(--font-mono); text-transform: uppercase; }
.mechanism-media span i { height: 4px; background: #2e2e2e; transform-origin: left; }
.mechanism-media span:nth-child(1) i { width: 82%; }
.mechanism-media span:nth-child(2) i { width: 58%; }
.mechanism-media span:nth-child(3) i { width: 36%; }
.mechanism-media em { right: .7rem; bottom: .55rem; }
.stage-mechanism.is-animating .mechanism-media span i { animation: mech-lane 560ms var(--ease-lock) both; }
@keyframes mech-lane { from { transform: scaleX(.08); } to { transform: scaleX(1); box-shadow: inset 2px 0 var(--orange); } }

.mechanism-funnel { display: grid; place-items: center; align-content: center; gap: 7px; }
.mechanism-funnel span { display: block; height: 15px; border: 1px solid #343434; background: #111; }
.mechanism-funnel span:nth-child(1) { width: 72%; }
.mechanism-funnel span:nth-child(2) { width: 48%; }
.mechanism-funnel span:nth-child(3) { width: 24%; border-color: rgba(188,56,35,.6); }
.mechanism-funnel i { width: 6px; height: 6px; margin-top: 3px; background: var(--orange); transform: rotate(45deg); }
.mechanism-funnel b { right: .6rem; bottom: .55rem; }
.stage-mechanism.is-animating .mechanism-funnel span { animation: mech-funnel 480ms var(--ease-lock) both; }
.stage-mechanism.is-animating .mechanism-funnel span:nth-child(2) { animation-delay: 70ms; }
.stage-mechanism.is-animating .mechanism-funnel span:nth-child(3) { animation-delay: 140ms; }
@keyframes mech-funnel { from { opacity: 0; transform: scaleX(1.25); } to { opacity: 1; transform: scaleX(1); } }

.mechanism-loop span { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; border: 1px solid #383838; border-radius: 50%; transform: translate(-50%,-50%); }
.mechanism-loop span::after { content: ""; position: absolute; inset: -1px; border: 1px solid transparent; border-top-color: var(--orange); border-right-color: var(--orange); border-radius: 50%; transform: rotate(30deg); }
.mechanism-loop i { position: absolute; left: calc(50% + 34px); top: calc(50% - 3px); width: 6px; height: 6px; background: var(--iron); border-radius: 50%; transform-origin: -34px 3px; transform: rotate(calc(var(--p) * 120deg)); }
.mechanism-loop b { right: .6rem; bottom: .55rem; }
.stage-mechanism.is-animating .mechanism-loop span::after { animation: mech-loop 760ms var(--ease-out) 1 both; }
@keyframes mech-loop { from { transform: rotate(-140deg); opacity: 0; } to { transform: rotate(220deg); opacity: 1; } }

.mechanism-feedback__out,
.mechanism-feedback__back { position: absolute; left: 12%; right: 12%; height: 1px; transform-origin: left; }
.mechanism-feedback__out { top: 39%; background: linear-gradient(90deg, #444, var(--orange)); }
.mechanism-feedback__back { top: 65%; background: linear-gradient(270deg, #555, var(--orange)); transform-origin: right; }
.mechanism-feedback i { position: absolute; right: 11%; top: 34%; width: 9px; height: 9px; border: 1px solid var(--orange); transform: rotate(45deg); }
.mechanism-feedback b { left: .8rem; bottom: .5rem; }
.stage-mechanism.is-animating .mechanism-feedback__out { animation: mech-route 520ms var(--ease-lock) both; }
.stage-mechanism.is-animating .mechanism-feedback__back { animation: mech-route 520ms var(--ease-lock) 360ms both; }
@keyframes mech-route { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.mechanism-revenue { display: flex; align-items: end; justify-content: center; gap: clamp(10px, 2vw, 22px); padding: 18px 2.5rem 22px; }
.mechanism-revenue span { width: 18px; height: var(--h); background: #292929; border-top: 2px solid var(--orange); transform-origin: bottom; }
.mechanism-revenue i { position: absolute; left: 20%; right: 18%; top: 28%; height: 1px; background: linear-gradient(90deg, transparent, var(--orange)); transform: rotate(-11deg); }
.mechanism-revenue b { right: .6rem; bottom: .55rem; }
.stage-mechanism.is-animating .mechanism-revenue span { animation: mech-rise 520ms var(--ease-lock) both; }
.stage-mechanism.is-animating .mechanism-revenue span:nth-child(2) { animation-delay: 55ms; }
.stage-mechanism.is-animating .mechanism-revenue span:nth-child(3) { animation-delay: 110ms; }
.stage-mechanism.is-animating .mechanism-revenue span:nth-child(4) { animation-delay: 165ms; }
@keyframes mech-rise { from { transform: scaleY(.08); } to { transform: scaleY(1); } }

/* Industry panels now carry category-specific acquisition landscapes. */
.industry-landscape {
  position: relative;
  height: 154px;
  margin: var(--sp-5) 0;
  border-block: 1px solid var(--edge-soft);
  background: #0a0a0a;
  overflow: hidden;
}
.industry-landscape::before { content: ""; position: absolute; inset: 0; opacity: .7; pointer-events: none; }
.industry-landscape--roof::before { background: linear-gradient(145deg, transparent 50%, rgba(255,255,255,.035) 50.3%, transparent 50.7%); }
.industry-landscape--hvac::before { background: repeating-linear-gradient(90deg, transparent 0 52px, rgba(255,255,255,.035) 52px 53px); }
.industry-landscape--restore::before { background: radial-gradient(circle at 23% 50%, rgba(188,56,35,.08), transparent 28%); }
.industry-landscape--foundation::before { background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(255,255,255,.035) 23px 24px); }
.industry-landscape--plumbing::before { background: linear-gradient(90deg, transparent 48%, rgba(188,56,35,.05) 48% 52%, transparent 52%); }
.industry-landscape--remodel::before { background: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 24px 24px; }
.industry-landscape--pool::before { background: radial-gradient(ellipse at 60% 100%, rgba(255,255,255,.05), transparent 55%); }
.industry-landscape--electrical::before { background: linear-gradient(110deg, transparent 48%, rgba(188,56,35,.05) 49%, transparent 50%); }
.industry-landscape--land::before { background: radial-gradient(ellipse at 20% 50%, transparent 20%, rgba(255,255,255,.035) 21%, transparent 22%, transparent 34%, rgba(255,255,255,.03) 35%, transparent 36%); }
.industry-landscape__code,
.industry-landscape > b { position: absolute; z-index: 2; top: .7rem; color: var(--iron-dim); font: 500 .53rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.industry-landscape__code { left: .8rem; }
.industry-landscape > b { right: .8rem; color: #aaa; font-weight: 500; }
.industry-landscape svg { position: absolute; inset: 1.6rem .7rem .25rem; width: calc(100% - 1.4rem); height: calc(100% - 1.85rem); overflow: visible; }
.industry-landscape svg * { vector-effect: non-scaling-stroke; }
.industry-landscape svg path,
.industry-landscape svg line,
.industry-landscape svg rect,
.industry-landscape svg circle,
.industry-landscape svg ellipse { fill: none; stroke: #343434; stroke-width: 1; }
.industry-landscape svg .landscape__ghost { stroke: #2c2c2c; stroke-dasharray: 3 5; }
.industry-landscape svg .landscape__branch { stroke: #555; stroke-dasharray: 2 4; }
.industry-landscape svg .landscape__route { stroke: var(--orange); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.industry-landscape svg circle { fill: #0a0a0a; }
.industry-landscape svg circle.is-destination { fill: var(--orange); stroke: var(--orange); }
.industry-landscape.is-routing .landscape__route { stroke-dasharray: 720; stroke-dashoffset: 720; animation: landscape-route 650ms var(--ease-lock) 1 forwards; }
.industry-landscape.is-routing .is-destination { animation: landscape-lock 420ms var(--ease-lock) 520ms both; }
@keyframes landscape-route { to { stroke-dashoffset: 0; } }
@keyframes landscape-lock { from { opacity: 0; transform: scale(2); transform-origin: center; } to { opacity: 1; transform: scale(1); } }

/* Creative Signal Lab behaves like a working studio: visual alternatives,
   selected execution, outbound intent, and a returning sales-feedback line. */
.page-home .signal-lab { box-shadow: 0 42px 90px -58px rgba(0,0,0,.95); }
.page-home .creative-panel { grid-template-columns: minmax(0, 1.18fr) minmax(24rem, .82fr); min-height: 660px; }
.page-home .creative-panel__visual { min-height: 660px; isolation: isolate; }
.page-home .creative-panel__visual::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 1rem;
  border: 1px solid rgba(255,255,255,.12);
  clip-path: polygon(0 0, 36px 0, 36px 1px, 1px 1px, 1px 36px, 0 36px, 0 0, 100% 0, 100% 36px, calc(100% - 1px) 36px, calc(100% - 1px) 1px, calc(100% - 36px) 1px, calc(100% - 36px) 0, 100% 0, 100% 100%, calc(100% - 36px) 100%, calc(100% - 36px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 36px), 100% calc(100% - 36px), 100% 100%, 0 100%, 0 calc(100% - 36px), 1px calc(100% - 36px), 1px calc(100% - 1px), 36px calc(100% - 1px), 36px 100%);
  pointer-events: none;
}
.page-home .creative-panel__visual img {
  object-position: var(--creative-x, 50%) var(--creative-y, 50%);
  transform: scale(var(--creative-scale, 1.02));
  will-change: transform, object-position;
}
.page-home .creative-panel:hover .creative-panel__visual img { transform: scale(calc(var(--creative-scale, 1.02) + .012)); }
.page-home .creative-frame {
  width: min(88%, 36rem);
  right: auto;
  padding: 1rem 1.1rem 1.1rem;
  border-left: 2px solid var(--orange);
  background: linear-gradient(90deg, rgba(6,6,6,.94) 75%, rgba(6,6,6,.28));
}
.page-home .creative-frame p { margin-bottom: .7rem; }
.creative-frame__support { display: block; max-width: 40ch; margin-bottom: 1rem; color: #c2c2c2; font-size: .82rem; line-height: 1.45; }
.page-home .hook-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; }
.page-home .hook-stack button {
  position: relative;
  min-height: 134px;
  padding: 102px .65rem .7rem;
  background-color: #0d0d0d;
  background-image: linear-gradient(to bottom, rgba(8,8,8,.08), rgba(8,8,8,.78)), var(--hook-image);
  background-repeat: no-repeat;
  background-size: 100% 92px, 100% auto;
  background-position: 0 0, center 38%;
  overflow: hidden;
  font-size: .7rem;
  line-height: 1.25;
  isolation: isolate;
}
.page-home .hook-stack button:nth-child(2) { background-position: 0 0, 44% 50%; }
.page-home .hook-stack button:nth-child(3) { background-position: 0 0, 64% 56%; }
.page-home .hook-stack button::before { content: attr(data-variant); position: absolute; left: .55rem; top: .55rem; color: rgba(255,255,255,.72); font: 500 .5rem/1 var(--font-mono); letter-spacing: .09em; }
.page-home .hook-stack button::after { content: ""; position: absolute; z-index: 2; left: .55rem; right: .55rem; top: 84px; height: 1px; background: #555; transform: scaleX(.25); transform-origin: left; transition: transform 260ms var(--ease-lock), background 180ms var(--ease); }
.page-home .hook-stack button:hover { padding-left: .65rem; filter: brightness(1.08); }
.page-home .hook-stack button.is-selected { background-color: var(--slate-raised); box-shadow: inset 0 -2px var(--orange); }
.page-home .hook-stack button.is-selected::after { transform: scaleX(1); background: var(--orange); }
.creative-feedback {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  gap: .55rem;
  align-items: center;
  margin-top: var(--sp-5);
  padding: .9rem .1rem 1.25rem;
  border-block: 1px solid var(--edge-soft);
  color: var(--iron-dim);
  font: 500 .5rem/1.25 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.creative-feedback i { height: 1px; background: #353535; overflow: hidden; }
.creative-feedback i::after { content: ""; display: block; width: 100%; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: left; }
.creative-feedback b { position: absolute; left: 22%; right: 5%; bottom: .48rem; height: 1px; background: linear-gradient(270deg, rgba(255,255,255,.35), transparent); transform: scaleX(0); transform-origin: right; }
.creative-panel.is-locked .creative-feedback i::after { animation: creative-out 420ms var(--ease-lock) both; }
.creative-panel.is-locked .creative-feedback i:nth-of-type(2)::after { animation-delay: 140ms; }
.creative-panel.is-locked .creative-feedback b { animation: creative-back 460ms var(--ease-lock) 390ms both; }
@keyframes creative-out { to { transform: scaleX(1); } }
@keyframes creative-back { to { transform: scaleX(1); } }
.page-home .signal-lab__route i { position: relative; overflow: hidden; background: var(--edge); }
.page-home .signal-lab__route i::after { content: ""; position: absolute; inset: 0; background: var(--orange); transform: scaleX(0); transform-origin: left; animation: lab-route 520ms var(--ease-lock) 1 forwards; }
.page-home .signal-lab__route i:nth-of-type(2)::after { animation-delay: 110ms; }
.page-home .signal-lab__route i:nth-of-type(3)::after { animation-delay: 220ms; }
@keyframes lab-route { to { transform: scaleX(1); } }

/* The operating system gains depth and a finite data-lock moment. */
.page-home .ops-map__field { box-shadow: inset 0 0 60px rgba(255,255,255,.018), 0 30px 70px -50px #000; }
.page-home .ops-map__core::before,
.page-home .ops-map__core::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.055); pointer-events: none; }
.page-home .ops-map__core::after { inset: 18px; border-color: rgba(188,56,35,.16); }
.page-home .ops-map__links path.is-active { animation-duration: 560ms; animation-iteration-count: 2; }
.page-home .ops-map__core i { animation: ops-core-lock 620ms var(--ease-lock) 1 both; }
@keyframes ops-core-lock { 0% { box-shadow: 0 0 0 0 rgba(188,56,35,.3); } 100% { box-shadow: 0 0 0 10px rgba(188,56,35,0); } }

@media (max-width: 1024px) {
  .page-home .creative-panel { grid-template-columns: minmax(0, 1.05fr) minmax(22rem, .95fr); }
  .page-home .hook-stack { grid-template-columns: minmax(0, 1fr); }
  .page-home .hook-stack button { min-height: 82px; padding: 50px .8rem .65rem; background-size: 100% 42px, 100% auto; }
  .page-home .hook-stack button::after { top: 40px; }
}
@media (max-width: 900px) {
  .page-home main::before { left: 8px; opacity: .2; }
  .page-home .rawprinciple { clip-path: none; border-inline: 0; }
  .page-home .rawprinciple__quote { margin-top: -2.3rem; }
  .stage-mechanism { grid-template-columns: minmax(0,1fr) auto; }
  .stage-mechanism__canvas { grid-column: 1 / -1; grid-row: 1; height: 96px; }
  .stage-mechanism__label { grid-row: 2; }
  .stage-mechanism__output { grid-column: 2; grid-row: 2; }
  .page-home .creative-panel { grid-template-columns: minmax(0, 1fr); }
  .page-home .creative-panel__visual { min-height: 560px; }
  .page-home .hook-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-home .hook-stack button { min-height: 118px; padding: 86px .6rem .65rem; background-size: 100% 76px, 100% auto; }
  .page-home .hook-stack button::after { top: 70px; }
}
@media (max-width: 640px) {
  .page-home main::before { display: none; }
  .page-home .rawprinciple__quote { width: 100%; margin-top: -1rem; padding-inline: .75rem; }
  .page-home .rawprinciple__cite { margin-left: .75rem; }
  .stage-mechanism__canvas { height: 88px; }
  .stage-mechanism__label,
  .stage-mechanism__output { font-size: .52rem; }
  .industry-landscape { height: 116px; margin-block: var(--sp-4); }
  .industry-landscape__code { max-width: 60%; line-height: 1.3; }
  .industry-landscape > b { top: auto; bottom: .5rem; max-width: 48%; text-align: right; line-height: 1.25; }
  .page-home .creative-panel__visual { min-height: 0; }
  .page-home .hook-stack { grid-template-columns: minmax(0,1fr); }
  .page-home .hook-stack button { min-height: 78px; padding: 49px .75rem .65rem; background-size: 100% 41px, 100% auto; }
  .page-home .hook-stack button::after { top: 39px; }
  .creative-feedback { grid-template-columns: auto 1fr auto; }
  .creative-feedback span:last-of-type,
  .creative-feedback i:last-of-type { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page-home .rawprinciple__quote span,
  .industry-landscape .landscape__route,
  .industry-landscape .is-destination,
  .stage-mechanism *,
  .creative-feedback *,
  .page-home .signal-lab__route i::after,
  .page-home .ops-map__core i { animation: none !important; transition: none !important; }
  .js-anim .page-home .rawprinciple:not(.is-visible) .rawprinciple__quote span { transform: none; opacity: 1; }
  .industry-landscape .landscape__route { stroke-dashoffset: 0 !important; }
  .creative-feedback i::after,
  .creative-feedback b,
  .page-home .signal-lab__route i::after { transform: scaleX(1); }
  .page-home .creative-panel__visual img { transform: scale(1.02) !important; }
}
.email-copy {
  display: inline-flex;
  margin-left: .6rem;
  padding: .35rem .55rem;
  border: 1px solid #3a3a3a;
  color: var(--iron);
  background: transparent;
  font: 500 .56rem/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
  transition: color 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease);
}
.email-copy:hover,
.email-copy:focus-visible { color: var(--white); border-color: var(--orange); }
.email-copy.is-copied { color: var(--white); border-color: var(--orange); background: rgba(188,56,35,.12); }
@media print {
  .atmos { display: none !important; }
  .nav, .footer, .cursor-dot, .cursor-ring, .ctaband, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  h1, h2, h3, h4, h5 { color: #000; }
  .card, .panelgrid > * { border-color: #ccc; background: #fff; }
}