/* ============================================================
   Leese - Landing page
   One tall page, a fixed 3D backdrop and centred copy that swaps
   in place. Content, timeline nav and footer follow the Leese
   Figma spec (Parkinsans / Inter, purple #594FEE).
   ============================================================ */

/* --- Tokens ---------------------------------------- */
:root {
  --paper: #ffffff;
  --ink: #020617;
  --muted: #475569;
  --body: #334155;
  --eyebrow: #64748b;
  --line: #cbd5e1;
  --tick: #94a3b8;
  --pill: #eff3f6;
  --purple: #594fee;
  --purple-hover: #4339d6;
  --purple-fill: #6f67f1;
  --purple-fill-hover: #5a51e8;
  --sun: #fecf57;

  --ff-display: 'Parkinsans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-brand: 'Climate Crisis', cursive, sans-serif;

  --headline-size: clamp(30px, 3.34vw, 48px);
  --subtitle-size: clamp(15px, 1.25vw, 18px);
  --gutter: clamp(24px, 4vw, 72px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-time='night'] {
  --paper: #050c1a;
  --ink: #f6f0df;
  --muted: #cbd5e1;
  --body: #cbd5e1;
  --eyebrow: #cbd5e1;
  --line: #334155;
  --tick: #64748b;
  --pill: rgba(255, 255, 255, 0.12);
  --sun: #f6f0df;
}

/* --- Reset ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  height: 700svh;                       /* 5 chapters + 1 footer leg */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-x: none;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; font-family: var(--ff-sans); color: inherit; background: none; border: none; cursor: pointer; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 6px;
}
img, svg { display: block; }

/* --- Preloader ------------------------------------- */
/* A hairline dial drawn from the same line language as the nav ruler: a ring
   of ticks, a needle that turns from 3 o'clock round to 1, and an arc that
   fills with it. Once the scene is ready the sheet lifts and the world eases
   back to rest underneath, so the reveal reads as depth being gained. */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, #f4f2ec 0%, #e8ecdc 100%);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.95s, transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-time='night'] .preloader {
  background: linear-gradient(180deg, #070c18 0%, #01030a 100%);
}
.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.02);
}
/* The dial goes first and eases away a touch, so the sky is what is left to
   hand over to the scene. */
.preloader.is-done .preloader__dial {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.55s ease, transform 0.8s var(--ease);
}

/* The dial: ring of ticks on the outside, needle and arc inside. */
.preloader__dial {
  position: relative;
  width: clamp(190px, 32vw, 270px);
  aspect-ratio: 1;
}
.preloader__dial::before,
.preloader__dial::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
}
.preloader__dial::before {
  background: repeating-conic-gradient(from 0deg, var(--tick) 0 0.6deg, transparent 0.6deg 6deg);
  -webkit-mask: radial-gradient(closest-side, transparent 0 84%, #000 84% 92%, transparent 92%);
  mask: radial-gradient(closest-side, transparent 0 84%, #000 84% 92%, transparent 92%);
}
.preloader__dial::after {
  background: repeating-conic-gradient(from 0deg, var(--muted) 0 0.9deg, transparent 0.9deg 30deg);
  -webkit-mask: radial-gradient(closest-side, transparent 0 76%, #000 76% 92%, transparent 92%);
  mask: radial-gradient(closest-side, transparent 0 76%, #000 76% 92%, transparent 92%);
}
.preloader__face { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.preloader__track { fill: none; stroke: var(--tick); stroke-width: 1; opacity: 0.55; }
/* The needle and the arc are driven together by preloader.js, so a busy main
   thread cannot let the composited hand run ahead of the SVG line. */
.preloader__arc {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 314.16 376.99;
  stroke-dashoffset: 314.16;
}
.preloader__needle {
  position: absolute;
  left: 50%;
  bottom: 50%;
  z-index: 2;
  width: 1.5px;
  height: 30%;
  margin-left: -0.75px;
  border-radius: 2px;
  background: var(--ink);
  transform: rotate(90deg);
  transform-origin: 50% 100%;
}
.preloader__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--ink);
}

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

/* --- 3D backdrop ----------------------------------- */
#scenery {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    linear-gradient(180deg, #f4f2ec 0%, #eef0ea 44%, #a4c2c6 46%, #8fb1b6 100%);
  /* While the loader is up the world sits a touch closer, then eases back as
     the sheet lifts, so the reveal has some depth to it rather than a flat
     dissolve. */
  transform: scale(1.055);
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}
body.is-revealing #scenery { transform: scale(1); }
html[data-loader='quick'] #scenery { transition-duration: 0.6s; }
#landscape {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.7s ease;
}
body.scene-ready #landscape { opacity: 1; }

/* Hovering a cloud (clickable to summon the storm) shows a pointer. */
body.cloud-hover { cursor: pointer; }

/* --- Sun / Moon toggle ----------------------------- */
#sun-toggle {
  position: fixed;
  z-index: 4;
  left: 17%;
  top: 22%;
  width: max(44px, 6.4vh);
  height: max(44px, 6.4vh);
  padding: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
}
#sun-toggle span {
  display: block;
  width: 5.4vh;
  height: 5.4vh;
  min-width: 24px;
  min-height: 24px;
  margin: auto;
  border-radius: 50%;
  background: var(--sun);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
