/* =========================================================================
   endpointx · marketing site
   Editorial system: Newsreader display + Onest sans, paper warmth, navy ink,
   signal red used as a scalpel. Magazine-style left-rail running headers.
   ========================================================================= */

:root {
  /* --font-display is defined canonically in colors_and_type.css */
  --bg-warm: #F1ECE0;
  --bg-deep: #E5DECF;
}
[data-theme="dark"] {
  --bg-warm: var(--ink-800);
  --bg-deep: var(--ink-900);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg-warm); color: var(--fg-primary); }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 56px; }
[data-screen-label] { scroll-margin-top: 100px; }

/* =========================================================================
   WORDMARK — typographic, navy-on-paper. The X is a scalpel.
   ========================================================================= */
.wordmark {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
  display: inline-flex;
  align-items: baseline;
  border: none;
  line-height: 1;
}
.wordmark__x {
  font-weight: 700;
  font-style: italic;
  color: var(--accent);
  margin-left: 1px;
  letter-spacing: -0.02em;
}
.wordmark--lg { font-size: 36px; }
.wordmark--xl { font-size: 96px; font-weight: 300; letter-spacing: -0.03em; }
.wordmark--xl .wordmark__x { font-size: 1em; }

/* =========================================================================
   NAV
   ========================================================================= */
.nav {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--border-hairline);
  position: sticky; top: 0;
  z-index: 50;
  background: color-mix(in oklch, var(--bg-warm) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  gap: 48px;
}
.nav__logo { border: none; }
.nav__links { display: flex; gap: 36px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; }
.nav__links a {
  border: none; color: var(--fg-secondary);
  position: relative; padding: 6px 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--fg-primary); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }
.nav__cta { display: flex; align-items: center; gap: 14px; }
.nav__hamburger { display: none; }

/* The thin red rule beneath nav — signature device anchoring every page */
.nav-rule {
  height: 2px;
  background: var(--accent);
  width: 96px;
  margin: 0;
  position: sticky; top: 78px; z-index: 49;
}

/* =========================================================================
   RUNNING HEADER — magazine-style left gutter wayfinding
   ========================================================================= */
.runhead {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-tertiary);
  text-transform: uppercase;
  display: flex; flex-direction: column; gap: 4px;
}
.runhead .runhead__num { color: var(--accent); }
.runhead .runhead__sep { width: 16px; height: 1px; background: var(--fg-tertiary); margin: 4px 0; }
.runhead--accent .runhead__sep { background: var(--accent); width: 24px; height: 2px; }

/* =========================================================================
   RAIL MARKER — quieter wayfinding token used on section heads across the
   site. Two elements that read as one quiet marker: a small mono number
   above an italic serif section name. Both muted ink, never accent red.
   The original .runhead is kept for inline card-label uses (e.g. the
   VulnVis label in the home hero) where the accent dash still fits.
   ========================================================================= */
.rail-marker {
  padding-top: 18px;
  display: flex; flex-direction: column;
  gap: 6px;
}
.rail-marker__num {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  color: var(--ink-400);
}
.rail-marker__name {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink-500);
}
[data-theme="dark"] .rail-marker__num  { color: var(--ink-300); }
[data-theme="dark"] .rail-marker__name { color: var(--ink-200); }
.ai-callout .rail-marker__num  { color: var(--ink-300); }
.ai-callout .rail-marker__name { color: var(--ink-200); }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600;
  padding: 14px 22px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  line-height: 1;
  transition: all 180ms var(--ease-out);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.btn--primary {
  background: var(--ink-800); color: var(--paper-50);
  border-color: var(--ink-800);
}
.btn--primary:hover { background: var(--ink-900); color: var(--paper-50); }
[data-theme="dark"] .btn--primary {
  background: var(--paper-100); color: var(--ink-800);
  border-color: var(--paper-100);
}
[data-theme="dark"] .btn--primary:hover { background: var(--paper-50); color: var(--ink-800); }
.btn--accent {
  background: var(--accent); color: var(--paper-50);
  border-color: var(--accent);
}
.btn--accent:hover { background: var(--signal-700); border-color: var(--signal-700); color: var(--paper-50); }
.btn--ghost {
  background: transparent; color: var(--fg-primary);
  border: none; padding: 8px 0 6px;
  border-bottom: 1px solid var(--fg-primary);
  border-radius: 0;
  gap: 8px;
}
.btn--ghost:hover { color: var(--accent); border-color: var(--accent); }
.btn .arrow {
  width: 14px; height: 14px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover .arrow { transform: translate(2px, -2px); }

.theme-toggle {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 8px 14px;
  border: 1px solid var(--border-hairline);
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  color: var(--fg-secondary);
  letter-spacing: 0.04em;
  transition: all var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { border-color: var(--fg-primary); color: var(--fg-primary); }

/* =========================================================================
   ITALIC RED-RULE accent — under <em> in display headings
   ========================================================================= */
.disp em, .ed-em {
  font-style: italic; font-weight: 400; position: relative;
  color: var(--fg-primary);
}
.disp em::after, .ed-em::after {
  content: ""; position: absolute; left: 0; right: 0.06em; bottom: 0.12em;
  height: 1px; background: var(--accent); opacity: 0.7;
}

/* Universal display style */
.disp {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
  color: var(--fg-primary);
  font-feature-settings: "ss02", "ss01";
}

/* =========================================================================
   PAGE HEADER (used on inner pages)
   Title sits in a 200px-rail + 1fr layout (matches DS hero).
   Standfirst copy goes into a 2-column row beneath the title so the right
   side of the page doesn't sit empty next to a single skinny paragraph.
   ========================================================================= */
.pagehead {
  padding: 96px 0 56px;
  border-bottom: 1px solid var(--border-hairline);
}
.pagehead__grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  align-items: start;
}
.pagehead .runhead { padding-top: 16px; }
.pagehead h1.disp {
  font-size: clamp(72px, 8vw, 120px);
  max-width: 14ch;
  line-height: 0.92;
  margin: 0;
}
.pagehead__below {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border-hairline);
  align-items: start;
}
.pagehead .standfirst {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.6;
  color: var(--fg-primary);
  max-width: 44ch;
  margin: 0;
  font-weight: 400;
}
.pagehead .standfirst--secondary {
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-secondary);
  max-width: 46ch;
  font-weight: 400;
}
@media (max-width: 980px) {
  .pagehead__grid { grid-template-columns: 1fr; gap: 24px; }
  .pagehead__below { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; padding-top: 24px; }
}

