/* RELAY — shared styles.
   Structural system (tokens, nav, section rhythm, card/offer-row/
   dark-section/cta-card patterns) built on SoProductive's actual
   site.css architecture, recoloured to RELAY's navy/terracotta
   identity. One proven system, not a patchwork of several. */

:root {
  --navy-50:  #EEF3F9;
  --navy-100: #DCE7F2;
  --navy-200: #B7CCE3;
  --navy-300: #7FA3CB;
  --navy-500: #164A83;
  --navy-600: #123E6E;
  --navy-700: #0F3563;

  --ink-900: #16181C;
  --ink-800: #202329;
  --ink-700: #4A4E57;
  --ink-500: #6B6B6B;
  --ink-300: #DBDBDA;
  --ink-200: #E6E6E4;
  --ink-100: #F1F1EF;
  --ink-50:  #F7F7F6;
  --ink-0:   #FFFFFF;

  --terracotta:      #B8482A;
  --terracotta-deep: #93391F;
  --terracotta-soft: #FCEDE7;

  --green-600: #1f8a4c;
  --green-100: #e3f3e9;

  --brand:           var(--navy-500);
  --brand-hover:     var(--navy-600);
  --brand-active:    var(--navy-700);
  --brand-soft:      var(--navy-50);
  --surface-page:    var(--ink-50);
  --surface-card:    var(--ink-0);
  --surface-inverse: var(--navy-700);
  --text-body:       var(--ink-900);
  --text-secondary:  var(--ink-700);
  --text-muted:      var(--ink-500);

  /* Kept on Figtree, per direction: SoProductive's font, not eqvweb's. */
  --font-sans: 'Figtree', Helvetica, Arial, sans-serif;
  --tracking-display: -0.04em;
  --tracking-heading: -0.02em;
  --tracking-caps: 0.08em;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(16,20,30,0.05), 0 4px 12px rgba(16,20,30,0.06);
  --shadow-pop:  0 12px 32px rgba(16,20,30,0.14);
  --focus-ring:  0 0 0 3px var(--navy-100);
  --transition-fast: 120ms ease;
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 620ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --reveal-y: 16px;

  --nav-h: 64px;

  /* Aliases some page-local blocks still reference. */
  --navy: var(--navy-500);
  --navy-deep: var(--navy-700);
  --grey: var(--ink-500);
  --light-grey: var(--ink-300);
  --rule: var(--ink-200);
  --bg: var(--surface-card);
  --ink: var(--ink-900);
  --ink-muted: var(--ink-700);
  --cream: var(--ink-50);
  --card-border: var(--ink-200);
  --c-relay: var(--navy-500);
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --wt-body: 500;
  --wt-med: 600;
  --wt-bold: 700;
  --wt-black: 800;
  --step--1: 12px;
  --step-0: 15px;
  --step-1: clamp(19px, 0.8vw + 17px, 23px);
  --step-2: clamp(24px, 1.6vw + 20px, 32px);
  --step-3: clamp(30px, 3vw + 22px, 46px);
  --step-4: clamp(38px, 5.5vw + 20px, 68px);
  --section-y: 88px;
  --measure: 62ch;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --reveal-y: 0px; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font: 500 15px/1.6 var(--font-sans);
  color: var(--text-body);
  background: var(--surface-card);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
em, i { font-style: normal; }
/* The single deliberate exception to the upright-em rule above: the
   RELAY Verify lockup. It is a product name, not emphasis, so it is
   scoped to this one class and cannot leak into body copy. Pages using
   it must load the italic axis of Figtree. */
.verify-mark { font-style: italic; letter-spacing: -0.01em; }
::selection { background: var(--navy-100); color: var(--ink-900); }
a { color: var(--brand); text-decoration: none; transition: color var(--transition-fast); }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.container { max-width: 1120px; margin-inline: auto; padding-inline: 24px; }
@media (max-width: 640px) { .container { padding-inline: 20px; } }

/* ── Type ── */
.eyebrow {
  font: 600 12px/1.4 var(--font-sans);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand);
}
.display {
  font: 700 var(--step-4)/1.08 var(--font-sans);
  letter-spacing: var(--tracking-display);
  color: var(--text-body);
  text-wrap: balance;
}
.impact { font: 700 var(--step-4)/1.08 var(--font-sans); letter-spacing: var(--tracking-display); color: var(--text-body); text-wrap: balance; }
.impact--centred { text-align: center; margin-inline: auto; }
.title-lg { font: 700 var(--step-3)/1.15 var(--font-sans); letter-spacing: var(--tracking-heading); color: var(--text-body); }
.h-section { font: 700 var(--step-3)/1.15 var(--font-sans); letter-spacing: var(--tracking-heading); color: var(--text-body); text-wrap: balance; }
.h2 { font: 700 var(--step-2)/1.2 var(--font-sans); letter-spacing: var(--tracking-heading); }
.h3 { font: 600 18px/1.3 var(--font-sans); }
.lede { font: 500 17px/1.6 var(--font-sans); color: var(--text-secondary); max-width: 56ch; }
.body-text { color: var(--text-secondary); max-width: var(--measure); font-size: var(--step-0); line-height: 1.75; }
.body-sm { font: 500 13px/1.5 var(--font-sans); color: var(--text-muted); }
.faded { color: var(--ink-500); }
.caption { font-size: var(--step--1); color: var(--text-muted); }
.hl, .impact .hl, .impact em, .band-title .hl { color: var(--terracotta); font-weight: inherit; }
@media (max-width: 720px) {
  .display, .impact { font-size: 38px; }
  .title-lg, .h-section { font-size: 28px; }
}