body.scene-ready #sun-toggle span { opacity: 0; }
[data-time='night'] #sun-toggle span { background: #f6f0df; box-shadow: 0 0 20px rgba(246, 240, 223, 0.2); }
#sun-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 8px; }

/* --- Skip link ------------------------------------- */
.skip-link {
  position: fixed;
  top: 8px;
  left: 12px;
  z-index: 101;
  padding: 10px;
  color: var(--ink);
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}
.skip-link:focus { transform: none; }

/* --- Timeline navigation --------------------------- */
.timeline-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding: 24px var(--gutter) 0;
  pointer-events: none;
  color: var(--ink);
}
.timeline {
  position: relative;
  width: min(500px, 100%);
  margin: 0 auto;
}
.timeline-ruler {
  position: relative;
  height: 16px;
}
.timeline-ticks {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.timeline-tick { width: 1px; height: 5px; background: var(--tick); }
.timeline-tick.is-mid { height: 10px; }
.timeline-tick.is-major { height: 16px; }
.timeline-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.5px;
  height: 27px;
  background: var(--ink);
  transform: translateX(-50%);
  transition: left 0.35s var(--ease);
}
.timeline-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-content: center;
  margin-top: 15px;
  pointer-events: auto;
}
.timeline-item {
  display: flex;
  justify-content: center;
  padding: 0;
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  transition: color 0.2s ease;
}
.timeline-label {
  display: inline-block;
  padding: 6px 14px;
  line-height: 20px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.timeline-item:hover { color: var(--ink); }
.timeline-item.is-active { color: var(--ink); font-weight: 600; }
.timeline-item.is-active .timeline-label { background: #ffffff; }
[data-time='night'] .timeline-item.is-active .timeline-label { color: #020617; }

/* --- Centred copy ---------------------------------- */
#content, #text-container { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.section {
  position: absolute;
  inset: 0 0 12%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  transition: opacity 0.24s ease;
}
.section[aria-hidden='true'] { opacity: 0; visibility: hidden; }
.section-copy {
  width: 100%;
  max-width: 950px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.headline {
  font-family: var(--ff-display);
  font-size: var(--headline-size);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.16;
  color: var(--ink);
  text-wrap: balance;
  max-width: 950px;
}
.subtitle {
  font-family: var(--ff-display);
  font-size: var(--subtitle-size);
  line-height: 1.55;
  color: var(--body);
  margin-top: 22px;
  max-width: 640px;
  text-wrap: balance;
}
.eyebrow {
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--eyebrow);
  margin: 0 0 20px;
}

/* --- Buttons --------------------------------------- */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 27px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  pointer-events: auto;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.btn-outline:hover { background: rgba(15, 23, 42, 0.04); border-color: var(--ink); }
.hero-cta { display: flex; align-items: center; gap: 22px; margin-top: 24px; }

/* --- Statistics ------------------------------------ */
.stats { display: flex; align-items: flex-start; justify-content: center; gap: clamp(40px, 8vw, 120px); margin-top: 12px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stat-value {
  font-family: var(--ff-display);
  font-size: var(--headline-size);
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
}
.stat-label {
  font-family: var(--ff-display);
  font-size: var(--subtitle-size);
  color: var(--body);
  max-width: 240px;
}

/* --- FAQs ------------------------------------------ */
.section-copy--faqs {
  width: 100%;
  max-width: 1110px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  text-align: left;
  column-gap: 0;
}
.faq-intro { text-align: left; }
.headline--faq { text-align: left; max-width: 460px; }
.faq-list { width: 100%; border-top: 1px solid var(--line); }
.faq-item {
  border-bottom: 1px solid var(--line);
  transition: border-color 0.2s ease;
}
.faq-item[open] { border-bottom-color: var(--purple); }
.faq-item[open] + .faq-item { border-top: 1px solid var(--purple); }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  list-style: none;
  cursor: pointer;
  pointer-events: auto;
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { content: ''; }
.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--purple);
  border-radius: 1px;
}
.faq-icon::before { width: 16px; height: 1.8px; }
.faq-icon::after { width: 1.8px; height: 16px; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-answer {
  overflow: hidden;
  max-height: 0;
  padding: 0 24px 0 0;
  transition: max-height 0.28s var(--ease), padding 0.28s var(--ease);
}
.faq-item[open] .faq-answer {
  max-height: 500px;
  padding: 0 24px 18px 0;
}
.faq-answer p {
  font-family: var(--ff-display);
  font-size: 16px;
  line-height: 1.55;
  color: var(--body);
  max-width: 480px;
}

/* --- CTA ------------------------------------------- */
.role-selector { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 28px 0 32px; }
.role-pill {
  padding: 10px 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  pointer-events: auto;
  transition: background 0.2s ease, color 0.2s ease;
}
.role-pill:hover { background: rgba(15, 23, 42, 0.04); }
.role-pill.is-active { background: var(--ink); color: var(--paper); }

.cta-form { width: 100%; max-width: 536px; pointer-events: auto; }
.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 60px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  padding: 8px 8px 8px 16px;
}
.cta-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0 8px;
  font-family: var(--ff-sans);
  font-size: 14px;
  color: var(--ink);
  outline: none;
}
.cta-input::placeholder { color: var(--eyebrow); }
.btn-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 12px 16px;
  border-radius: 999px;
  background: #594fee;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.btn-submit:hover { background: #4339d6; }