/* =========================================================================
   FOOTER
   ========================================================================= */
footer.site-footer {
  padding: 96px 0 32px;
  border-top: 1px solid var(--border-hairline);
  background: var(--bg-warm);
  margin-top: 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 200px 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 80px;
}
.footer__rail {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-tertiary);
  text-transform: uppercase;
}
.footer__col h5 {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 24px;
  color: var(--fg-tertiary);
}
.footer__col a {
  display: block;
  padding: 7px 0;
  font-size: 14px;
  border: none;
  color: var(--fg-primary);
}
.footer__col a:hover { color: var(--accent); }
.footer__col p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-secondary);
  max-width: 36ch;
  margin: 0 0 32px;
}
.footer__col--credentials { display: flex; flex-direction: column; gap: 20px; }
.footer__col a.footer__credential {
  display: inline-flex; flex-direction: column; gap: 4px;
  border: none !important;
  padding: 2px 0 2px 14px;
  background: transparent;
  border-left: 2px solid var(--accent) !important;
  text-decoration: none;
  max-width: 36ch;
}
.footer__credential__label {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg-primary);
}
.footer__credential__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  display: inline-flex; align-items: center; gap: 6px;
}
.footer__credential__sub .arrow { width: 11px; height: 11px; }
.footer__credential:hover .footer__credential__sub { color: var(--accent); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px;
  color: var(--fg-tertiary);
  padding-top: 32px;
  border-top: 1px solid var(--border-hairline);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer__bottom__left { display: flex; gap: 24px; }

/* =========================================================================
   SECTION SCAFFOLDING
   ========================================================================= */
section.bleed { padding: 0; }
.section {
  padding: 128px 0;
  border-top: 1px solid var(--border-hairline);
}
.section--first { border-top: none; }
.section__grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  align-items: start;
}
.section__title {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  max-width: 16ch;
  text-wrap: balance;
}
.section__lede {
  font-size: 16px; line-height: 1.65;
  color: var(--fg-secondary);
  max-width: 48ch;
  margin: 0;
}

/* =========================================================================
   PARTNERS — monochrome lockup
   ========================================================================= */
.partners {
  padding: 96px 0;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}
.partners__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 56px;
  flex-wrap: wrap; gap: 16px;
}
.partners__head h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  font-style: italic;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
}
.partners__row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--border-hairline);
}
.partners__cell {
  padding: 32px 16px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
  border-right: 1px solid var(--border-hairline);
  display: flex; align-items: center; justify-content: center;
  min-height: 96px;
  transition: background var(--dur-fast) var(--ease-out);
}
.partners__cell:last-child { border-right: none; }
.partners__cell:hover { background: var(--bg-deep); color: var(--accent); }

/* =========================================================================
   STAT STRIP — editorial numbers
   ========================================================================= */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}
.stat {
  padding: 56px 32px 56px 0;
  border-right: 1px solid var(--border-hairline);
}
.stat:nth-child(n+2) { padding-left: 32px; }
.stat:last-child { border-right: none; }
.stat__label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-tertiary);
  margin-bottom: 32px;
  display: block;
}
.stat__value {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--fg-primary);
  font-size: 88px;
  display: flex; align-items: baseline; gap: 6px;
}
.stat__value small {
  font-family: var(--font-sans);
  font-size: 0.22em;
  color: var(--fg-tertiary);
  font-weight: 400;
  letter-spacing: 0;
}
.stat__caption {
  font-family: var(--font-sans);
  font-size: 13px; line-height: 1.55;
  color: var(--fg-secondary);
  max-width: 26ch;
  margin-top: 24px;
}

/* =========================================================================
   FORMS — hairline inputs, smallcaps labels
   ========================================================================= */
.field { margin-bottom: 28px; }
.field label {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-tertiary);
  margin-bottom: 10px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-hairline);
  padding: 10px 0;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  color: var(--fg-primary);
  border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.field textarea { resize: vertical; min-height: 100px; }

/* =========================================================================
   BRAND LOCKUP — supplied logo (light + dark swap)
   ========================================================================= */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  /* Source files are 560×224 (2.5:1 canvas), but the actual wordmark fills
     ~50% of canvas height — the rest is intentional breathing room.
     We size the canvas at ~2× the desired visible wordmark height so the
     wordmark inside renders at the right scale relative to surrounding type. */
  height: 56px;
  border: none;
  line-height: 1;
}
.brand-lockup--lg { height: 80px; }
.brand-lockup--xl { height: 144px; }
.brand-lockup__img {
  height: 100%; width: auto; display: block;
  /* Source files are very large; browser scales. Compression flagged in rationale. */
}
.brand-lockup__img--dark { display: none; }
[data-theme="dark"] .brand-lockup__img--light { display: none; }
[data-theme="dark"] .brand-lockup__img--dark  { display: block; }

/* =========================================================================
   BRAND X-MARK — the stylised red X from the wordmark, as a reusable mark.
   Used as a real <img> so the supplied artwork is preserved exactly
   (the styled tick on the upper-left arm). 1x + 2x retina sources.
   ========================================================================= */
img.brand-x {
  display: inline-block;
  height: 1em; width: 1em;
  object-fit: contain;
  vertical-align: -0.18em;
  flex-shrink: 0;
}
img.brand-x--lg { height: 1.4em; width: 1.4em; vertical-align: -0.28em; }

/* =========================================================================
   PREVIEW ROW — numbered editorial table-of-contents row
   Used on home page (pillars, recent writing) and elsewhere.
   Defined globally so it works without page-level inline styles.
   ========================================================================= */
