/* ── Fonts ──────────────────────────────────────────────────────────────
   PP Editorial New for display, PP Neue Montreal for everything else, both
   self-hosted from fonts/. See fonts/README.md — there is an unresolved
   licensing question about where these files came from.

   `font-display: swap` keeps text visible while they load; the generic
   fallbacks in --serif / --sans cover that first paint. */
@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  --ink:        #1c1a17;
  --ink-deep:   #11100e;
  --paper:      #f6f4ef;
  --bronze:     #d3b384;
  --bronze-ink: #8a6a3a;
  --body:       #57534b;
  --muted:      #a5a099;  /* secondary text on ink — 6.7:1 there */
  /* --muted only reaches 2.4:1 on paper, so light grounds get their own
     secondary tone. This one clears 4.9:1. */
  --muted-ink:  #6e6961;
  --muted-dark: #8f8878;
  --rule:       rgba(0, 0, 0, .09);
  --rule-light: rgba(255, 255, 255, .12);

  /* Trailing entries only cover the moment before the woff2 files land. */
  --serif: "PP Editorial New", Georgia, "Times New Roman", serif;
  --sans:  "PP Neue Montreal", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  /* Small tracked-out labels. Was IBM Plex Mono; Neue Montreal opened up
     does the same job without a third family. */
  --label: var(--sans);

  /* Neue Montreal is set at Medium, opened up slightly. Editorial New is
     left at its natural fit — the tracking is a sans treatment. */
  --sans-weight: 500;
  --track-body:  .01em;
  --track-label: .16em;

  --gutter: clamp(20px, 5vw, 56px);
  --max:    1180px;
  --nav-h:  74px;   /* height of the bar itself */
  --nav-inset: 16px; /* gap above the floating glass panel; 0 once pinned */

  /* Alpha of the flat black layer over the hero video. Raised on small
     screens, where the text sits over more of the frame at once. */
  --hero-veil: .48;
}

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

html {
  scroll-behavior: smooth;
  /* Keep anchor targets clear of the fixed bar. */
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: var(--sans-weight);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
}

/* Tracking inherits, and the display serif should not pick up the sans
   treatment — opening up Editorial New would only loosen an already wide
   face. Everything set in --serif resets here. */
.logo__word,
.menu__list a,
.hero__title,
.stat__figure,
.step__title,
.band__title {
  letter-spacing: normal;
}

h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }

/* Visible to screen readers, not on screen. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  font: var(--sans-weight) 12px var(--label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.eyebrow--bronze { color: var(--bronze); }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  border-radius: 100px;
  font: var(--sans-weight) 14px var(--sans);
  letter-spacing: .02em;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--paper {
  background: var(--paper);
  color: var(--ink);
  padding: 15px 32px;
}
.btn--paper:hover { background: #fff; }

.btn--ghost {
  border: 1px solid rgba(255, 255, 255, .35);
  color: var(--paper);
  padding: 12px 26px;
  font-size: 13.5px;
}
.btn--ghost:hover {
  border-color: var(--paper);
  background: rgba(255, 255, 255, .08);
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #2a2620 0%, var(--ink) 45%, var(--ink-deep) 100%);

  /* Fills the screen on any device. dvh tracks mobile browser chrome as it
     collapses; the vh line is the fallback for browsers without dvh. */
  min-height: 100vh;
  min-height: 100dvh;
}


/* Both players sit stacked; only the active one is faded up. A player that
   never decodes stays at 0, so the gradient carries the hero when the clips
   are missing or blocked. The 900ms rewind delay in main.js is keyed to this
   duration — change both together. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
}
.hero__video.is-active.is-ready { opacity: 1; }

/* Sits between the video and the hero text, and does two jobs.

   The flat black layer is the important one: it puts a floor under the
   contrast no matter what frame is on screen. The clips pan across bright
   sky and pale stone, so a gradient alone leaves the middle of the hero —
   exactly where the headline sits — swinging in and out of legibility.

   The gradient on top of it only weights the ends: darker under the bar,
   darker into the hand-off with the stat band below. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, .40) 0%,
      rgba(0, 0, 0, .26) 42%,
      rgba(0, 0, 0, .62) 100%),
    rgba(0, 0, 0, var(--hero-veil));
}

/* ── Nav ────────────────────────────────────────────────────────────── */
/* Two states, driven by scroll position:
   1. on-dark — floating glass panel over the video hero, light contents
   2. pinned  — the moment the hero's bottom edge reaches it, the panel rises
                to the top edge, goes full-bleed and turns opaque paper with
                dark contents, covering whatever scrolls under it.
   There is deliberately no glass-over-light state in between: translucent
   glass on a light section left the links barely readable. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: var(--nav-inset) clamp(12px, 2.4vw, 24px) 0;
  transition: padding .42s cubic-bezier(.4, 0, .2, 1);
}
/* Open menu takes the pinned geometry too, so the wordmark lines up with the
   overlay's links instead of sitting inset by the floating panel. */