/* ── Buttons & links ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 15px/1 var(--font-sans);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-hover); color: #fff; }
.btn--secondary { background: var(--surface-card); color: var(--text-body); border-color: var(--ink-200); }
.btn--secondary:hover { background: var(--ink-100); color: var(--text-body); }
.btn--sm { font-size: 14px; padding: 8px 15px; }
.btn--lg { padding: 14px 24px; }
.btn-primary, .nav-cta { display: inline-flex; align-items: center; font: 700 14px/1 var(--font-sans); padding: 13px 22px; border-radius: var(--radius-sm); background: var(--brand); color: #fff; transition: background var(--transition-fast); }
.btn-primary:hover, .nav-cta:hover { background: var(--brand-hover); }
.btn-primary--inverse { background: #fff; color: var(--brand); }
.btn-primary--inverse:hover { background: var(--ink-50); }
.btn-secondary { display: inline-flex; align-items: center; gap: 6px; font: 700 14px/1 var(--font-sans); padding: 13px 22px; border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-body); border: 1px solid var(--ink-200); transition: background var(--transition-fast), border-color var(--transition-fast); }
.btn-secondary:hover { background: var(--ink-100); color: var(--text-body); border-color: var(--ink-300); }
.btn-ghost { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1 var(--font-sans); color: var(--text-secondary); }
.btn-ghost:hover { color: var(--brand); }
.btn-ghost--inverse { color: rgba(255,255,255,0.82); }
.btn-ghost--inverse:hover { color: #fff; }

.text-link { display: inline-flex; align-items: center; gap: 6px; font: 700 14px/1 var(--font-sans); color: var(--brand); }
.text-link:hover { color: var(--brand-hover); }

@media (max-width: 600px) {
  .cta-row { width: 100%; }
  .cta-row .btn { width: 100%; justify-content: center; }
}

/* ── Nav ── */
.site-nav {
  position: sticky; top: 0; z-index: 200;
  height: var(--nav-h);
  background: rgba(251, 249, 245, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}
.site-nav.scrolled { border-bottom-color: var(--ink-200); }
.nav-inner {
  max-width: 1120px; margin-inline: auto; padding-inline: 24px;
  height: 100%; position: relative;
  display: flex; align-items: center; gap: 28px;
}
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav-brand, .nav-brand--relay { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; }
.brand-relay {
  font: 800 20px/1 var(--font-sans);
  letter-spacing: var(--tracking-display);
  color: var(--ink-900);
}
.brand-relay-by { font: 500 11px/1 var(--font-sans); color: var(--text-muted); }

.nav-links {
  display: flex; align-items: center; gap: 4px; list-style: none;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 14px/1 var(--font-sans);
  color: var(--text-secondary);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
  background: none; border: none;
}
.nav-link:hover, .nav-link.active { background: var(--ink-100); color: var(--text-body); }
.nav-link::after { display: none; }

.nav-item { position: relative; }
.nav-group { display: inline-flex; align-items: center; }
.nav-caret {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 4px; margin-left: -6px;
  color: var(--text-secondary); cursor: pointer; border-radius: var(--radius-sm);
}
/* .nav-chevron, not .caret: page-local styles have used .caret for a
   blinking text cursor, and the two collided on every page carrying
   both (the nav arrow rendered as a flashing blue block). */
.nav-item .nav-link svg.nav-chevron, .nav-item .nav-caret svg { transition: transform var(--transition-fast); width: 12px; height: 12px; }
.nav-item:hover .nav-caret svg, .nav-item:focus-within .nav-caret svg, .nav-item.open .nav-caret svg { transform: rotate(180deg); }

.nav-submenu {
  list-style: none;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 10px; min-width: 260px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}
.nav-item:hover .nav-submenu, .nav-item:focus-within .nav-submenu, .nav-item.open .nav-submenu {
  opacity: 1; visibility: visible;
}
.nav-submenu-panel {
  background: var(--ink-0);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  padding: 8px;
}
.nav-submenu a { display: block; padding: 9px 12px; border-radius: var(--radius-sm); transition: background var(--transition-fast); }
.nav-submenu a:hover, .nav-submenu a.active { background: var(--ink-100); }
.nav-sub-name { display: block; font: 600 14px/1.3 var(--font-sans); color: var(--text-body); }
.nav-sub-desc { display: block; font: 500 12px/1.35 var(--font-sans); color: var(--text-muted); margin-top: 2px; }

.nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto; background: none; border: 1px solid var(--ink-200); border-radius: var(--radius-sm); width: 40px; height: 40px; align-items: center; cursor: pointer; }
.nav-hamburger span { display: block; width: 18px; height: 2px; background: var(--ink-900); border-radius: 2px; }
.nav-mobile-cta { display: none; }