.preview__row {
  display: grid;
  grid-template-columns: 64px 1fr 2fr 56px;
  gap: 32px;
  align-items: baseline;
  padding: 36px 0;
  border-bottom: 1px solid var(--border-hairline);
  border-top: none; border-left: none; border-right: none;
  transition: background var(--dur-fast) var(--ease-out);
  color: var(--fg-primary);
}
.preview__row:hover { color: var(--fg-primary); }
.preview__row__num {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 300; font-style: italic;
  color: var(--fg-tertiary);
  letter-spacing: -0.02em;
}
.preview__row__name {
  font-family: var(--font-display);
  font-size: 40px; font-weight: 400;
  line-height: 1.05; letter-spacing: -0.02em;
  color: var(--fg-primary);
}
.preview__row__desc {
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.65;
  color: var(--fg-secondary);
  margin: 0; max-width: 46ch;
}
.preview__row__arrow { color: var(--fg-tertiary); justify-self: end; transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.preview__row:hover .preview__row__arrow { color: var(--accent); transform: translate(4px, -4px); }
.preview__row:hover .preview__row__num { color: var(--accent); }
@media (max-width: 980px) {
  .preview__row { grid-template-columns: 48px 1fr; gap: 16px; }
  .preview__row__desc, .preview__row__arrow { display: none; }
  .preview__row__name { font-size: 28px; }
}

/* =========================================================================
   REVEAL animation
   ========================================================================= */
.reveal { animation: ex-reveal 600ms var(--ease-out) both; }
.reveal-stagger > * { animation: ex-reveal 600ms var(--ease-out) both; }
.reveal-stagger > *:nth-child(1) { animation-delay: 0ms; }
.reveal-stagger > *:nth-child(2) { animation-delay: 60ms; }
.reveal-stagger > *:nth-child(3) { animation-delay: 120ms; }
.reveal-stagger > *:nth-child(4) { animation-delay: 180ms; }
.reveal-stagger > *:nth-child(5) { animation-delay: 240ms; }
.reveal-stagger > *:nth-child(6) { animation-delay: 300ms; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* =========================================================================
   VULNVIS HERO — live-feel embedded console
   Mirrors the canonical Vulnvis token set; sits inside the editorial frame.
   ========================================================================= */
.vv {
  border: 1px solid var(--border-hairline);
  background: var(--bg-page);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--font-sans);
  position: relative;
}
[data-theme="dark"] .vv { background: var(--ink-700); }

.vv__topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--bg-recessed);
  font-size: 12px;
}
.vv__brand { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--fg-primary); letter-spacing: -0.005em; }
.vv__brand .vsep { width: 1px; height: 14px; background: var(--border-hairline); }
.vv__brand .by { font-weight: 400; font-size: 11px; color: var(--fg-tertiary); display: inline-flex; align-items: baseline; gap: 1px; }
.vv__brand .by .brand-x { height: 0.95em; width: 0.95em; vertical-align: -0.12em; margin-left: 1px; }
/* Legacy class kept for backwards-compat with anything still typing the X */
.vv__brand .by .x { color: var(--accent); font-weight: 700; font-style: italic; }
.vv__crumbs { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--fg-tertiary); }
.vv__crumbs .here { color: var(--fg-primary); }
.vv__live { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--accent); text-transform: uppercase; }
.vv__live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: vv-live-pulse 2s ease-in-out infinite; }
@keyframes vv-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Page header */
.vv__header {
  display: flex; justify-content: space-between; align-items: end; gap: 24px;
  padding: 28px 28px 22px;
  border-bottom: 1px solid var(--border-hairline);
  flex-wrap: wrap;
}
.vv__eye { display: flex; align-items: center; gap: 12px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); }
.vv__eye::before { content: ""; width: 28px; height: 2px; background: var(--accent); }
.vv__h {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 8px 0 0;
  color: var(--fg-primary);
}
.vv__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vv__btn {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  padding: 7px 12px;
  border: 1px solid var(--border-hairline); background: transparent;
  color: var(--fg-secondary); border-radius: 2px; letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.vv__btn:hover { color: var(--fg-primary); border-color: var(--fg-primary); }
.vv__btn--accent { background: var(--accent); border-color: var(--accent); color: var(--paper-50); }
.vv__btn--accent:hover { background: var(--signal-700); border-color: var(--signal-700); color: var(--paper-50); }

/* 4-up stat row */
.vv__stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.vv__stat {
  padding: 22px 24px;
  border-right: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}
.vv__stat:last-child { border-right: none; }
.vv__stat-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.vv__stat-eye { font-family: var(--font-sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-secondary); }
.vv__stat-eye--accent { color: var(--fg-primary); }
.vv__stat-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
}
.vv__stat-num small { font-family: var(--font-sans); font-size: 13px; color: var(--fg-tertiary); margin-left: 4px; font-weight: 400; letter-spacing: 0; }
.vv__stat-num--signal { color: var(--accent); }
.vv__stat-rule { width: 24px; height: 2px; background: var(--fg-primary); margin-top: 12px; }
.vv__stat-rule--accent { background: var(--accent); }
.vv__stat-sub { margin-top: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-tertiary); }
.vv__delta { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-tertiary); }
.vv__delta--bad { color: var(--accent); }
.vv__delta--good { color: var(--success); }
.vv__delta--flat { color: var(--fg-tertiary); }

/* Two-column row patterns */
.vv__row { display: grid; gap: 0; }
.vv__row--14-10 { grid-template-columns: 1.4fr 1fr; }
.vv__row--equal { grid-template-columns: 1fr 1fr; }
.vv__row > .vv__panel { border-right: 1px solid var(--border-hairline); }
.vv__row > .vv__panel:last-child { border-right: none; }

.vv__panel { padding: 0; border-bottom: 1px solid var(--border-hairline); }
.vv__panel-h {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px; border-bottom: 1px solid var(--border-hairline);
}
.vv__panel-h h3 {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-secondary); margin: 0;
}
.vv__panel-h .meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-tertiary); }
.vv__panel-body { padding: 24px; }

/* Trend chart */
.vv__trend { width: 100%; height: 200px; position: relative; }
.vv__trend svg { width: 100%; height: 100%; display: block; }