.nav--pinned,
.nav.is-open { padding: 0; }

.nav--on-dark {
  --cta-bg: var(--paper);
  --cta-fg: var(--ink);
  --nav-fg:    var(--paper);
  --nav-dim:   rgba(246, 244, 239, .82);
  --nav-line:  rgba(246, 244, 239, .45);
  --glass-bg:   rgba(246, 244, 239, .10);
  --glass-line: rgba(246, 244, 239, .20);
}
.nav--pinned {
  --cta-bg: var(--ink);
  --cta-fg: var(--paper);
  --nav-fg:     var(--ink);
  --nav-dim:    rgba(28, 26, 23, .72);
  --glass-bg:   var(--paper);
  --glass-line: transparent;
}
/* The overlay is ink, so the bar sitting over it is always light-on-dark. */
.nav.is-open {
  --cta-bg: var(--paper);
  --cta-fg: var(--ink);
  --nav-fg:   var(--paper);
  --nav-dim:  rgba(246, 244, 239, .82);
  --nav-line: rgba(246, 244, 239, .45);
  --glass-bg:   transparent;
  --glass-line: transparent;
}

.nav__bar {
  max-width: var(--max);
  margin-inline: auto;
  border-radius: 16px;
  border: 1px solid var(--glass-line);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  transition: max-width .42s cubic-bezier(.4, 0, .2, 1),
              border-radius .42s cubic-bezier(.4, 0, .2, 1),
              background-color .42s ease,
              border-color .42s ease,
              box-shadow .42s ease;
}
/* Side borders go to 0 once full-bleed — they're off-screen anyway, and with
   border-box they'd otherwise push the contents 1px off the page grid. */
.nav--pinned .nav__bar {
  max-width: 100%;
  border-radius: 0;
  border-inline-width: 0;
  border-bottom-color: var(--rule);
  box-shadow: 0 6px 24px rgba(28, 26, 23, .07);
}
.nav.is-open .nav__bar {
  max-width: 100%;
  border-radius: 0;
  border-inline-width: 0;
  border-color: transparent;
  box-shadow: none;
}

.nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--nav-h);
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: clamp(18px, 2.6vw, 34px);
  transition: padding .42s cubic-bezier(.4, 0, .2, 1);
}
.nav--pinned .nav__row,
.nav.is-open .nav__row { padding-inline: var(--gutter); }

