:root {
  --ink: #102a3a;
  --ink-soft: #526b79;
  --blue: #1d5a7a;
  --blue-bright: #327da5;
  --blue-deep: #0b2d42;
  --blue-black: #071e2b;
  --blue-pale: #e3eef3;
  --blue-mist: #f0f5f6;
  --paper: #f8faf9;
  --white: #ffffff;
  --gold: #a97912;
  --gold-bright: #cf9f31;
  --gold-pale: #f2e7c4;
  --line: rgba(29, 90, 122, 0.2);
  --line-strong: rgba(29, 90, 122, 0.34);
  --line-light: rgba(255, 255, 255, 0.15);
  --muted-light: #b8cdd7;
  --tier-low: #1d5a7a;
  --tier-moderate: #cf9f31;
  --tier-high: #b5651d;
  --tier-critical: #8a3a2e;
  --tier-unknown: #526b79;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max: 1240px;
  --reading: 760px;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --art: url("../images/kintsugi.png");
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.7 var(--sans);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  z-index: 100;
  inset: 0;
  border: 1px solid rgba(29, 90, 122, 0.07);
  content: "";
  pointer-events: none;
}

a { color: inherit; }
button,
input,
select { font: inherit; }
img { display: block; max-width: 100%; }

.wrap {
  width: min(100%, var(--max));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.reading { max-width: var(--reading); }

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

.skip-link {
  position: fixed;
  z-index: 200;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.7rem 1rem;
  background: var(--blue-black);
  color: var(--white);
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.eyebrow {
  color: var(--blue);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.section-title {
  max-width: 860px;
  font: 600 clamp(2.45rem, 5.2vw, 4.9rem)/0.99 var(--serif);
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.section-title.small {
  font-size: clamp(2.2rem, 4.1vw, 3.9rem);
}

.section-lede {
  max-width: 700px;
  margin-top: 1.35rem;
  color: var(--ink-soft);
  font-size: 1.04rem;
}

.center {
  margin-inline: auto;
  text-align: center;
}

.punch {
  max-width: 640px;
  margin-top: 1rem;
  color: var(--gold);
  font: 600 clamp(1.2rem, 2vw, 1.55rem)/1.3 var(--serif);
  letter-spacing: -0.02em;
}

.section-index {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--blue);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.section-index::before {
  width: 32px;
  height: 1px;
  background: var(--gold);
  content: "";
}

.section {
  position: relative;
  padding: clamp(5.5rem, 10vw, 9rem) 0;
}

.section.mist { background: var(--blue-mist); }

.section.blue {
  background:
    radial-gradient(circle at 86% 34%, rgba(50, 125, 165, 0.22), transparent 28%),
    var(--blue-black);
  color: var(--white);
}

.section.blue .eyebrow,
.section.blue .section-index { color: var(--gold-bright); }
.section.blue .section-title { color: var(--white); }
.section.blue .section-lede,
.section.blue .muted { color: var(--muted-light); }

.section.seamed::before {
  position: absolute;
  top: -2px;
  left: 0;
  width: 46%;
  height: 4px;
  background: var(--gold-bright);
  clip-path: polygon(0 44%, 17% 18%, 35% 70%, 53% 25%, 72% 62%, 100% 23%, 100% 100%, 0 100%);
  content: "";
}

/* Header */
.site-header {
  position: absolute;
  z-index: 50;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 1px solid rgba(29, 90, 122, 0.16);
  background: rgba(248, 250, 249, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.nav {
  min-height: 94px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}

.brand {
  color: var(--ink);
  font: 600 clamp(1.4rem, 2.3vw, 1.95rem)/1 var(--serif);
  letter-spacing: -0.03em;
  text-decoration: none;
}

.brand span { color: var(--blue); }

.credentials {
  margin-top: 0.4rem;
  color: var(--ink-soft);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.7vw, 1.65rem);
  list-style: none;
}

.nav-links a {
  position: relative;
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.nav-links a::after {
  position: absolute;
  right: 0;
  bottom: -0.45rem;
  left: 0;
  height: 2px;
  background: var(--gold-bright);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms var(--ease);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

.nav-action { justify-self: end; }

.pill-link,
.button {
  display: inline-flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.68rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--blue-deep);
  color: var(--white);
  font-size: 0.77rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 180ms var(--ease), transform 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}

.pill-link:hover,
.button:hover {
  background: var(--blue);
  transform: translateY(-2px);
}

.pill-link .arrow,
.button .arrow {
  transition: transform 180ms var(--ease);
}

.pill-link:hover .arrow,
.button:hover .arrow {
  transform: translateX(4px);
}

.button.light {
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--paper);
  color: var(--blue-deep);
}

.button.light:hover { background: var(--white); }

.button.ghost {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--ink);
}

.button.ghost:hover {
  border-color: var(--blue);
  background: var(--white);
}

.menu-toggle {
  display: none;
  justify-self: end;
  padding: 0.55rem 0.82rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 700;
}

.trust-rail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 4rem);
  padding-block: 0.72rem;
  border-top: 1px solid rgba(29, 90, 122, 0.12);
  color: var(--ink-soft);
  font-size: 0.7rem;
}

.trust-rail a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}

.trust-rail a:hover { color: var(--gold); }
.trust-rail p { justify-self: end; text-align: right; }

/* Heroes */
.page-hero {
  position: relative;
  min-height: min(900px, 95vh);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(248, 250, 249, 0.999) 0%, rgba(248, 250, 249, 0.98) 40%, rgba(240, 245, 246, 0.72) 59%, rgba(240, 245, 246, 0.035) 85%),
    linear-gradient(180deg, rgba(227, 238, 243, 0.08), rgba(248, 250, 249, 0.72)),
    var(--art),
    var(--paper);
  background-position: center, center, right 48%, center;
  background-repeat: no-repeat;
  background-size: cover, cover, clamp(730px, 67vw, 1040px) auto, cover;
}

