/* ── DR. ROD OSKOUIAN - GLOBAL DESIGN SYSTEM ── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Montserrat:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* Backgrounds */
  --bg:         #FFFFFF;
  --bg-2:       #F4F4F5;
  --bg-3:       #EAEAEB;
  --white:      #FFFFFF;
  --card:       #FFFFFF;
  --card-2:     #F8F8F9;
  --card-3:     #F0F1F2;

  /* Text */
  --ink:        #0B0F2E;
  --ink-2:      #0F1338;
  --ink-3:      #141840;
  --text:       #0B0F2E;
  --text-2:     #505880;
  --muted:      #8A92BB;

  /* Brand accent */
  --teal:       #0EA5E9;
  --teal-2:     #0284C7;
  --teal-light: #E0F2FE;
  --teal-dim:   rgba(14,165,233,0.10);
  --teal-dim-2: rgba(14,165,233,0.16);

  /* Substack. Rod publishes in two places and the second one needs its own
     signal, so these are scoped to the .sbstk-* components and nothing else.
     --sbstk is NEVER body text on light paper: #FF6719 on white is 2.54:1 and
     fails AA. It is a mark, a button fill, a 2% paper tint and hover accents.
     --sbstk-ink is the navy that sits ON the orange (6.48:1, passes AA). */
  --sbstk:       #FF6719;
  --sbstk-deep:  #E4550C;
  --sbstk-paper: #FFF8F4;
  --sbstk-ink:   #0B0F2E;

  /* Aliases for legacy compatibility */
  --gold:       #0EA5E9;
  --gold-2:     #0284C7;
  --gold-dim:   rgba(14,165,233,0.10);
  /* Warm gold: third accent for legacy / expertise signals (used sparingly).
     --legacy-gold for dark backgrounds, lines and large numerals;
     --legacy-gold-ink is a deeper tone for small text on light backgrounds (WCAG AA). */
  --legacy-gold: #C9A227;
  --legacy-gold-ink: #8A6D12;
  --graphite:   #F4F4F5;
  --graphite-2: #EAEAEB;

  /* Borders & shadows - navy-tinted */
  --border:     rgba(11,15,46,0.08);
  --border-2:   rgba(14,165,233,0.20);
  --shadow:     0 4px 20px rgba(11,15,46,0.06);
  --shadow-2:   0 8px 32px rgba(11,15,46,0.10);

  --blue:       #0EA5E9;
  --blue-dim:   rgba(14,165,233,0.10);
  --navy:       #0B0F2E;

  /* Type - Montserrat display, Inter body */
  --serif:    'Montserrat', sans-serif;
  --sans:     'Inter', sans-serif;
  --display:  'Montserrat', sans-serif;

  /* Layout */
  --max-w:       1200px;
  --section-pad: 8.5rem 5vw;
  --nav-h:       72px;
  --bar-h:       0px;
  --nav-top:     var(--bar-h);
  --radius:      8px;
  --radius-sm:   6px;
  --radius-lg:   12px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; scroll-snap-type: y proximity; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ── TYPOGRAPHY ── */
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-2);
  font-weight: 400;
  font-family: var(--display);
}

.eyebrow {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.8rem;
  font-family: var(--display);
}

.section-title {
  font-family: var(--display);
  font-size: clamp(3.5rem, 6vw, 6rem);
  font-weight: 800;
  line-height: 0.96;
  color: var(--ink);
  letter-spacing: 0.01em;
}
/* Removed: coloured <em> second line in .section-title. Recolouring the back half of a
   heading with a bare element selector is the two style heading formula
   (no-ai-slop 24, zero tolerance 9). Hierarchy comes from size and weight.
   Do not re-add. */

/* HEADINGS: ONE FACE, ONE STYLE. Do not delete this rule.
   Two facts used to combine into a banned pattern. First, <em> is italic by
   browser default. Second, this stylesheet carries a family of
   `.someHeading em { color: ... }` rules (.section-title, .page-hero__title,
   .hero__name, .research-hero-block__title, .cta-band__title and
   .footer-guide__title). Together they meant that simply typing <em> inside a
   heading produced the two-style heading formula for free: first line roman,
   second line italic and coloured, repeated down page after page. Ten headings
   across books, research, expert-witness and speaking had inherited it, and
   nobody had chosen it per heading. The stylesheet chose it for them, which is
   exactly how one careless rule becomes a site-wide template stamp. The same
   pattern had to be stripped out of another client site twice.
   The colour emphasis stays, because a single colour accent is one style.
   The FACE switch is cancelled here, at the mechanism, so it cannot be
   reintroduced by typing a common tag. Italic is for emphasis inside running
   body copy. It is not a display device. */
h1 em, h1 i, h2 em, h2 i, h3 em, h3 i,
h4 em, h4 i, h5 em, h5 i, h6 em, h6 i,
.section-title em, .page-hero__title em, .hero__name em,
.research-hero-block__title em, .cta-band__title em,
.footer-guide__title em, .bk-hero__title em, .ew-hero__title em {
  font-style: normal;
}

.body-lg {
  font-size: 1.05rem;
  line-height: 1.85;
  letter-spacing: 0;
  color: var(--text-2);
}

/* ══════════════════════════════════════
   NAVIGATION - full-width authority bar
══════════════════════════════════════ */

@keyframes cta-ring {
  0%   { box-shadow: 0 0 0 0 rgba(14,165,233,0.55); }
  65%  { box-shadow: 0 0 0 12px rgba(14,165,233,0); }
  100% { box-shadow: 0 0 0 0 rgba(14,165,233,0); }
}

@keyframes nav-drop {
  from { transform: translateY(-110%); opacity: 0; }
  to   { transform: translateY(0);      opacity: 1; }
}
@keyframes dot-appear {
  from { transform: translateX(-50%) scale(0); opacity: 0; }
  to   { transform: translateX(-50%) scale(1); opacity: 1; }
}
@keyframes link-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .nav { animation: nav-drop 0.7s cubic-bezier(0.16,1,0.3,1) both; }
  .nav__links > li {
    opacity: 0;
    animation: link-in 0.45s cubic-bezier(0.16,1,0.3,1) both;
  }
  .nav__links > li:nth-of-type(1) { animation-delay: 0.30s; }
  .nav__links > li:nth-of-type(2) { animation-delay: 0.35s; }
  .nav__links > li:nth-of-type(3) { animation-delay: 0.40s; }
  .nav__links > li:nth-of-type(4) { animation-delay: 0.45s; }
  .nav__links > li:nth-of-type(5) { animation-delay: 0.50s; }
  .nav__links > li:nth-of-type(6) { animation-delay: 0.55s; }
  .nav__links > li:nth-of-type(7) { animation-delay: 0.60s; }
}

/* ── Container - 3-col grid: logo | links | right ── */
.nav {
  position: fixed;
  top: var(--nav-top);
  left: 0;
  right: 0;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 max(2rem, 4vw);
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background 0.4s cubic-bezier(0.16,1,0.3,1),
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

/* ── Progress bar ── */
.nav__progress-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.nav.scrolled .nav__progress-wrap { opacity: 1; }
.nav__progress-fill {
  height: 100%;
  width: 0%;
  background: #0EA5E9;
  transition: width 0.08s linear;
}

/* ── Dark hero: stay transparent ── */
.nav.on-dark { background: transparent; border-bottom-color: transparent; }

/* ── Scrolled: frosted authority bar ── */
.nav.scrolled {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom-color: rgba(11,15,46,0.08);
  box-shadow: 0 1px 0 rgba(11,15,46,0.04), 0 4px 24px rgba(11,15,46,0.05);
}

/* ── LOGO ── */
.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 0.22s;
}
.nav__logo:hover { opacity: 0.80; }
.nav__logo::after { display: none; }

.nav__logo-img-clip {
  height: 46px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}
.nav__logo-img {
  height: 110px;
  width: auto;
  margin-top: -20px;
  display: block;
  transition: filter 0.4s ease;
}
.nav.on-dark .nav__logo-img { filter: brightness(0) invert(1); }

/* Logo wordmark hidden: the logo image already contains the doctor's name */
.nav__logo-text { display: none; }

/* ── LINKS (grid center column - no overlap possible) ── */
.nav__links {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  justify-self: center;
}

.nav__links a {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(11,15,46,0.55);
  padding: 0.52rem 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  transition:
    color 0.2s ease,
    letter-spacing 0.45s cubic-bezier(0.34,1.56,0.64,1),
    transform 0.55s cubic-bezier(0.34,1.56,0.64,1);
  transform: translate(var(--mx, 0px), var(--my, 0px));
}

/* Sliding underline indicator */
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0.82rem;
  right: 0.82rem;
  height: 1.5px;
  background: #0EA5E9;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  border-radius: 1px;
}

/* Active dot above the link */
.nav__links a:not(.active)::before { display: none; }
.nav__links a.active::before {
  content: '';
  display: block;
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #0EA5E9;
  box-shadow: 0 0 8px rgba(14,165,233,0.70);
  animation: dot-appear 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* hover: slight tracking expand + underline */
.nav__links a:hover { color: var(--ink); letter-spacing: 0.125em; }
.nav__links a:hover::after { transform: scaleX(1); }

/* dark hero variants */
.nav.on-dark .nav__links a { color: rgba(255,255,255,0.50); }
.nav.on-dark .nav__links a:hover { color: rgba(255,255,255,0.95); }
.nav.on-dark .nav__links a.active::before { background: #38bdf8; box-shadow: 0 0 8px rgba(56,189,248,0.70); }

/* active page */
.nav__links a.active { color: #0EA5E9; }
.nav__links a.active::after { transform: scaleX(1); }
.nav.on-dark .nav__links a.active { color: #38bdf8; }

/* hover blob disabled */
.nav__hover-blob { display: none; }

/* ── RIGHT CLUSTER ── */
.nav__right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-self: end;
}

/* ── SOCIAL ICONS ── */
.nav__socials {
  display: flex;
  align-items: center;
  padding-right: 0.75rem;
  border-right: 1px solid rgba(11,15,46,0.10);
  transition: border-color 0.35s;
}
.nav.on-dark .nav__socials { border-right-color: rgba(255,255,255,0.10); }

.nav__social-icon {
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(11,15,46,0.32);
  transition: color 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1), background 0.2s;
  text-decoration: none;
  border-radius: 4px;
}
.nav.on-dark .nav__social-icon { color: rgba(255,255,255,0.40); }
.nav__social-icon:hover {
  color: #0EA5E9;
  background: rgba(14,165,233,0.08);
  transform: scale(1.12);
}
.nav.on-dark .nav__social-icon:hover {
  color: #38bdf8;
  background: rgba(255,255,255,0.06);
}
.nav__social-icon::after { display: none; }

/* Substack in the nav. Rod asked for it to sit alongside the newsletter with
   equal billing, so it is a persistent icon rather than a dropdown entry. The
   orange is the signal that this is a different platform: it stays off until
   hover, so the nav does not gain a permanent loud spot. */
.nav__substack {
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(11,15,46,0.32);
  transition: color 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1), background 0.2s;
  text-decoration: none;
  border-radius: 4px;
}
.nav__substack:hover,
.nav__substack:focus-visible {
  color: var(--sbstk-deep, #E4550C);   /* deep variant: --sbstk is only 2.54:1 on white */
  background: rgba(255,103,25,0.09);
  transform: scale(1.12);
}
.nav__substack::after { display: none; }
.nav.on-dark .nav__substack { color: rgba(255,255,255,0.55); }
.nav.on-dark .nav__substack:hover,
.nav.on-dark .nav__substack:focus-visible { color: var(--sbstk, #FF6719); }
@media (prefers-reduced-motion: reduce) {
  .nav__substack { transition: color 0.2s, background 0.2s; }
  .nav__substack:hover, .nav__substack:focus-visible { transform: none; }
}

/* ── SOCIAL DROPDOWN ── */
.nav__social-drop {
  position: relative;
}
.nav__social-drop::before {
  content: '';
  position: absolute;
  top: 100%;
  left: -1rem; right: -1rem;
  height: 1rem;
  background: transparent;
}
.nav__social-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 0;
}
.nav__social-panel::before {
  content: '';
  position: absolute;
  top: -5px; right: 12px;
  width: 10px; height: 10px;
  background: rgba(255,255,255,0.99);
  border-left: 1px solid rgba(11,15,46,0.08);
  border-top: 1px solid rgba(11,15,46,0.08);
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}
.nav.on-dark .nav__social-panel::before {
  background: rgba(8,12,36,0.99);
  border-color: rgba(14,165,233,0.12);
}

.nav__social-panel {
  position: absolute;
  top: calc(100% + 0.85rem);
  right: 0;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top right;
  background: rgba(255,255,255,0.99);
  border: 1px solid rgba(11,15,46,0.08);
  border-radius: 10px;
  padding: 0.35rem;
  min-width: 178px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  z-index: 200;
}
.nav__social-drop:hover .nav__social-panel,
.nav__social-drop:focus-within .nav__social-panel {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0) scale(1);
}
.nav__social-panel a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.8rem;
  font-size: 0.82rem;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--ink);
  border-radius: 7px;
  white-space: nowrap;
  text-decoration: none;
  opacity: 0;
  transform: translateY(-3px);
  transition: color 0.15s, background 0.15s, opacity 0.18s, transform 0.18s;
}
.nav__social-panel a::before,
.nav__social-panel a::after { display: none; }
.nav__social-panel a:hover {
  color: #0EA5E9;
  background: rgba(14,165,233,0.07);
}
.nav__social-drop:hover .nav__social-panel a { opacity: 1; transform: translateY(0); }
.nav__social-drop:hover .nav__social-panel a:nth-child(1) { transition-delay: 0.03s; }
.nav__social-drop:hover .nav__social-panel a:nth-child(2) { transition-delay: 0.06s; }
.nav__social-drop:hover .nav__social-panel a:nth-child(3) { transition-delay: 0.09s; }
.nav__social-drop:hover .nav__social-panel a:nth-child(4) { transition-delay: 0.12s; }
.nav__social-drop:hover .nav__social-panel a:nth-child(5) { transition-delay: 0.15s; }

.nav__social-panel .menu-icon {
  width: 26px; height: 26px;
  background: rgba(11,15,46,0.05);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: rgba(11,15,46,0.40);
  transition: background 0.15s, color 0.15s;
}
.nav__social-panel a:hover .menu-icon {
  background: rgba(14,165,233,0.10);
  color: #0EA5E9;
}