/* Aggregate bars */
.vv__agg { display: flex; flex-direction: column; gap: 18px; }
.vv__agg-row { display: flex; flex-direction: column; gap: 6px; }
.vv__agg-top { display: flex; justify-content: space-between; align-items: baseline; }
.vv__agg-lab { font-family: var(--font-sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-secondary); }
.vv__agg-val { font-family: var(--font-display); font-size: 26px; font-weight: 400; color: var(--fg-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.vv__agg-track { height: 4px; background: var(--border-hairline); position: relative; }
.vv__agg-fill { position: absolute; left: 0; top: 0; bottom: 0; transition: width var(--dur-slow) var(--ease-out); }
.vv__agg-fill--p1 { background: var(--signal-600); }
.vv__agg-fill--p2 { background: var(--amber-500); }
.vv__agg-fill--p3 { background: var(--steel-500); }
[data-theme="dark"] .vv__agg-fill--p1 { background: var(--signal-500); }
[data-theme="dark"] .vv__agg-fill--p2 { background: var(--amber-400); }
[data-theme="dark"] .vv__agg-fill--p3 { background: var(--steel-300); }

/* Churn 2x2 */
.vv__churn {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border-hairline);
  border-left: 1px solid var(--border-hairline);
}
.vv__churn-cell {
  padding: 18px;
  border-right: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}
.vv__churn-lab { font-family: var(--font-sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-tertiary); display: flex; justify-content: space-between; }
.vv__churn-lab--accent { color: var(--fg-primary); }
.vv__churn-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; }
.vv__churn-k { font-family: var(--font-mono); font-size: 11px; color: var(--fg-tertiary); }
.vv__churn-v { font-family: var(--font-display); font-size: 28px; font-weight: 300; letter-spacing: -0.02em; color: var(--fg-primary); font-variant-numeric: tabular-nums; }
.vv__churn-v--signal { color: var(--accent); }
.vv__churn-v--good { color: var(--success); }

/* Resolution telemetry */
.vv__spair { display: grid; grid-template-columns: 1fr 1fr; }
.vv__spair-cell { padding: 22px 24px; border-right: 1px solid var(--border-hairline); }
.vv__spair-cell:last-child { border-right: none; }
.vv__spair-lab { font-family: var(--font-sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-tertiary); }
.vv__spair-num { margin-top: 12px; font-family: var(--font-display); font-size: 44px; font-weight: 300; line-height: 1; letter-spacing: -0.025em; color: var(--fg-primary); font-variant-numeric: tabular-nums; }
.vv__spair-num--signal { color: var(--accent); }
.vv__spair-num small { font-family: var(--font-sans); font-size: 14px; color: var(--fg-tertiary); margin-left: 4px; font-weight: 400; }
.vv__spair-sub { margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-tertiary); }

/* Top contributors table */
.vv__tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.vv__tbl thead tr {
  border-top: 1px solid var(--fg-primary);
  border-bottom: 1px solid var(--fg-primary);
}
.vv__tbl th { text-align: left; padding: 10px 24px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-tertiary); }
.vv__tbl td { padding: 10px 24px; border-bottom: 1px solid var(--border-hairline); color: var(--fg-primary); }
.vv__tbl tr:last-child td { border-bottom: none; }
.vv__tbl .col-num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-sans); }
.vv__tbl .vv-tag { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--border-hairline); color: var(--fg-secondary); }
.vv__tbl tr.is-top td.col-num { color: var(--accent); font-weight: 600; }
.vv__id { font-family: var(--font-mono); font-size: 12px; color: var(--fg-secondary); }

/* Mlist */
.vv__mlist { display: flex; flex-direction: column; padding: 0 24px; }
.vv__mitem { padding: 18px 0; border-bottom: 1px solid var(--border-hairline); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px; }
.vv__mitem:last-child { border-bottom: none; }
.vv__mitem-lab { font-family: var(--font-sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-secondary); margin-bottom: 4px; }
.vv__mitem-sub { font-family: var(--font-mono); font-size: 11px; color: var(--fg-tertiary); }
.vv__mitem-num { font-family: var(--font-display); font-size: 36px; font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: var(--fg-primary); text-align: right; font-variant-numeric: tabular-nums; }
.vv__mitem-num--signal { color: var(--accent); }

/* Tick flash on number change */
@keyframes tick-flash {
  0% { background: transparent; }
  10% { background: color-mix(in srgb, var(--accent) 22%, transparent); }
  100% { background: transparent; }
}
.vv__flash { animation: tick-flash 800ms var(--ease-out); }

/* Risk reticle */
.vv__scale { margin-top: 24px; }
.vv__scale-track { position: relative; height: 1px; background: var(--border-hairline); display: grid; grid-template-columns: 25% 25% 25% 25%; }
.vv__scale-seg { position: relative; border-right: 1px solid var(--border-hairline); }
.vv__scale-seg:last-child { border-right: none; }
.vv__scale-seg::before { content: ""; position: absolute; left: 0; right: 1px; top: 0; height: 1px; }
.vv__scale-seg--low::before { background: var(--steel-500); }
.vv__scale-seg--med::before { background: var(--amber-500); }
.vv__scale-seg--high::before { background: var(--amber-600); }
.vv__scale-seg--crit::before { background: var(--signal-600); }
.vv__reticle { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 28px; height: 28px; pointer-events: none; transition: left var(--dur-slow) var(--ease-out); }
.vv__reticle::before, .vv__reticle::after { content: ""; position: absolute; background: var(--fg-primary); }
.vv__reticle::before { left: 0; right: 0; top: calc(50% - 0.5px); height: 1px; }
.vv__reticle::after { top: 0; bottom: 0; left: calc(50% - 0.5px); width: 1px; }
.vv__reticle-circle { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--accent); transform: translate(-50%, -50%); background: var(--bg-page); }
[data-theme="dark"] .vv__reticle-circle { background: var(--ink-700); }
.vv__scale-labels { display: grid; grid-template-columns: 25% 25% 25% 25%; margin-top: 14px; }
.vv__scale-labels span { font-family: var(--font-sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-tertiary); }
.vv__scale-labels span.is-active { color: var(--fg-primary); }