.btn-submit:disabled { cursor: default; }
/* While loading, the label holds the button's width and a spinner takes its
   place, so the button never jumps. */
.btn-submit.is-loading .btn-submit__label { visibility: hidden; }
.btn-submit__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.btn-submit.is-loading .btn-submit__spinner {
  opacity: 1;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.form-feedback { margin-top: 12px; font-size: 13px; min-height: 18px; color: var(--body); }
.form-feedback.is-error { color: #dc2626; }
/* On-brand success: brand purple with a small tick, instead of a stock green. */
.form-feedback.is-success {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--purple);
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 500;
  animation: feedback-in 0.55s var(--ease) both;
}
.form-feedback.is-success::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: check-pop 0.5s var(--ease) both;
}
@keyframes feedback-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes check-pop {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}
[data-time='night'] .form-feedback.is-success { color: #a9a3ff; }
/* Honeypot: parked off-screen so only bots ever reach it. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* --- Footer (bar morphs into the full card as you scroll past the CTA) --- */
#site-footer {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  --footer-open: 0;
  --footer-t: 0;                 /* 0..1 once open: drives the hinge */
  --bar-w: 590px;
  --bar-h: 76px;
  --bar-bottom: 24px;
  --open-inset: 24px;
  --open-top: 38%;
  --open-h: calc(100% - var(--open-top) - var(--open-inset));
}

/* While a form field has focus on a touch device the keyboard is up: the story
   holds on the CTA (see setTyping in script.js) and the footer is taken out of
   the picture, so it can neither sit under the field nor swing open over it. */
html.is-typing #site-footer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* The single card that stretches from the bar into the drawer. */
.footer-card {
  position: absolute;
  left: calc((1 - var(--footer-open)) * (50% - var(--bar-w) / 2) + var(--footer-open) * var(--open-inset));
  right: calc((1 - var(--footer-open)) * (50% - var(--bar-w) / 2) + var(--footer-open) * var(--open-inset));
  top: calc((1 - var(--footer-open)) * (100% - var(--bar-bottom) - var(--bar-h)) + var(--footer-open) * var(--open-top));
  height: calc((1 - var(--footer-open)) * var(--bar-h) + var(--footer-open) * var(--open-h));
  background: var(--paper);
  border-radius: 16px;
  box-shadow: 0 12px 44px rgba(2, 6, 23, 0.12);
  overflow: hidden;
  pointer-events: none;
  perspective: 1400px;
}