/* Dark hero social panel */
.nav.on-dark .nav__social-panel {
  background: rgba(8,12,36,0.99);
  border-color: rgba(14,165,233,0.12);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 2px 10px rgba(0,0,0,0.30);
}
.nav.on-dark .nav__social-panel a { color: rgba(255,255,255,0.70); }
.nav.on-dark .nav__social-panel a:hover { color: #38bdf8; background: rgba(14,165,233,0.10); }
.nav.on-dark .nav__social-panel .menu-icon { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.35); }
.nav.on-dark .nav__social-panel a:hover .menu-icon { background: rgba(14,165,233,0.15); color: #38bdf8; }

/* ── CTA BUTTON ── */
.nav__cta {
  padding: 0.54rem 1.25rem;
  background: linear-gradient(135deg, #18b4f8 0%, #0284C7 100%);
  color: #fff;
  font-size: 0.71rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: 4px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  transition: background 0.25s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s, letter-spacing 0.35s cubic-bezier(0.34,1.56,0.64,1);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  animation: cta-ring 3.5s ease-out 2.5s infinite;
}
.nav__cta:hover {
  animation: none;
  background: linear-gradient(135deg, #0EA5E9 0%, #0369a1 100%);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 28px rgba(14,165,233,0.55), 0 2px 8px rgba(14,165,233,0.25);
  letter-spacing: 0.12em;
}
.nav__cta:active { transform: translateY(0) scale(1); }
.nav__cta::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}
.nav__cta:hover::before { left: 160%; }
.nav__cta::after {
  content: '\2192';
  font-size: 0.9rem;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.nav__cta:hover::after { transform: translateX(4px); }

/* ── BURGER ── */
.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 7px;
  border-radius: 4px;
  border: none;
  background: none;
  transition: background 0.2s;
}
.nav__burger:hover { background: rgba(11,15,46,0.05); }
.nav.on-dark .nav__burger:hover { background: rgba(255,255,255,0.08); }
.nav__burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s, opacity 0.3s, width 0.3s, background 0.35s;
  transform-origin: center;
}
.nav.on-dark .nav__burger span { background: rgba(255,255,255,0.80); }
.nav__burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── MOBILE NAV ── */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: #060A1E;
  z-index: 90;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 2.5rem 3rem;
  overflow: hidden;
}
.mobile-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(14,165,233,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,165,233,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.mobile-nav::after {
  content: '';
  position: absolute;
  top: 25%; left: 60%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(14,165,233,0.05) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav__close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.45);
  font-size: 1.4rem;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.mobile-nav__close:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
}
.mobile-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Bebas Neue', var(--display);
  font-size: clamp(2rem, 7.5vw, 3.2rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.35);
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color 0.22s, opacity 0.5s, transform 0.55s cubic-bezier(0.34,1.56,0.64,1), filter 0.55s ease;
  text-decoration: none;
  opacity: 0;
  transform: translateX(32px);
  filter: blur(5px);
  position: relative;
}
.mobile-nav.open a { filter: blur(0); }
.mobile-nav a::after {
  content: '\2192';
  font-family: var(--sans);
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  transform: translateX(-6px);
  flex-shrink: 0;
}
.mobile-nav.open a { opacity: 1; transform: translateX(0); }
.mobile-nav.open a:nth-child(2)  { transition-delay: 0.06s; }
.mobile-nav.open a:nth-child(3)  { transition-delay: 0.10s; }
.mobile-nav.open a:nth-child(4)  { transition-delay: 0.14s; }
.mobile-nav.open a:nth-child(5)  { transition-delay: 0.18s; }
.mobile-nav.open a:nth-child(6)  { transition-delay: 0.22s; }
.mobile-nav.open a:nth-child(7)  { transition-delay: 0.26s; }
.mobile-nav.open a:nth-child(8)  { transition-delay: 0.30s; }
.mobile-nav.open a:nth-child(9)  { transition-delay: 0.34s; }
.mobile-nav.open a:nth-child(10) { transition-delay: 0.38s; }
.mobile-nav.open a:nth-child(11) { transition-delay: 0.42s; }
.mobile-nav.open a:nth-child(12) { transition-delay: 0.46s; }
.mobile-nav.open a:nth-child(13) { transition-delay: 0.50s; }
.mobile-nav a:last-of-type { border-bottom: none; }
.mobile-nav a:hover { color: #fff; }
.mobile-nav a:hover::after { opacity: 0.50; transform: translateX(0); }

.mobile-nav__footer {
  position: absolute;
  bottom: 2.5rem;
  left: 2.5rem; right: 2.5rem;
}
.mobile-nav__tagline {
  font-family: var(--sans);
  font-size: 0.65rem;
  color: rgba(255,255,255,0.18);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.mobile-nav__social-row {
  display: flex;
  gap: 0.45rem;
}
.mobile-nav__social-row a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,0.03) !important;
  color: rgba(255,255,255,0.35) !important;
  padding: 0 !important;
  opacity: 0 !important;
  transition: all 0.2s !important;
  transform: none !important;
  text-indent: -9999px;
  font-size: 0 !important;
}
.mobile-nav__social-row a svg { flex-shrink: 0; text-indent: 0; }
.mobile-nav__social-row a::before,
.mobile-nav__social-row a::after { display: none !important; }
.mobile-nav.open .mobile-nav__social-row a {
  opacity: 1 !important;
  transition-delay: 0.5s !important;
}
.mobile-nav__social-row a:hover {
  border-color: rgba(14,165,233,0.30) !important;
  background: rgba(14,165,233,0.08) !important;
  color: #0EA5E9 !important;
}

/* ── DROPDOWN - Mega Menu ── */
.nav__dropdown { position: relative; }
.nav__dropdown::before {
  content: '';
  position: absolute;
  top: 100%;
  left: -1.5rem; right: -1.5rem;
  height: 1.2rem;
  background: transparent;
}
.nav__dropdown > a {
  display: flex;
  align-items: center;
  gap: 0.28rem;
}
.nav__dropdown > a::before { display: none; }
.nav__dropdown:hover > a { color: var(--ink); }
.nav.on-dark .nav__dropdown:hover > a { color: rgba(255,255,255,0.95); }

.nav__dropdown-arrow {
  font-size: 0.5rem;
  opacity: 0.40;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s;
  display: inline-block;
  line-height: 1;
}
.nav__dropdown:hover .nav__dropdown-arrow {
  transform: rotate(180deg);
  opacity: 0.85;
}

/* ── Mega dropdown panel ── */
.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 1.1rem);
  left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(0.96);
  width: 520px;
  background: rgba(255,255,255,0.99);
  border: 1px solid rgba(11,15,46,0.08);
  border-radius: 12px;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16,1,0.3,1), transform 0.22s cubic-bezier(0.16,1,0.3,1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.12),
    0 4px 16px rgba(0,0,0,0.06),
    0 0 0 1px rgba(14,165,233,0.05);
  list-style: none;
  z-index: 200;
}
.nav__dropdown-menu::before {
  content: '';
  position: absolute;
  top: -5px; left: 50%;
  width: 10px; height: 10px;
  background: rgba(255,255,255,0.99);
  border-left: 1px solid rgba(11,15,46,0.08);
  border-top: 1px solid rgba(11,15,46,0.08);
  margin-left: -5px;
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}
.nav__dropdown:hover .nav__dropdown-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* 2-col grid inside mega menu */
.nav__mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}
.nav__mega-divider {
  height: 1px;
  background: rgba(11,15,46,0.06);
  margin: 0 0 0.75rem;
}
/* Featured strip */
.nav__mega-featured {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 0.9rem;
  background: linear-gradient(135deg, rgba(14,165,233,0.06) 0%, rgba(14,165,233,0.02) 100%);
  border: 1px solid rgba(14,165,233,0.10);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.nav__mega-featured:hover {
  background: linear-gradient(135deg, rgba(14,165,233,0.10) 0%, rgba(14,165,233,0.04) 100%);
  border-color: rgba(14,165,233,0.18);
}
.nav__mega-featured::before,
.nav__mega-featured::after { display: none; }
.nav__mega-featured-icon {
  width: 34px; height: 34px;
  background: rgba(14,165,233,0.10);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #0EA5E9;
}
.nav__mega-featured-label {
  display: block;
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0EA5E9;
  margin-bottom: 0.18rem;
}
.nav__mega-featured-title {
  display: block;
  font-size: 0.80rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

/* Stagger in dropdown items */
.nav__dropdown-menu li {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s, transform 0.18s;
}
.nav__dropdown:hover .nav__dropdown-menu li { opacity: 1; transform: translateY(0); }
.nav__dropdown:hover .nav__dropdown-menu li:nth-child(1) { transition-delay: 0.03s; }
.nav__dropdown:hover .nav__dropdown-menu li:nth-child(2) { transition-delay: 0.06s; }
.nav__dropdown:hover .nav__dropdown-menu li:nth-child(3) { transition-delay: 0.09s; }
.nav__dropdown:hover .nav__dropdown-menu li:nth-child(4) { transition-delay: 0.12s; }
.nav__dropdown:hover .nav__dropdown-menu li:nth-child(5) { transition-delay: 0.15s; }

.nav__dropdown-menu a {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.82rem;
  color: var(--ink);
  transition: color 0.15s, background 0.15s;
  border-radius: 8px;
  font-weight: 500;
}
.nav__dropdown-menu a::before { display: none; }
.nav__dropdown-menu a::after  { display: none; }
.nav__dropdown-menu a:hover {
  color: #0EA5E9;
  background: rgba(14,165,233,0.06);
}
.nav__dropdown-menu .menu-icon {
  width: 32px; height: 32px;
  background: rgba(11,15,46,0.04);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
  margin-top: 0.05rem;
}
.nav__dropdown-menu a:hover .menu-icon {
  background: rgba(14,165,233,0.10);
  color: #0EA5E9;
}
.nav__dropdown-menu .menu-icon svg { width: 14px; height: 14px; }
.menu-item-title {
  display: block;
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.3;
  margin-bottom: 0.12rem;
}
.menu-item-desc {
  display: block;
  font-size: 0.69rem;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
}

/* Dark mega dropdown */
.nav.on-dark .nav__dropdown-menu {
  background: rgba(8,12,36,0.99);
  border-color: rgba(14,165,233,0.10);
  box-shadow: 0 24px 72px rgba(0,0,0,0.60), 0 4px 16px rgba(0,0,0,0.30);
}
.nav.on-dark .nav__dropdown-menu::before {
  background: rgba(8,12,36,0.99);
  border-color: rgba(14,165,233,0.10);
}
.nav.on-dark .nav__dropdown-menu a { color: rgba(255,255,255,0.68); }
.nav.on-dark .nav__dropdown-menu a:hover { color: #38bdf8; background: rgba(14,165,233,0.10); }
.nav.on-dark .nav__dropdown-menu .menu-icon { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.32); }
.nav.on-dark .nav__dropdown-menu a:hover .menu-icon { background: rgba(14,165,233,0.15); color: #38bdf8; }
.nav.on-dark .nav__mega-featured {
  background: rgba(14,165,233,0.07);
  border-color: rgba(14,165,233,0.15);
}
.nav.on-dark .nav__mega-featured-title { color: rgba(255,255,255,0.85); }
.nav.on-dark .nav__mega-divider { background: rgba(255,255,255,0.06); }

/* ── NAV: on-dark gets a natural vignette from the top ── */
.nav.on-dark {
  background: linear-gradient(to bottom, rgba(6,10,22,0.35) 0%, transparent 100%);
  border-bottom-color: transparent;
}

/* ── NAV: scrolled border uses teal accent ── */
.nav.scrolled {
  border-bottom-color: rgba(14,165,233,0.18);
}

/* ── NAV: z-index layer order (spotlight behind content) ── */
.nav > *:not(.nav__spotlight):not(.nav__progress-wrap) {
  position: relative;
  z-index: 2;
}

/* ── NAV SPOTLIGHT: radial glow following cursor ── */
.nav__spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle 180px at var(--cx, -999px) var(--cy, -999px), rgba(14,165,233,0.065), transparent 70%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.nav:hover .nav__spotlight { opacity: 1; }
.nav.on-dark .nav__spotlight {
  background: radial-gradient(circle 200px at var(--cx, -999px) var(--cy, -999px), rgba(14,165,233,0.09), transparent 70%);
}

/* ── CTA: magnetic transform ── */
.nav__cta {
  transform: translate(var(--btx, 0px), var(--bty, 0px));
  transition:
    background 0.25s,
    transform 0.6s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.25s,
    letter-spacing 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.nav__cta:hover {
  transform: translate(var(--btx, 0px), var(--bty, 0px)) scale(1.04);
}
.nav__cta:active { transform: translate(0,0) scale(0.98); }

/* ── PROGRESS BAR: dot indicator at current position ── */
.nav__progress-fill {
  position: relative;
  overflow: visible;
}
.nav.scrolled .nav__progress-fill::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  background: #0EA5E9;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(14,165,233,0.80);
}

/* ── DROPDOWN: scale origin from trigger ── */
.nav__dropdown-menu { transform-origin: top center; }

/* ── PAGE DIM OVERLAY when dropdown is open ── */
.nav__page-overlay {
  position: fixed;
  inset: 0;
  top: var(--nav-h);
  background: rgba(6,10,22,0.14);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 98;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.nav__page-overlay.active { opacity: 1; }

/* ── MOBILE NAV: scan line sweep ── */
.mobile-nav__scan {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(14,165,233,0.5) 20%,
    rgba(56,189,248,0.9) 50%,
    rgba(14,165,233,0.5) 80%,
    transparent 100%);
  pointer-events: none;
  z-index: 10;
  transform: translateY(0);
  will-change: transform;
}

/* ── MOBILE NAV: sequential link number labels ── */
.mobile-nav { counter-reset: mnav; }
.mobile-nav > a { counter-increment: mnav; }
.mobile-nav > a::before {
  content: counter(mnav, decimal-leading-zero);   /* 01 to 10, never "010" */
  font-family: var(--sans);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(14,165,233,0.32);
  flex-shrink: 0;
  align-self: center;
  width: 1.8rem;
}

/* ── MOBILE NAV: large cinematic background word ── */
.mobile-nav__bg-text {
  position: absolute;
  bottom: -0.10em;
  left: -0.04em;
  font-family: 'Bebas Neue', var(--display);
  font-size: clamp(5rem, 32vw, 18rem);
  color: rgba(255,255,255,0.022);
  line-height: 1;
  letter-spacing: 0.02em;
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.mobile-nav.open .mobile-nav__bg-text { opacity: 1; }


/* ── DROPDOWN: item hover ── */
.nav__dropdown-menu a {
  transition: color 0.15s, background 0.15s, transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
}
.nav__dropdown-menu a:hover {
  transform: translateX(2px);
}


/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  font-size: 1rem;
  font-weight: 400;
  font-family: var(--sans);
  border-radius: 6px;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
  outline: none;
  letter-spacing: 0.1em;
}
.btn--primary {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 2px 12px rgba(14,165,233,0.20);
}
.btn--primary:hover { background: var(--teal-2); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(14,165,233,0.30); }

/* Secondary tier: neutral outline (blue is reserved for newsletter / AXON primaries) */
.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid rgba(11,15,46,0.28);
}
.btn--outline:hover { background: rgba(11,15,46,0.05); border-color: var(--ink); }
/* On dark sections, render the outline in white */
.btn--outline.btn--on-dark,
.cta-band--dark .btn--outline {
  color: #fff;
  border-color: rgba(255,255,255,0.45);
}
.btn--outline.btn--on-dark:hover,
.cta-band--dark .btn--outline:hover { background: rgba(255,255,255,0.08); border-color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--teal);
  padding-left: 0; padding-right: 0;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.btn--ghost::after { content: ' →'; transition: transform 0.2s; display: inline-block; }
.btn--ghost:hover::after { transform: translateX(4px); }

.btn--white {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.btn--white:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.10); }

/* ── SECTIONS ── */
.section { padding: var(--section-pad); }
.section__inner { max-width: var(--max-w); margin: 0 auto; }
.section__header { margin-bottom: 4rem; }

/* Editorial layout utilities */
.col-70-30 { display: grid; grid-template-columns: 2fr 1fr; gap: 5rem; align-items: start; }
.col-60-40 { display: grid; grid-template-columns: 3fr 2fr; gap: 5rem; align-items: center; }
.col-50-50 { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.full-bleed { max-width: none; }

/* Pathway row (editorial, no cards) */
.pathway-row {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background 0.18s;
}
.pathway-row:first-child { border-top: 1px solid var(--border); }
.pathway-row:hover { background: var(--bg-2); margin: 0 -2rem; padding-left: 2rem; padding-right: 2rem; }
.pathway-row__num { font-size: 0.6rem; letter-spacing: 0.15em; color: var(--muted); }
.pathway-row__inner { display: flex; flex-direction: column; gap: 0.2rem; }
.pathway-row__category { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-2); }
.pathway-row__title { font-family: var(--display); font-size: 1.6rem; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: 0.01em; }
.pathway-row__desc { font-size: 0.82rem; color: var(--text-2); line-height: 1.7; margin-top: 0.3rem; letter-spacing: 0.02em; }
.pathway-row__arrow { font-size: 1.2rem; color: var(--muted); transition: color 0.2s, transform 0.2s; }
.pathway-row:hover .pathway-row__arrow { color: var(--teal); transform: translateX(4px); }

@media (max-width: 700px) {
  .col-70-30, .col-60-40, .col-50-50 { grid-template-columns: 1fr; gap: 3rem; }
  .pathway-row { grid-template-columns: 2.5rem 1fr auto; gap: 1rem; }
}

/* ── CARDS ── */
.pillar-card {
  padding: 2.5rem;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius);
  transition: background 0.2s;
}
.pillar-card:hover { background: var(--bg); }