/* env composition formula */
.vv__env { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: start; }
.vv__env-fig { display: flex; flex-direction: column; gap: 14px; }
.vv__env-num { font-family: var(--font-display); font-size: 88px; font-weight: 300; line-height: 0.95; letter-spacing: -0.025em; color: var(--fg-primary); font-variant-numeric: tabular-nums; }
.vv__env-num small { font-family: var(--font-sans); font-size: 22px; color: var(--fg-tertiary); margin-left: 6px; font-weight: 400; letter-spacing: 0; }
.vv__env-band { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-secondary); }
.vv__env-band-dot { width: 8px; height: 8px; background: var(--amber-500); display: inline-block; }
[data-theme="dark"] .vv__env-band-dot { background: var(--amber-400); }
.vv__env-sub { font-family: var(--font-sans); font-size: 13px; color: var(--fg-tertiary); max-width: 32ch; line-height: 1.55; }
.vv__env-formula { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 12px; }
.vv__env-cell { flex: 1 0 80px; padding: 12px 14px; border: 1px solid var(--border-hairline); background: var(--bg-page); display: flex; flex-direction: column; gap: 4px; border-radius: 2px; }
[data-theme="dark"] .vv__env-cell { background: var(--ink-800); }
.vv__env-cell-num { font-family: var(--font-sans); font-weight: 400; font-size: 20px; color: var(--fg-primary); letter-spacing: -0.01em; }
.vv__env-cell--out { border-color: var(--amber-500); }
.vv__env-cell--out .vv__env-cell-num { color: var(--amber-500); font-weight: 600; }
[data-theme="dark"] .vv__env-cell--out { border-color: var(--amber-400); }
[data-theme="dark"] .vv__env-cell--out .vv__env-cell-num { color: var(--amber-400); }
.vv__env-cell-lab { font-family: var(--font-sans); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-tertiary); }
.vv__env-op { align-self: center; font-family: var(--font-mono); font-size: 14px; color: var(--fg-muted); padding: 0 2px; }

/* Hero responsiveness */
@media (max-width: 980px) {
  .vv__stats { grid-template-columns: repeat(2, 1fr); }
  .vv__stat:nth-child(2) { border-right: none; }
  .vv__row--14-10, .vv__row--equal { grid-template-columns: 1fr; }
  .vv__row > .vv__panel { border-right: none; }
  .vv__env { grid-template-columns: 1fr; gap: 24px; }
  .vv__crumbs { display: none; }
}
@media (max-width: 640px) {
  .vv__stats { grid-template-columns: 1fr; }
  .vv__stat { border-right: none; }
  .vv__churn { grid-template-columns: 1fr; }
  .vv__spair { grid-template-columns: 1fr; }
  .vv__spair-cell { border-right: none; border-bottom: 1px solid var(--border-hairline); }
  .vv__topbar { padding: 12px 16px; }
  .vv__brand .by { display: none; }
  .vv__panel-body { padding: 18px; }
  .vv__stat-num { font-size: 44px; }
}

/* =========================================================================
   HOMEPAGE: VULNVIS HERO FRAME
   ========================================================================= */
.vv-hero {
  padding: 64px 0 96px;
}
.vv-hero__frame {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  align-items: start;
  margin-bottom: 56px;
}
.vv-hero__frame .runhead { padding-top: 16px; }
.vv-hero__title.disp {
  font-size: clamp(48px, 6.4vw, 96px);
  max-width: 18ch;
  margin: 0 0 24px;
  font-weight: 300;
}
.vv-hero__lede {
  font-family: var(--font-sans);
  font-size: 19px; line-height: 1.55;
  color: var(--fg-secondary);
  max-width: 56ch; margin: 0 0 32px;
}
.vv-hero__cta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

@media (max-width: 980px) {
  .vv-hero__frame { grid-template-columns: 1fr; gap: 24px; }
}

/* =========================================================================
   PROPOSITION STRIP — oversized editorial sentence
   ========================================================================= */
.proposition-strip {
  padding: 144px 0;
  border-top: 1px solid var(--border-hairline);
}
.proposition-strip .disp {
  font-size: clamp(56px, 7.5vw, 128px);
  max-width: 22ch;
  font-weight: 300;
  line-height: 0.94;
}

/* =========================================================================
   STATE OF THE ESTATE — takeaway numbers grid
   ========================================================================= */
.estate-state { padding: 144px 0; border-top: 1px solid var(--border-hairline); }
.estate-state__grid {
  display: grid; grid-template-columns: 200px 1fr;
  gap: 64px; margin-bottom: 64px;
}
.estate-state__cards {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--border-hairline);
}
.estate-state__card {
  padding: 56px 48px 56px 0;
  border-right: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}
.estate-state__card:nth-child(2n) { padding-left: 48px; padding-right: 0; border-right: none; }
.estate-state__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 144px;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--accent);
  margin: 0 0 24px;
  font-variant-numeric: tabular-nums;
}
.estate-state__num small { font-family: var(--font-sans); font-size: 0.22em; color: var(--fg-tertiary); margin-left: 6px; font-weight: 400; }
.estate-state__caption { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 24px; line-height: 1.25; color: var(--fg-primary); max-width: 28ch; margin: 0 0 16px; }
.estate-state__source { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--fg-tertiary); text-transform: uppercase; }
@media (max-width: 980px) {
  .estate-state__grid { grid-template-columns: 1fr; }
  .estate-state__cards { grid-template-columns: 1fr; }
  .estate-state__card { padding: 40px 0 !important; border-right: none !important; }
  .estate-state__num { font-size: 96px; }
}

/* =========================================================================
   GRAPHIC DEVICE: HYGIENE FUNNEL
   ========================================================================= */