/* Collapsed bar layer (only its button is clickable). */
.footer-collapsed {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 16px;
  pointer-events: none;
}
/* Instant swap: the bar hands off to the drawer layer in a single frame, but
   only once the card is already opening, so the change reads as continuous
   motion rather than a cut (and never leaves an empty card). */
#site-footer.is-open .footer-collapsed { opacity: 0; visibility: hidden; }
.footer-collapsed .btn-pilot { pointer-events: auto; }
.footer-bar__brand {
  font-family: var(--ff-brand);
  font-size: 22px;
  color: var(--ink);
  padding-left: 8px;
}

/* Shared pilot button - colour change on hover, no shadow */
.btn-pilot {
  padding: 12px 16px;
  border-radius: 999px;
  background: #594fee;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: auto;
  transition: background 0.2s ease;
}
.btn-pilot:hover { background: #4339d6; }

/* Expanded card layer. It snaps in at the instant the bar clears, then hinges
   open as the card rises: the drawer contents grow from the bottom edge up. */
.footer-expanded {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: bottom center;
  transform: rotateX(calc((1 - var(--footer-t)) * -6deg));
}
#site-footer.is-open .footer-expanded {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Badge left, socials dead-centre, button right: the equal 1fr side columns
   keep the socials centred regardless of how wide the badge or button are. */
.footer-drawer__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.footer-badge { justify-self: start; }
.footer-drawer__top .btn-pilot { justify-self: end; }
.footer-badge {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--ff-display);
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
}
.footer-socials { display: flex; align-items: center; justify-content: center; gap: 30px; }
.social { color: var(--muted); pointer-events: auto; transition: color 0.2s ease; }
.social:hover { color: var(--ink); }

.footer-wordmark {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-brand);
  font-size: clamp(64px, 13vw, 185px);
  line-height: 0.9;
  color: var(--ink);
  user-select: none;
  pointer-events: none;
}
.footer-drawer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--ff-display);
  font-size: 14px;
  color: var(--muted);
  pointer-events: auto;
}
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { color: var(--muted); text-decoration: none; }
.footer-legal a:hover { color: var(--ink); }