/* ── STATS ── */
.stat-num {
  font-family: var(--display);
  font-size: clamp(3.2rem, 5vw, 4.5rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  display: block;
  letter-spacing: 0.02em;
}
.stat-label {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.4rem;
  display: block;
  line-height: 1.6;
}

/* ── SCROLL REVEAL ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].revealed { opacity: 1; transform: none; }
[data-reveal-left] {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal-left].revealed { opacity: 1; transform: none; }
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"] { transition-delay: 0.6s; }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  padding: calc(var(--nav-h) + var(--nav-top) + 5rem) 5vw 5.5rem;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.page-hero__inner { max-width: var(--max-w); margin: 0 auto; }
.page-hero__label { display: inline-flex; margin-bottom: 1.5rem; }
.page-hero__title {
  font-family: 'Bebas Neue', var(--display);
  font-size: clamp(4.5rem, 8.5vw, 8rem);
  font-weight: 400;
  line-height: 0.9;
  color: var(--ink);
  margin-bottom: 1.5rem;
  letter-spacing: 0.01em;
}
/* Removed: coloured <em> second line in .page-hero__title. Recolouring the back half of a
   heading with a bare element selector is the two style heading formula
   (no-ai-slop 24, zero tolerance 9). Hierarchy comes from size and weight.
   Do not re-add. */
.page-hero__sub { font-size: 1.05rem; color: var(--text-2); max-width: 560px; line-height: 1.95; letter-spacing: 0.04em; }

/* Page hero dark variant - now renders as a light soft hero */
.page-hero--dark {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.page-hero--dark .page-hero__title { color: var(--ink); }
.page-hero--dark .page-hero__sub   { color: var(--text-2); }
.page-hero--dark .label            { background: var(--teal-dim); border-color: var(--border-2); color: var(--teal-2); }

/* ── DIVIDER ── */
.divider { width: 40px; height: 2px; background: var(--teal); margin: 1.5rem 0; border-radius: 2px; }

/* ── FORMS ── */
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label {
  font-size: 0.76rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 400;
}
.form-control {
  background: var(--white);
  border: 1.5px solid var(--border);
  color: var(--text);
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  font-family: var(--sans);
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
.form-control:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,165,233,0.12); }
.form-control::placeholder { color: var(--muted); }
textarea.form-control { resize: vertical; min-height: 140px; }
select.form-control { cursor: pointer; }

/* ── FOOTER ── */
.footer {
  padding: 5.5rem 5vw 3rem;
  background: #0B0F2E;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
}
.footer__inner { max-width: var(--max-w); margin: 0 auto; }
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.5rem;
}
.footer__brand-name { font-family: var(--display); font-size: 2.2rem; font-weight: 700; color: #ffffff; margin-bottom: 0.3rem; letter-spacing: 0.03em; }
.footer__brand-credo { font-size: 0.73rem; letter-spacing: 0.14em; text-transform: uppercase; color: #0EA5E9; margin-bottom: 1rem; }
.footer__tagline { font-size: 0.82rem; color: rgba(255,255,255,0.62); line-height: 1.65; max-width: 280px; }
.footer__col-title { font-size: 0.73rem; letter-spacing: 0.16em; text-transform: uppercase; color: #0EA5E9; margin-bottom: 1.2rem; font-weight: 400; }
.footer__links { list-style: none; columns: 2; column-gap: 2.5rem; max-width: 460px; }
.footer__links li { margin-bottom: 0.6rem; break-inside: avoid; }
.footer__links a { font-size: 0.85rem; color: rgba(255,255,255,0.72); transition: color 0.2s; letter-spacing: 0; }
.footer__links a:hover { color: #ffffff; }
.footer__socials { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1rem; }
.footer__social {
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  transition: color 0.2s, border-color 0.2s;
}
.footer__social:hover { color: #0EA5E9; border-color: #0EA5E9; }
.footer__social svg { width: 15px; height: 15px; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.3);
}
.footer__disclosure {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.3);
  margin-top: 1.5rem;
  line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1.5rem;
}

/* ── HERO (home page) ── */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--white);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(14,165,233,0.06) 0%, transparent 65%);
  pointer-events: none;
}
.hero__video { display: none; }
.hero__overlay { display: none; }
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: calc(var(--nav-h) + var(--nav-top) + 4rem) 5vw 6rem;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.hero__content { max-width: none; }
.hero__label { display: inline-flex; margin-bottom: 2rem; }
.hero__label.label {
  background: var(--teal-dim);
  border-color: var(--border-2);
  color: var(--teal-2);
}
.hero__name {
  font-family: var(--display);
  font-size: clamp(6rem, 12vw, 12rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 0.88;
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}
/* Removed: coloured <em> second line in .hero__name. Recolouring the back half of a
   heading with a bare element selector is the two style heading formula
   (no-ai-slop 24, zero tolerance 9). Hierarchy comes from size and weight.
   Do not re-add. */
.hero__title {
  font-size: 0.84rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-2);
  margin-bottom: 1.8rem;
  font-weight: 600;
}
.hero__tagline {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--text-2);
  line-height: 2.0;
  letter-spacing: 0.05em;
  margin-bottom: 2.5rem;
}
.hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Hero portrait (right column) */
.hero__portrait { position: relative; }
.hero__portrait-img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius);
  filter: grayscale(15%) contrast(1.02);
}
.hero__portrait-badge {
  position: absolute;
  bottom: 2.5rem;
  left: -2rem;
  background: var(--white);
  border: 1px solid var(--border);
  padding: 1.2rem 1.8rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
}
.hero__portrait-badge-num {
  font-family: var(--display);
  font-size: 2rem;
  color: var(--teal);
  display: block;
  line-height: 1;
  letter-spacing: 0.02em;
}
.hero__portrait-badge-label {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-top: 0.2rem;
}

/* Legacy brain panel - hidden */
.hero__brain { display: none; }
.hero__brain-video { display: none; }
.hero__brain-ring { display: none; }
.hero__brain-ring-2 { display: none; }

/* Hero: remove decorative gradient */
.hero::before { display: none; }

/* ── AUTHORITY STRIP ── */
.authority-strip {
  background: var(--bg-2);
  padding: 4rem 5vw;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.authority-strip__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  text-align: center;
}
.authority-strip__num {
  font-family: var(--display);
  font-size: clamp(2.5rem, 4.2vw, 3.8rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  display: block;
  letter-spacing: 0.02em;
}
.authority-strip__label {
  font-size: 0.73rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.5rem;
  display: block;
  line-height: 1.65;
}
.authority-strip__divider { display: none; }

/* Route grid kept for legacy compatibility but de-emphasised */
.route-grid { display: flex; flex-direction: column; }
.route-card {
  padding: 1.8rem 0;
  background: transparent;
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 2rem;
  align-items: center;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.route-card:hover { background: var(--bg-2); padding-left: 1rem; padding-right: 1rem; margin: 0 -1rem; }
.route-card__icon { font-size: 1rem; color: var(--muted); line-height: 1; }
.route-card__label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.2rem; }
.route-card__title { font-family: var(--display); font-size: 1.6rem; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: 0.01em; }
.route-card__desc { font-size: 0.82rem; color: var(--text-2); line-height: 1.7; letter-spacing: 0.02em; margin-top: 0.25rem; }
.route-card__link { font-size: 1rem; color: var(--muted); transition: color 0.18s; }
.route-card:hover .route-card__link { color: var(--teal); }

/* ── BOOK GRID ── */
.book-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}
a.book-card { text-decoration: none; color: inherit; }
.book-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.book-card__cover {
  aspect-ratio: 3/4;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s, box-shadow 0.3s;
}
.book-card:hover .book-card__cover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.book-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.book-card__cover-placeholder {
  padding: 1.5rem;
  text-align: center;
  background: var(--bg-3);
}
.book-card__cover-placeholder .book-card__ptitle {
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}
.book-card__cover-placeholder .book-card__ppub {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}
.book-card__title {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}
.book-card__pub {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── RESEARCH FEATURE ── */
.research-hero-block {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 4rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  margin-bottom: 4rem;
}
.research-hero-block__label { color: var(--teal-2); background: var(--teal-dim); border-color: var(--border-2); }
.research-hero-block__title {
  font-family: var(--display);
  font-size: clamp(2.5rem, 3.8vw, 3.8rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 0.96;
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
}
/* Removed: coloured <em> second line in .research-hero-block__title. Recolouring the back half of a
   heading with a bare element selector is the two style heading formula
   (no-ai-slop 24, zero tolerance 9). Hierarchy comes from size and weight.
   Do not re-add. */
.research-hero-block__body { color: var(--text-2); font-size: 1rem; line-height: 1.95; letter-spacing: 0.04em; }
.research-hero-block__visual {
  aspect-ratio: 1;
  background: var(--bg-3);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.research-hero-block__visual video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0.85;
}

/* ── PAPER LIST ── */
.paper-list { list-style: none; display: flex; flex-direction: column; gap: 0; }
.paper-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: start;
  transition: background 0.2s;
}
.paper-item:last-child { border-bottom: none; }
.paper-item__num {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 800;
  color: rgba(0,0,0,0.12);
  line-height: 1;
  min-width: 2rem;
  padding-top: 2px;
  transition: color 0.2s;
}
.paper-item:hover .paper-item__num { color: var(--teal); }
.paper-item__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.paper-item__meta {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.25rem;

}
.paper-item__journal {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 600;
  white-space: nowrap;
  padding-top: 3px;
}

/* ── EXPERT WITNESS ── */
.ew-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.ew-service-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.ew-service-item {
  padding: 0.9rem 1.2rem;
  background: var(--bg);
  border-left: 2px solid var(--teal);
  font-size: 0.88rem;
  color: var(--ink);
  font-weight: 500;
  transition: background 0.2s;
}
.ew-service-item:hover { background: var(--teal-dim); }

/* ── MEDIA STRIP ── */
.media-strip {
  background: var(--white);
  padding: 3.5rem 5vw;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.media-strip__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
  justify-content: center;
}
.media-strip__label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.media-strip__logos { display: flex; gap: 2.5rem; flex-wrap: wrap; align-items: center; }
.media-strip__logo {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: 0.04em;
  opacity: 0.55;
  transition: opacity 0.2s;
}
.media-strip__logo:hover { opacity: 1; }

/* ── SPEAKING TOPIC ROWS ── */
.topic-grid {
  display: flex;
  flex-direction: column;
}
.topic-card {
  padding: 1.8rem 0;
  background: transparent;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 2rem;
  align-items: start;
}
.topic-card:first-child { border-top: 1px solid var(--border); }
.topic-card__num {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--muted);
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.topic-card__title { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--ink); margin-bottom: 0.4rem; letter-spacing: 0.01em; grid-column: 2; }
.topic-card__desc { font-size: 0.88rem; color: var(--text-2); line-height: 1.8; letter-spacing: 0.02em; grid-column: 2; }
.topic-card .pv-list,
.topic-card .pv-split { grid-column: 2; }

/* ── TAG / BADGE ── */
.tag {
  display: inline-flex;
  padding: 0.28rem 0.7rem;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.68rem;
  color: var(--text-2);
  letter-spacing: 0.04em;
}

/* ── TESTIMONIAL ── */
.testimonial {
  padding: 2.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-top: 3px solid var(--teal);
}
.testimonial__quote {
  font-family: var(--sans);
  font-size: 1.05rem;
  color: var(--ink-2);
  line-height: 1.95;
  letter-spacing: 0.04em;
  margin-bottom: 1.2rem;
}
.testimonial__author { font-size: 0.75rem; font-weight: 700; color: var(--ink); }
.testimonial__role { font-size: 0.7rem; color: var(--muted); }

/* ── SOFT SECTION ── */
.dark-section, .soft-section {
  background: var(--bg-2);
  padding: var(--section-pad);
}