/* The full lockup is artwork in the top bars (two stacked recolors that
   swap by opacity); the footer still pairs the bird with a live wordmark. */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo__bird {
  position: relative;
  display: block;
  flex: none;
  height: 30px;
}
.logo__img {
  display: block;
  height: 100%;
  width: auto;
  transition: opacity .3s ease;
}
/* Two copies stacked — a flat PNG can't recolour, and swapping src flashes. */
.logo__img--dark {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.nav--pinned .logo__img--light { opacity: 0; }
.nav--pinned .logo__img--dark  { opacity: 1; }
/* The overlay behind the bar is ink, so the light bird wins there. */
.nav.is-open .logo__img--light { opacity: 1; }
.nav.is-open .logo__img--dark  { opacity: 0; }

.logo__word {
  font: 400 30px/1 var(--serif);
  letter-spacing: normal;
  color: var(--nav-fg);
  transition: color .3s ease;
}

.nav__end {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  font: var(--sans-weight) 15px var(--sans);
  color: var(--nav-dim);
}
.nav__links a { transition: color .18s ease; }
.nav__links a:hover { color: var(--nav-fg); }

/* Solid, not outlined: white over the video hero, flipping to ink once the
   bar sits over the light sections. */
.nav__cta {
  background: var(--cta-bg);
  color: var(--cta-fg);
  padding: 12px 24px;
  border-radius: 100px;
  font: var(--sans-weight) 14px var(--sans);
  letter-spacing: .02em;
  white-space: nowrap;
  transition: background-color .3s ease, color .3s ease;
}
.nav--on-dark  .nav__cta:hover { background: #fff; }
.nav--pinned .nav__cta:hover { background: #35322c; }

/* Hamburger — two rules that cross into an X when the menu is open,
   echoing the corrected-line idea in the wordmark's stepped mark.
   Only appears once the viewport is too narrow for the full link row. */
.menu-btn {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: var(--nav-fg);
  cursor: pointer;
  transition: background-color .18s ease;
}
.menu-btn:hover { background: rgba(128, 128, 128, .16); }
.menu-btn__bars {
  display: block;
  position: relative;
  width: 20px;
  height: 12px;
}
.menu-btn__bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform .28s ease, background-color .3s ease;
}
.menu-btn__bars i:nth-child(1) { top: 1px; }
.menu-btn__bars i:nth-child(2) { bottom: 1px; }
.nav.is-open .menu-btn__bars i:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
.nav.is-open .menu-btn__bars i:nth-child(2) { transform: translateY(-4.25px) rotate(-45deg); }

/* ── Menu overlay ───────────────────────────────────────────────────── */
.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--nav-h) 48px;
  opacity: 0;
  transition: opacity .28s ease;
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }

/* Same grid as .nav__inner, so the links line up under the wordmark. */
.menu__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu__list a {
  display: block;
  padding: 14px 0;
  font: 400 clamp(32px, 6vw, 56px) / 1.15 var(--serif);
  color: var(--paper);
  border-bottom: 1px solid var(--rule-light);
  transition: color .18s ease, padding-left .28s ease;
}
.menu__list a:hover {
  color: var(--bronze);
  padding-left: 12px;
}
.menu__note {
  margin: 0;
  font: var(--sans-weight) 11px var(--label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bronze-ink);
}

body.is-locked { overflow: hidden; }

/* ── Hero body ──────────────────────────────────────────────────────── */
.hero__body {
  position: relative;
  text-align: center;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  /* Top pad clears the floating bar; the extra bottom pad settles the block
     just above true center, which reads better than dead-center. */
  padding: calc(var(--nav-h) + var(--nav-inset) + 32px)
           var(--gutter)
           clamp(56px, 10vh, 104px);
}
.hero__body .eyebrow { margin-bottom: 24px; }

/* Deadline flag — same glass as the nav panel, so it reads as part of the
   same surface rather than a sticker on top of the video. */
.hero__flag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 auto 22px;
  padding: 9px 18px 9px 15px;
  border: 1px solid rgba(246, 244, 239, .22);
  border-radius: 100px;
  background: rgba(246, 244, 239, .12);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  font: var(--sans-weight) 13px var(--sans);
  color: var(--paper);
}
.hero__flag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bronze);
  box-shadow: 0 0 0 4px rgba(211, 179, 132, .22);
}

.hero__title {
  font: 400 clamp(34px, 5.2vw, 66px) / 1.1 var(--serif);
  letter-spacing: .012em;
  color: var(--paper);
  max-width: 25ch;
  margin: 0 auto 26px;
}
.hero__sub {
  font: var(--sans-weight) 17px/1.65 var(--sans);
  color: rgba(246, 244, 239, .8);
  max-width: 52ch;
  margin: 0 auto 36px;
}
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
/* ── Stat band ──────────────────────────────────────────────────────── */
/* A white card pulled up over the hero's bottom edge, so the hand-off from
   video to page is an overlap instead of a blank strip of paper. */
/* A quiet band, not a floating card: full-width paper with a rule,
   sitting flush under the hero. */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: var(--max);
  margin: 0 auto;
  border-bottom: 1px solid var(--rule);
}
.stat {
  padding: 44px 40px;
  text-align: center;
}
.stat + .stat { border-left: 1px solid var(--rule); }