.hygiene { padding: 144px 0; border-top: 1px solid var(--border-hairline); }
.hygiene__head { display: grid; grid-template-columns: 200px 1fr; gap: 64px; align-items: start; margin-bottom: 64px; }
.hygiene__head .runhead { padding-top: 18px; }
.hygiene__head h2.disp { font-size: 64px; max-width: 28ch; }
.hygiene__svg-wrap {
  border: 1px solid var(--border-hairline);
  background: var(--bg-surface);
  padding: 56px 32px;
  position: relative;
}
.hygiene__caption {
  margin-top: 32px;
  font-family: var(--font-display);
  font-style: italic; font-weight: 400; font-size: 28px;
  line-height: 1.3; color: var(--fg-primary);
  max-width: 52ch;
}
@media (max-width: 980px) { .hygiene__head { grid-template-columns: 1fr; } }

/* =========================================================================
   GRAPHIC DEVICE: ESTATE MAP (40x grid)
   ========================================================================= */
.estate-map {
  display: grid;
  grid-template-columns: repeat(40, 1fr);
  gap: 3px;
  padding: 24px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-surface);
  position: relative;
  overflow: hidden;
}
.estate-map__cell {
  aspect-ratio: 1;
  background: var(--ink-700);
  opacity: 0.6;
}
[data-theme="dark"] .estate-map__cell { background: var(--ink-600); opacity: 0.5; }
.estate-map__cell.is-known { background: var(--steel-500); opacity: 0.7; }
[data-theme="dark"] .estate-map__cell.is-known { background: var(--steel-300); opacity: 0.5; }
.estate-map__cell.is-unknown { background: var(--signal-600); opacity: 0.55; animation: estate-pulse 4s ease-in-out infinite; }
[data-theme="dark"] .estate-map__cell.is-unknown { background: var(--signal-500); opacity: 0.55; }
@keyframes estate-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.85; } }
.estate-map::after {
  content: ""; position: absolute; left: 0; right: 0; top: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: estate-scan 7s linear infinite;
}
@keyframes estate-scan {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(420px); opacity: 0; }
}
@media (max-width: 720px) { .estate-map { grid-template-columns: repeat(20, 1fr); } }

/* =========================================================================
   GRAPHIC DEVICE: PATCH LATENCY CLOCK
   ========================================================================= */
.patch-clock { width: 100%; max-width: 520px; margin: 0 auto; }
.patch-clock svg { width: 100%; height: auto; display: block; }

/* =========================================================================
   APPROACH PAGE — six numbered principles
   ========================================================================= */
.principle {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  padding: 96px 0;
  border-top: 1px solid var(--border-hairline);
  align-items: start;
}
.principle__num {
  font-family: var(--font-display);
  font-weight: 300; font-style: italic;
  font-size: 96px; line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.principle__body { max-width: 64ch; }
.principle__title.disp {
  font-size: 56px; line-height: 1.02; max-width: 22ch;
  margin: 0 0 32px;
  font-weight: 400;
}
.principle__body p {
  font-family: var(--font-sans);
  font-size: 17px; line-height: 1.7;
  color: var(--fg-secondary); margin: 0 0 20px;
  max-width: 64ch;
}
.principle__body p strong { color: var(--fg-primary); font-weight: 600; }
.diagnostic {
  margin-top: 24px;
  padding: 24px 28px;
  border-left: 2px solid var(--accent);
  background: var(--bg-surface);
}
[data-theme="dark"] .diagnostic { background: var(--ink-700); }
.diagnostic__lab {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent); margin-bottom: 6px; display: block;
}
.diagnostic__q {
  font-family: var(--font-display);
  font-style: italic; font-weight: 400;
  font-size: 22px; color: var(--fg-primary);
  letter-spacing: -0.01em; line-height: 1.35;
  margin: 0;
}
@media (max-width: 980px) {
  .principle { grid-template-columns: 1fr; gap: 24px; padding: 64px 0; }
  .principle__num { font-size: 72px; }
  .principle__title.disp { font-size: 40px; }
}

/* AI thesis callout — used inside Approach */
.ai-callout {
  background: var(--ink-800);
  color: var(--paper-100);
  padding: 96px 0;
  margin: 96px 0 0;
}
[data-theme="dark"] .ai-callout { background: var(--ink-900); }
.ai-callout .wrap { display: grid; grid-template-columns: 200px 1fr; gap: 64px; align-items: start; }
.ai-callout .runhead { color: var(--ink-200); }
.ai-callout .runhead__num { color: var(--signal-500); }
.ai-callout .runhead__sep { background: var(--signal-500); }
.ai-callout h2.disp {
  font-size: clamp(48px, 6vw, 88px);
  max-width: 20ch; margin: 0 0 32px;
  color: var(--paper-100);
  font-weight: 300;
}
.ai-callout h2.disp em { color: var(--paper-100); }
.ai-callout h2.disp em::after { background: var(--signal-500); opacity: 0.9; }
.ai-callout p {
  font-family: var(--font-sans);
  font-size: 18px; line-height: 1.65;
  color: var(--ink-200); max-width: 56ch;
  margin: 0 0 20px;
}
.ai-callout p strong { color: var(--paper-100); font-weight: 600; }

/* =========================================================================
   SERVICE PAGE — diagnostic block (per-service self-test)
   ========================================================================= */
.service-diag {
  margin-top: 40px;
  padding: 28px 32px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-surface);
}
[data-theme="dark"] .service-diag { background: var(--ink-700); }
.service-diag h4 {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent); margin: 0 0 16px;
}
.service-diag ul { list-style: none; margin: 0; padding: 0; }
.service-diag li {
  font-family: var(--font-sans); font-size: 14px;
  color: var(--fg-secondary);
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-hairline);
  display: grid; grid-template-columns: 16px 1fr; gap: 12px;
  line-height: 1.5;
}
.service-diag li::before { content: "?"; color: var(--accent); font-family: var(--font-mono); font-weight: 600; }
.service-diag li:last-child { border-bottom: none; }

/* =========================================================================
   CAPABILITY GRID (VulnVis page)
   ========================================================================= */