/* Editorial pull-quote block */
.pull-statement {
  padding: 5rem 5vw;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pull-statement__inner { max-width: var(--max-w); margin: 0 auto; }
.pull-statement__text {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4vw, 4rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: 0.01em;
  max-width: 820px;
}
.pull-statement__attr {
  margin-top: 2rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── CTA BAND ── */
.cta-band {
  padding: 6rem 5vw;
  background: var(--bg-2);
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cta-band__eyebrow {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-2);
  margin-bottom: 1rem;
  font-weight: 600;
}
.cta-band__title {
  font-family: var(--display);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 0.96;
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
}
/* Removed: coloured <em> second line in .cta-band__title. Recolouring the back half of a
   heading with a bare element selector is the two style heading formula
   (no-ai-slop 24, zero tolerance 9). Hierarchy comes from size and weight.
   Do not re-add. */
.cta-band__sub { font-size: 1.05rem; color: var(--text-2); margin-bottom: 2.5rem; max-width: 480px; margin-left: auto; margin-right: auto; line-height: 1.95; letter-spacing: 0.04em; }

/* ── MOBILE - TABLET (max 900px) ── */
@media (max-width: 900px) {
  :root { --section-pad: 6rem 5vw; }

  .nav__links { display: none; }
  .nav__socials { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: flex; }

  /* Hero */
  .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__portrait { order: -1; max-width: 320px; margin: 0 auto; }
  .hero__portrait-badge { left: 0; right: auto; }
  .hero__name { font-size: clamp(3.5rem, 12vw, 5.5rem); }
  .hero__tagline { font-size: 0.95rem; }

  /* Authority */
  .authority-strip__inner { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

  /* Layout helpers */
  .col-70-30, .col-60-40, .col-50-50 { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Cards */
  .route-grid { grid-template-columns: 1fr 1fr; }
  .book-grid { grid-template-columns: repeat(2, 1fr); }
  .book-grid--wide { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Research */
  .research-hero-block { grid-template-columns: 1fr; gap: 2.5rem; padding: 2.5rem 0; }
  .research-hero-block__visual { display: none; }

  /* Expert witness */
  .ew-grid { grid-template-columns: 1fr; gap: 3rem; }

  /* Speaking */
  .topic-grid { grid-template-columns: 1fr; }

  /* Page sections */
  .page-hero__title { font-size: clamp(3rem, 10vw, 5.5rem); }

  /* Pathway rows */
  .pathway-row { gap: 1rem; padding: 1.4rem 0; }
  .pathway-row:hover { margin: 0; padding-left: 0; padding-right: 0; }
  .pathway-row__desc { display: none; }

  /* Footer */
  .footer__top { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer__bottom { flex-direction: column; text-align: center; }

  /* Stat band */
  .stat-band-inner { grid-template-columns: 1fr 1fr; }

  /* Section title scale */
  .section-title { font-size: clamp(2.5rem, 7vw, 4rem); }

  /* CTA band */
  .cta-band { padding: 4rem 5vw; }
  .cta-band__title { font-size: clamp(2.2rem, 6vw, 3.5rem); }
}

/* ── MOBILE - SMALL (max 600px) ── */
@media (max-width: 600px) {
  :root { --section-pad: 4rem 1.2rem; }

  .route-grid { grid-template-columns: 1fr; }
  .book-grid { grid-template-columns: 1fr 1fr; }
  .authority-strip__inner { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .hero__content { max-width: 100%; }
  .hero__name { font-size: clamp(3rem, 14vw, 4.5rem); }
  .hero__portrait-badge { display: none; }

  /* Typography */
  .page-hero__title { font-size: clamp(2.5rem, 11vw, 4rem); }
  .section-title { font-size: clamp(2.2rem, 8vw, 3.5rem); }
  .authority-strip__num { font-size: clamp(2rem, 7vw, 3rem); }

  /* Pathway rows */
  .pathway-row { grid-template-columns: 2rem 1fr auto; gap: 0.8rem; }
  .pathway-row__num svg { width: 14px; height: 14px; }

  /* Forms */
  .newsletter-form__row { flex-direction: column; }
  .newsletter-cta__visual { display: none; }
  .newsletter-cta__inner { grid-template-columns: 1fr; }

  /* Footer */
  .footer__tagline { display: none; }
  .footer__socials { justify-content: flex-start; }

  /* Buttons */
  .btn { padding: 0.75rem 1.4rem; font-size: 0.9rem; }
}

/* ══════════════════════════════════════════════
   CONVERSION LAYER - site bar, popups, SSF bridge
══════════════════════════════════════════════ */

/* ── SITE ANNOUNCEMENT BAR ── */
.site-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 44px;
  background: #050710;
  border-bottom: 1px solid rgba(14,165,233,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  z-index: 500;
  padding: 0 3.5rem 0 1rem;
  transform: translateY(-100%);
  transition: transform 0.55s cubic-bezier(0.34,1.56,0.64,1);
}
.site-bar.visible { transform: translateY(0); }

.site-bar__text {
  font-size: 0.72rem;
  font-family: var(--sans);
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.site-bar__text strong {
  font-family: var(--display);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}

.site-bar__form {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-shrink: 0;
}
.site-bar__input {
  height: 28px;
  padding: 0 0.85rem;
  font-size: 0.7rem;
  font-family: var(--sans);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 8px;
  color: #fff;
  outline: none;
  width: 185px;
  transition: border-color 0.22s, background 0.22s;
}
.site-bar__input::placeholder { color: rgba(255,255,255,0.24); }
.site-bar__input:focus { border-color: rgba(14,165,233,0.55); background: rgba(255,255,255,0.09); }

.site-bar__btn {
  height: 28px;
  padding: 0 0.9rem;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #0EA5E9;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, box-shadow 0.2s;
}
.site-bar__btn:hover { background: #0284C7; box-shadow: 0 4px 14px rgba(14,165,233,0.4); }

.site-bar__close {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.05);
  border: none;
  border-radius: 50%;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.28);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.site-bar__close:hover { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.75); }

.site-bar__success {
  font-size: 0.72rem;
  font-family: var(--sans);
  color: #38bdf8;
  letter-spacing: 0.04em;
}

@media (max-width: 767px) {
  .site-bar {
    justify-content: flex-start;
    height: 44px;
    gap: 0.4rem;
    padding: 0 2.3rem 0 0.8rem;
    overflow: hidden;
  }
  /* The full AXON line is too long for the narrow phone slot. Keep it a normal
     flex item (so it never pushes the email/button off-screen like the old
     ticker did) and scroll the message through it as a marquee. The moving part
     is the inner .site-bar__ticker wrapper, injected by global.js. */
  .site-bar__text {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    font-size: 0.62rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .site-bar__ticker {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: site-bar-ticker 14s linear infinite;
  }
  .site-bar__input {
    width: auto;
    flex: 0 1 150px;
    min-width: 0;
    padding: 0 0.7rem;
    font-size: 0.72rem;
  }
  /* The email box is self-explanatory on phones, so drop the "Join the
     waitlist" label and submit with a compact blue arrow button instead.
     The text stays in the DOM (font-size:0) so screen readers still read it. */
  .site-bar__btn {
    flex: 0 0 auto;
    width: 34px;
    height: 28px;
    padding: 0;
    font-size: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .site-bar__btn::after {
    content: "\2192";
    font-size: 1rem;
    line-height: 1;
    color: #fff;
  }
}
@keyframes site-bar-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ── POPUP SYSTEM (popups agent) ──
   The old popup overlay and the SSF corner card are retired: no script shows
   either. The corner card's markup is still on several pages, invisible but
   reachable with the Tab key, so it is taken out of the page here. The exit
   sheet and the read toast are further down this file. */
.popup-corner { display: none !important; }

/* ── AUTHORITY BADGES STRIP ── */
.auth-strip {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.9rem 5vw;
  overflow: hidden;
}
.auth-strip__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}
.auth-strip__label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-right: 1.5rem;
  border-right: 1px solid var(--border);
  margin-right: 1.5rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.auth-strip__item {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11,15,46,0.28);
  padding: 0 1.1rem;
  border-right: 1px solid var(--border);
  white-space: nowrap;
  transition: color 0.2s;
  line-height: 1;
}
.auth-strip__item:last-child { border-right: none; }

@media (max-width: 700px) {
  .auth-strip__label { display: none; }
  .auth-strip__item { padding: 0 0.7rem; font-size: 0.62rem; }
}

/* ── SSF BRIDGE SECTION ── */
.ssf-bridge {
  padding: var(--section-pad);
  background: #EEF3F9;
  position: relative;
  overflow: hidden;
}
.ssf-bridge::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(14,165,233,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,165,233,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}

.ssf-bridge__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
}

.ssf-bridge__top {
  margin-bottom: 2.75rem;
}

.ssf-bridge__h2 {
  font-family: 'Bebas Neue', var(--display);
  font-size: clamp(3rem, 5.5vw, 4.5rem);
  font-weight: 400;
  line-height: 0.93;
  color: var(--ink);
  letter-spacing: 0.01em;
  margin-bottom: 0.9rem;
}

.ssf-bridge__sub {
  font-size: 0.875rem;
  color: var(--text-2);
  line-height: 1.7;
  max-width: 360px;
}


/* ── SSF BENTO GRID ── */
.ssf-bento {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.2rem;
  min-height: 460px;
}

.ssf-bento__card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(11,15,46,0.07);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.35s ease,
    border-color 0.25s;
  will-change: transform;
}

.ssf-bento__card--featured {
  grid-row: 1 / span 2;
  background: linear-gradient(145deg, #f0f9ff 0%, #e4f2fc 55%, #f0f9ff 100%);
}

.ssf-bento__card:hover {
  box-shadow: 0 20px 60px rgba(14,165,233,0.13), 0 4px 16px rgba(0,0,0,0.05);
  border-color: rgba(14,165,233,0.22);
}

/* Spotlight cursor glow */
.ssf-bento__spot {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), rgba(14,165,233,0.1), transparent 70%);
}
.ssf-bento__card:hover .ssf-bento__spot { opacity: 1; }

.ssf-bento__inner {
  padding: 1.85rem 1.65rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  height: 100%;
  position: relative;
  z-index: 1;
}

/* Removed: .ssf-live dot and label. A pulsing green "live" dot above a tiny
   uppercase label is a banned unit (no-ai-slop zero tolerance 2 and 3), and
   nothing on that card is live. .ssf-bento__title opens the card now.
   Do not re-add the dot, the label, or @keyframes ssf-live-pulse. */

/* Cost / access hook on featured card */
.ssf-bento__cost {
  font-family: 'Bebas Neue', var(--display);
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  color: #0EA5E9;
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin: 0.1rem 0 0.2rem;
}

/* Year hook on fellows card */
.ssf-bento__year {
  font-family: 'Bebas Neue', var(--display);
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  color: #0EA5E9;
  line-height: 1;
  letter-spacing: -0.01em;
}
.ssf-bento__year sup {
  font-size: 0.42em;
  vertical-align: super;
  font-family: var(--sans);
  letter-spacing: 0.05em;
  font-weight: 700;
}

.ssf-bento__tag {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #0EA5E9;
}

.ssf-bento__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  font-family: var(--sans);
}

.ssf-bento__card--featured .ssf-bento__title {
  font-size: 1.35rem;
}

.ssf-bento__desc {
  font-size: 0.80rem;
  color: var(--text-2);
  line-height: 1.68;
  flex: 1;
}

.ssf-bento__list {
  font-size: 0.79rem;
  color: var(--text-2);
  line-height: 1.7;
}

.ssf-bento__link {
  font-size: 0.76rem;
  font-weight: 700;
  color: #0EA5E9;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.25rem;
  transition: gap 0.22s;
  align-self: flex-start;
}
.ssf-bento__card:hover .ssf-bento__link { gap: 0.6rem; }

@media (max-width: 900px) {
  .ssf-bento { grid-template-columns: 1fr; grid-template-rows: auto; min-height: unset; }
  .ssf-bento__card--featured { grid-row: auto; }
}

/* ── FOOTER GUIDE BAND ── */
.footer-guide {
  background: #050710;
  border-top: 1px solid rgba(14,165,233,0.14);
  border-bottom: 1px solid rgba(14,165,233,0.08);
  padding: 4.5rem 5vw;
  position: relative;
  overflow: hidden;
}
/* Teal glow orb - top right */
.footer-guide::before {
  content: '';
  position: absolute;
  top: -6rem; right: -6rem;
  width: 36rem; height: 36rem;
  background: radial-gradient(circle, rgba(14,165,233,0.10) 0%, transparent 70%);
  pointer-events: none;
}
/* Ghost "FREE" watermark */
.footer-guide::after {
  content: 'FREE';
  position: absolute;
  top: 50%;
  right: 4vw;
  transform: translateY(-50%);
  font-family: 'Bebas Neue', var(--display);
  font-size: clamp(7rem, 14vw, 17rem);
  color: rgba(14,165,233,0.04);
  line-height: 1;
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
}
.footer-guide__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  position: relative;
  z-index: 1;
}
.footer-guide__left { flex: 1; }
.footer-guide__label {
  font-family: var(--display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #0EA5E9;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.footer-guide__label::before {
  content: '';
  width: 22px; height: 1px;
  background: linear-gradient(90deg, #0EA5E9, rgba(14,165,233,0.4));
  flex-shrink: 0;
}
.footer-guide__title {
  font-family: 'Bebas Neue', var(--display);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #fff;
  line-height: 0.95;
  margin-bottom: 0.5rem;
}
/* Removed: coloured <em> second line in .footer-guide__title. Recolouring the back half of a
   heading with a bare element selector is the two style heading formula
   (no-ai-slop 24, zero tolerance 9). Hierarchy comes from size and weight.
   Do not re-add. */
.footer-guide__sub {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.65;
  max-width: 380px;
}

.footer-guide__right {
  flex-shrink: 0;
}
.footer-guide__form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 280px;
}
.footer-guide__input {
  height: 52px;
  padding: 0 1.2rem;
  font-size: 0.87rem;
  font-family: var(--sans);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  color: #fff;
  outline: none;
  width: 100%;
  transition: border-color 0.22s, background 0.22s, box-shadow 0.22s;
}
.footer-guide__input::placeholder { color: rgba(255,255,255,0.22); }
.footer-guide__input:focus {
  border-color: rgba(14,165,233,0.65);
  background: rgba(255,255,255,0.09);
  box-shadow: 0 0 0 3px rgba(14,165,233,0.10);
}
.footer-guide__btn {
  height: 52px;
  background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
  color: #fff;
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(14,165,233,0.32);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.2s, filter 0.2s;
}
.footer-guide__btn::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
  transition: left 0.55s ease;
  pointer-events: none;
}
.footer-guide__btn:hover::before { left: 140%; }
.footer-guide__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(14,165,233,0.50);
  filter: brightness(1.06);
}
.footer-guide__note {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.22);
  text-align: center;
}
.footer-guide__success {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: #38bdf8;
  letter-spacing: 0.04em;
}