.stat__figure { font: 400 clamp(40px, 4.6vw, 54px) var(--serif); }
.stat__label {
  font: var(--sans-weight) 13px/1.5 var(--sans);
  color: var(--body);
  margin-top: 8px;
}
.stat__source {
  font: var(--sans-weight) 10.5px var(--label);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted-ink);
  margin-top: 10px;
}

/* ── Steps ──────────────────────────────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(44px, 6vw, 64px) var(--gutter);
}
.step__num {
  font: var(--sans-weight) 15px var(--label);
  color: var(--bronze-ink);
  margin-bottom: 14px;
}
.step__title {
  font: 400 24px var(--serif);
  margin-bottom: 10px;
}
.step__body {
  font: var(--sans-weight) 14px/1.6 var(--sans);
  color: var(--body);
}

/* ── The math ───────────────────────────────────────────────────────── */
.math {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) var(--gutter);
  text-align: center;
  border-bottom: 1px solid var(--rule);
}
.math > .eyebrow { display: block; margin-bottom: clamp(28px, 4vw, 44px); }

.math__numbers {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(28px, 5vw, 56px);
  margin-bottom: clamp(32px, 4vw, 48px);
}
.math__figure {
  position: relative;
  /* inline-block so the rule below is measured against the number, not the
     caption underneath it — the caption is the wider of the two. */
  display: inline-block;
  font: 400 clamp(48px, 8.4vw, 116px) / 1 var(--serif);
  letter-spacing: normal;
  padding: 0 8px;
  /* Tabular figures stop the number jittering as the slider moves. */
  font-variant-numeric: tabular-nums;
}
/* The brand gesture: the county's number crossed out and corrected. */
.math__figure--struck { color: var(--muted); }
.math__figure--struck::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  top: 46%;
  height: 5px;
  background: var(--bronze-ink);
  transform: rotate(-5deg);
}
.math__cap {
  font: var(--sans-weight) 10.5px var(--label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bronze-ink);
  margin-top: 16px;
}
.math__cap--muted { color: var(--muted-ink); }

.math__control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 auto clamp(36px, 5vw, 52px);
}
.math__slider {
  width: min(440px, 100%);
  accent-color: var(--bronze-ink);
  cursor: grab;
}
.math__slider:active { cursor: grabbing; }
.math__slider:focus-visible {
  outline: 2px solid var(--bronze-ink);
  outline-offset: 6px;
  border-radius: 4px;
}
.math__hint {
  font: var(--sans-weight) 11px var(--label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-ink);
}