@media (max-width: 900px) {
  .nav-links, .nav-right { display: none; }
  .nav-hamburger { display: flex; }
}
@media (max-width: 900px) {
  .site-nav.open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: var(--nav-h); left: 0; right: 0; transform: none;
    background: var(--ink-0); border-bottom: 1px solid var(--ink-200);
    padding: 12px 24px 20px; box-shadow: var(--shadow-pop);
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  .site-nav.open .nav-link { width: 100%; padding: 12px 10px; }
  .site-nav.open .nav-item { position: static; }
  .site-nav.open .nav-submenu { display: none; position: static; transform: none; opacity: 1; visibility: visible; padding: 0 0 6px 12px; }
  .site-nav.open .nav-item.open .nav-submenu { display: block; }
  .site-nav.open .nav-submenu-panel { border: none; box-shadow: none; background: none; padding: 0; }
  .site-nav.open .nav-mobile-cta { display: block; margin-top: 12px; }
  .site-nav.open .nav-mobile-cta .btn-primary { width: 100%; justify-content: center; }
}

/* ── Page shell ── */
.page-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.accent-rule { display: none; }

/* ── Sections ── */
.section { padding: var(--section-y) 0; }
.section--band { background: var(--surface-page); }
.section--cream { background: var(--ink-50); }
.section-head { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.section-head--wide { max-width: 780px; }
.section-head .h-section, .section-head .title-lg { margin-top: 12px; }
.section-head .lede { margin: 14px auto 0; }
.section-head .eyebrow { display: block; }

/* Inner-page hero */
.page-hero, .relay-hero { padding: 64px 0 56px; text-align: center; }
.page-hero .container, .relay-hero .container { display: flex; flex-direction: column; align-items: center; }
.page-hero h1 { font: 700 var(--step-3)/1.1 var(--font-sans); letter-spacing: var(--tracking-display); max-width: 820px; margin-inline: auto; }
.page-hero .lede { margin: 20px auto 0; max-width: 600px; }
@media (max-width: 720px) { .page-hero, .relay-hero { padding: 40px 0 40px; } }

/* ── Full-bleed decoration: drifting rings and dots behind a hero ──
   .stage is the section, .stage-decor a sibling layer that ignores the
   container so shapes can run off every edge; content sits on top via
   .layer-up. Given constant gentle motion, not a still drawing. */
.stage { position: relative; overflow: hidden; }
.stage-decor { position: absolute; inset: 0; pointer-events: none; user-select: none; z-index: 0; overflow: hidden; }
.layer-up { position: relative; z-index: 1; }

.hero-ring { position: absolute; border-radius: 50%; border: 2px solid var(--terracotta); opacity: 0.24; }
.hero-ring--r {
  width: clamp(280px, 36vw, 480px); height: clamp(280px, 36vw, 480px);
  right: clamp(-220px, -11vw, -100px); top: clamp(-140px, -8vw, -60px);
  animation: ringDrift 22s ease-in-out infinite;
}
.hero-ring--l {
  width: clamp(220px, 26vw, 360px); height: clamp(220px, 26vw, 360px);
  left: clamp(-180px, -12vw, -100px); bottom: clamp(-150px, -9vw, -70px);
  border-color: var(--navy); opacity: 0.16;
  animation: ringDrift 28s ease-in-out infinite reverse;
}
.hero-dot { position: absolute; border-radius: 50%; background: var(--navy); opacity: 0.2; }
.hero-dot--a { width: 14px; height: 14px; right: 12%; top: 20%; background: var(--terracotta); opacity: 0.4; animation: dotFloat 7s ease-in-out infinite; }
.hero-dot--b { width: 9px; height: 9px; right: 26%; top: 46%; animation: dotFloat 9s ease-in-out infinite 1.4s; }
.hero-dot--c { width: 11px; height: 11px; left: 6%; bottom: 16%; background: var(--terracotta); opacity: 0.3; animation: dotFloat 11s ease-in-out infinite 0.7s; }

@keyframes ringDrift {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(-16px, 12px) scale(1.03); }
  66% { transform: translate(10px, -8px) scale(0.98); }
}
@keyframes dotFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