.capability-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--border-hairline);
}
.capability {
  padding: 48px;
  border-bottom: 1px solid var(--border-hairline);
  border-right: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
}
.capability:nth-child(2n) { border-right: none; }
.capability__eye {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent); display: block; margin-bottom: 12px;
}
.capability__title.disp {
  font-size: 32px; line-height: 1.1; max-width: 18ch;
  margin: 0 0 16px;
  font-weight: 400;
}
.capability__copy {
  font-family: var(--font-sans); font-size: 14px;
  color: var(--fg-secondary); line-height: 1.6;
  margin: 0 0 28px; max-width: 42ch;
}
.capability__detail {
  min-height: 110px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-recessed);
  padding: 18px;
  display: flex; align-items: end;
  margin-top: auto;
}
.capability__detail-num {
  font-family: var(--font-display); font-weight: 300;
  font-size: 48px; line-height: 0.95; letter-spacing: -0.025em;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
}
.capability__detail-num small { font-family: var(--font-sans); font-size: 14px; color: var(--fg-tertiary); margin-left: 4px; font-weight: 400; }
.capability__detail-num--signal { color: var(--accent); }
.capability__detail-lab {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-tertiary);
  align-self: end;
  margin-left: auto;
}
@media (max-width: 720px) {
  .capability-grid { grid-template-columns: 1fr; }
  .capability { border-right: none; padding: 32px; }
}

/* =========================================================================
   BEFORE / AFTER (case study)
   ========================================================================= */
.beforeafter {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border-hairline);
  background: var(--bg-surface);
}
[data-theme="dark"] .beforeafter { background: var(--ink-700); }
.beforeafter__col { padding: 40px; border-right: 1px solid var(--border-hairline); }
.beforeafter__col:last-child { border-right: none; }
.beforeafter__lab {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-tertiary); margin-bottom: 24px;
}
.beforeafter__col--after .beforeafter__lab { color: var(--accent); }
.beforeafter__row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; padding: 12px 0;
  border-bottom: 1px solid var(--border-hairline);
  gap: 12px;
}
.beforeafter__row:last-child { border-bottom: none; }
.beforeafter__row-lab { font-family: var(--font-sans); font-size: 13px; color: var(--fg-secondary); }
.beforeafter__row-val { font-family: var(--font-display); font-weight: 300; font-size: 28px; color: var(--fg-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.beforeafter__col--after .beforeafter__row-val { color: var(--accent); }
@media (max-width: 720px) {
  .beforeafter { grid-template-columns: 1fr; }
  .beforeafter__col { border-right: none; border-bottom: 1px solid var(--border-hairline); }
  .beforeafter__col:last-child { border-bottom: none; }
}

/* =========================================================================
   CONTACT PAGE
   ========================================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  padding: 96px 0;
}
.contact-statement.disp {
  font-size: clamp(36px, 4.4vw, 56px);
  max-width: 18ch;
  margin: 0 0 32px;
  font-weight: 400;
}
.contact-detail {
  font-family: var(--font-sans); font-size: 17px; line-height: 1.65;
  color: var(--fg-secondary); max-width: 42ch;
  margin: 0 0 40px;
}
.contact-direct .meta {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; color: var(--accent);
  text-transform: uppercase; display: block; margin-bottom: 12px;
}
.contact-direct a {
  font-family: var(--font-sans); font-size: 18px; font-weight: 500;
  color: var(--fg-primary);
  display: block; padding: 6px 0;
  border-bottom: 1px solid var(--border-hairline);
}
.contact-form .form-head {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; color: var(--accent);
  text-transform: uppercase; margin: 0 0 32px;
}
@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr; gap: 48px; padding: 64px 0; }
}

/* =========================================================================
   TEAM PAGE additions
   ========================================================================= */
.team-intro { padding: 96px 0 64px; border-top: 1px solid var(--border-hairline); }
.team-intro__grid { display: grid; grid-template-columns: 200px 1fr; gap: 64px; align-items: start; }
.team-intro p { font-family: var(--font-sans); font-size: 19px; line-height: 1.55; color: var(--fg-secondary); max-width: 56ch; }
.team-intro p strong { color: var(--fg-primary); font-weight: 600; }
@media (max-width: 980px) { .team-intro__grid { grid-template-columns: 1fr; gap: 24px; } }

/* =========================================================================
   PARTNERS — opinionated tiles (per service brief)
   ========================================================================= */
.partner-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--border-hairline);
  margin-top: 32px;
}
.partner-tile {
  padding: 48px;
  border-bottom: 1px solid var(--border-hairline);
  border-right: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
}
.partner-tile:nth-child(2n) { border-right: none; }
.partner-tile__name {
  font-family: var(--font-display); font-style: italic;
  font-size: 32px; font-weight: 400; letter-spacing: -0.02em;
  color: var(--accent); margin: 0 0 12px;
}
.partner-tile__role {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-tertiary); margin-bottom: 14px; display: block;
}
.partner-tile__copy {
  font-family: var(--font-sans); font-size: 14px;
  color: var(--fg-secondary); line-height: 1.65; margin: 0;
}
@media (max-width: 720px) {
  .partner-tiles { grid-template-columns: 1fr; }
  .partner-tile { border-right: none; }
}