/* Dotted-leader ledger — the label and figure held apart by a rule. */
.ledger {
  max-width: 540px;
  margin: 0 auto clamp(32px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}
.ledger__row {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.ledger__row::before {
  content: "";
  order: 2;
  flex: 1;
  border-bottom: 1px dotted #b5afa3;
}
.ledger dt {
  font: var(--sans-weight) 15px var(--sans);
  color: var(--body);
  white-space: nowrap;
}
.ledger dd {
  order: 3;
  margin: 0;
  font: 400 24px var(--serif);
  letter-spacing: normal;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ledger__row--total {
  border-top: 1px solid var(--ink);
  padding-top: 18px;
}
.ledger__row--total dt { color: var(--ink); }
.ledger__row--total::before { border-bottom-color: var(--bronze-ink); }
.ledger__row--total dd {
  font-size: clamp(28px, 3.4vw, 38px);
  color: var(--bronze-ink);
}
/* Prose row: a note, not a figure — no dotted leader, body type, wraps
   beside its label instead of blowing out in display serif. Extra
   ancestor class outranks the mobile `.ledger dd` size override. */
.ledger__row--note::before { display: none; }
.ledger .ledger__row--note dd {
  order: 2;
  flex: 1;
  font: var(--sans-weight) 15px/1.55 var(--sans);
  letter-spacing: var(--track-body);
  color: var(--body);
  white-space: normal;
  font-variant-numeric: normal;
}

.math__ask {
  font: italic 400 clamp(24px, 3vw, 32px) / 1.35 var(--serif);
  letter-spacing: normal;
  max-width: 28ch;
  margin: 0 auto clamp(24px, 3vw, 34px);
}
.math__ask span { font-variant-numeric: tabular-nums; }

/* Footnote marker on the claim it qualifies. */
.fn-mark {
  font-size: .8em;
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
  color: var(--muted-ink);
}
.fn-mark:hover { color: var(--ink); }

/* Deliberately quiet — sentence case rather than the tracked-out uppercase
   the other labels use, so it reads as fine print instead of a caption. */
.math__note {
  font: 400 11px/1.55 var(--sans);
  letter-spacing: normal;
  text-transform: none;
  color: var(--muted-ink);
  max-width: 62ch;
  margin: 0 auto;
}

/* ── Why we win ─────────────────────────────────────────────────────── */
.why {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.why__head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 52px); }
.why__head .eyebrow { display: block; margin-bottom: 20px; }
.why__title {
  font: 400 clamp(30px, 4.2vw, 48px) / 1.12 var(--serif);
  letter-spacing: normal;
}

/* Them on the left, us on the right, with the comparison stated rather than
   implied — the two cards used to differ only by a kicker. */
.why__cards {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: stretch;
  margin-bottom: clamp(40px, 5vw, 56px);
}
.why__versus {
  align-self: center;
  font: italic 400 20px var(--serif);
  letter-spacing: normal;
  color: var(--muted-ink);
}

.case {
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 6px;
  padding: 28px 32px 30px;
  min-height: 230px;
  display: flex;
  flex-direction: column;
}
/* Theirs sits back; ours comes forward. */
.case--them {
  background: transparent;
  border-style: dashed;
}
.case--us {
  background: #fff;
  border-color: rgba(0, 0, 0, .16);
  box-shadow: 0 2px 20px rgba(28, 26, 23, .06);
}

.case__tag {
  align-self: flex-start;
  font: var(--sans-weight) 10.5px var(--label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 100px;
  background: rgba(28, 26, 23, .07);
  color: var(--muted-ink);
  margin-bottom: 20px;
}
.case__tag--us {
  background: var(--ink);
  color: var(--paper);
}

/* The headline figure each dot field adds up to. */
.case__count {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font: var(--sans-weight) 13px var(--sans);
  color: var(--muted-ink);
}
.case__count strong {
  font-weight: var(--sans-weight);
  color: var(--ink);
}
.case--us .case__count strong { color: var(--bronze-ink); }

.case__kicker {
  font: var(--sans-weight) 10.5px var(--label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-ink);
  margin-bottom: 8px;
}
.case__kicker--bronze { color: var(--bronze-ink); }
.case__claim {
  font: 400 21px var(--serif);
  letter-spacing: normal;
  margin-bottom: 26px;
}
.case__claim--muted { color: var(--body); }

/* Twelve countable dots against a field too dense to count — that contrast
   is the whole argument, so the sparse set stays as real elements while the
   dense one is a tiled background rather than hundreds of divs. */
.dots { flex: 1; }
.dots--few {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: flex-start;
}
.dots--few i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #c9c4ba;
}
.dots--many {
  background-image: radial-gradient(circle, var(--bronze-ink) 2.5px, transparent 2.6px);
  background-size: 10px 10px;
  opacity: .75;
  min-height: 96px;
}

.why__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(0, 0, 0, .12);
}
.why__col { padding: 32px 36px 0 0; }
.why__col + .why__col {
  padding-left: 36px;
  border-left: 1px solid var(--rule);
}
.why__col:last-child { padding-right: 0; }
.why__col-title {
  font: 400 clamp(24px, 2.6vw, 30px) var(--serif);
  letter-spacing: normal;
  margin-bottom: 10px;
}
.why__col-body {
  font: var(--sans-weight) 13.5px/1.65 var(--sans);
  color: var(--body);
}

/* ── Who argues your case ───────────────────────────────────────────── */
.counsel {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) var(--gutter);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}
.counsel__lead .eyebrow { display: block; margin-bottom: 22px; }
.counsel__title {
  font: 400 clamp(32px, 4.4vw, 50px) / 1.18 var(--serif);
  letter-spacing: normal;
  margin-bottom: 22px;
}
.counsel__title em {
  font-style: italic;
  color: var(--bronze-ink);
}
.counsel__body {
  font: var(--sans-weight) 15.5px/1.7 var(--sans);
  color: var(--body);
  max-width: 46ch;
}