@media (prefers-reduced-motion: reduce) {
  .hero-ring--r, .hero-ring--l, .hero-dot--a, .hero-dot--b, .hero-dot--c { animation: none; }
}
@media (max-width: 640px) { .hero-dot--b, .hero-dot--c { display: none; } }

/* ── Imagery placeholder ──
   A ringed frame reserved for real photography (design-partner or pilot
   school), so a page reads as finished rather than mid-build while that
   imagery is pending. */
.photo-frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: var(--surface-card); border: 1.5px dashed var(--ink-200); display: flex; align-items: center; justify-content: center; overflow: hidden; }

/* Once a real photograph lands, the frame stops advertising itself as a
   placeholder: solid border, no dashes, and the decorative ring and
   caption step aside for the image. */
.photo-frame--filled { border: 1px solid var(--ink-200); background: var(--ink-50); }
.photo-frame--filled .photo-frame-ring, .photo-frame--filled .photo-frame-caption { display: none; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hover zoom. The frame already clips, so the image grows inside it
   rather than pushing the layout around. Scaling the image and not the
   frame keeps the card edges perfectly still. */
.photo-frame--filled img { transition: transform 480ms var(--ease); will-change: transform; }
.photo-frame--filled:hover img,
.photo-frame--filled:focus-within img { transform: scale(1.06); }
/* A card that is itself a link should zoom from anywhere on the card. */
a:hover .photo-frame--filled img, a:focus-visible .photo-frame--filled img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .photo-frame--filled img { transition: none; }
  .photo-frame--filled:hover img,
  .photo-frame--filled:focus-within img,
  a:hover .photo-frame--filled img { transform: none; }
}
.photo-frame-ring { position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--terracotta); opacity: 0.45; }
.photo-frame-ring::before { content: ''; position: absolute; inset: 18px; border-radius: 50%; border: 1.5px dashed var(--navy-300, var(--navy)); opacity: 0.4; }
.photo-frame-caption { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font: 600 12px/1 var(--font-sans); color: var(--text-muted); background: var(--surface-page); padding: 8px 16px; border-radius: var(--radius-pill); box-shadow: var(--shadow-card); white-space: nowrap; }