/* =========================================================================
   COOKIE CONSENT BANNER
   Fixed-bottom strip; appears once per device until a choice is recorded.
   Re-openable via window.epxOpenCookiePrefs().
   ========================================================================= */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  background: var(--paper-50);
  border-top: 1px solid var(--border-hairline);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.06);
  animation: cookieBannerIn 240ms var(--ease-out) both;
}
[data-theme="dark"] .cookie-banner {
  background: var(--ink-800);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
}
@keyframes cookieBannerIn {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.cookie-banner__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.cookie-banner__copy { min-width: 0; }
.cookie-banner__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.cookie-banner__copy p {
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.6;
  color: var(--fg-secondary);
  margin: 0; max-width: 78ch;
}
.cookie-banner__copy a {
  color: var(--fg-primary);
  border-bottom: 1px solid var(--border-hairline);
}
.cookie-banner__copy a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.cookie-banner__actions {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 720px) {
  .cookie-banner__inner {
    grid-template-columns: 1fr;
    padding: 18px 20px;
    gap: 16px;
  }
  .cookie-banner__actions { justify-content: flex-start; }
}

/* =========================================================================
   GLOBAL MOBILE LAYER
   Page-specific media queries handle individual sections; this layer
   covers the chrome (wrap, nav, footer) and any grid that didn't get a
   per-page mobile rule. Tested at 360, 414, 768.
   ========================================================================= */

/* Tablet and below: tighten outer gutters; relax display-font sizes that
   were tuned for ~1280+ desktop. */
@media (max-width: 980px) {
  .wrap { padding: 0 32px; }
  h1.disp { font-size: clamp(48px, 7vw, 72px) !important; max-width: 22ch !important; }
  h2.disp { font-size: clamp(36px, 5.5vw, 56px) !important; max-width: 24ch !important; }
}

/* Phone: hamburger nav, single-column footer, stack any leftover two-up
   grids that page CSS didn't cover. Use !important sparingly to win
   over inline grid-template-columns set on individual pages. */
@media (max-width: 720px) {
  .wrap { padding: 0 20px; }

  /* Nav: collapse to logo + theme toggle + hamburger.
     The hamburger toggles .nav__links via [aria-expanded] state set in JS.
     When open, links drop down as a vertical stack under the bar. */
  .nav {
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    padding: 10px 0 8px;
    position: relative;
  }
  .nav__cta .btn--accent { display: none; }
  .nav__cta .theme-toggle { font-size: 10px; padding: 6px 10px; }
  .nav__links {
    display: none;
    position: absolute; top: 100%; left: -20px; right: -20px;
    background: var(--bg-warm);
    border-bottom: 1px solid var(--border-hairline);
    padding: 16px 20px 20px;
    flex-direction: column;
    gap: 0;
    z-index: 60;
    box-shadow: 0 12px 24px rgba(0,0,0,0.06);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-hairline);
    font-size: 13px;
  }
  .nav__links a:last-child { border-bottom: none; }
  .nav__hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid var(--border-hairline);
    border-radius: 4px;
    cursor: pointer;
    color: var(--fg-primary);
  }
  .nav__hamburger i { width: 18px; height: 18px; }

  /* Footer: stack everything one column; strip the left rail label. */
  .footer__grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
    margin-bottom: 48px;
  }
  .footer__rail { display: none; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 24px; }

  /* Reduce common section padding so mobile pages aren't 80% whitespace. */
  .section { padding: 64px 0 !important; }
  .pagehead { padding: 40px 0 56px !important; }

  /* Ultimate fallbacks: stack two-up grids that didn't get a page-level
     mobile rule. Targets every magazine-style "runhead-rail + content"
     grid layout on the site, plus 2/3/4-up content grids that need to
     collapse into a single column on phones. */
  .home-hero__split,
  .home-hero__below,
  .contact__grid,
  .three-cards,
  .team__media,
  .team__head,
  .pos__grid,
  .joinstrip__inner,
  .legal__head,
  .legal__body,
  .home-section__head,
  .home-section__grid,
  .pagehead__grid,
  .pagehead__below,
  .home-hero__art-label,
  .ai-callout .wrap,
  .section__grid,
  .cta-body,
  .case-meta,
  .index-head__grid,
  .index-list__head,
  .featured__grid,
  .cs-cover__grid,
  .cs-body__grid,
  .pillar__grid,
  .toc__grid,
  .toc__below {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  /* Restore vertical breathing room between the now-stacked children. */
  .home-hero__split > * + *,
  .home-hero__below > * + *,
  .contact__grid > * + *,
  .three-cards > * + *,
  .team__media > * + *,
  .team__head > * + *,
  .pos__grid > * + *,
  .joinstrip__inner > * + *,
  .legal__head > * + *,
  .legal__body > * + *,
  .home-section__head > * + *,
  .home-section__grid > * + *,
  .pagehead__grid > * + *,
  .pagehead__below > * + *,
  .home-hero__art-label > * + *,
  .ai-callout .wrap > * + *,
  .section__grid > * + *,
  .cta-body > * + *,
  .index-head__grid > * + *,
  .index-list__head > * + *,
  .featured__grid > * + *,
  .cs-cover__grid > * + *,
  .cs-body__grid > * + *,
  .pillar__grid > * + *,
  .toc__grid > * + *,
  .toc__below > * + * {
    margin-top: 24px !important;
  }

  /* Coloured callout (§02, §08 etc.) — vertical padding tuned for desktop
     leaves the section feeling cavernous on a phone. Tighten it. */
  .ai-callout { padding: 56px 0 !important; }
  [data-page="home"] .ai-callout { padding: 56px 0 !important; }
  .ai-callout h2.disp { margin-bottom: 24px !important; }

  /* The case-meta strip (Sector · Estate · Tech · Engagement) was a flex
     row with 20px gaps; on a phone that wraps awkwardly. Force a clean
     vertical stack with a smaller gap. */
  .case-meta { display: flex !important; flex-direction: column; gap: 8px !important; }

  /* Tone down clamp() floors and oversized inline font-size */
  h1.disp { font-size: clamp(40px, 9vw, 56px) !important; }
  h2.disp { font-size: clamp(28px, 7vw, 40px) !important; }
  .standfirst { font-size: 16px !important; }

  /* Drop fixed 200px rail columns; the left rail isn't useful below tablet. */
  .home-section__head,
  .home-section__grid,
  .pos__grid,
  .joinstrip__inner,
  .legal__head,
  .legal__body { gap: 24px !important; }
  .home-section__head .runhead,
  .home-section__grid .runhead,
  .pos__grid .runhead,
  .joinstrip__inner .runhead,
  .home-section__head .rail-marker,
  .home-section__grid .rail-marker,
  .pos__grid .rail-marker,
  .joinstrip__inner .rail-marker,
  .legal__rail { padding-top: 0 !important; }

  /* Cookie banner buttons full-width-ish and stacked nicely. */
  .cookie-banner__actions .btn { flex: 1; justify-content: center; }
}

/* Very small phones: drop wrap padding further so very long words fit. */
@media (max-width: 380px) {
  .wrap { padding: 0 16px; }
  h1.disp { font-size: 38px !important; }
  h2.disp { font-size: 26px !important; }
}