.page-hero::before {
  position: absolute;
  z-index: -1;
  right: -20vw;
  bottom: -42%;
  width: min(650px, 56vw);
  aspect-ratio: 1;
  border: 1px solid rgba(29, 90, 122, 0.16);
  border-radius: 50%;
  box-shadow: 0 0 0 7vw rgba(50, 125, 165, 0.024), 0 0 0 14vw rgba(50, 125, 165, 0.016);
  content: "";
}

.hero-inner {
  width: 100%;
  padding-block: clamp(14.5rem, 27vh, 19rem) clamp(5rem, 11vh, 8rem);
}

.repair-mark {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.35rem;
}

.repair-mark::before {
  width: 38px;
  height: 3px;
  background: var(--blue);
  content: "";
}

.repair-mark::after {
  width: 19px;
  height: 3px;
  background: var(--gold-bright);
  content: "";
  transform: rotate(-8deg);
}

.page-hero h1 {
  max-width: 1010px;
  font: 600 clamp(3.5rem, 7.7vw, 7.35rem)/0.93 var(--serif);
  letter-spacing: -0.056em;
  text-wrap: balance;
}

.hero-lede {
  max-width: 680px;
  margin-top: 2rem;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.82;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.page-hero.compact { min-height: min(780px, 88vh); }
.page-hero.compact h1 {
  max-width: 930px;
  font-size: clamp(3.15rem, 6.8vw, 6.3rem);
}

.page-hero.split .hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
}

.page-hero.split h1 {
  font-size: clamp(3rem, 5.6vw, 5.35rem);
}

.hero-shot {
  position: relative;
  margin: 0;
  padding: 1px;
  overflow: hidden;
  background: var(--line);
  box-shadow: 0 34px 90px rgba(16, 42, 58, 0.16);
}

.hero-shot::before {
  position: absolute;
  z-index: 0;
  top: -88%;
  left: -50%;
  width: 200%;
  aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 0 76%, var(--gold-bright) 82%, transparent 89%);
  animation: edge-light 7s linear 1.2s 1 both;
  content: "";
}

.hero-shot a {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0.65rem;
  background: rgba(248, 250, 249, 0.96);
  text-decoration: none;
}

.hero-shot img {
  width: 100%;
  border: 1px solid var(--line);
}

.shot-meta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0.25rem 0.2rem;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vintage-stamp {
  margin-top: 1.4rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.vintage-stamp strong { color: var(--blue); }

/* Kintsugi seam */
.seam {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  height: 18px;
  pointer-events: none;
  transform: translateY(-50%);
}

.seam::before {
  position: absolute;
  inset: 6px 0 auto;
  height: 4px;
  background: var(--gold-bright);
  clip-path: polygon(0 45%, 5% 12%, 11% 72%, 18% 18%, 25% 64%, 34% 8%, 43% 76%, 53% 20%, 63% 68%, 73% 10%, 82% 72%, 91% 22%, 100% 52%, 100% 100%, 0 100%);
  content: "";
  opacity: 0.68;
  transition: opacity 280ms var(--ease), transform 280ms var(--ease);
}

.seam::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 53%, var(--gold-bright) 0 3px, transparent 4px),
    radial-gradient(circle at 53% 45%, var(--gold-bright) 0 2px, transparent 3px),
    radial-gradient(circle at 83% 58%, var(--gold-bright) 0 2.5px, transparent 3.5px);
  content: "";
  opacity: 0.48;
  transition: opacity 280ms var(--ease);
}