@media (max-width: 800px) {
  .footer-guide { padding: 3.5rem 5vw; }
  .footer-guide__inner { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .footer-guide__form { width: 100%; min-width: 0; }
  .footer-guide::after { display: none; }
}

/* ── CONTENT UPGRADE BOX ── */
.content-upgrade {
  margin: 2.25rem 0;
  background: linear-gradient(135deg, #EEF6FF 0%, #E8F2FB 100%);
  border: 1px solid rgba(14,165,233,0.16);
  border-left: 3px solid #0EA5E9;
  border-radius: 10px;
  padding: 1.35rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 1.35rem;
}
.content-upgrade__icon {
  width: 42px; height: 42px;
  background: rgba(14,165,233,0.10);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: #0EA5E9;
  flex-shrink: 0;
}
.content-upgrade__body { flex: 1; min-width: 0; }
.content-upgrade__label {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #0EA5E9;
  margin-bottom: 0.18rem;
}
.content-upgrade__title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 0.1rem;
}
.content-upgrade__sub {
  font-size: 0.76rem;
  color: var(--text-2);
}
.content-upgrade__form {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}
.content-upgrade__input {
  height: 38px;
  padding: 0 0.8rem;
  font-size: 0.78rem;
  font-family: var(--sans);
  background: #fff;
  border: 1.5px solid rgba(14,165,233,0.22);
  border-radius: 100px;
  color: var(--ink);
  outline: none;
  width: 190px;
  transition: border-color 0.2s;
}
.content-upgrade__input:focus { border-color: #0EA5E9; }
.content-upgrade__input::placeholder { color: var(--muted); }
.content-upgrade__btn {
  height: 38px;
  padding: 0 1rem;
  background: #0EA5E9;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  font-family: var(--sans);
  border: none;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, transform 0.18s;
}
.content-upgrade__btn:hover { background: #0284C7; transform: scale(1.02); }

@media (max-width: 760px) {
  .content-upgrade { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .content-upgrade__form { width: 100%; }
  .content-upgrade__input { flex: 1; width: auto; min-width: 0; }
}

/* ── POST-READ TOAST (owned by the popups agent, see home-100x/reports/popups.md) ──
   An iOS style notice: a dark glass capsule (it was a dark card, and the
   ground stays dark) that rises from the bottom edge on the sheet curve,
   its contents settling in after it, and leaves the way it was swiped.
   Text on glass: the tint is 80 percent navy, so white type holds 4.5:1
   over the brightest page that can pass behind it. The 4px teal border on
   its left side and the label above the wordmark were banned patterns and
   stay gone. */
.read-toast {
  --h-popups-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --h-popups-ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --h-popups-out: cubic-bezier(0, 0, 0.5, 1);
  --h-popups-std: cubic-bezier(0.4, 0, 0.6, 1);
  --h-popups-tint: rgba(11, 15, 46, 0.8);
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 998;
  width: fit-content;
  max-width: calc(100vw - 16px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 8px 8px 8px 24px;
  border-radius: 999px;
  background: var(--h-popups-tint);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.22),
    inset -1px -1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 0.5px rgba(255, 255, 255, 0.12),
    0 4px 12px -4px rgba(11, 15, 46, 0.3),
    0 22px 48px -16px rgba(11, 15, 46, 0.55);
  color: #fff;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, calc(100% + 2.5rem), 0) scale(0.94);
  transition:
    transform 0.42s var(--h-popups-std),
    opacity 0.3s var(--h-popups-std),
    visibility 0s linear 0.45s;
}
.read-toast.active {
  visibility: visible;
  opacity: 1;
  transform: translate3d(var(--h-popups-dx, 0px), var(--h-popups-dy, 0px), 0);
  transition:
    transform 0.62s var(--h-popups-sheet),
    opacity 0.34s var(--h-popups-ease),
    visibility 0s;
}
/* Under the finger: no easing, it is the finger. */
.read-toast.h-popups-dragging { transition: none; cursor: grabbing; }
/* Thrown: carries on the way it went. */
.read-toast.h-popups-flung {
  transform: translate3d(var(--h-popups-dx, 0px), var(--h-popups-dy, 0px), 0);
  transition:
    transform 0.36s var(--h-popups-out),
    opacity 0.3s linear,
    visibility 0s linear 0.37s;
}
/* Contents settle in just after the capsule, in reading order. */
@keyframes h-popups-settle { from { opacity: 0; translate: 0 8px; filter: blur(4px); } }
.read-toast.active > :not([role="status"]) {
  animation: h-popups-settle 0.5s var(--h-popups-ease) backwards;
}
.read-toast.active > :nth-child(1) { animation-delay: 0.12s; }
.read-toast.active > :nth-child(2) { animation-delay: 0.18s; }
.read-toast.active > :nth-child(3) { animation-delay: 0.24s; }

.read-toast__left { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.read-toast__title {
  display: block;
  font-family: 'Bebas Neue', var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1;
  color: #fff;
}
.read-toast__note {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.35;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.78);
  text-wrap: balance;
}
/* The ask is a white pill on the dark glass (white on sky blue failed
   contrast). Hover lifts the colour, a press gives way and springs back. */
.read-toast__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: none;
  min-height: 44px;
  padding: 0 1.2rem;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px -8px rgba(0, 0, 0, 0.5);
  -webkit-user-drag: none;
  transition: background-color 0.32s var(--h-popups-out), scale 0.5s var(--h-popups-sheet);
}
.read-toast__cta span { display: inline-block; transition: translate 0.32s var(--h-popups-out); }
@media (hover: hover) and (pointer: fine) {
  .read-toast__cta:hover { background: #fff; }
  .read-toast__cta:hover span { translate: 3px 0; }
  .read-toast__close:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
}
.read-toast__cta:active { scale: 0.96; transition-duration: 0.12s; }
.read-toast__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.32s var(--h-popups-out), color 0.32s var(--h-popups-out), scale 0.5s var(--h-popups-sheet);
}
.read-toast__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.read-toast__close:active { scale: 0.92; transition-duration: 0.12s; }
.read-toast :is(a, button):focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* The room the toast adds at the end of the page (see global.js). */
.h-popups-inset { display: block; height: 0; transition: height 0.6s cubic-bezier(0.32, 0.72, 0, 1); }

/* Text only a screen reader hears. */
.h-popups-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 620px) {
  /* A notification, not a pill: two lines of text need a rounder box. */
  .read-toast {
    width: calc(100vw - 16px);
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 0.6rem;
    padding: 10px 6px 10px 18px;
    border-radius: 26px;
  }
  .read-toast__cta { padding: 0 1rem; font-size: 0.85rem; }
  .read-toast__note { font-size: 0.8rem; }
}

/* ── Footer column links: force visible (some were rendering invisible-but-clickable) ── */
footer nav a {
  color: rgba(255, 255, 255, 0.75) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ════════════════════════════════════════════════════════════════════════
   EXIT-INTENT NEWSLETTER SHEET (owned by the popups agent, see
   home-100x/reports/popups.md)
   An Apple sheet. The page dims (dim only, as iOS does, so the glass has
   something to bend), and a liquid glass tray rises on the iOS sheet curve
   holding the original card: the navy fact on the left, the white ask on
   the right, corners concentric with the tray. Its contents arrive in
   reading order, 60ms apart. On phones it is a bottom sheet with a grabber.
   Self contained: other pages do not load home/base.css, so the curves and
   the glass recipe are copied here under h-popups names.
   ════════════════════════════════════════════════════════════════════════ */
@property --h-popups-shine { syntax: '<number>'; inherits: false; initial-value: 0; }

.exit-pop {
  --h-popups-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --h-popups-ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --h-popups-out: cubic-bezier(0, 0, 0.5, 1);
  --h-popups-std: cubic-bezier(0.4, 0, 0.6, 1);
  --h-popups-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --h-popups-spring-dur: 500ms;
  --h-popups-ink-2: #1A1F52;
  --h-popups-ink-3: #05071C;
  --h-popups-frame: 12px;
  --h-popups-r: 30px;
  --h-popups-tint: rgba(255, 255, 255, 0.42);
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  visibility: hidden;
  transition: visibility 0s linear 0.42s;
}
@supports (transition-timing-function: linear(0, 1)) {
  .exit-pop {
    /* SwiftUI .snappy (0.4s, bounce 0.15): 0.6 percent overshoot, for presses only. */
    --h-popups-spring: linear(0, 0.006 1.2%, 0.014 2%, 0.025 2.8%, 0.056 4.2%, 0.095 5.8%, 0.141 7.2%, 0.19 8.8%, 0.411 15%, 0.512 18%, 0.567 19.8%, 0.61 21.2%, 0.658 23%, 0.696 24.5%, 0.763 27.5%, 0.793 29%, 0.823 30.8%, 0.872 34%, 0.912 37.5%, 0.945 41.2%, 0.97 45.5%, 0.988 50.2%, 1 55.8%, 1.005 61%, 1.006 67.8%, 1);
    --h-popups-spring-dur: 560ms;
  }
}
.exit-pop.active { visibility: visible; transition-delay: 0s; }

.exit-pop__scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 15, 46, 0.46);
  opacity: 0;
  touch-action: none;
  transition: opacity 0.32s var(--h-popups-std);
}
.exit-pop.active .exit-pop__scrim { opacity: 1; transition: opacity 0.5s var(--h-popups-ease); }

/* The tray: frosted glass, a rim lit top left and bottom right, a light
   that follows a fine pointer, and (desktop Chromium) real refraction. */
.exit-pop__card {
  --h-popups-shine: 0;
  position: relative;
  width: min(924px, 100%);
  max-height: calc(100vh - 3rem);
  max-height: calc(100dvh - 3rem);
  display: flex;
  flex-direction: column;
  padding: var(--h-popups-frame);
  border-radius: var(--h-popups-r);
  background:
    radial-gradient(220px circle at var(--h-popups-mx, 30%) var(--h-popups-my, 0%), rgb(255 255 255 / calc(var(--h-popups-shine) * 0.65)), transparent 70%)
    var(--h-popups-tint);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.85),
    inset -1px -1px 0 rgba(255, 255, 255, 0.35),
    0 0 0 0.5px rgba(11, 15, 46, 0.16),
    0 8px 24px -8px rgba(11, 15, 46, 0.32),
    0 40px 90px -24px rgba(11, 15, 46, 0.6);
  opacity: 0;
  transform: translate3d(0, 40px, 0) scale(0.94);
  transition:
    transform 0.34s var(--h-popups-std),
    opacity 0.26s var(--h-popups-std),
    --h-popups-shine 0.32s var(--h-popups-out);
}
.exit-pop.active .exit-pop__card {
  opacity: 1;
  transform: none;
  transition:
    transform 0.62s var(--h-popups-sheet),
    opacity 0.18s var(--h-popups-ease),
    --h-popups-shine 0.32s var(--h-popups-out);
}
.exit-pop.h-popups-dragging .exit-pop__card,
.exit-pop.h-popups-dragging .exit-pop__scrim { transition: none; }
@media (hover: hover) and (pointer: fine) {
  .exit-pop__card:hover { --h-popups-shine: 1; }
}
/* Refraction (set by global.js only where it can paint): the lens does
   the work, so the tint thins and the blur drops. */
.exit-pop.h-popups-lens .exit-pop__card {
  --h-popups-tint: rgba(255, 255, 255, 0.26);
  -webkit-backdrop-filter: var(--h-popups-lens,) blur(4px) saturate(170%) brightness(1.06);
  backdrop-filter: var(--h-popups-lens,) blur(4px) saturate(170%) brightness(1.06);
}

.h-popups-grabber { display: none; }

/* The original card, held by the glass: navy fact and white ask. */
.h-popups-panes {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  min-height: 0;
  border-radius: calc(var(--h-popups-r) - var(--h-popups-frame));
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(11, 15, 46, 0.14), 0 2px 10px -4px rgba(11, 15, 46, 0.3);
}

/* Left: the one fact, and the axon that carries it. */
.exit-pop__visual {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.6rem;
  padding: 3rem 2.25rem 2.4rem;
  background: var(--ink);
  color: #fff;
}
.exit-pop__visual-inner { margin: 0; }
.exit-pop__num {
  display: block;
  font-family: 'Bebas Neue', var(--display);
  font-size: clamp(3.6rem, 7vw, 5.6rem);
  line-height: 0.86;
  letter-spacing: 0.01em;
  color: #fff;
}
.exit-pop__num sup {
  color: var(--teal);
  font-size: 0.46em;
  vertical-align: super;
  margin-left: 0.05em;
}
.exit-pop__num-label {
  display: inline-block;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 2px solid var(--legacy-gold);
  font-family: var(--display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
}
.h-popups-axon { display: block; width: 100%; max-width: 320px; height: auto; overflow: visible; }
.h-popups-ax-line { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 1.3; stroke-linecap: round; }
.h-popups-ax-soma { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.5); stroke-width: 1.2; }
.h-popups-ax-myelin { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.34); stroke-width: 1.2; }
.h-popups-ax-node, .h-popups-ax-bouton { fill: rgba(255, 255, 255, 0.42); transform-box: fill-box; transform-origin: center; }
@keyframes h-popups-fire {
  0% { fill: rgba(255, 255, 255, 0.42); scale: 1; }
  35% { fill: var(--teal); scale: 1.9; }
  100% { fill: rgba(255, 255, 255, 0.42); scale: 1; }
}
@keyframes h-popups-lit { to { fill: var(--teal); } }
@keyframes h-popups-sheath { to { stroke: var(--teal); fill: rgba(14, 165, 233, 0.12); } }
/* Opening: the signal jumps node to node once and the terminal lights. */
.exit-pop.active .h-popups-ax-node { animation: h-popups-fire 0.52s var(--h-popups-ease) calc(0.72s + var(--h-popups-n) * 0.09s) both; }
.exit-pop.active .h-popups-ax-bouton { animation: h-popups-lit 0.4s var(--h-popups-ease) 1.2s forwards; }
/* Joined: the whole fibre lights, soma to terminal, and stays lit. */
.exit-pop.active .h-popups-joined .h-popups-ax-node { animation: h-popups-lit 0.36s var(--h-popups-ease) calc(0.28s + var(--h-popups-n) * 0.08s) forwards; }
.exit-pop.active .h-popups-joined .h-popups-ax-myelin { animation: h-popups-sheath 0.4s var(--h-popups-ease) calc(0.2s + var(--h-popups-n) * 0.08s) forwards; }

/* Right: the ask. */
.exit-pop__body {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 2.9rem 2.6rem 2.5rem;
  background: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Auto margins centre the ask when there is room and give way when there
   is not, so a short screen scrolls the body instead of cutting its top. */
.h-popups-stage { margin-block: auto; transition: height 0.6s var(--h-popups-sheet); }
.h-popups-stage.h-popups-in { overflow: hidden; }
.exit-pop__title {
  margin: 0 3rem 0.85rem 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.exit-pop__title:focus, .h-popups-done__title:focus { outline: none; }
/* The gold underline draws once the title has arrived. */
.exit-pop__hl {
  white-space: nowrap;
  padding-bottom: 0.05em;
  background-image: linear-gradient(var(--legacy-gold), var(--legacy-gold));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0% 0.14em;
  transition: background-size 0.8s var(--h-popups-sheet) 0.78s;
}
.exit-pop.active .exit-pop__hl { background-size: 100% 0.14em; }
.exit-pop__lead {
  margin: 0 0 1.5rem;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}

/* The form: a field to fill (12px corners), a pill to press. */
.exit-pop__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; }
.exit-pop__form input {
  min-width: 0;
  height: 52px;
  padding: 0 1.1rem;
  border: 0;
  border-radius: 14px;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px rgba(11, 15, 46, 0.1);
  font-family: var(--sans);
  font-size: 1rem;                       /* 16px: iOS does not zoom the page on focus */
  color: var(--ink);
  outline: none;
  transition: background-color 0.32s var(--h-popups-out), box-shadow 0.32s var(--h-popups-out);
}
.exit-pop__form input::placeholder { color: var(--text-2); opacity: 0.8; }
.exit-pop__form input:hover { background: var(--bg-3); }
.exit-pop__form input:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--teal-2), 0 0 0 4px rgba(14, 165, 233, 0.16); }
.exit-pop__form input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgba(11, 15, 46, 0.08); }
.exit-pop__form input[readonly] { color: var(--text-2); }
.h-popups-submit,
.h-popups-btn {
  display: inline-grid;
  place-items: center;
  min-height: 52px;
  padding: 0 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 1px 2px rgba(11, 15, 46, 0.22), 0 8px 22px -10px rgba(11, 15, 46, 0.55);
  color: #fff;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.32s var(--h-popups-out),
    box-shadow 0.32s var(--h-popups-out),
    scale var(--h-popups-spring-dur) var(--h-popups-spring);
}
.h-popups-submit > * { grid-area: 1 / 1; transition: opacity 0.2s var(--h-popups-std), translate 0.32s var(--h-popups-ease), filter 0.2s var(--h-popups-std); }
.h-popups-submit__label span { display: inline-block; transition: translate var(--h-popups-spring-dur) var(--h-popups-spring); }
.h-popups-spin {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  opacity: 0;
  translate: 0 6px;
}
@keyframes h-popups-turn { to { rotate: 1turn; } }
.exit-pop__form[data-h-popups-state="busy"] .h-popups-submit__label { opacity: 0; translate: 0 -6px; filter: blur(3px); }
.exit-pop__form[data-h-popups-state="busy"] .h-popups-spin { opacity: 1; translate: none; animation: h-popups-turn 0.8s linear infinite; }
.exit-pop__form[data-h-popups-state="busy"] .h-popups-submit { cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  .h-popups-submit:hover, .h-popups-btn:hover {
    background: var(--h-popups-ink-2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 5px rgba(11, 15, 46, 0.2), 0 16px 34px -12px rgba(11, 15, 46, 0.6);
  }
  .h-popups-submit:hover .h-popups-submit__label span { translate: 3px 0; }
  .h-popups-btn--quiet:hover { background: rgba(11, 15, 46, 0.09); box-shadow: none; }
  .exit-pop__close:hover { background: rgba(11, 15, 46, 0.09); }
}
.h-popups-submit:active, .h-popups-btn:active {
  background: var(--h-popups-ink-3);
  scale: 0.97;
  transition-duration: 0.12s;
  transition-timing-function: var(--h-popups-out);
}
.h-popups-btn--quiet { background: rgba(11, 15, 46, 0.055); color: var(--ink); box-shadow: none; }
.h-popups-btn--quiet:active { background: rgba(11, 15, 46, 0.13); }
.exit-pop :is(button, a, input):focus-visible { outline: 2px solid var(--teal-2); outline-offset: 3px; }
.exit-pop__form input:focus-visible { outline: none; }

/* A message under the field opens its own row; the sheet's height glides. */
.h-popups-msg-wrap {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--h-popups-sheet);
}
.exit-pop__form[data-h-popups-msg] .h-popups-msg-wrap { grid-template-rows: 1fr; }
.h-popups-msg {
  min-height: 0;
  overflow: hidden;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
.h-popups-msg:not(:empty) { padding-top: 0.2rem; }
.exit-pop__fine {
  margin: 1rem 0 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--text-2);
}