/* ── Cards, badges, chips ── */
.card {
  background: var(--surface-card);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px;
}
.badge { display: inline-flex; align-items: center; font: 700 11px/1 var(--font-sans); padding: 5px 10px; border-radius: var(--radius-pill); width: fit-content; letter-spacing: 0.03em; }
.badge--brand { background: var(--brand-soft); color: var(--brand-active); }
.badge--neutral { background: var(--ink-100); color: var(--text-secondary); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.chip { font: 600 13px/1 var(--font-sans); color: var(--text-secondary); background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: var(--radius-pill); padding: 6px 12px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: minmax(0,1fr); } }

/* ── Plain columns (borderless, icon-led) ── */
.plain-cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px 32px; }
.plain-cols--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 760px) { .plain-cols, .plain-cols--2 { grid-template-columns: minmax(0,1fr); gap: 28px; } }
.plain-col { border-left: 1px solid var(--ink-200); padding-left: 24px; }
.plain-col > svg { margin-bottom: 18px; }
.plain-col h3, .plain-col h4 { margin-bottom: 8px; }
.plain-col p { color: var(--text-secondary); }
.plain-col strong { color: var(--text-body); font-weight: 600; }

/* Legacy alias so migrated markup (.plain-card) keeps working, styled
   the same as .plain-col. */
.plain-card { border-left: 2px solid var(--ink-200); padding: 0 0 0 22px; text-align: left; transition: border-color var(--transition-fast); }
.plain-card:hover { border-left-color: var(--accent, var(--brand)); }
.plain-card-title { font: 700 19px/1.25 var(--font-sans); letter-spacing: var(--tracking-heading); color: var(--ink); margin-bottom: 8px; }
.plain-card-body { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }

/* ── Split hero (inner pages: copy one side, illustration the other) ── */
.split-hero { padding: 72px 0 64px; }
.split-hero .split-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }
.split-hero h1 { font: 700 clamp(32px, 4vw, 48px)/1.1 var(--font-sans); letter-spacing: var(--tracking-display); color: var(--text-body); text-wrap: balance; }
.split-hero .lede { margin-top: 18px; max-width: 480px; }
.split-hero .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.split-hero .hero-illo { display: flex; justify-content: center; }
.split-hero .hero-illo svg { width: 100%; max-width: 420px; height: auto; }
@media (max-width: 860px) {
  .split-hero { padding: 44px 0; }
  .split-hero .split-grid { grid-template-columns: minmax(0,1fr); gap: 36px; }
}

/* ── Feature rows (text one side, illustration the other) ── */
.feature-row { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; padding: 48px 0; }
.feature-row + .feature-row { border-top: 1px solid var(--ink-100); }
.feature-row--flip .feature-copy { order: 2; }
.feature-row--flip .feature-art { order: 1; }
.feature-copy p { color: var(--text-secondary); margin-top: 10px; max-width: 460px; }
.feature-art { display: flex; justify-content: center; }
.feature-art svg { width: 100%; max-width: 360px; height: auto; }
@media (max-width: 860px) {
  .feature-row { grid-template-columns: minmax(0,1fr); gap: 28px; padding: 36px 0; }
  .feature-row--flip .feature-copy { order: 1; }
  .feature-row--flip .feature-art { order: 2; }
}

/* ── Step number ── */
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand-active);
  font: 700 15px/1 var(--font-sans);
  margin-bottom: 14px;
}

/* ── Full-bleed hero art ──
   Breaks out of .container to run the full viewport width, so the
   opening scene reads as a landscape rather than a boxed picture. */
.hero-art {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 48px;
  display: flex; justify-content: center;
  overflow: hidden;
}
.hero-art svg { width: 100%; min-width: 900px; height: auto; display: block; }
@media (max-width: 900px) { .hero-art { margin-top: 32px; } }

/* ── Problem section: three illustrated columns ──
   A two-line title whose second line drops to grey, then columns that
   each lead with a drawing rather than a heading. */
.sprawl { padding: 32px 0 88px; }
.sprawl-head { max-width: 800px; margin-inline: auto; text-align: center; }
.sprawl-title { font: 700 clamp(28px, 3.4vw, 40px)/1.15 var(--font-sans); letter-spacing: var(--tracking-heading); color: var(--text-body); text-wrap: balance; }
.sprawl-title .faded { color: var(--ink-500); }
/* margin-inline:auto matters here: .lede caps at 56ch, so inside a wider
   centred head the text-align centres the words within a box that is
   itself sitting left. The block has to be centred too. */