.counsel__ledger { margin: 0; }
.counsel__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid rgba(0, 0, 0, .12);
}
.counsel__row:last-child { border-bottom: 1px solid rgba(0, 0, 0, .12); }
.counsel__row dt {
  font: 400 clamp(26px, 2.9vw, 34px) var(--serif);
  letter-spacing: normal;
}
.counsel__row--accent dt { color: var(--bronze-ink); }
.counsel__row dd {
  margin: 0;
  font: var(--sans-weight) 13px/1.5 var(--sans);
  color: var(--body);
  text-align: right;
  max-width: 22ch;
}

/* ── Property types ─────────────────────────────────────────────────── */
.ptypes {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) var(--gutter);
  /* Rules top and bottom — the counsel section above it has none of its own,
     so without this the two run together. */
  border-block: 1px solid var(--rule);
}
.ptypes__head {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.ptypes__title {
  font: 400 clamp(32px, 4.4vw, 56px) / 1.08 var(--serif);
  letter-spacing: normal;
  margin-bottom: 18px;
}
.ptypes__sub {
  font: var(--sans-weight) 16px/1.6 var(--sans);
  color: var(--body);
  max-width: 54ch;
  margin: 0 auto;
}

.ptypes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.ptype {
  display: block;
  background: rgba(28, 26, 23, .04);
  border-radius: 14px;
  padding: 26px 26px 30px;
}
.ptype__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.ptype__name {
  font: 400 22px var(--serif);
  letter-spacing: normal;
}
.ptype__body {
  font: var(--sans-weight) 14px/1.6 var(--sans);
  color: var(--body);
}

/* ── Dark band ──────────────────────────────────────────────────────── */
/* The whole section is one link. A paper panel sweeps in from the left on
   hover and the text inverts; the arrow line is the only button-ish cue. */
.band {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink);
  text-align: center;
  padding: clamp(48px, 7vw, 64px) var(--gutter) clamp(44px, 6vw, 56px);
}
.band__fill {
  position: absolute;
  inset: 0;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.band:hover .band__fill,
.band:focus-visible .band__fill { transform: scaleX(1); }
.band:focus-visible { outline: none; }
.band__inner { position: relative; display: block; }
.band__title {
  font: 400 clamp(28px, 3.6vw, 38px) / 1.25 var(--serif);
  color: var(--paper);
  max-width: 26ch;
  margin: 0 auto 10px;
  transition: color .5s ease;
}
.band__body {
  font: var(--sans-weight) 15px/1.6 var(--sans);
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto 26px;
  transition: color .5s ease;
}
.band__action {
  display: inline-block;
  font: var(--sans-weight) 15px var(--sans);
  color: var(--bronze);
  transition: color .5s ease;
}
.band__arrow {
  display: inline-block;
  transform: translateY(-2px);
  transition: transform .22s ease;
}
.band:hover .band__title,
.band:focus-visible .band__title { color: var(--ink); }
.band:hover .band__body,
.band:focus-visible .band__body { color: rgba(28, 26, 23, .72); }
.band:hover .band__action,
.band:focus-visible .band__action { color: var(--ink); }
.band:hover .band__arrow { transform: translate(6px, -2px); }

/* ── Footer ─────────────────────────────────────────────────────────── */
/* A tone below the closing band above it — without the step the two ink
   blocks read as one undifferentiated mass. */
.footer {
  background: var(--ink-deep);
  color: var(--muted-dark);
}

.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: clamp(40px, 6vw, 88px);
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 68px) var(--gutter) clamp(40px, 5vw, 56px);
}

.footer__logo { margin-bottom: 22px; }
.footer__logo .logo__bird { height: 28px; }
.footer__logo .logo__word { color: var(--paper); }
.footer__blurb {
  font: var(--sans-weight) 14px/1.65 var(--sans);
  color: var(--muted);
  max-width: 42ch;
  margin: 0 0 26px;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.footer__head {
  font: var(--sans-weight) 10.5px var(--label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bronze-ink);
  margin: 0 0 18px;
}
.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font: var(--sans-weight) 14px var(--sans);
  color: var(--muted);
}
.footer__col a { transition: color .18s ease; }
.footer__col a:hover { color: var(--paper); }