/* Hover/focus tooltips for the footer links. Socials sit near the card's top
   edge and the legal links sit at its bottom, so tips open away from the nearest
   edge, staying inside the card (which clips its own overflow). */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  z-index: 6;
  background: #000;
  color: #fff;
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 8px 11px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.footer-legal [data-tip]::after {
  bottom: calc(100% + 10px);
  transform: translate(-50%, 4px);
}
.footer-socials [data-tip]::after {
  top: calc(100% + 10px);
  transform: translate(-50%, -4px);
}
.footer-legal [data-tip]:hover::after,
.footer-legal [data-tip]:focus-visible::after,
.footer-socials [data-tip]:hover::after,
.footer-socials [data-tip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --- Responsive ------------------------------------ */
@media (max-width: 1000px) {
  .timeline { width: min(460px, 100%); }
  .timeline-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .timeline-label { padding: 6px 8px; }
}
@media (max-width: 768px) {
  :root { --gutter: 24px; --headline-size: clamp(30px, 8vw, 40px); --subtitle-size: 15px; }
  .timeline-header { padding: 16px var(--gutter) 0; }
  .timeline-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .timeline-label { font-size: 12px; padding: 5px 4px; }
  .subtitle { margin-top: 16px; max-width: 420px; }
  .hero-cta { margin-top: 20px; }
  .btn-outline { font-size: 14px; padding: 13px 22px; }

  .section-copy--faqs { grid-template-columns: 1fr; row-gap: 24px; max-width: 520px; }
  .headline--faq { max-width: none; }
  .faq-question { font-size: 16px; padding: 14px 0; }
  .faq-answer p { font-size: 15px; }

  .section[data-section="4"] .section-copy,
  .section[data-section="5"] .section-copy { transform: translateY(24px); }

  .stats { gap: 24px; flex-direction: column; }
  .stat-label { max-width: none; }

  .input-wrap { flex-direction: column; height: auto; align-items: stretch; gap: 8px; padding: 8px; border-radius: 20px; }
  .cta-input { padding: 12px 12px; font-size: 16px; }
  .btn-submit { width: 100%; }

  #site-footer { --bar-w: calc(100vw - 32px); --bar-h: 68px; --bar-bottom: 16px; --open-inset: 16px; --open-top: 44%; }
  .footer-collapsed { padding: 0 12px; }
  .footer-bar__brand { font-size: 18px; }
  /* Mobile: socials left + Join right on the top row, the badge centred
     beneath them, then the wordmark under the chip. The two flexible rows split
     the leftover height, but they carry a minimum so the socials/CTA row never
     touches the chip while the drawer is only partway open. */
  .footer-expanded {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto minmax(20px, 1fr) auto auto minmax(12px, 1fr) auto;
    padding: 18px;
  }
  .footer-drawer__top { display: contents; }
  .footer-socials { grid-column: 1; grid-row: 1; justify-content: flex-start; gap: 22px; }
  .footer-drawer__top .btn-pilot { grid-column: 2; grid-row: 1; justify-self: end; }
  .footer-badge { grid-column: 1 / -1; grid-row: 3; justify-self: center; }
  .footer-wordmark { grid-column: 1 / -1; grid-row: 4; margin-top: 48px; }
  .footer-drawer__bottom { grid-column: 1 / -1; grid-row: 6; font-size: 12px; }
  /* Socials sit at the card's left here, so their tips grow rightward from the
     icon instead of centering (a centred tip would clip at the card edge). */
  .footer-socials [data-tip]::after { left: 0; transform: translate(0, -4px); }
  .footer-socials [data-tip]:hover::after,
  .footer-socials [data-tip]:focus-visible::after { transform: translate(0, 0); }
}
@media (max-height: 620px) {
  .section { align-items: flex-start; padding-top: 96px; }
  #site-footer { --open-top: 22%; }
  .footer-wordmark { font-size: clamp(48px, 10vw, 120px); }
}

/* --- Mobile (Figma 390 x 844) ---------------------- */
@media (max-width: 480px) {
  :root { --gutter: 16px; --headline-size: 30px; --subtitle-size: 14px; }

  .timeline-header { padding: 16px var(--gutter) 0; }
  .timeline { width: min(360px, 100%); }
  .timeline-label { font-size: 13px; padding: 6px 6px; }

  .section { inset: 0 0 16%; padding: 0 16px; }
  .subtitle { margin-top: 14px; max-width: 300px; }
  .eyebrow { margin-bottom: 14px; }
  .btn-outline { font-size: 16px; padding: 15px 24px; }

  .stats { flex-direction: row; gap: 18px; }
  .stat-label { max-width: 150px; }

  .section-copy--faqs { max-width: 100%; }
  .faq-question { font-size: 18px; padding: 16px 0; }
  .faq-answer p { font-size: 14px; }

  .role-selector { flex-direction: column; align-items: center; gap: 12px; margin: 24px 0 28px; }
  .cta-form { max-width: 100%; }
  .input-wrap { flex-direction: row; align-items: center; height: 58px; gap: 0; padding: 7px 7px 7px 18px; border-radius: 999px; }
  .cta-input { padding: 0 8px; font-size: 16px; }
  .btn-submit { width: auto; padding: 12px 14px; }

  #sun-toggle { width: 48px; height: 48px; }
  #sun-toggle span { width: 32px; height: 32px; min-width: 0; min-height: 0; }

  .footer-wordmark { font-size: 64px; }
  .footer-badge { font-size: 13px; }
}

/* --- Mobile timeline nav: overflowing, snap-to-centre strip ---------
   On small screens the five chapters no longer cram into a fixed grid.
   The strip runs edge to edge, overflows horizontally and keeps generous
   spacing; tapping (or scrolling to) a chapter snap-centres it, revealing
   the neighbouring links that spill off either edge. Same affordance as
   Deji's mobile nav. */
@media (max-width: 640px) {
  .timeline { width: 100%; }

  .timeline-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .timeline-nav::-webkit-scrollbar { display: none; }

  /* Half-width bookends so the first and last chapters can reach centre. */
  .timeline-nav::before,
  .timeline-nav::after { content: ''; flex: none; width: 50%; }

  .timeline-item { flex: none; scroll-snap-align: center; padding: 0; }
  .timeline-label { font-size: 14px; padding: 6px 16px; }

  /* The marker stops tracking each label and stays pinned to the centre. */
  .timeline-indicator { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}