/* Thank you: a check that draws itself, two lines, two ways on. */
.h-popups-done { display: grid; justify-items: start; }
.h-popups-stage [hidden] { display: none; }
.h-popups-check { width: 48px; height: 48px; margin-bottom: 1.1rem; }
.h-popups-check circle { fill: var(--teal-light); }
.h-popups-check path { fill: none; stroke: var(--teal-2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 32; stroke-dashoffset: 32; }
@keyframes h-popups-draw { to { stroke-dashoffset: 0; } }
.h-popups-done:not([hidden]) .h-popups-check path { animation: h-popups-draw 0.5s var(--h-popups-sheet) 0.3s forwards; }
.h-popups-done__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.h-popups-done__line { margin: 0.55rem 0 1.6rem; font-family: var(--sans); font-size: 1rem; line-height: 1.6; color: var(--text-2); }
.h-popups-done__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* Content arrival: a short rise out of a soft blur, in reading order. */
@keyframes h-popups-rise { from { opacity: 0; translate: 0 14px; filter: blur(6px); } }
.exit-pop.active .h-popups-item { animation: h-popups-rise 0.62s var(--h-popups-ease) calc(0.14s + var(--h-popups-i, 0) * 0.06s) backwards; }
.h-popups-stage.h-popups-out .h-popups-ask > * { opacity: 0; translate: 0 -4px; filter: blur(4px); transition: opacity 0.18s var(--h-popups-std), translate 0.18s var(--h-popups-std), filter 0.18s var(--h-popups-std); }
.h-popups-stage.h-popups-in .h-popups-done > * { animation: h-popups-rise 0.55s var(--h-popups-ease) backwards; }
.h-popups-stage.h-popups-in .h-popups-done > :nth-child(2) { animation-delay: 0.06s; }
.h-popups-stage.h-popups-in .h-popups-done > :nth-child(3) { animation-delay: 0.12s; }
.h-popups-stage.h-popups-in .h-popups-done > :nth-child(4) { animation-delay: 0.18s; }

/* Close: a 44px circle. Over the white pane it is a tonal disc. */
.exit-pop__close {
  position: absolute;
  top: calc(var(--h-popups-frame) + 14px);
  right: calc(var(--h-popups-frame) + 14px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(11, 15, 46, 0.055);
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.32s var(--h-popups-out), scale var(--h-popups-spring-dur) var(--h-popups-spring);
}
.exit-pop__close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.exit-pop__close:active { scale: 0.92; transition-duration: 0.12s; }

/* ── Phones: a bottom sheet, floating 8px in from the edges as iOS draws
   sheets that do not fill the screen, with a grabber on the glass. ── */
@media (max-width: 640px) {
  .exit-pop {
    --h-popups-frame: 8px;
    --h-popups-r: 30px;
    align-items: flex-end;
    padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .exit-pop__card {
    width: 100%;
    max-height: calc(100% - 16px);
    padding-top: 24px;
    opacity: 1;                          /* a sheet slides, it does not fade */
    transform: translate3d(0, calc(100% + 24px), 0);
    touch-action: none;
    transition: transform 0.36s var(--h-popups-std);
  }
  .exit-pop.h-popups-scroll .exit-pop__body { touch-action: pan-y; }
  .h-popups-grabber {
    display: block;
    position: absolute;
    top: 9px;
    left: 50%;
    width: 38px;
    height: 5px;
    margin-left: -19px;
    border-radius: 3px;
    background: rgba(11, 15, 46, 0.3);
  }
  .h-popups-panes { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .exit-pop__visual { gap: 1.1rem; padding: 1.5rem 1.4rem 1.3rem; }
  .exit-pop__num { font-size: 3rem; }
  .exit-pop__num-label { margin-top: 0.55rem; padding-top: 0.5rem; font-size: 0.6rem; letter-spacing: 0.16em; }
  .h-popups-axon { max-width: 270px; }
  .exit-pop__body { padding: 1.6rem 1.4rem 1.5rem; }
  .exit-pop__title { margin-right: 0; font-size: 1.4rem; }
  .exit-pop__lead { margin-bottom: 1.2rem; }
  .exit-pop__form { grid-template-columns: 1fr; }
  .h-popups-submit { width: 100%; }
  .h-popups-done__actions > * { flex: 1 1 auto; }
  /* Over the navy band the close is a dark glass disc with a white x. */
  .exit-pop__close {
    top: calc(24px + 10px);
    right: calc(var(--h-popups-frame) + 10px);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2), inset -1px -1px 0 rgba(255, 255, 255, 0.06);
  }
  .exit-pop :is(.exit-pop__close):focus-visible { outline-color: #fff; }
}
/* A short phone: the navy band gives up height before the ask does. */
@media (max-width: 640px) and (max-height: 700px) {
  .exit-pop__visual { gap: 0.8rem; padding: 1.15rem 1.4rem 1rem; }
  .exit-pop__num { font-size: 2.5rem; }
  .h-popups-axon { max-width: 220px; }
  .exit-pop__close { top: calc(24px + 6px); }
  .exit-pop__body { padding-top: 1.3rem; }
}

/* ── Both popups: reduced motion, reduced transparency, no blur, high contrast ── */
@media (prefers-reduced-motion: reduce) {
  .exit-pop__card, .exit-pop.active .exit-pop__card,
  .read-toast, .read-toast.active, .read-toast.h-popups-flung { transform: none; }
  .exit-pop__card, .exit-pop.active .exit-pop__card { transition: opacity 0.15s linear; }
  .read-toast { transition: opacity 0.15s linear, visibility 0s linear 0.16s; }
  .read-toast.active { transition: opacity 0.15s linear, visibility 0s; transform: translate3d(var(--h-popups-dx, 0px), var(--h-popups-dy, 0px), 0); }
  .read-toast.h-popups-flung { transition: opacity 0.15s linear, visibility 0s linear 0.16s; }
  .exit-pop.active .h-popups-item, .read-toast.active > *,
  .h-popups-stage.h-popups-in .h-popups-done > *,
  .exit-pop.active .h-popups-ax-node { animation: none; }
  .exit-pop.active .h-popups-ax-bouton, .exit-pop.active .h-popups-joined .h-popups-ax-node { animation: none; fill: var(--teal); }
  .exit-pop.active .h-popups-joined .h-popups-ax-myelin { animation: none; stroke: var(--teal); fill: rgba(14, 165, 233, 0.12); }
  .h-popups-stage, .h-popups-msg-wrap, .h-popups-inset, .exit-pop__hl { transition: none; }
  .h-popups-done:not([hidden]) .h-popups-check path { animation: none; stroke-dashoffset: 0; }
  .exit-pop__form[data-h-popups-state="busy"] .h-popups-submit__label { opacity: 1; translate: none; filter: none; }
  .exit-pop__form[data-h-popups-state="busy"] .h-popups-spin { display: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .exit-pop__card, .exit-pop.h-popups-lens .exit-pop__card, .read-toast { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .exit-pop__card, .exit-pop.h-popups-lens .exit-pop__card { --h-popups-tint: rgba(255, 255, 255, 0.97); }
  .read-toast { --h-popups-tint: rgba(11, 15, 46, 0.97); }
  .exit-pop__scrim { background: rgba(11, 15, 46, 0.62); }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .exit-pop__card { --h-popups-tint: rgba(255, 255, 255, 0.92); }
  .read-toast { --h-popups-tint: rgba(11, 15, 46, 0.94); }
}
@media (forced-colors: active) {
  .exit-pop__card, .read-toast, .h-popups-panes { border: 1px solid CanvasText; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SUBSTACK PRESENCE
   Rod publishes in two places. AXON (email) arrives on a schedule; the
   Substack essays do not. Two components carry that, and they are sized to
   sit level with the email newsletter block, not beneath it.

     .sbstk-strip   one hairline row inside the site footer, all 15 pages
     .sbstk-panel   a full section, used on index.html and newsletter.html

   ORANGE BUDGET, deliberately small. #FF6719 appears only as the mark, the
   button fill, a 2 percent paper tint and hover-only accents. It is never
   body text on light paper (2.54:1, fails AA). On the navy footer it is
   6.48:1, which is why the strip link alone is allowed to be orange.
   Nothing here is a coloured rail on the edge of anything.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A. FOOTER STRIP ──────────────────────────────────────────────────────
   Every footer on the site is already navy #0B0F2E, so this palette is tuned
   for navy and introduces no new dark area: it is one hairline separated row
   inside a band that was dark before this work.
   If it ever has to sit on light paper, three declarations change:
     .sbstk-strip       { border-top-color: var(--border); }
     .sbstk-strip__text { color: var(--text-2); }
     .sbstk-strip__link { color: #B34206; }   (4.6:1, orange is unreadable) */

.sbstk-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem 1.35rem;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.2rem 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.sbstk-strip__mark {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--sbstk);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.sbstk-strip:hover .sbstk-strip__mark,
.sbstk-strip:focus-within .sbstk-strip__mark { transform: translateY(-2px); }

.sbstk-strip__text {
  flex: 1 1 13rem;
  min-width: 0;
  font-family: var(--sans);
  font-size: 0.83rem;
  line-height: 1.6;
  letter-spacing: 0;
  color: rgba(255,255,255,0.58);
}

.sbstk-strip__link {
  position: relative;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--sbstk);
  padding-bottom: 2px;
  /* underline that draws, the same grammar as .nav__links a::after */
  background-image: linear-gradient(var(--sbstk), var(--sbstk));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.42s cubic-bezier(0.16,1,0.3,1);
}
.sbstk-strip__link::after {
  content: '\2192';
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.sbstk-strip:hover .sbstk-strip__link,
.sbstk-strip:focus-within .sbstk-strip__link { background-size: 100% 1px; }
.sbstk-strip__link:hover::after,
.sbstk-strip__link:focus-visible::after { transform: translateX(4px); }
.sbstk-strip__link:focus-visible {
  outline: 2px solid var(--sbstk);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ── B. SECTION PANEL ─────────────────────────────────────────────────────
   Six direct children on one grid with named areas and no wrapper div, so the
   mobile source order (mark, headline, body, essays, button, fine print) can
   differ from desktop without duplicating markup. Adding a wrapper around the
   essay card collapses the grid.
   padding-inline: max() centres a 1200px content area while keeping a 5vw
   minimum gutter, which is what lets the tint stay full bleed with no inner
   container of its own. */

.sbstk-panel {
  position: relative;
  padding-block: 7.5rem;
  padding-inline: max(5vw, calc((100% - var(--max-w)) / 2));
  background: linear-gradient(180deg,
              var(--sbstk-paper) 0%,
              var(--sbstk-paper) 62%,
              #FFFFFF 100%);
  border-top: 1px solid var(--border);
  display: grid;
  align-items: start;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  column-gap: clamp(2.5rem, 5.5vw, 6rem);
  grid-template-areas:
    "mark  posts"
    "h     posts"
    "body  posts"
    "cta   posts"
    "fine  posts";
}
.sbstk-panel ::selection { background: rgba(255,103,25,0.16); color: var(--ink); }

.sbstk-panel__mark {
  grid-area: mark;
  display: block;
  width: 40px;
  height: 40px;
  color: var(--sbstk);
  margin-bottom: 1.7rem;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
/* the mark acknowledges the button. Progressive enhancement only. */
.sbstk-panel:has(.sbstk-panel__cta:hover) .sbstk-panel__mark,
.sbstk-panel:has(.sbstk-panel__cta:focus-visible) .sbstk-panel__mark { transform: translateY(-3px); }

.sbstk-panel__h {
  grid-area: h;
  font-family: var(--display);
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 16ch;              /* forces the editorial three line stack */
  text-wrap: balance;
  margin-bottom: 1.5rem;
}

.sbstk-panel__body {
  grid-area: body;
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-2);
  max-width: 46ch;
  text-wrap: pretty;
  margin-bottom: 2.3rem;
}

.sbstk-panel__cta {
  grid-area: cta;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 52px;
  padding: 0 1.65rem;
  background: var(--sbstk);
  color: var(--sbstk-ink);      /* navy on orange, 6.48:1. White would be 2.9:1. */
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);   /* site button radius, not a pill */
  box-shadow: 0 2px 10px rgba(255,103,25,0.22);
  transition: background 0.2s, transform 0.2s, box-shadow 0.28s;
}
.sbstk-panel__cta::after {
  content: '\2192';
  transition: transform 0.28s cubic-bezier(0.16,1,0.3,1);
}
.sbstk-panel__cta:hover,
.sbstk-panel__cta:focus-visible {
  background: var(--sbstk-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(255,103,25,0.30);
}
.sbstk-panel__cta:hover::after,
.sbstk-panel__cta:focus-visible::after { transform: translateX(5px); }
.sbstk-panel__cta:active { transform: translateY(0) scale(0.985); }
.sbstk-panel__cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.sbstk-panel__fine {
  grid-area: fine;
  margin-top: 1.05rem;
  font-family: var(--sans);
  font-size: 0.79rem;
  line-height: 1.6;
  /* 0.60 not 0.48: on the tinted paper 0.48 measures 3.31:1 and this is
     12.6px text, so it has to clear 4.5:1. 0.60 measures 4.88:1. */
  color: rgba(11,15,46,0.60);
}

/* The essay stack. A white card lifted off the tinted paper, with one sheet
   showing behind it so it reads as a stack of paper rather than a floating
   box. Full neutral hairline on all four sides, no edge accent, ever.
   The last shadow layer is driven by --sbstk-sx / --sbstk-sy, which the JS
   sets from the pointer: the card moves and the light does not, so the shadow
   travels the opposite way. Both fall back to 0px, so with JS off the card
   simply sits with a fixed shadow. */
.sbstk-panel__posts {
  grid-area: posts;
  align-self: start;
  margin-top: 0.75rem;
  padding: 0.35rem 1.85rem;
  background: #FFFFFF;
  border: 1px solid rgba(11,15,46,0.08);
  border-radius: 10px;
  box-shadow:
    14px 14px 0 -1px #FFFFFF,
    14px 14px 0 0 rgba(11,15,46,0.09),
    0 1px 2px rgba(11,15,46,0.04),
    var(--sbstk-sx, 0px) calc(18px + var(--sbstk-sy, 0px)) 44px rgba(11,15,46,0.07);
  transform: perspective(900px)
             rotateX(var(--sbstk-rx, 0deg))
             rotateY(var(--sbstk-ry, 0deg));
  transition: transform 0.22s ease-out, box-shadow 0.35s ease;
}
/* engaging the stack closes it: the sheet behind slides in and the card lifts */
.sbstk-panel__posts:has(.sbstk-panel__post:hover),
.sbstk-panel__posts:has(.sbstk-panel__post:focus-visible) {
  box-shadow:
    9px 9px 0 -1px #FFFFFF,
    9px 9px 0 0 rgba(11,15,46,0.10),
    0 2px 4px rgba(11,15,46,0.05),
    var(--sbstk-sx, 0px) calc(26px + var(--sbstk-sy, 0px)) 60px rgba(11,15,46,0.11);
}

.sbstk-panel__post {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 1.4rem;
  align-items: baseline;
  padding: 1.7rem 0;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(11,15,46,0.07);
  transition: opacity 0.28s ease,
              transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
.sbstk-panel__post:last-child { border-bottom: 0; }
.sbstk-panel__post:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ordinal in Bebas Neue, the AXON wordmark face, so the two outlets read as
   the same hand rather than two unrelated products */
.sbstk-panel__post > span:first-child {
  font-family: 'Bebas Neue', var(--display);
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: 0.06em;
  color: rgba(11,15,46,0.28);
  transition: color 0.25s, transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.sbstk-panel__post:hover > span:first-child,
.sbstk-panel__post:focus-visible > span:first-child {
  color: var(--sbstk);
  transform: translateY(-2px);
}

/* essay title in Cormorant Garamond, which is imported at the top of this
   file and was used nowhere on the site before now. The serif is what tells
   the reader "this is a different kind of writing". No label does that job. */
.sbstk-panel__post strong {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.22;
  letter-spacing: 0;
  color: var(--ink);
  padding-bottom: 3px;
  transform-origin: left center;
  background-image: linear-gradient(var(--sbstk), var(--sbstk));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.45s cubic-bezier(0.16,1,0.3,1),
              transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
/* newest essay is larger at rest: the stack is unequal before anyone touches it */
.sbstk-panel__post:first-child strong { font-size: clamp(1.45rem, 2.3vw, 1.95rem); }

.sbstk-panel__post:hover strong,
.sbstk-panel__post:focus-visible strong {
  background-size: 100% 1px;
  transform: scale(1.04);
}

.sbstk-panel__post time {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: rgba(11,15,46,0.58);   /* 4.63:1 on the white card. 0.42 was 2.79:1. */
}

.sbstk-panel__post > span:last-child {
  align-self: center;
  font-size: 1.05rem;
  color: rgba(11,15,46,0.25);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s, transform 0.35s cubic-bezier(0.16,1,0.3,1), color 0.25s;
}
.sbstk-panel__post:hover > span:last-child,
.sbstk-panel__post:focus-visible > span:last-child {
  opacity: 1;
  transform: translateX(0);
  color: var(--sbstk);
}

/* THE COUPLING: touching one essay visibly changes the other */
.sbstk-panel__posts:has(.sbstk-panel__post:hover) .sbstk-panel__post:not(:hover),
.sbstk-panel__posts:has(.sbstk-panel__post:focus-visible) .sbstk-panel__post:not(:focus-visible) {
  opacity: 0.42;
}

/* Fine pointers only: the rows sit forward of the card face, so the tilt
   shows real parallax between the paper and the type instead of rotating one
   flat picture. Touch devices never pay for this. */
@media (hover: hover) and (pointer: fine) {
  .sbstk-panel__posts { transform-style: preserve-3d; }
  .sbstk-panel__post  { transform: translateZ(10px); }
}

/* scroll-into-view stagger. Opt in: the attribute that hides the rows is set
   by JS, so if JS never runs nothing is ever hidden. Deliberately NOT
   data-reveal, whose observer is built once at load in global.js. */
.sbstk-panel[data-sbstk-anim] .sbstk-panel__post {
  opacity: 0;
  transform: translateY(14px);
}
.sbstk-panel[data-sbstk-anim][data-sbstk-in] .sbstk-panel__post {
  opacity: 1;
  transform: none;
}
.sbstk-panel[data-sbstk-anim][data-sbstk-in] .sbstk-panel__post:nth-child(2) {
  transition-delay: 0.09s;
}
@media (hover: hover) and (pointer: fine) {
  .sbstk-panel[data-sbstk-anim][data-sbstk-in] .sbstk-panel__post { transform: translateZ(10px); }
}

/* ── TOUCH: there is no hover, so nothing may depend on it ── */
@media (hover: none) {
  .sbstk-panel__posts { transform: none; }
  .sbstk-panel__post > span:last-child {
    opacity: 1;
    transform: none;
    color: rgba(11,15,46,0.3);
  }
  .sbstk-panel__posts:has(.sbstk-panel__post:hover) .sbstk-panel__post:not(:hover) { opacity: 1; }
}

/* ── RESPONSIVE ── */
@media (max-width: 980px) {
  .sbstk-panel {
    padding-block: 5.25rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "mark"
      "h"
      "body"
      "posts"
      "cta"
      "fine";
  }
  .sbstk-panel__h    { max-width: 18ch; }
  .sbstk-panel__body { margin-bottom: 2rem; }
  .sbstk-panel__posts { margin: 0 0 2.3rem; }
}

@media (max-width: 700px) {
  /* the sheet behind the card needs room to show and it does not have it
     here, so the stack becomes a single card rather than a cramped one */
  .sbstk-panel__posts,
  .sbstk-panel__posts:has(.sbstk-panel__post:hover),
  .sbstk-panel__posts:has(.sbstk-panel__post:focus-visible) {
    box-shadow: 0 1px 2px rgba(11,15,46,0.04), 0 14px 34px rgba(11,15,46,0.08);
  }
}

@media (max-width: 560px) {
  .sbstk-panel {
    padding-block: 3.9rem;
    padding-inline: 1.25rem;
  }
  .sbstk-panel__mark { width: 32px; height: 32px; margin-bottom: 1.15rem; }
  .sbstk-panel__h {
    font-size: 1.85rem;
    line-height: 1.08;
    letter-spacing: -0.01em;
    max-width: none;
    margin-bottom: 1.15rem;
  }
  .sbstk-panel__body { font-size: 0.96rem; line-height: 1.7; max-width: none; margin-bottom: 1.75rem; }
  .sbstk-panel__posts { padding: 0.2rem 1.15rem; border-radius: 8px; margin-bottom: 1.9rem; }
  .sbstk-panel__post {
    grid-template-columns: auto 1fr;
    column-gap: 0.95rem;
    padding: 1.3rem 0;
  }
  .sbstk-panel__post > span:first-child { font-size: 1.15rem; }
  .sbstk-panel__post > span:last-child  { display: none; }
  .sbstk-panel__post strong,
  .sbstk-panel__post:first-child strong { font-size: 1.16rem; }
  .sbstk-panel__post time { margin-top: 0.4rem; font-size: 0.73rem; }
  .sbstk-panel__cta { width: 100%; justify-content: center; }

  .sbstk-strip { gap: 0.6rem 0.9rem; padding: 1rem 0; }
  .sbstk-strip__text { font-size: 0.8rem; }
  .sbstk-strip__link {
    margin-left: 0;
    padding-left: calc(20px + 1.35rem);   /* align under the text, not the mark */
  }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .sbstk-panel__posts {
    transform: none !important;
    transform-style: flat;
    transition: box-shadow 0.2s ease;
  }
  .sbstk-panel[data-sbstk-anim] .sbstk-panel__post,
  .sbstk-panel[data-sbstk-anim][data-sbstk-in] .sbstk-panel__post,
  .sbstk-panel__post { opacity: 1; transform: none; }
  .sbstk-panel__post:hover strong,
  .sbstk-panel__post:focus-visible strong { transform: none; }
  .sbstk-panel__post:hover > span:first-child,
  .sbstk-panel__post:focus-visible > span:first-child { transform: none; }
  .sbstk-panel__cta:hover,
  .sbstk-panel__cta:focus-visible { transform: none; }
  .sbstk-panel:has(.sbstk-panel__cta:hover) .sbstk-panel__mark,
  .sbstk-panel:has(.sbstk-panel__cta:focus-visible) .sbstk-panel__mark { transform: none; }
  .sbstk-strip:hover .sbstk-strip__mark,
  .sbstk-strip:focus-within .sbstk-strip__mark { transform: none; }
  .sbstk-panel__mark,
  .sbstk-panel__post,
  .sbstk-panel__post strong,
  .sbstk-panel__post > span,
  .sbstk-panel__cta,
  .sbstk-panel__cta::after,
  .sbstk-strip__mark,
  .sbstk-strip__link,
  .sbstk-strip__link::after { transition-duration: 0.01ms !important; }
}

/* ===== MOBILE FIXES - phone/tablet only; desktop (full nav) is left untouched ===== */
@media (max-width: 900px) {
  /* Safety net: never let the page scroll sideways on mobile. Individual wide
     sections are also stacked below, but this stops any stray overflow (long
     announcement text, decorative watermarks) from sliding the whole page. */
  html, body { overflow-x: hidden; max-width: 100%; }
  .site-bar { overflow: hidden; }            /* fixed bar: clip its long teaser text */
  .site-bar__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* The nav was a 3-column grid (1fr auto 1fr). With the center links hidden on
     mobile, the wide logo image drifted across and collided with the burger.
     A simple flex row puts the logo hard-left and the burger hard-right. */
  .nav { display: flex; align-items: center; justify-content: space-between; }
  .nav__right { margin-left: auto; flex-shrink: 0; }
  .nav__logo { flex-shrink: 1; min-width: 0; }
  /* slightly smaller logo on mobile for extra clearance from the burger */
  .nav__logo-img-clip { height: 40px; }
  .nav__logo-img { height: 96px; margin-top: -17px; }

  /* Slide-out menu: cover the bar so the logo doesn't bleed through, then
     top-align + scroll so the first link clears the header and the last links
     don't collide with the footer (was centered + clipped). */
  .mobile-nav {
    z-index: 200;
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 5.5rem 2rem 2.5rem;
  }
  .mobile-nav a { font-size: clamp(1.5rem, 6vw, 2.2rem); padding: 0.5rem 0; }
  .mobile-nav__footer {
    position: static;
    left: auto; right: auto; bottom: auto;
    margin-top: auto;
    padding-top: 1.6rem;
  }
  /* make the menu close button clearly visible */
  .mobile-nav__close {
    color: #fff;
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.40);
  }
}
@media (max-width: 600px) {
  /* AXON "Join the waitlist" pill: the label had no side padding, so it ran into
     the rounded edges. Add breathing room and tighten the tracking. */
  .footer-guide__btn { padding: 0 1.4rem; letter-spacing: 0.1em; }
}

/* Stack helpers for INLINE-style grids that a media query can't otherwise reach
   (inline styles outrank normal rules, so these use !important). Applied to the
   handful of `style="display:grid; grid-template-columns:..."` divs on inner
   pages so their columns stack instead of clipping on phones. */
@media (max-width: 700px) {
  .m-stack-1 { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .m-stack-2 { grid-template-columns: repeat(2, 1fr) !important; gap: 1.5rem !important; }
}
.lead-error { margin-top: 1rem; padding: 0.75rem 1rem; background: rgba(192,57,43,0.08); border: 1px solid rgba(192,57,43,0.3); border-radius: 8px; color: #c0392b; font-size: 0.88rem; line-height: 1.5; }


/* Warning above any free-text box that could attract clinical detail. Visible,
   not a placeholder: a placeholder disappears the moment someone starts typing,
   which is exactly when it matters. Amber, not red: this is a caution, not an
   error state, and red reads as "you did something wrong". */
.form-notice {
  margin: 0 0 0.6rem;
  padding: 0.7rem 0.85rem;
  border-radius: 6px;
  background: #FFF7ED;
  color: #7C3D12;
  font-size: 0.82rem;
  line-height: 1.5;
}
.form-notice a { color: inherit; font-weight: 600; text-decoration: underline; }


/* ── CONSULT BAND (homepage mid page) ──────────────────────────────────────
   Everything from here to the end of the file belongs to the ways into
   consultation.html from other pages: the homepage band, the hero's second
   opinion pill, and the patient card on contact.html. consult/base.css is not
   loaded on those pages, so the few values of its Apple system they need are
   copied here under the same names (see consult-100x/reports/base.md). */
:where(.consult-band, .site-pill, .site-contact) {
  --cx-ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --cx-ease-out: cubic-bezier(0, 0, 0.5, 1);
  --cx-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --cx-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --cx-t-press: 0.12s;
  --cx-t: 0.32s;
  --cx-t-sheet: 0.6s;
  --cx-hairline: 0 0 0 1px rgba(11, 15, 46, 0.07);
  --cx-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --cx-shadow-1: 0 1px 2px rgba(11, 15, 46, 0.05), 0 3px 10px -2px rgba(11, 15, 46, 0.07);
  --cx-shadow-3: 0 4px 12px rgba(11, 15, 46, 0.06), 0 34px 80px -24px rgba(11, 15, 46, 0.3);
  --cx-ink-2: #1A1F52;
  --cx-ink-3: #05071C;
  --cx-focus: var(--teal-2);
}

/* The homepage band: a small version of the chooser on consultation.html.
   Same question, same three paths, same navy block. The block rests on
   second opinion, because that is where the consultation page starts, and
   glides to whichever row is pointed at or focused. Each row deep links to
   the page with that path already chosen, so the first click here carries
   straight on over there. CSS only: :has() moves the block. */
.consult-band { padding: clamp(4.5rem, 8vw, 6.5rem) 5vw; background: #fff; }
.consult-band__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 2.5rem clamp(3rem, 6vw, 6rem);
  align-items: center;
}
.consult-band__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}
.consult-band__sub { margin-top: 1rem; max-width: 44ch; font-size: 1.04rem; line-height: 1.7; letter-spacing: 0; color: var(--text-2); }
.consult-band__ask {
  margin: 0 0 0.8rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--ink);
}
.consult-band__tray {
  --site-cb-i: 0;
  position: relative;
  display: grid;
  grid-auto-rows: 1fr;
  padding: 6px;
  border-radius: 18px;
  background: var(--bg-2);
}
/* Which row the block sits on. Keyboard focus wins over a resting pointer. */
.consult-band__tray:not(:has(:focus-visible)):has(> [data-site-path="consultation"]:hover) { --site-cb-i: 1; }
.consult-band__tray:not(:has(:focus-visible)):has(> [data-site-path="talk"]:hover) { --site-cb-i: 2; }
.consult-band__tray:has(> [data-site-path="consultation"]:focus-visible) { --site-cb-i: 1; }
.consult-band__tray:has(> [data-site-path="talk"]:focus-visible) { --site-cb-i: 2; }

.consult-band__ink {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  height: calc((100% - 12px) / 3);
  border-radius: 12px;
  background: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 14px 30px -14px rgba(11, 15, 46, 0.7);
  transform: translateY(calc(var(--site-cb-i) * 100%));
  /* Going home to second opinion waits a beat, so crossing the tray's edge
     between two rows never sends the block back and forth. */
  transition: transform var(--cx-t-sheet) var(--cx-ease-sheet) 0.12s, scale 0.45s var(--cx-spring);
  will-change: transform;
  pointer-events: none;
}
.consult-band__tray:has(> .consult-band__path:is(:hover, :focus-visible)) .consult-band__ink {
  transition-delay: 0s, 0s;
}
.consult-band__tray:has(> .consult-band__path:active) .consult-band__ink {
  scale: 0.985;
  transition-duration: var(--cx-t-sheet), var(--cx-t-press);
  transition-timing-function: var(--cx-ease-sheet), var(--cx-ease-out);
}

.consult-band__path {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  align-items: center;
  column-gap: 1.1rem;
  padding: 1.05rem 1.1rem 1.05rem 1.3rem;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.consult-band__path-t {
  grid-column: 1;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.35s var(--cx-ease-out);
}
.consult-band__path-d {
  grid-column: 1;
  margin-top: 0.15rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-2);
  transition: color 0.35s var(--cx-ease-out);
}
/* The mark: an arrow in a ring (this takes you somewhere). On the row the
   block sits on it fills sky, like the chosen row's tick on the page itself. */
.consult-band__mark {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(11, 15, 46, 0.2);
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: background-color 0.35s var(--cx-ease-out), box-shadow 0.35s var(--cx-ease-out), color 0.35s var(--cx-ease-out);
}
.consult-band__mark svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.45s var(--cx-spring);
}

/* A row is "on" (white type, filled mark) when the block sits under it. */
.consult-band__path[data-site-path="second-opinion"] .consult-band__path-t,
.consult-band__tray:not(:has(:focus-visible)) > .consult-band__path:hover .consult-band__path-t,
.consult-band__path:focus-visible .consult-band__path-t { color: #fff; }
.consult-band__path[data-site-path="second-opinion"] .consult-band__path-d,
.consult-band__tray:not(:has(:focus-visible)) > .consult-band__path:hover .consult-band__path-d,
.consult-band__path:focus-visible .consult-band__path-d { color: rgba(255, 255, 255, 0.74); }
.consult-band__path[data-site-path="second-opinion"] .consult-band__mark,
.consult-band__tray:not(:has(:focus-visible)) > .consult-band__path:hover .consult-band__mark,
.consult-band__path:focus-visible .consult-band__mark { background-color: var(--teal); box-shadow: inset 0 0 0 1.5px var(--teal); color: #fff; }
/* Second opinion hands the block over to the row being pointed at. */
.consult-band__tray:not(:has(:focus-visible)):has(> .consult-band__path:not([data-site-path="second-opinion"]):hover) > [data-site-path="second-opinion"] .consult-band__path-t,
.consult-band__tray:has(> .consult-band__path:not([data-site-path="second-opinion"]):focus-visible) > [data-site-path="second-opinion"] .consult-band__path-t { color: var(--ink); }
.consult-band__tray:not(:has(:focus-visible)):has(> .consult-band__path:not([data-site-path="second-opinion"]):hover) > [data-site-path="second-opinion"] .consult-band__path-d,
.consult-band__tray:has(> .consult-band__path:not([data-site-path="second-opinion"]):focus-visible) > [data-site-path="second-opinion"] .consult-band__path-d { color: var(--text-2); }
.consult-band__tray:not(:has(:focus-visible)):has(> .consult-band__path:not([data-site-path="second-opinion"]):hover) > [data-site-path="second-opinion"] .consult-band__mark,
.consult-band__tray:has(> .consult-band__path:not([data-site-path="second-opinion"]):focus-visible) > [data-site-path="second-opinion"] .consult-band__mark { background-color: transparent; box-shadow: inset 0 0 0 1.5px rgba(11, 15, 46, 0.2); color: var(--ink); }
/* Type and mark wait the same beat as the block before going home, so no
   row ever shows white type on the grey tray. */
.consult-band__path-t, .consult-band__path-d, .consult-band__mark { transition-delay: 0.12s; }
.consult-band__tray:has(> .consult-band__path:is(:hover, :focus-visible)) :is(.consult-band__path-t, .consult-band__path-d, .consult-band__mark) { transition-delay: 0s; }
@media (hover: hover) {
  .consult-band__path:hover .consult-band__mark svg { transform: translateX(2px); }
}

/* Where the row lands, said before the click: one line under the tray that
   changes with the row the block is on. Old line lifts away in 0.2s, new
   line rises out of a soft blur (the consultation page's content swap). */
.consult-band__lands {
  display: grid;
  margin-top: 0.95rem;
  padding-left: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-2);
}
.consult-band__lands > span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(-4px);
  filter: blur(4px);
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1), transform 0.2s var(--cx-ease-out), filter 0.2s cubic-bezier(0.4, 0, 0.6, 1);
}
.consult-band__lands > [data-site-for="second-opinion"],
.consult-band__paths:not(:has(:focus-visible)):has([data-site-path="consultation"]:hover) .consult-band__lands > [data-site-for="consultation"],
.consult-band__paths:has([data-site-path="consultation"]:focus-visible) .consult-band__lands > [data-site-for="consultation"],
.consult-band__paths:not(:has(:focus-visible)):has([data-site-path="talk"]:hover) .consult-band__lands > [data-site-for="talk"],
.consult-band__paths:has([data-site-path="talk"]:focus-visible) .consult-band__lands > [data-site-for="talk"] {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.5s var(--cx-ease) 0.11s, transform 0.5s var(--cx-ease) 0.11s, filter 0.5s var(--cx-ease) 0.11s;
}
.consult-band__paths:not(:has(:focus-visible)):has(:is([data-site-path="consultation"], [data-site-path="talk"]):hover) .consult-band__lands > [data-site-for="second-opinion"],
.consult-band__paths:has(:is([data-site-path="consultation"], [data-site-path="talk"]):focus-visible) .consult-band__lands > [data-site-for="second-opinion"] {
  opacity: 0;
  transform: translateY(-4px);
  filter: blur(4px);
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1), transform 0.2s var(--cx-ease-out), filter 0.2s cubic-bezier(0.4, 0, 0.6, 1);
}
/* Going home (nothing pointed at or focused): the line leaving and the
   second opinion line coming back both wait the block's beat. */
.consult-band__paths:not(:has(.consult-band__path:is(:hover, :focus-visible))) .consult-band__lands > span { transition-delay: 0.12s; }
.consult-band__paths:not(:has(.consult-band__path:is(:hover, :focus-visible))) .consult-band__lands > [data-site-for="second-opinion"] { transition-delay: 0.23s; }
.consult-band__lands strong { font-weight: 600; color: var(--ink); }
.consult-band__path:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; }

@media (max-width: 900px) {
  .consult-band__inner { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .consult-band__path { padding: 0.95rem 0.95rem 0.95rem 1.05rem; column-gap: 0.9rem; }
  .consult-band__path-t { font-size: 1rem; }
}
/* A browser without :has() keeps the block on second opinion and still
   answers the pointer with a tint on the other rows. */
@supports not selector(:has(*)) {
  .consult-band__path:not([data-site-path="second-opinion"]):hover { background: rgba(11, 15, 46, 0.055); }
}
/* Windows high contrast drops fills and shadows: the block would vanish, so
   every row gets a plain border instead. */
@media (forced-colors: active) {
  .consult-band__ink { display: none; }
  .consult-band__path { border: 1px solid CanvasText; }
  .consult-band__tray { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .consult-band__ink, .consult-band__path-t, .consult-band__path-d, .consult-band__mark, .consult-band__mark svg,
  .consult-band__lands > span { transition: none !important; }
  .consult-band__lands > span { filter: none !important; transform: none !important; }
  .consult-band__mark svg { transform: none !important; }
}

/* ── SITE PILLS: Apple's pill buttons for the ways in ─────────────────────
   Same shape rule as consultation.html: a pill always means "press me".
   Hover is a colour shift and a softer, larger shadow; press gives way
   under the finger and springs back. Each look is a set of --p-* values. */
.site-pill {
  --p-bg: var(--ink);
  --p-bg-hover: var(--cx-ink-2);
  --p-bg-press: var(--cx-ink-3);
  --p-fg: #fff;
  --p-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 1px 2px rgba(11, 15, 46, 0.22), 0 8px 22px -10px rgba(11, 15, 46, 0.55);
  --p-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 5px rgba(11, 15, 46, 0.2), 0 16px 34px -12px rgba(11, 15, 46, 0.6);
  --p-focus: var(--cx-focus);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--p-bg);
  box-shadow: var(--p-shadow);
  color: var(--p-fg);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition:
    background-color var(--cx-t) var(--cx-ease-out),
    color var(--cx-t) var(--cx-ease-out),
    box-shadow var(--cx-t) var(--cx-ease-out),
    transform 0.5s var(--cx-spring);
}
@media (hover: hover) {
  .site-pill:hover { background: var(--p-bg-hover); box-shadow: var(--p-shadow-hover); }
}
.site-pill:active {
  background: var(--p-bg-press);
  transform: scale(0.97);
  transition-duration: var(--cx-t-press);
  transition-timing-function: var(--cx-ease-out);
}
.site-pill:focus-visible { outline: 2px solid var(--p-focus); outline-offset: 3px; }
.site-pill__arrow { display: inline-block; transition: transform 0.45s var(--cx-spring); }
@media (hover: hover) {
  .site-pill:hover .site-pill__arrow { transform: translateX(3px); }
}

/* On a navy card: the primary turns into the white pill, the secondary a
   white ring (about.html, the Chief of Spine card). */
.site-pill--white {
  --p-bg: #F4F5F8;
  --p-bg-hover: #fff;
  --p-bg-press: #E4E6EE;
  --p-fg: var(--ink);
  --p-shadow: inset 0 1px 0 #fff, 0 8px 22px -10px rgba(0, 0, 0, 0.6);
  --p-shadow-hover: inset 0 1px 0 #fff, 0 14px 32px -12px rgba(0, 0, 0, 0.7);
  --p-focus: #fff;
}
.site-pill--ring {
  --p-bg: transparent;
  --p-bg-hover: rgba(255, 255, 255, 0.08);
  --p-bg-press: rgba(255, 255, 255, 0.14);
  --p-fg: #fff;
  --p-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4);
  --p-shadow-hover: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85);
  --p-focus: #fff;
}
/* Over the hero photograph: dark frosted glass, the one place a pill floats
   over a picture. Falls back to a plain white tint where blur is missing. */
.site-pill--glass {
  --p-bg: rgba(255, 255, 255, 0.1);
  --p-bg-hover: rgba(255, 255, 255, 0.17);
  --p-bg-press: rgba(255, 255, 255, 0.24);
  --p-fg: #fff;
  --p-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 10px 30px -14px rgba(0, 0, 0, 0.7);
  --p-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.46), 0 16px 36px -14px rgba(0, 0, 0, 0.75);
  --p-focus: #fff;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
@media (forced-colors: active) {
  .site-pill { border: 1px solid ButtonText; }
  .pathway-item.site-contact::before { border: 1px solid CanvasText; }
}

/* The hero's second opinion pill sits under "Read the latest issue" and
   takes that button's type and height so the two read as one pair. */
.site-hero-cta {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: inherit;
  gap: 0.5rem;
  min-height: 0;
  padding: 1.1rem 2.2rem;
}
@media (max-width: 600px) {
  .site-hero-cta { box-sizing: border-box; width: 100%; padding: 1rem 1.4rem; }
}

/* ── CONTACT: the patient card (contact.html, first pathway) ──────────────
   The one card in the list that leads off the page, so it is the one that
   stands up as a sheet, with one obvious action. The whole card is the link;
   the pill inside answers the card's hover and press. */
.pathway-item.site-contact {
  position: relative;
  isolation: isolate;
  padding: 2rem 2rem 2.2rem 1.6rem;
  gap: 0.55rem;
  transition: none;
}
.pathway-item.site-contact::before {
  content: '';
  position: absolute;
  inset: 0.9rem 0.9rem 0.9rem 0;
  z-index: -1;
  border-radius: 18px;
  background: var(--bg-2);
  box-shadow: var(--cx-hairline);
  transition: background-color var(--cx-t) var(--cx-ease-out), box-shadow 0.5s var(--cx-ease-sheet), transform 0.5s var(--cx-ease-sheet);
}
.pathway-item.site-contact:hover { background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .pathway-item.site-contact:hover::before {
    background-color: #fff;
    transform: scale(1.015);
    box-shadow: var(--cx-hairline), var(--cx-highlight), var(--cx-shadow-3);
  }
  .site-contact:hover .site-pill { background: var(--p-bg-hover); box-shadow: var(--p-shadow-hover); }
  .site-contact:hover .site-pill__arrow { transform: translateX(3px); }
}
.site-contact:active::before { transform: scale(0.995); transition-duration: var(--cx-t-press); }
.site-contact:active .site-pill { background: var(--p-bg-press); transform: scale(0.97); transition-duration: var(--cx-t-press); }
.pathway-item.site-contact:focus-visible { outline: none; }
.pathway-item.site-contact:focus-visible::before { box-shadow: 0 0 0 2px var(--cx-focus), var(--cx-shadow-1); }
/* Doubled class: contact.html's own .pathway-item__* rules load after this file. */
.site-contact .site-contact__type { color: var(--text-2); }
.site-contact .site-contact__title { font-weight: 700; font-size: 1.45rem; letter-spacing: -0.015em; line-height: 1.15; }
.site-contact .site-contact__desc { font-size: 0.88rem; }
.site-contact__note { font-size: 0.82rem; line-height: 1.55; color: var(--text-2); max-width: 46ch; }
.site-contact__go { align-self: flex-start; margin-top: 0.9rem; white-space: normal; text-wrap: balance; padding-block: 0.7rem; }
@media (max-width: 900px) {
  .pathway-item.site-contact { padding: 2rem 1.4rem 2.2rem; }
  .pathway-item.site-contact::before { inset: 0.9rem -0.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-pill, .site-pill__arrow, .pathway-item.site-contact::before { transition: none; }
  .pathway-item.site-contact:hover::before, .site-contact:active::before { transform: none; }
}

/* ── SCHEDULED ENTRIES ──────────────────────────────────────────────
   data-axon-from="<ISO UTC>"  hidden until that moment (global.js removes the
                               attribute when it arrives).
   data-axon-until="<ISO UTC>" shown until that moment (global.js removes the
                               element when it passes).
   Without JS, gated items stay hidden and until-items stay shown: safe. */
[data-axon-from] { display: none !important; }