.has-seam:has(a:hover) .seam::before,
.has-seam:has(a:focus-visible) .seam::before {
  opacity: 0.96;
  transform: scaleY(1.2);
}

.has-seam:has(a:hover) .seam::after,
.has-seam:has(a:focus-visible) .seam::after {
  opacity: 0.82;
}

/* Home routing */
.reader-section {
  position: relative;
  padding: clamp(6rem, 11vw, 10rem) 0;
  border-block: 1px solid rgba(29, 90, 122, 0.12);
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 255, 255, 0.86), transparent 22%),
    var(--blue-mist);
}

.reader-layout {
  display: grid;
  grid-template-columns: minmax(290px, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: clamp(3rem, 8vw, 8rem);
}

.sticky-copy {
  position: sticky;
  top: 7rem;
}

.sticky-copy .section-title {
  margin-top: 1rem;
  font-size: clamp(2.45rem, 4.2vw, 4.1rem);
}

.reader-body {
  max-width: 640px;
  margin-top: 1.2rem;
  color: var(--ink-soft);
}

.reader-bridge {
  max-width: 620px;
  margin-top: 1.15rem;
  color: var(--ink);
  font-weight: 600;
}

.reader-outcomes {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.4rem;
  list-style: none;
}

.reader-outcomes li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.reader-outcomes li::before {
  position: absolute;
  left: 0;
  color: var(--gold);
  content: "✓";
  font-weight: 700;
}

.sticky-copy .button { margin-top: 1.8rem; }

.story-meta {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 2.8rem;
}

.story-progress {
  position: relative;
  width: 2px;
  height: 132px;
  overflow: hidden;
  background: rgba(29, 90, 122, 0.14);
}

.story-progress span {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--blue), var(--gold-bright));
  transform: scaleY(0.25);
  transform-origin: top;
  transition: transform 500ms var(--ease);
}

.story-count {
  color: var(--ink-soft);
  font-size: 0.64rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.story-count strong {
  color: var(--blue);
  font: 600 1.75rem/1 var(--serif);
  letter-spacing: -0.02em;
}

/* Bento */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(235px, auto);
  gap: 1rem;
}

.bento-card {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 20px 56px rgba(16, 42, 58, 0.045);
  opacity: 0.76;
  transform: scale(0.992);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease), box-shadow 300ms var(--ease);
}

.bento-card.wide {
  grid-column: span 7;
  grid-row: span 2;
  min-height: 570px;
}

.bento-card.narrow { grid-column: span 5; }
.bento-card.half { grid-column: span 6; min-height: 350px; }
.bento-card.full { grid-column: span 12; min-height: 320px; }

.bento-card.dark {
  border-color: transparent;
  background:
    radial-gradient(circle at 88% 22%, rgba(50, 125, 165, 0.2), transparent 28%),
    var(--blue-deep);
  color: var(--white);
}

.bento-card.is-active {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 30px 88px rgba(16, 42, 58, 0.1);
}

.bento-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 4vw, 3.25rem);
  background: inherit;
}

.bento-card.beam {
  padding: 1px;
  border: 0;
}

.bento-card.beam::before {
  position: absolute;
  z-index: 0;
  top: -70%;
  left: -40%;
  width: 180%;
  aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 0 76%, var(--gold-bright) 82%, transparent 89%);
  animation: edge-light 7s linear 1.2s 1 both;
  content: "";
}

