/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  --ink:        #1c1a17;
  --ink-deep:   #11100e;
  --paper:      #f6f4ef;
  --bronze:     #d3b384;
  --bronze-ink: #8a6a3a;
  --maroon:     #6d2c22;
  --body:       #57534b;
  --muted:      #a5a099;
  --muted-dark: #8f8878;
  --rule:       rgba(0, 0, 0, .09);
  --rule-light: rgba(255, 255, 255, .12);

  --serif: "Instrument Serif", Georgia, serif;
  --sans:  "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  --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 */
}

*, *::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);
  -webkit-font-smoothing: antialiased;
}

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

.eyebrow {
  font: 400 12px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow--bronze { color: var(--bronze); }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  border-radius: 100px;
  font: 500 14px var(--sans);
  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; }

/* Two layers: a flat tint that holds a floor of contrast against bright
   daytime footage, plus the gradient that weights the top bar and the
   hand-off into the stat band below. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(17, 16, 14, .58) 0%,
      rgba(17, 16, 14, .18) 42%,
      rgba(17, 16, 14, .72) 100%),
    rgba(17, 16, 14, .34);
}

/* ── Nav ────────────────────────────────────────────────────────────── */
/* Three states, driven by scroll position:
   1. on-dark  — floating glass panel over the video hero, light contents
   2. on-light — same glass panel, dark contents, over the light sections
   3. pinned   — once the section below is fully in view, the panel rises to
                 the top edge, goes full-bleed and turns solid paper, so it
                 covers the content scrolling under it from there on. */
.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 {
  --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--on-light {
  --nav-fg:    var(--ink);
  --nav-dim:   rgba(28, 26, 23, .72);
  --nav-line:  rgba(28, 26, 23, .28);
  --glass-bg:   rgba(28, 26, 23, .06);
  --glass-line: rgba(28, 26, 23, .10);
}
.nav--pinned {
  --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 {
  --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); }

.logo { display: flex; align-items: center; gap: 13px; }
.logo__mark { display: flex; align-items: flex-start; gap: 3px; }
.logo__mark i {
  display: block;
  width: 6px;
  background: var(--nav-fg);
  transition: background-color .3s ease;
}
.logo__mark i:nth-child(1) { height: 21px; opacity: .35; }
.logo__mark i:nth-child(2) { height: 15px; opacity: .6; }
.logo__mark i:nth-child(3) { height: 8px;  background: var(--bronze); opacity: 1; }
.logo__word {
  font: 400 30px/1 var(--serif);
  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: 400 15px var(--sans);
  color: var(--nav-dim);
}
.nav__links a { transition: color .18s ease; }
.nav__links a:hover { color: var(--nav-fg); }

.nav__cta {
  border: 1px solid var(--nav-line);
  color: var(--nav-fg);
  padding: 11px 24px;
  border-radius: 100px;
  font: 500 14px var(--sans);
  white-space: nowrap;
  transition: color .18s ease, border-color .3s ease, background-color .18s ease;
}
.nav--on-dark  .nav__cta:hover { background: rgba(246, 244, 239, .14); border-color: var(--paper); }
.nav--on-light .nav__cta:hover,
.nav--pinned   .nav__cta:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* 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: 400 11px var(--mono);
  letter-spacing: .16em;
  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: 400 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: 400 17px/1.65 var(--sans);
  color: rgba(246, 244, 239, .8);
  max-width: 52ch;
  margin: 0 auto 36px;
}
.hero__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.hero__note {
  font: italic 400 13px var(--sans);
  color: var(--bronze);
}

/* ── Stat band ──────────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 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: 400 13px/1.5 var(--sans);
  color: var(--body);
  margin-top: 8px;
}
.stat__source {
  font: 400 10.5px var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  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: 400 15px var(--mono);
  color: var(--bronze-ink);
  margin-bottom: 14px;
}
.step__title {
  font: 400 24px var(--serif);
  margin-bottom: 10px;
}
.step__body {
  font: 400 14px/1.6 var(--sans);
  color: var(--body);
}

/* ── Dark band ──────────────────────────────────────────────────────── */
.band {
  background: var(--ink);
  text-align: center;
  padding: clamp(48px, 7vw, 64px) var(--gutter) clamp(44px, 6vw, 56px);
}
.band__title {
  font: 400 clamp(28px, 3.6vw, 38px) / 1.25 var(--serif);
  color: var(--paper);
  max-width: 26ch;
  margin: 0 auto 10px;
}
.band__body {
  font: 400 15px/1.6 var(--sans);
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto 26px;
}

/* ── 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__brand .logo { --nav-fg: var(--paper); margin-bottom: 20px; }
.footer__blurb {
  font: 400 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: 400 10.5px var(--mono);
  letter-spacing: .16em;
  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: 400 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: 400 13px var(--mono);
  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: 400 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) {
  .stats, .steps { grid-template-columns: 1fr; }
  .stat + .stat {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .steps { gap: 36px; }
  .footer__inner { grid-template-columns: 1fr; gap: 44px; }
}

@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; }
}

/* 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; }
}