.footer__deadline { color: var(--paper); }
.footer__date {
  font: var(--sans-weight) 13px var(--label);
  color: var(--bronze);
}

.footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px var(--gutter);
  border-top: 1px solid var(--rule-light);
  font: var(--sans-weight) 12px var(--sans);
}
.footer__legal-links { display: flex; gap: 20px; }
.footer__legal a { transition: color .18s ease; }
.footer__legal a:hover { color: var(--paper); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --hero-veil: .58; }

  .stats, .steps { grid-template-columns: 1fr; }
  .stat + .stat {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .steps { gap: 40px; }
  .footer__inner { grid-template-columns: 1fr; gap: 44px; }

  /* Type set for three narrow desktop columns is too small once those
     columns become one full-width one. Body copy goes to 16px — below that
     it reads as fine print on a phone. */
  .step__title { font-size: 30px; }
  .step__body  { font-size: 16px; line-height: 1.7; }
  .step__num   { font-size: 14px; margin-bottom: 12px; }

  .stat__label  { font-size: 15px; line-height: 1.55; }
  .stat__source { font-size: 11px; }

  .band__body { font-size: 16px; line-height: 1.65; }
  .footer__blurb { font-size: 15px; }
  .footer__col ul { font-size: 15px; }

  /* The two big figures sit side by side on desktop; stacked they read as
     a before/after, which is the same point. */
  .math__numbers { flex-direction: column; align-items: center; gap: 24px; }
  .ledger dt { white-space: normal; }

  .why__cards { grid-template-columns: 1fr; gap: 16px; }
  .why__versus { justify-self: center; }
  .case { min-height: 0; }
  .ptypes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ptypes__sub { font-size: 16px; }
  .why__cols { grid-template-columns: 1fr; }
  .why__col { padding: 28px 0 0; }
  .why__col + .why__col {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .why__col-body { font-size: 15px; }

  .counsel { grid-template-columns: 1fr; align-items: start; }
  .counsel__body { font-size: 16px; }
  .counsel__row dd { font-size: 14px; }
}

@media (max-width: 560px) {
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .hero__flag { font-size: 12px; padding: 8px 15px 8px 13px; }

  /* A dotted leader needs room between the label and the figure, and at this
     width there is none — the two nearly touch. Stack them and let a rule
     separate the rows instead. */
  .ledger { gap: 0; }
  .ledger__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
  }
  .ledger__row::before { display: none; }
  .ledger__row--total {
    border-bottom: 0;
    padding-top: 16px;
  }
  .ledger dd { font-size: 26px; }
  .ledger__row--total dd { font-size: 32px; }

  /* Twelve dots wrap to 11 + 1 at this width; cap the row so they read as
     an even 6 x 2 instead of leaving an orphan. */
  .dots--few { max-width: 138px; }

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

/* Below this the full link row no longer fits: it collapses into the
   hamburger, and the menu overlay carries the links instead. */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .menu-btn   { display: grid; }
  .nav__end   { gap: 8px; }
}

@media (max-width: 480px) {
  :root { --nav-h: 66px; --nav-inset: 10px; }
  .nav__cta { display: none; } /* lives in the menu at this width */
  .logo__word { font-size: 26px; }
  .logo__mark i:nth-child(1) { height: 18px; }
  .logo__mark i:nth-child(2) { height: 13px; }
  .logo__mark i:nth-child(3) { height: 7px; }
}

/* Short viewports — laptops with browser chrome, tablets in landscape.
   The hero still fills the screen; its contents scale down to stay inside it
   rather than pushing the CTA below the fold. */
@media (max-height: 700px) {
  .hero__body {
    padding-block: calc(var(--nav-h) + 20px) clamp(32px, 6vh, 48px);
  }
  .hero__body .eyebrow { margin-bottom: 16px; }
  .hero__title {
    font-size: clamp(36px, 8vh, 56px);
    margin-bottom: 18px;
  }
  .hero__sub {
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 26px;
  }
}

@media (max-height: 560px) {
  .menu { justify-content: flex-start; overflow-y: auto; }
  .menu__list a { padding: 8px 0; font-size: clamp(24px, 6vh, 34px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}