.bento-card.beam .bento-inner {
  background:
    linear-gradient(145deg, rgba(225, 237, 242, 0.97), rgba(249, 251, 250, 0.99) 68%),
    var(--white);
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.status {
  display: inline-block;
  align-self: flex-start;
  padding: 0.35rem 0.62rem;
  background: var(--blue-pale);
  color: var(--blue-deep);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.status.gold {
  background: var(--gold-pale);
  color: #684807;
}

.dark .status {
  background: rgba(255, 255, 255, 0.1);
  color: var(--gold-bright);
}

.card-mark {
  color: rgba(29, 90, 122, 0.22);
  font: 600 3.4rem/0.8 var(--serif);
}

.dark .card-mark { color: rgba(255, 255, 255, 0.18); }

.card-kicker {
  margin-top: auto;
  color: var(--blue);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.dark .card-kicker { color: var(--gold-bright); }

.bento-card h3 {
  max-width: 650px;
  margin-top: 0.6rem;
  font: 600 clamp(1.55rem, 2.75vw, 2.75rem)/1.04 var(--serif);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.bento-card:not(:has(.card-kicker)) h3 { margin-top: auto; }

.bento-card p {
  max-width: 680px;
  margin-top: 0.9rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.bento-card.dark p { color: var(--muted-light); }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.45rem;
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.dark .card-link { color: var(--white); }
.card-link span { transition: transform 180ms var(--ease); }
.card-link:hover span { transform: translateX(4px); }

/* Home newsletter and About */
.newsletter-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(250px, 0.75fr);
  align-items: end;
  gap: clamp(3rem, 8vw, 8rem);
}

.newsletter-copy {
  max-width: 660px;
  margin-top: 1.4rem;
  color: var(--muted-light);
}

.newsletter-action {
  display: flex;
  justify-content: flex-start;
}

.about-section {
  position: relative;
  overflow: hidden;
}

.about-section::after {
  position: absolute;
  z-index: 0;
  top: -100px;
  right: -280px;
  width: 520px;
  height: 780px;
  background:
    linear-gradient(90deg, rgba(248, 250, 249, 0.08), rgba(248, 250, 249, 0.74)),
    var(--art) center / cover no-repeat;
  content: "";
  opacity: 0.34;
  pointer-events: none;
}

.about-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1.38fr);
  align-items: center;
  gap: clamp(3rem, 9vw, 9rem);
}

.portrait-wrap {
  position: relative;
  padding: 0 0 1.2rem 1.2rem;
}

.portrait-wrap::before {
  position: absolute;
  inset: 1.2rem 1.2rem 0 0;
  border: 1px solid var(--gold-bright);
  content: "";
}

.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--blue-pale);
  box-shadow: 0 26px 72px rgba(16, 42, 58, 0.08);
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: saturate(0.82) contrast(1.02);
}

.about-copy .eyebrow { margin-bottom: 1rem; }
.about-copy .section-title { font-size: clamp(2.4rem, 4.25vw, 4.1rem); }
.about-copy .section-lede { margin-bottom: 2rem; }

/* Multi-paragraph bio (About page) sits in the same rhythm as a single .section-lede. */
.about-copy .prose {
  margin-top: 1.35rem;
  margin-bottom: 2rem;
}

/* Clinician page */
.list-split {
  max-width: 760px;
  margin: 2rem 0 4rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink-soft);
  font-size: 0.93rem;
}

.list-split strong { color: var(--ink); }

.story-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.76fr) minmax(0, 1.24fr);
  align-items: start;
  gap: clamp(3rem, 9vw, 9rem);
}

.story-stack {
  display: grid;
  gap: clamp(1.5rem, 5vw, 5rem);
}

.story-panel {
  min-height: min(520px, 66vh);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 28px 80px rgba(16, 42, 58, 0.06);
  opacity: 0.65;
  transform: scale(0.988);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease), box-shadow 300ms var(--ease);
}

.story-panel.is-active {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 34px 96px rgba(16, 42, 58, 0.1);
}

.story-panel.blue-panel {
  border-color: transparent;
  background: var(--blue-deep);
  color: var(--white);
}

.story-number {
  margin-bottom: auto;
  color: var(--gold);
  font: 600 3.7rem/1 var(--serif);
}

.blue-panel .story-number { color: var(--gold-bright); }

.story-panel h3 {
  max-width: 640px;
  margin-bottom: 1rem;
  font: 600 clamp(1.8rem, 3.3vw, 3rem)/1.05 var(--serif);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.story-panel p {
  max-width: 680px;
  color: var(--ink-soft);
}

.story-panel p + p { margin-top: 1rem; }
.story-panel.blue-panel p { color: var(--muted-light); }

.proof-reserved {
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 4rem);
  border: 2px dashed rgba(29, 90, 122, 0.42);
  background: rgba(255, 255, 255, 0.72);
}

.proof-reserved > .eyebrow { margin-bottom: 1rem; }
.proof-reserved > p { color: var(--ink-soft); }

.proof-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.proof-slot {
  padding: 1.25rem;
  border: 1px dashed var(--line-strong);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.proof-slot b {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--ink);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.faq-list {
  max-width: 900px;
  margin-top: 3rem;
  border-top: 1px solid var(--line);
}

.faq-list details { border-bottom: 1px solid var(--line); }

.faq-list summary {
  position: relative;
  padding: 1.55rem 3rem 1.55rem 0;
  cursor: pointer;
  list-style: none;
  font: 600 clamp(1.05rem, 1.7vw, 1.25rem)/1.25 var(--serif);
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  position: absolute;
  top: 1.4rem;
  right: 0.3rem;
  color: var(--blue);
  content: "+";
  font: 400 1.5rem/1 var(--sans);
}

.faq-list details[open] summary::after {
  color: var(--gold);
  content: "−";
}

.faq-list details p {
  max-width: 760px;
  padding: 0 3rem 1.5rem 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.waitlist-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  align-items: end;
  gap: clamp(3rem, 8vw, 8rem);
}

.closing {
  max-width: 700px;
  margin-top: 1.2rem;
  color: var(--gold-bright);
  font: 600 clamp(1.25rem, 2.2vw, 1.7rem)/1.3 var(--serif);
}

/* Capacity tool */
.tool-card {
  position: relative;
  overflow: hidden;
  padding: 1px;
  background: var(--line);
  box-shadow: 0 28px 82px rgba(16, 42, 58, 0.08);
}

.tool-card::before {
  position: absolute;
  z-index: 0;
  top: -105%;
  left: -45%;
  width: 190%;
  aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 0 78%, var(--gold-bright) 84%, transparent 91%);
  animation: edge-light 7s linear 1.2s 1 both;
  content: "";
}

.tool-inner {
  position: relative;
  z-index: 1;
  padding: clamp(2rem, 5vw, 4rem);
  background:
    linear-gradient(145deg, rgba(225, 237, 242, 0.95), rgba(249, 251, 250, 0.99) 62%),
    var(--white);
}

.tool-controls {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.tool-field label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--blue);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.tool-field select {
  min-width: min(320px, 75vw);
  padding: 0.85rem 2.7rem 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}

.result-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.tier-badge {
  width: 132px;
  height: 132px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--white);
  text-align: center;
  box-shadow: 0 16px 40px rgba(16, 42, 58, 0.12);
}

.tier-badge .tier-name {
  font: 600 1.1rem/1.15 var(--serif);
}

.tier-badge .tier-score {
  margin-top: 0.25rem;
  font-size: 0.76rem;
  opacity: 0.9;
}

.tier-low { background: var(--tier-low); }
.tier-moderate { background: var(--tier-moderate); color: var(--ink); }
.tier-high { background: var(--tier-high); }
.tier-critical { background: var(--tier-critical); }
.tier-unknown { background: var(--tier-unknown); }

.result-body h3 {
  margin-bottom: 0.4rem;
  font: 600 clamp(1.45rem, 2.5vw, 2.1rem)/1.1 var(--serif);
}

.result-body p { color: var(--ink-soft); }

.mini-badges {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}

.sensitivity-flag,
.zero-flag {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.sensitivity-flag {
  background: var(--gold-pale);
  color: #684807;
}

.zero-flag {
  border: 1px solid var(--line);
  background: var(--blue-pale);
  color: var(--blue-deep);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 20px 56px rgba(16, 42, 58, 0.045);
}

.risk-table,
.weights-table,
.vintage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.risk-table { min-width: 820px; }
.vintage-table { min-width: 680px; }

.risk-table caption,
.weights-table caption,
.vintage-table caption {
  padding: 0.9rem 1rem;
  color: var(--ink-soft);
  font-size: 0.76rem;
  text-align: left;
}

.risk-table th,
.risk-table td,
.weights-table th,
.weights-table td,
.vintage-table th,
.vintage-table td {
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.risk-table th,
.weights-table th,
.vintage-table th {
  background: var(--blue-pale);
  color: var(--blue);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.risk-table thead th {
  position: sticky;
  z-index: 2;
  top: 0;
}

.risk-table td,
.vintage-table td { color: var(--ink-soft); }
.risk-table td.state-name,
.vintage-table td:first-child { color: var(--ink); font-weight: 700; }
.risk-table tr:last-child td,
.weights-table tr:last-child td,
.vintage-table tr:last-child td { border-bottom: 0; }

.pill {
  display: inline-block;
  padding: 0.25rem 0.62rem;
  border-radius: 999px;
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.pill.tier-moderate { color: var(--ink); }
.row-flagged { background: rgba(242, 231, 196, 0.35); }
.row-flagged td:first-child { box-shadow: inset 3px 0 var(--gold-bright); }

.method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 7vw, 7rem);
}

.prose p {
  max-width: 760px;
  margin-bottom: 1.25rem;
  color: var(--ink-soft);
  font-size: 1rem;
}

.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); }

.weights-table { margin-top: 1rem; }
.weights-table td.weight-val { color: var(--ink); font-weight: 700; }

.disclosure-box {
  margin-top: 3rem;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-left: 3px solid var(--gold-bright);
  background: rgba(255, 255, 255, 0.7);
}

.disclosure-box h3 {
  margin-bottom: 1.2rem;
  font: 600 clamp(1.4rem, 2.3vw, 2rem)/1.1 var(--serif);
}

.disclosure-box ul {
  padding-left: 1.2rem;
  color: var(--ink-soft);
}

.disclosure-box li { margin-bottom: 0.9rem; }

/* Forms and footer */
.capture {
  display: flex;
  max-width: 560px;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.capture:focus-within {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

.capture input[type="email"] {
  min-width: 0;
  flex: 1;
  padding: 0.76rem 1rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--white);
}

.capture input::placeholder { color: #a9bec8; }

.capture button {
  padding: 0.76rem 1.2rem;
  border: 0;
  border-radius: 999px;
  background: var(--gold-bright);
  color: var(--blue-black);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  transition: background 180ms var(--ease), transform 180ms var(--ease);
}

.capture button:hover {
  background: var(--gold-pale);
  transform: translateY(-1px);
}

.capture.light {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.82);
}

.capture.light input[type="email"] { color: var(--ink); }
.capture.light input::placeholder { color: var(--ink-soft); }
.capture.light button { background: var(--blue-deep); color: var(--white); }

.capture-note {
  margin-top: 0.75rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.section.blue .capture-note,
.footer .capture-note { color: #8eaab7; }

.footer {
  padding: clamp(4.5rem, 8vw, 7rem) 0 2rem;
  border-top: 3px solid var(--gold-bright);
  background: var(--blue-deep);
  color: var(--muted-light);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.6fr) 0.7fr 0.7fr;
  gap: clamp(2.5rem, 7vw, 6rem);
  margin-bottom: 3.5rem;
}

.footer h4 {
  margin-bottom: 0.9rem;
  color: var(--gold-bright);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.footer-grid > div:first-child h4 {
  max-width: 560px;
  margin-bottom: 1.35rem;
  color: var(--white);
  font: 600 clamp(1.9rem, 3.5vw, 3rem)/1.05 var(--serif);
  letter-spacing: -0.03em;
  text-transform: none;
}

.footer ul { list-style: none; }
.footer li { margin-bottom: 0.4rem; }

.footer a {
  color: var(--muted-light);
  font-size: 0.82rem;
  text-decoration: none;
}

.footer a:hover { color: var(--white); }

.footer li > span {
  color: rgba(184, 205, 215, 0.62);
  font-size: 0.82rem;
}

.footer-bottom {
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-light);
  font-size: 0.7rem;
}

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

@keyframes edge-light {
  to { transform: rotate(1turn); }
}

/* The nav collapses to the menu button at 1120, NOT at 1080 like the layout
   rules below it. Two reasons, both measured rather than assumed:

   1. The five-item nav ALREADY overflowed at 1081px, pushing the CTA 23px off
      the right edge. That was live and predates the Real Pay Index.
   2. The sixth item (Real Pay) clears 1081 by only 6px even with the short
      labels, which is inside font-loading jitter: if Manrope fails and the
      fallback metrics differ, it breaks.

   Collapsing 40px earlier gives the narrowest desktop nav a ~28px margin
   instead of a 6px squeak. These rules were moved OUT of the 1080 block rather
   than duplicated, and the breakpoint was NOT raised wholesale, because that
   block also collapses seven unrelated grid layouts (reader, newsletter,
   about, story, waitlist, method, split hero) that have no reason to move.

   ---------------------------------------------------------------------------
   RAISED 1120 -> 1220 on 2026-08-20 for the SEVENTH item (Production). Same
   arithmetic as above, re-measured rather than reasoned:

   Seven items push the page into HORIZONTAL OVERFLOW from 1121px and do not
   clear until 1180 (scrollWidth 1164 against a 1121 viewport). Confirmed against
   a one-variable control -- the six-item nav overflows at none of those widths in
   the same run -- so the cause is the item, not the page.

   1220 rather than 1180 for the same reason 1120 was chosen over 1081: 1180 is
   the failure EDGE, and a breakpoint on the edge breaks the moment Manrope fails
   to load and fallback metrics differ. 1221 is the narrowest desktop nav under
   this rule, giving 41px of clearance, mirroring the 40px the previous author
   took.

   COST: widths 1121-1220 get the menu button instead of the inline nav on every
   page. That band is a common laptop width. The alternative is a masthead that
   overflows its own viewport, which is worse. Pairs with the shrink-band
   extension in type.css (1399 -> 1559); the two together are what a seventh nav
   item costs, and neither works alone.
   --------------------------------------------------------------------------- */
@media (max-width: 1220px) {
  .nav { grid-template-columns: 1fr auto; }

  .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.6rem var(--pad) 2rem;
    border-bottom: 1px solid var(--line);
    background: rgba(248, 250, 249, 0.98);
    box-shadow: 0 22px 50px rgba(16, 42, 58, 0.08);
  }

  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-action { display: none; }
  .menu-toggle { display: block; }
}

@media (max-width: 1080px) {
  .trust-rail { display: none; }

  .page-hero.split .hero-inner,
  .reader-layout,
  .newsletter-grid,
  .about-grid,
  .story-layout,
  .waitlist-grid,
  .method-grid {
    grid-template-columns: 1fr;
  }

  .sticky-copy { position: static; }

  .story-meta {
    align-items: center;
    margin-bottom: 3rem;
  }

  .story-progress {
    width: 132px;
    height: 2px;
  }

  .story-progress span {
    transform: scaleX(0.25);
    transform-origin: left;
  }

  .bento-card,
  .story-panel {
    opacity: 1;
    transform: none;
  }

  .bento-card.wide,
  .bento-card.narrow,
  .bento-card.half {
    grid-column: span 6;
    grid-row: auto;
    min-height: 390px;
  }

  .bento-card.full { grid-column: span 12; }
  .portrait-wrap { max-width: 430px; }
  .proof-slots { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .site-header { top: 0; }
  .nav { min-height: 78px; }
  .credentials { display: none; }

  .page-hero,
  .page-hero.compact {
    min-height: 780px;
    background-position: center, center, 60% 48%, center;
    background-size: cover, cover, auto 90%, cover;
  }

  .page-hero.split { min-height: auto; }
  .hero-inner { padding-block: 11rem 5rem; }
  .page-hero h1,
  .page-hero.compact h1,
  .page-hero.split h1 { font-size: clamp(3rem, 14vw, 4.8rem); }

  .hero-shot { margin-top: 1.5rem; }

  .bento { grid-template-columns: 1fr; }

  .bento-card.wide,
  .bento-card.narrow,
  .bento-card.half,
  .bento-card.full {
    grid-column: 1;
    min-height: 340px;
  }

  .story-panel { min-height: 390px; padding: 1.6rem; }

  .result-panel {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .tool-field,
  .tool-field select {
    width: 100%;
    min-width: 0;
  }

  .capture {
    border-radius: 14px;
    flex-wrap: wrap;
  }

  .capture input[type="email"] { flex-basis: 100%; }
  .capture button { width: 100%; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .footer-grid > :first-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: no-preference) {
  .repair-mark,
  .page-hero h1,
  .hero-lede,
  .hero-actions,
  .vintage-stamp {
    animation: hero-rise 520ms var(--ease) both;
  }

  .page-hero h1 { animation-delay: 70ms; }
  .hero-lede { animation-delay: 130ms; }
  .hero-actions,
  .vintage-stamp { animation-delay: 190ms; }

  .bento-card:hover,
  .story-panel:hover {
    opacity: 1;
    transform: translateY(-3px) scale(1);
    box-shadow: 0 28px 76px rgba(16, 42, 58, 0.1);
  }

  @keyframes hero-rise {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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

  .bento-card.beam::before,
  .hero-shot::before,
  .tool-card::before {
    animation: none;
  }
}