.sprawl-head .lede { margin: 14px auto 0; }
.sprawl-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; }
.sprawl-col { border-left: 1px solid var(--ink-200); padding-left: 24px; }
.sprawl-col svg { display: block; margin-bottom: 22px; width: 100%; max-width: 260px; height: auto; }
.sprawl-col h3 { font: 600 18px/1.3 var(--font-sans); margin-bottom: 8px; }
.sprawl-col p { color: var(--text-secondary); }
.sprawl-col strong { color: var(--text-body); font-weight: 600; }
@media (max-width: 800px) {
  .sprawl { padding: 24px 0 56px; }
  .sprawl-cols { grid-template-columns: minmax(0,1fr); gap: 28px; }
}

/* ── Offer rows (link cards, alternating sides) ──
   Sticky: each card pins under the nav and the next slides over it,
   so the set reads as a deck being dealt rather than a list. */
.offer-stack { display: grid; gap: 48px; }
.offer-row {
  position: sticky;
  top: calc(var(--nav-h) + 36px);
  min-height: 440px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
  background: var(--surface-card);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 56px 64px;
  color: var(--text-body);
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.offer-row:hover { color: var(--text-body); border-color: var(--ink-300); box-shadow: var(--shadow-pop); }
.offer-row--flip .offer-copy { order: 2; }
.offer-row--flip .offer-art { order: 1; }
.offer-copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.offer-title { font: 700 32px/1.15 var(--font-sans); letter-spacing: var(--tracking-heading); }
.offer-copy p { color: var(--text-secondary); max-width: 440px; }
.offer-copy .text-link { margin-top: 8px; font-size: 15px; }
.offer-art { display: flex; justify-content: center; }
.offer-art svg { width: 100%; max-width: 380px; height: auto; }
@media (max-width: 860px) {
  .offer-row { position: static; min-height: 0; grid-template-columns: minmax(0,1fr); gap: 32px; padding: 32px 28px; }
  .offer-row--flip .offer-copy { order: 1; }
  .offer-row--flip .offer-art { order: 2; }
  .offer-title { font-size: 26px; }
}

/* ── Text link ── */
.text-link { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1 var(--font-sans); color: var(--brand); }
.text-link:hover { color: var(--brand-hover); }

/* ── Dark section ── */
.dark-section, .band {
  background: var(--surface-inverse);
  padding: var(--section-y) 0;
  color: var(--ink-100);
  width: 100%;
}
.dark-section .h2, .dark-section .title-lg, .band-title { color: #fff; }
.band-title { font: 700 var(--step-3)/1.15 var(--font-sans); letter-spacing: var(--tracking-heading); text-wrap: balance; }
.dark-section .band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.band .eyebrow { color: rgba(255,255,255,0.62); }
.band-sub { color: rgba(255,255,255,0.78); max-width: 52ch; margin-top: 12px; font-size: 15px; line-height: 1.7; }
.band--compact { padding: 40px 0; }
.band--compact .band-title { font-size: var(--step-2); }
.band--compact .band-sub { margin-top: 8px; }
.dark-section .intro p { margin-top: 14px; color: rgba(255,255,255,0.78); line-height: 1.7; max-width: 460px; }
@media (max-width: 820px) {
  .dark-section { padding: 56px 0; }
  .dark-section .band-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
}

/* Tiles: the concrete claims sitting beside the belief statement. */
.tile-stack { display: grid; gap: 12px; }
.tile {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.tile:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
.tile strong { display: block; font: 600 15px/1.3 var(--font-sans); color: #fff; margin-bottom: 4px; }
.tile span { font: 500 14px/1.6 var(--font-sans); color: rgba(255,255,255,0.74); }

/* ── Closing CTA card ──
   .cta-card is the two-column form (copy beside an illustration);
   .closing-cta is the centred, art-free variant. */
.cta-card {
  background: var(--brand-soft);
  border-radius: var(--radius-lg);
  padding: 56px;
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;
}
.cta-card .h2 { color: var(--ink-900); }
.cta-card p { color: var(--text-secondary); max-width: 480px; }
@media (max-width: 780px) {
  .cta-card { grid-template-columns: minmax(0,1fr); padding: 36px 28px; }
  .cta-card .cta-art { display: none; }
}

.closing-cta { background: var(--brand-soft); border-radius: var(--radius-lg); padding: 48px; text-align: center; }
.closing-cta .band-title, .closing-cta .h2 { color: var(--ink-900); margin: 12px 0; }
.closing-cta .band-sub, .closing-cta p { color: var(--text-secondary); max-width: 480px; margin-inline: auto; }
.closing-cta .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; justify-content: center; }
/* .closing-cta is a light card, not a dark band, so the --inverse ghost
   button (near-white text) needs its normal light-background colours here. */
.closing-cta .btn-ghost--inverse { color: var(--text-secondary); }
.closing-cta .btn-ghost--inverse:hover { color: var(--brand); }

/* ── Footer ── */
/* Footer text is set in translucent white, not --ink-500: the grey ink
   scale is tuned for light backgrounds and goes nearly invisible on the
   navy ground. */
.site-footer { background: var(--surface-inverse); color: rgba(255,255,255,0.60); padding: 64px 0 48px; font: 500 13px/1.5 var(--font-sans); width: 100%; }

/* Map: brand blurb plus grouped link columns, so the footer works as
   real navigation rather than a single legal line. */
.footer-map {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px;
  padding-bottom: 40px; margin-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 860px) { .footer-map { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .footer-map { grid-template-columns: minmax(0,1fr); } }
.footer-brand { display: inline-flex; align-items: baseline; gap: 8px; }
.footer-brand .fb-name { font: 700 17px/1 var(--font-sans); letter-spacing: var(--tracking-display); color: #fff; }
.footer-brand .fb-by { font: 500 11px/1 var(--font-sans); color: rgba(255,255,255,0.55); }
.footer-blurb { margin-top: 14px; max-width: 240px; color: rgba(255,255,255,0.60); line-height: 1.6; }
.footer-col h4 { font: 600 14px/1.3 var(--font-sans); color: #fff; margin-bottom: 12px; }
.footer-col a { display: block; color: rgba(255,255,255,0.78); font: 500 13px/1.4 var(--font-sans); padding: 4px 0; }
.footer-col a:hover { color: #fff; }
/* Affiliation line, sitting just above the copyright row. */
.footer-note { margin-bottom: 16px; color: rgba(255,255,255,0.60); }
.footer-note a { color: rgba(255,255,255,0.78); text-decoration: underline; text-underline-offset: 2px; }
.footer-note a:hover { color: #fff; }

.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between; }

.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: var(--ink-300); }
.footer-links a:hover { color: #fff; }
.footer-social, .social-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-sm); color: rgba(255,255,255,0.78); transition: background var(--transition-fast); }
.footer-social:hover, .social-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.footer-social svg, .social-link svg { width: 15px; height: 15px; fill: currentColor; }
/* The base .social-link is tuned for the dark footer. This variant is for
   the same button sitting on a light page section. */
.social-link--light { width: 40px; height: 40px; border-color: var(--ink-200); color: var(--text-secondary); }
.social-link--light:hover { background: var(--ink-100); color: var(--brand); }
.social-link--light svg { width: 17px; height: 17px; }

/* ── Reveal on scroll ── */
[data-reveal] { opacity: 1; }
html.js [data-reveal] { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
html.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ── Ambient motion ──
   Reusable, subtle looping animations for SVG illustrations, so they
   read as alive rather than a still drawing sitting on the page.
   Applied via class to individual elements within an illustration. */
.flow-line { stroke-dasharray: 4 6; animation: flowLine 3s linear infinite; }
@keyframes flowLine { to { stroke-dashoffset: -20; } }

.pulse-soft { animation: pulseSoft 4s ease-in-out infinite; transform-origin: center; }
@keyframes pulseSoft { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

/* Opacity-only pulse. Use this on any SVG element positioned by a
   transform="translate(...)" attribute: a CSS transform in a keyframe
   overrides that attribute outright and snaps the element to the
   origin, so those elements can only be animated on opacity. */
.fade-pulse { animation: fadePulse 4s ease-in-out infinite; }
@keyframes fadePulse { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }

.spin-slow { animation: spinSlow 40s linear infinite; transform-origin: center; }
@keyframes spinSlow { to { transform: rotate(360deg); } }

.bob { animation: bobY 2.6s ease-in-out infinite; }
.bob--b { animation-delay: 0.5s; }
@keyframes bobY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  .flow-line, .pulse-soft, .fade-pulse, .spin-slow, .bob, .bob--b { animation: none; }
}

/* ── Tab / panel primitives (decisions tabs, how-it-works demo tabs) ── */
.tab-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; justify-content: center; margin-bottom: 40px; }
/* When the row is wider than its container, plain `center` pushes the
   first tab past the left edge where it can never be scrolled back to.
   `safe center` falls back to flex-start exactly in that case. */
@supports (justify-content: safe center) {
  .tab-row { justify-content: safe center; }
}
.tab-row::-webkit-scrollbar { display: none; }
.tab-btn { flex: 0 0 auto; background: none; border: none; color: var(--text-muted); font: 600 14px/1 var(--font-sans); padding: 10px 16px; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.tab-btn:hover { color: var(--text-body); background: var(--ink-100); }
.tab-btn[aria-selected="true"] { color: #fff; background: var(--brand); }
.tab-panel[hidden] { display: none; }
/* No fixed min-height here. It was 430px to stop the layout jumping
   between tabs, but the panels range 362-490px: short ones left a band
   of dead space under the content, and the tallest still jumped. Sizing
   to the content costs a small shift on switch and removes the gap. */
.tab-stack { min-height: 0; }

.panel-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 20px; align-items: stretch; }
@media (max-width: 760px) { .panel-grid { grid-template-columns: 1fr; } }
.panel-side { background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); padding: 24px 26px; display: flex; flex-direction: column; justify-content: center; text-align: left; }
.panel-label { font: 600 11px/1.4 var(--font-sans); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--terracotta); margin-bottom: 14px; }
.panel-out { background: #fff; color: var(--ink); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 24px 26px; min-height: 250px; text-align: left; }
.panel-out .panel-label { color: var(--brand); }
.panel-caption { margin-top: 26px; max-width: 58ch; text-align: left; }
.panel-caption h3 { font: 700 22px/1.25 var(--font-sans); letter-spacing: var(--tracking-heading); color: var(--ink); margin-bottom: 8px; }
.panel-caption p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.75; }

.src-chip { display: inline-block; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius-pill); padding: 6px 13px; font: 600 13px/1 var(--font-sans); color: var(--ink); margin: 0 6px 8px 0; opacity: 0; transform: translateX(-14px); }
.tab-panel.is-live .src-chip { animation: chipIn 0.55s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes chipIn { to { opacity: 1; transform: none; } }

.anim { opacity: 0; }
.tab-panel.is-live .anim { animation: riseIn 0.5s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes riseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.grow { transform: scaleX(0); transform-origin: left; }
.tab-panel.is-live .grow { animation: growIn 0.55s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes growIn { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .anim, .tab-panel.is-live .anim { opacity: 1; animation: none; transform: none; }
  .grow, .tab-panel.is-live .grow { transform: none; animation: none; }
  .src-chip, .tab-panel.is-live .src-chip { opacity: 1; transform: none; animation: none; }
}

/* ── Focus / skip link ── */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 500; background: var(--brand); color: #fff; padding: 10px 16px; font: 600 13px/1 var(--font-sans); text-decoration: none; }
.skip-link:focus { left: 12px; top: 12px; }

/* ── Legal pages ── */
.legal { padding: 16px 0 80px; max-width: 68ch; }
.legal h2 { font: 700 var(--step-2)/1.2 var(--font-sans); color: var(--ink); margin: 44px 0 14px; }
.legal h3 { font: 600 16px/1.3 var(--font-sans); color: var(--ink); margin: 26px 0 8px; }
.legal p, .legal li { font-size: 15px; line-height: 1.8; color: var(--text-secondary); }
.legal p { margin-bottom: 16px; }
.legal ul { margin: 0 0 20px 20px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--brand); }
.legal strong { color: var(--ink); font-weight: 600; }
.legal-meta { font-size: 13px; color: var(--text-muted); border-bottom: 1px solid var(--ink-200); padding-bottom: 22px; margin-bottom: 16px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }