/* Deforestation campaign system. Tokens first; components below use only tokens. */

@font-face {
  font-family: "DM Sans";
  src: url("/campaign/fonts/dm-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/campaign/fonts/dm-sans-latin-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Trajan Pro";
  src: url("/campaign/fonts/trajan-pro-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Trajan Pro";
  src: url("/campaign/fonts/trajan-pro-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Night: the horror half of the story */
  --ink: #0c0b0b;
  --ink-raised: #151313;
  --ink-card: #1c1918;
  --line: rgba(241, 236, 232, 0.12);
  --line-strong: rgba(241, 236, 232, 0.28);
  --bone: #f1ece8;
  --ash: #b9b3ae;
  --smoke: #8f8883;

  /* Blood: the brand red. --blood for the wordmark, fills and underlines; --ember for red type on dark; --paper-red for red on paper */
  --blood: #d7190e;
  --blood-deep: #a8130a;
  --ember: #ff3b2e; /* same hue as --blood at full saturation: 5.54:1 on ink */

  /* Canopy: hope, used only once the story turns */
  --canopy: #2a7d50; /* white text 5.06:1 (was #2f8a58, 4.29:1); --canopy-deep stays the hover */
  --canopy-deep: #1f6440;
  --leaf: #8fd6a8;

  /* Paper: long reading on the knowledge pages */
  --paper: #f5f1ec;
  --paper-raised: #fffdfa;
  --paper-ink: #1d1a19;
  --paper-muted: #5c5550;
  --paper-line: #e3dbd2;
  --paper-red: #b5150b;
  --paper-line-strong: #bdb2a6;

  /* Surface roles: components read these; .theme-paper and its night islands set them */
  --fg: var(--bone);
  --fg-muted: var(--ash);
  --rule-strong: var(--line-strong);
  --link-line: var(--blood);
  --accent-type: var(--ember);

  --ease-film: cubic-bezier(.2, .7, .2, 1);

  --font-display: "Trajan Pro", "Cinzel", Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  --step-4: clamp(2.4rem, 1.6rem + 3.6vw, 4.25rem);
  --step-5: clamp(2.6rem, 1rem + 7.6vw, 7rem);

  --radius: 10px;
  --radius-pill: 999px;
  --header-h: 68px;
  --wrap: 1180px;
  --measure: 65ch;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font: 400 var(--step-0)/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
body.theme-paper { background: var(--paper); color: var(--paper-ink); }
/* (0,1,1): third-party CSS such as html,body{background:transparent} or body{color:#1d1a19} can no longer repaint the page */
body.theme-dark { background: var(--ink); color: var(--bone); }
.theme-paper {
  --fg: var(--paper-ink);
  --fg-muted: var(--paper-muted);
  --rule-strong: var(--paper-line-strong);
  --link-line: var(--paper-red);
  --accent-type: var(--paper-red);
}
/* Night islands on paper pages take the night roles back; (0,2,0) beats .theme-paper.
   The dialogs and the consent bar sit outside the footer, so they are listed too. Add any new dark block here. */
.theme-paper :is(.site-header, .page-hero, .band, .site-footer, .toc__cta, .callout--dark, .cinema, .modal, .mini-player, .consent) {
  --fg: var(--bone);
  --fg-muted: var(--ash);
  --rule-strong: var(--line-strong);
  --link-line: var(--blood);
  --accent-type: var(--ember);
}
img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  padding: 10px 16px; border-radius: var(--radius);
  background: var(--bone); color: var(--ink); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 32px, 760px); margin-inline: auto; }

/* Type */
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.05;
}
.eyebrow {
  margin: 0 0 14px;
  font: 600 0.78rem/1.2 var(--font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.accent { color: var(--accent-type); }
.hope { color: var(--leaf); }
/* The story turns: accents and link underlines go green once hope enters */
:is(.chapter--hope, #fund, .finale) { --accent-type: var(--leaf); }
:is(.chapter--hope, .ending, .ending-result, .forest-watch, .forest-card, body:not([data-page="404"]) .ending-page) { --link-line: var(--leaf); }
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.1em; }
.prose p:last-child { margin-bottom: 0; }
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--bone); }
.lede.hope { color: var(--leaf); }
.muted { color: var(--ash); }
.fineprint { font-size: var(--step--1); color: var(--smoke); }
.tabular { font-variant-numeric: tabular-nums; }

/* Footnote markers + sources */
.fn {
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  margin-left: 2px;
}
.fn a {
  color: var(--fg-muted);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.fn a:hover { color: var(--fg); }
.source-line { margin-top: 10px; font-size: var(--step--1); color: var(--smoke); }
.source-line a { color: var(--ash); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: 600 1rem/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--blood); color: #fff; }
.btn--primary:hover { background: var(--blood-deep); }
.btn--ghost { background: transparent; border-color: var(--rule-strong); color: var(--fg); }
.btn--ghost:hover { border-color: var(--fg); }
.btn--hope { background: var(--canopy); color: #fff; }
.btn--hope:hover { background: var(--canopy-deep); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 0.9rem; gap: 8px; }
.btn--play { padding-left: 8px; }
.btn__icon {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.btn--sm .btn__icon { width: 26px; height: 26px; }
.btn__icon svg { margin-left: 2px; }
.btn__meta { font-weight: 500; font-variant-numeric: tabular-nums; } /* full white: 5.20:1 on --blood (0.8 opacity was 3.71:1) */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.text-link {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.text-link:hover { text-decoration-color: currentColor; }

/* Header */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  transition: background-color .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
  background: linear-gradient(180deg, rgba(12, 11, 11, .78), rgba(12, 11, 11, 0));
}
.site-header:not(.is-solid) .site-nav a { color: var(--bone); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.site-header.is-solid,
.theme-paper .site-header,
.site-header.menu-open {
  background: rgba(12, 11, 11, 0.94);
  border-bottom-color: var(--line);
  backdrop-filter: blur(10px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
}
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { width: 168px; height: auto; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.site-nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 12px;
  border-radius: var(--radius-pill);
  color: var(--ash);
  font-size: 0.92rem; font-weight: 500;
  text-decoration: none;
}
.site-nav a:hover, .site-nav a[aria-current="true"], .site-nav a[aria-current="page"] { color: var(--bone); }
.site-nav a[aria-current="true"], .site-nav a[aria-current="page"] { background: rgba(241, 236, 232, 0.08); }
.header-cta { flex-shrink: 0; }
.menu-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--bone);
  cursor: pointer;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
  display: block; width: 18px; height: 2px; margin: auto;
  background: currentColor; position: relative; content: "";
  transition: transform .2s ease;
}
.menu-toggle span::before { position: absolute; top: -6px; }
.menu-toggle span::after { position: absolute; top: 6px; }
.menu-open .menu-toggle span { background: transparent; }
.menu-open .menu-toggle span::before { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

.read-progress {
  position: absolute; left: 0; bottom: -1px;
  height: 2px; width: 100%;
  background: var(--blood);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

@media (max-width: 1023px) {
  .menu-toggle { display: inline-grid; place-items: center; }
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    margin: 0;
    padding: 12px 16px 24px;
    background: rgba(12, 11, 11, 0.98);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .menu-open .site-nav { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { width: 100%; min-height: 52px; font-size: 1.05rem; border-radius: var(--radius); }
  .header-cta { display: none; }
  .menu-open .header-cta-mobile { display: flex; }
  .brand img { width: 144px; }
}
.header-cta-mobile { display: none; margin-top: 12px; }

/* Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding: calc(var(--header-h) + 24px) 0 48px;
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
  background: #2b2a2a url("/campaign/img/hero-clearcut-forest.webp") center top / cover no-repeat;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12,11,11,0) 40%, rgba(12,11,11,.55) 68%, var(--ink) 100%);
}
.hero__content { text-align: center; display: grid; justify-items: center; gap: 14px; min-width: 0; }
.hero__content > * { max-width: 100%; }
.hero__eyebrow {
  margin: 0; padding: 6px 14px; border-radius: var(--radius-pill);
  background: rgba(12, 11, 11, .55); color: var(--bone);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(var(--step-5), 8.4vw);
  line-height: 0.95;
  letter-spacing: 0.03em;
  color: var(--blood);
  white-space: nowrap;
  text-shadow: 0 0 2px rgba(12,11,11,.9), 0 4px 28px rgba(12,11,11,.75);
}
/* Home hero: the red wordmark sits on fog of the same luminance (about 1.3:1), so it gets its own feathered ink band (3.8:1).
   The band belongs to the title, so the title's entrance and flicker carry their ground with them.
   Sizes are in em, so it scales with the title; at 8.4vw the feathered ends stay on screen at every width. */
.hero .hero__title { position: relative; isolation: isolate; }
.hero .hero__title::before {
  content: ""; position: absolute; inset: -.22em -1.2em; z-index: -1; pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--ink) 1.1em, var(--ink) calc(100% - 1.1em), transparent);
  filter: blur(.15em);
}
.hero__tagline {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.8rem + 1.6vw, 2.1rem);
  color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,.8);
}
.hero__sub { max-width: 46ch; margin: 0; color: var(--bone); text-shadow: 0 1px 10px rgba(0,0,0,.9); }
.hero__actions { margin-top: 10px; justify-content: center; }
.hero__credit { margin: 0; font-size: var(--step--1); color: var(--ash); text-shadow: 0 1px 8px rgba(0,0,0,.9); }
/* A quiet sound cue next to "Best with sound, in the dark."; the bars rest at uneven heights when motion is off */
.sound-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; margin-right: 10px; vertical-align: -1px; }
.sound-eq i { width: 2px; height: 100%; background: var(--ember); transform-origin: 50% 100%; transform: scaleY(.4); animation: eq 1.6s ease-in-out infinite alternate; }
.sound-eq i:nth-child(2) { transform: scaleY(.85); animation-duration: 1.1s; animation-delay: -.5s; }
.sound-eq i:nth-child(3) { transform: scaleY(.6); animation-duration: 1.9s; animation-delay: -1s; }
/* Pause motion (WCAG 2.2.2): bottom left of the hero; the same switch sits in the footer */
.motion-toggle {
  position: absolute; left: 16px; bottom: 16px; z-index: 1;
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: rgba(12, 11, 11, .55); color: var(--ash); cursor: pointer;
  font: 600 .72rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
}
.motion-toggle:hover { color: var(--bone); border-color: var(--bone); }
.scroll-cue { margin-top: 18px; opacity: .6; }
.scroll-cue circle { animation: cue 2s ease-in-out infinite; }
@keyframes cue { 50% { transform: translateY(9px); opacity: .25; } }

/* Chapter navigation (desktop, right edge) */
.chapter-nav {
  position: fixed; right: 18px; top: 50%; z-index: 90;
  transform: translateY(-50%);
  display: none;
}
.chapter-nav ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.chapter-nav a {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  min-height: 28px;
  color: var(--smoke); text-decoration: none;
  font-size: 0.78rem; letter-spacing: .08em; text-transform: uppercase;
}
.chapter-nav a::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid currentColor;
}
.chapter-nav a span { opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; }
.chapter-nav:hover a span, .chapter-nav a:focus-visible span { opacity: 1; transform: none; }
.chapter-nav a[aria-current="true"] { color: var(--bone); }
.chapter-nav a[aria-current="true"]::after { background: var(--blood); border-color: var(--blood); }
@media (min-width: 1440px) { .chapter-nav.is-on { display: block; } }

/* Chapters */
.chapter { position: relative; padding: clamp(72px, 10vw, 140px) 0; }
.chapter--raised { background: var(--ink-raised); }
.chapter__head { display: grid; gap: 16px; margin-bottom: clamp(32px, 5vw, 56px); }
.chapter__head--center { justify-items: center; text-align: center; }
.chapter__title { font-family: var(--font-display); font-weight: 400; font-size: var(--step-4); line-height: 1.06; letter-spacing: .015em; }
.chapter__title--sm { font-size: var(--step-3); }
.chapter__intro { max-width: 60ch; color: var(--ash); font-size: var(--step-1); margin: 0; }
.chapter__head--center .chapter__intro { margin-inline: auto; }

.split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 1fr; }
  .split--flip > :first-child { order: 2; }
}
.split__media img { width: 100%; border-radius: var(--radius); }

/* The film */
.film-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.film-frame video, .film-frame img { width: 100%; height: 100%; object-fit: cover; }
.film-frame__play {
  position: absolute; inset: 0;
  display: grid; place-items: center; align-content: center; gap: 14px;
  border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.55));
}
.film-frame__button {
  display: grid; place-items: center;
  width: clamp(64px, 9vw, 92px); aspect-ratio: 1; border-radius: 50%;
  background: var(--blood);
  transition: transform .15s ease;
}
.film-frame__button svg { margin-left: 6px; }
.film-frame__play:hover .film-frame__button { transform: scale(1.06); }
.film-frame__label { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; }
/* The inline loop has no audio track: say so, but only while it really plays */
.film-frame__badge {
  position: absolute; top: 14px; left: 14px; z-index: 1; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 10px; border-radius: var(--radius-pill);
  background: rgba(12,11,11,.74); color: var(--bone);
  font: 600 .7rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  opacity: 0; transform: translateY(-4px); transition: opacity .4s ease, transform .4s ease;
}
.film-frame.is-previewing .film-frame__badge { opacity: 1; transform: none; }

.film-layout { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 1000px) { .film-layout { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.film-facts { display: grid; gap: 18px; }
.film-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; font-size: var(--step--1); }
.film-facts dt { color: var(--smoke); }
.film-facts dd { margin: 0; color: var(--bone); }

.film-chapters { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.film-chapters button {
  display: flex; width: 100%; align-items: center; gap: 14px;
  min-height: 48px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: transparent; color: var(--bone); cursor: pointer; text-align: left;
}
.film-chapters button:hover { border-color: var(--line-strong); background: rgba(241,236,232,.04); }
.film-chapters time { color: var(--smoke); font-variant-numeric: tabular-nums; font-size: .9rem; min-width: 3.2em; }

.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.share-row__label { color: var(--ash); font-size: var(--step--1); margin-right: 4px; }
.share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius-pill);
  background: transparent; color: var(--fg);
  font-size: .9rem; font-weight: 500; text-decoration: none; cursor: pointer;
}
.share-btn:hover { border-color: var(--fg); }

/* Persona picker */
.personas { margin-top: clamp(40px, 6vw, 72px); padding: clamp(24px, 4vw, 40px); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.4); background: var(--ink-raised); }
.personas__q { font-family: var(--font-display); font-size: var(--step-2); margin: 0 0 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chip {
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: transparent; color: var(--bone); cursor: pointer; font-weight: 500;
}
.chip:hover { border-color: var(--bone); }
.chip[aria-pressed="true"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.persona-answer { margin-top: 20px; display: grid; gap: 14px; max-width: 62ch; }
.persona-answer p { margin: 0; color: var(--ash); }

/* Crisis */
.counter {
  display: grid; gap: 6px;
  padding: clamp(24px, 4vw, 40px);
  border-radius: calc(var(--radius) * 1.4);
  background: linear-gradient(160deg, #1d0d0b, var(--ink-raised) 60%);
  border: 1px solid var(--line-strong);
}
.counter__label { margin: 0; color: var(--ash); }
/* Trajan, not bold red DM Sans (which reads as an error). Trajan digits share one width, so counting doesn't jitter */
.counter__value {
  margin: 0;
  font: 400 clamp(3rem, 2rem + 6vw, 6.5rem)/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--ember);
}
.counter__unit { margin: 0; font-size: var(--step-1); color: var(--bone); }

.stats { display: grid; gap: 1px; margin-top: clamp(32px, 5vw, 56px); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { padding: 24px; background: var(--ink); display: grid; gap: 6px; align-content: start; }
.stat__value { margin: 0; font: 700 clamp(2rem, 1.5rem + 2vw, 2.8rem)/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--bone); }
.stat__label { margin: 0; color: var(--ash); }
.stat__source { margin: 0; font-size: .8rem; color: var(--smoke); }
.stat__source a { color: inherit; }

.explore { display: grid; gap: 12px; margin-top: 28px; }
@media (min-width: 720px) { .explore { grid-template-columns: repeat(3, 1fr); } }
.explore a {
  display: grid; gap: 4px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; background: rgba(241,236,232,.02);
}
.explore a:hover { border-color: var(--line-strong); background: rgba(241,236,232,.05); }
.explore strong { font-weight: 600; }
.explore span { color: var(--ash); font-size: var(--step--1); }

/* Hope: the turn */
/* Leaf Trajan and bone copy need near-black behind the text column (left on desktop: .split--flip puts the image right) */
.chapter--hope {
  background:
    linear-gradient(90deg, rgba(12,11,11,.85) 0%, rgba(12,11,11,.72) 45%, rgba(12,11,11,.2) 75%, rgba(12,11,11,.1) 100%),
    linear-gradient(180deg, var(--ink) 0%, rgba(12,11,11,.35) 25%, rgba(12,11,11,.35) 75%, var(--ink) 100%),
    url("/campaign/img/rainforest-canopy-birds.webp") center / cover no-repeat;
}
@media (max-width: 899px) {
  .chapter--hope {
    background:
      linear-gradient(180deg, var(--ink) 0%, rgba(12,11,11,.8) 25%, rgba(12,11,11,.82) 80%, var(--ink) 100%),
      url("/campaign/img/rainforest-canopy-birds.webp") center / cover no-repeat;
  }
}
.chapter--hope .eyebrow { color: var(--leaf); }
.hope-points { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.hope-points li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.hope-points svg { color: var(--leaf); margin-top: 3px; }

/* Rewrite the ending */
.endings { display: grid; gap: 14px; }
@media (min-width: 860px) { .endings { grid-template-columns: repeat(3, 1fr); } }
.ending {
  position: relative;
  display: grid; gap: 10px; align-content: start;
  padding: 26px 24px 24px;
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) * 1.4);
  background: var(--ink-raised);
  color: var(--bone); text-align: left; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, background-color .15s ease;
}
.ending:hover { border-color: var(--bone); transform: translateY(-2px); }
.ending[aria-pressed="true"] { border-color: var(--leaf); background: #10201a; }
.ending__mark { width: 40px; height: 40px; color: var(--leaf); }
.ending__title { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; }
.ending__line { margin: 0; color: var(--ash); }
.ending__pick { margin-top: 6px; font-weight: 600; font-size: .9rem; color: var(--leaf); }

.ending-result {
  margin-top: 22px;
  display: grid; gap: clamp(24px, 4vw, 48px);
  padding: clamp(24px, 4vw, 48px);
  border-radius: calc(var(--radius) * 1.4);
  background: linear-gradient(150deg, #0f2219, var(--ink-raised) 65%);
  border: 1px solid rgba(143, 214, 168, .3);
}
@media (min-width: 900px) { .ending-result { grid-template-columns: 1.2fr 1fr; } }
.ending-result__title { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); line-height: 1.1; margin: 0 0 14px; }
.ending-result__steps { margin: 16px 0 0; padding-left: 1.2em; display: grid; gap: 8px; color: var(--bone); }
.ending-result__steps a { color: var(--fg); text-decoration-color: var(--link-line); text-underline-offset: 3px; }

/* Email capture */
.capture { display: grid; gap: 12px; align-content: start; }
.capture__title { margin: 0; font-weight: 600; font-size: var(--step-1); }
.capture__text { margin: 0; color: var(--ash); font-size: .95rem; }
.capture__row { display: flex; flex-wrap: wrap; gap: 8px; }
.text-input {
  flex: 1 1 200px;
  min-height: 48px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: rgba(0,0,0,.35); color: var(--bone);
}
.text-input::placeholder { color: var(--smoke); }
.text-input:focus-visible { outline: 2px solid var(--leaf); outline-offset: 1px; }
.theme-paper .text-input { background: #fff; border-color: var(--paper-line); color: var(--paper-ink); }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: .88rem; color: var(--ash); }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--canopy); }
.check a { color: var(--bone); }
.capture__status { margin: 0; font-size: .92rem; min-height: 1.4em; }
.capture__status[data-state="ok"] { color: var(--leaf); }
.capture__status[data-state="error"] { color: var(--ember); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The fund */
.fund-intro { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 900px) { .fund-intro { grid-template-columns: 1fr 1fr; } }
.benefits { display: grid; gap: 14px; margin-top: clamp(40px, 6vw, 72px); }
@media (min-width: 700px) { .benefits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .benefits { grid-template-columns: repeat(5, 1fr); } }
.benefit {
  display: grid; gap: 12px; align-content: start;
  padding: 24px 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--ink-card);
}
.benefit img { width: 44px; height: 44px; object-fit: contain; }
.benefit h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.25; letter-spacing: .03em; }
.benefit p { margin: 0; font-size: .95rem; color: var(--ash); }

.contact { display: grid; gap: clamp(28px, 4vw, 64px); margin-top: clamp(56px, 8vw, 96px); }
@media (min-width: 960px) { .contact { grid-template-columns: 1fr 1.15fr; align-items: start; } }
.contact__card {
  padding: clamp(22px, 3vw, 36px);
  border-radius: calc(var(--radius) * 1.4);
  background: var(--paper-raised); color: var(--paper-ink);
  /* a paper island on the dark home page: focus rings and links read the paper roles */
  --fg: var(--paper-ink); --fg-muted: var(--paper-muted); --rule-strong: var(--paper-line-strong); --link-line: var(--paper-red);
}
.contact__card h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); margin-bottom: 6px; }
.contact__card .muted { color: var(--paper-muted); }
.wa-alt {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin: 14px 0 6px; padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 1px solid #b8dfc6; background: #eef8f1; color: #14532d;
  font-weight: 600; font-size: .92rem; text-decoration: none;
}
.wa-alt:hover { border-color: #25d366; }
.wa-alt svg { color: #1fa855; }
.form-slot { min-height: 420px; margin-top: 12px; }
.form-slot .hs-form fieldset { max-width: none !important; }
.form-slot .hs-form .hs-form-field { margin-bottom: 14px; }
.form-slot .hs-form label { font-size: .88rem; font-weight: 600; color: var(--paper-ink); }
.form-slot .hs-form .hs-input:not([type="checkbox"]):not([type="radio"]) {
  width: 100% !important; min-height: 46px; padding: 8px 14px;
  border: 1px solid var(--paper-line); border-radius: 8px; background: #fff; color: var(--paper-ink);
}
.form-slot .hs-form textarea.hs-input { min-height: 110px; }
.form-slot .hs-form, .form-slot .hs-form * { font-family: var(--font-body) !important; }
.form-slot .hs-form .hs-button {
  min-height: 50px !important; padding: 0 28px !important; border: 0 !important; border-radius: var(--radius-pill) !important;
  background: var(--blood) !important; color: #fff !important; font-weight: 700 !important; font-size: 1rem !important; cursor: pointer;
}
.form-slot .hs-form .hs-button:hover { background: var(--blood-deep) !important; }
.form-slot .hs-form select.hs-input { appearance: auto; }
.form-slot .hs-error-msgs { margin: 6px 0 0; padding: 0; list-style: none; color: var(--paper-red); font-size: .85rem; }
.form-slot .legal-consent-container, .form-slot .hs-richtext { font-size: .8rem; color: var(--paper-muted); }
.form-slot .hs-form .hs-field-desc { font-size: .8rem; color: var(--paper-muted); }

.quotes { display: grid; gap: 16px; margin-top: clamp(56px, 8vw, 96px); }
@media (min-width: 860px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote {
  margin: 0; display: grid; gap: 16px; align-content: space-between;
  padding: 26px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--ink-raised);
}
.quote blockquote { margin: 0; font-size: 1.05rem; line-height: 1.55; }
.quote figcaption { display: flex; align-items: center; gap: 12px; color: var(--ash); font-size: .9rem; }
.quote figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.quote figcaption strong { display: block; color: var(--bone); letter-spacing: .08em; }

/* FAQ */
.faq-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.faq-tab {
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: transparent; color: var(--ash); cursor: pointer; font-weight: 600;
}
.faq-tab[aria-selected="true"] { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.faq-list { display: grid; gap: 10px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-raised); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 14px 20px;
  cursor: pointer; list-style: none; font-weight: 600; font-size: 1.05rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(var(--bone), var(--bone)) center / 12px 2px no-repeat,
    linear-gradient(var(--bone), var(--bone)) center / 2px 12px no-repeat;
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__body { padding: 0 20px 20px; color: var(--ash); max-width: 72ch; }
.faq-item__body p { margin: 0 0 12px; }
.faq-item__more { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: .88rem; color: var(--smoke); }
.faq-item__more a { color: var(--bone); }
.helpful { display: inline-flex; align-items: center; gap: 6px; }
.helpful button {
  min-height: 32px; padding: 0 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: transparent; color: var(--ash); cursor: pointer; font-size: .85rem;
}
.helpful button:hover { color: var(--bone); border-color: var(--bone); }
.faq-updated { margin-top: 18px; }
.theme-paper .faq-item { background: var(--paper-raised); border-color: var(--paper-line); }
.theme-paper .faq-item summary::after {
  border-color: var(--paper-line);
  background:
    linear-gradient(var(--paper-ink), var(--paper-ink)) center / 12px 2px no-repeat,
    linear-gradient(var(--paper-ink), var(--paper-ink)) center / 2px 12px no-repeat;
}
.theme-paper .faq-item__body { color: var(--paper-ink); }
.article .faq-list { margin-top: 1em; }

/* Finale */
.finale {
  position: relative; text-align: center; padding: clamp(96px, 14vw, 180px) 0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 48%, rgba(12,11,11,.6), rgba(12,11,11,0)),
    linear-gradient(180deg, var(--ink), rgba(12,11,11,.35) 35%, rgba(12,11,11,.55) 75%, var(--ink)),
    url("/campaign/img/rainforest-canopy-birds.webp") center / cover no-repeat;
}
.finale__title { font-family: var(--font-display); font-weight: 400; font-size: var(--step-4); line-height: 1.08; max-width: 18ch; margin-inline: auto; }
.finale__text { margin: 18px auto 30px; font-size: var(--step-1); max-width: 40ch; }

/* Newsletter band */
.forest-watch { display: grid; gap: 24px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: calc(var(--radius) * 1.4); border: 1px solid var(--line); background: var(--ink-raised); }
@media (min-width: 900px) { .forest-watch { grid-template-columns: 1fr 1.1fr; } }
.forest-watch h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); line-height: 1.1; margin-bottom: 10px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: #090808; color: var(--ash); padding: 64px 0 40px; font-size: .95rem; }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-brand img { width: 180px; margin-bottom: 14px; }
.footer-brand p { margin: 0 0 8px; max-width: 34ch; }
.footer-col h2 { font: 600 .78rem/1.2 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--bone); margin-bottom: 14px; }
.footer-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.footer-col a, .footer-col button {
  display: inline-flex; align-items: center; min-height: 36px;
  color: var(--ash); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.footer-col a:hover, .footer-col button:hover { color: var(--bone); }
.footer-legal { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); display: grid; gap: 14px; font-size: .82rem; line-height: 1.6; color: var(--smoke); }
.disclaimer { display: grid; gap: 12px; max-width: 110ch; }
.disclaimer p { margin: 0; }
.disclaimer h2 { font: 600 .78rem/1.2 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-muted); }

/* Floating WhatsApp */
.wa-float {
  position: fixed; right: 18px; bottom: calc(18px + var(--wa-offset, 0px)); z-index: 95;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: bottom .2s ease, opacity .2s ease, transform .2s ease;
}
.wa-float:hover { transform: scale(1.05); }
.wa-float.is-tucked { opacity: 0; pointer-events: none; transform: translateY(12px); }

/* Consent */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
  max-width: 760px; margin-inline: auto;
  display: grid; gap: 14px;
  padding: 20px 22px;
  border-radius: calc(var(--radius) * 1.4);
  border: 1px solid var(--line-strong);
  background: rgba(21, 19, 19, .98);
  color: var(--bone);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  font-size: .93rem;
}
.consent p { margin: 0; color: var(--ash); }
.consent strong { color: var(--bone); }
.consent a { color: var(--bone); }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent__actions .btn { min-height: 46px; }
.consent .btn--choice { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.consent .btn--choice:hover { background: #fff; }

/* Cinema overlay */
.cinema {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0;
  background: #000; color: var(--bone);
}
.cinema::backdrop { background: rgba(0,0,0,.94); }
.cinema[open] { display: grid; place-items: center; animation: cinema-in .45s ease both; }
@keyframes cinema-in { from { opacity: 0; } }
.cinema__stage { position: relative; width: min(100vw, calc(100dvh * 16 / 9)); aspect-ratio: 16 / 9; }
.cinema__stage video { width: 100%; height: 100%; background: #000; }
.cinema__close {
  position: fixed; top: 14px; right: 14px; z-index: 3;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
}
.cinema__close:hover { background: rgba(255,255,255,.26); }

.endcard {
  position: fixed; inset: 0; z-index: 2;
  display: grid; place-items: center; overflow-y: auto;
  padding: 72px 16px 32px;
  background: radial-gradient(ellipse at 50% 30%, #2a1513, #000 72%);
}
.endcard__inner { width: min(100%, 980px); display: grid; gap: 22px; justify-items: center; text-align: center; }
.endcard__kicker { margin: 0; max-width: 40ch; color: var(--ash); }
.endcard__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 1.2rem + 3.5vw, 3.8rem); line-height: 1.05; }
.endcard .endings { width: 100%; }
.endcard .ending { text-align: left; }
.endcard__more { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Cinema: loading, sound pill, Tap for sound, error */
.cinema__loading {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-content: center; justify-items: center; gap: 12px;
  padding: 16px; text-align: center; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.4), rgba(0,0,0,.85) 75%);
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.cinema.is-loading .cinema__loading { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }
.cinema__ring {
  width: 54px; height: 54px; margin-bottom: 6px; border-radius: 50%;
  border: 2px solid rgba(241,236,232,.16); border-top-color: var(--blood);
  animation: cinema-spin .9s linear infinite;
}
.cinema__loading-title { font: 600 .78rem/1.2 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--bone); }
.cinema__loading-hint { font-size: .95rem; color: var(--ash); }
@keyframes cinema-spin { to { transform: rotate(360deg); } }
.cinema:has(.cinema__unmute:not([hidden])) .cinema__loading { display: none; }

.cinema__sound {
  position: fixed; top: 14px; left: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 18px 0 14px; border: 0; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
  font: 600 .78rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  transition: opacity .5s ease, background-color .2s ease;
}
.cinema__sound:hover { background: rgba(255,255,255,.26); }
.cinema__sound-off,
.cinema__sound[aria-pressed="false"] .cinema__sound-on,
.cinema__sound[aria-pressed="false"] .cinema__eq { display: none; }
.cinema__sound[aria-pressed="false"] .cinema__sound-off { display: block; }
.cinema__sound[aria-pressed="false"] { background: var(--blood); animation: sound-nudge 2.2s ease-out infinite; }
.cinema__sound[aria-pressed="false"]:hover { background: var(--blood-deep); }
.cinema.is-idle .cinema__sound[aria-pressed="true"] { opacity: .4; }
.cinema.is-ended .cinema__sound { display: none; }
.cinema__eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.cinema__eq i { width: 3px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: 50% 100%; transform: scaleY(.35); }
.cinema__eq i:nth-child(2) { transform: scaleY(.8); }
.cinema__eq i:nth-child(3) { transform: scaleY(.55); }
.cinema.is-playing .cinema__eq i { animation: eq .8s ease-in-out infinite alternate; }
.cinema.is-playing .cinema__eq i:nth-child(2) { animation-duration: .62s; animation-delay: -.2s; }
.cinema.is-playing .cinema__eq i:nth-child(3) { animation-duration: 1s; animation-delay: -.45s; }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes sound-nudge { 0% { box-shadow: 0 0 0 0 rgba(215,25,14,.6); } 70%, 100% { box-shadow: 0 0 0 14px rgba(215,25,14,0); } }

.cinema__unmute {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 14px;
  padding: 24px 30px; border: 0; border-radius: 18px;
  background: rgba(0,0,0,.66); color: #fff; cursor: pointer;
  font: 600 .82rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase;
}
.cinema__unmute-icon { display: grid; place-items: center; width: 76px; aspect-ratio: 1; border-radius: 50%; background: var(--blood); animation: sound-nudge 2.2s ease-out infinite; }
.cinema__unmute:hover .cinema__unmute-icon { background: var(--blood-deep); }

.cinema__error {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center; gap: 14px;
  padding: 16px; text-align: center; background: rgba(0,0,0,.8);
}
.cinema__error p { margin: 0; color: var(--bone); }
.cinema:has(.cinema__error:not([hidden])) .cinema__sound { display: none; }

/* Phones: the stage is about 220px tall, so overlays stay clear of the native control bar */
@media (max-width: 640px) {
  .cinema__sound { height: 42px; padding: 0 14px 0 12px; }
  .cinema__loading { gap: 8px; padding-bottom: 44px; }
  .cinema__ring { width: 40px; height: 40px; margin-bottom: 2px; }
  .cinema__loading-hint { position: absolute; left: 16px; right: 16px; top: calc(100% + 20px); }
  .cinema__unmute { top: calc(50% - 20px); gap: 10px; padding: 14px 22px; }
  .cinema__unmute-icon { width: 56px; }
}

/* Mini player */
.mini-player {
  position: fixed; left: 16px; bottom: 16px; z-index: 96;
  width: min(360px, calc(100vw - 32px));
  border-radius: var(--radius); overflow: hidden;
  background: #000; border: 1px solid var(--line-strong);
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
}
.mini-player video { width: 100%; aspect-ratio: 16 / 9; }
.mini-player__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; font-size: .82rem; color: var(--ash); }
.mini-player__bar button { min-height: 32px; padding: 0 10px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: transparent; color: var(--bone); cursor: pointer; }

/* Modal (exit intent, certificate) */
.modal {
  width: min(560px, calc(100vw - 32px));
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--line-strong); border-radius: calc(var(--radius) * 1.4);
  background: var(--ink-raised); color: var(--bone);
}
.modal::backdrop { background: rgba(0,0,0,.7); }
.modal__close {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent; color: var(--bone); cursor: pointer;
}
.modal h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); line-height: 1.15; margin: 0 40px 10px 0; }
.modal p { color: var(--ash); }
.modal canvas { width: 100%; height: auto; border-radius: 6px; margin: 14px 0; }

/* Knowledge pages (paper) */
.page-hero { background: var(--ink); color: var(--bone); padding: calc(var(--header-h) + clamp(40px, 7vw, 88px)) 0 clamp(40px, 6vw, 72px); }
.page-hero--image { background-size: cover; background-position: center; position: relative; isolation: isolate; }
.page-hero--image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12,11,11,.55), rgba(12,11,11,.92)); }
.breadcrumbs { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: .85rem; color: var(--smoke); }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; }
.breadcrumbs a { color: var(--ash); text-decoration: none; }
.breadcrumbs a:hover { color: var(--bone); }
.page-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-4); line-height: 1.06; max-width: 22ch; }
.page-hero__dek { margin: 18px 0 0; max-width: 60ch; font-size: var(--step-1); color: var(--ash); }
.page-hero__meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .88rem; color: var(--smoke); }

.page-body { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }
.page-grid { display: grid; gap: 48px; }
@media (min-width: 1040px) { .page-grid { grid-template-columns: minmax(0, 1fr) 280px; } }
.toc { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; font-size: .92rem; }
.toc h2 { font: 600 .75rem/1.2 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--paper-muted); margin-bottom: 12px; }
.toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; border-left: 2px solid var(--paper-line); }
.toc a { display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--paper-muted); text-decoration: none; }
.toc a:hover, .toc a[aria-current="true"] { color: var(--paper-ink); border-left-color: var(--paper-red); }
.toc__cta { margin-top: 24px; padding: 18px; border-radius: var(--radius); background: var(--ink); color: var(--bone); display: grid; gap: 10px; }
.toc__cta p { margin: 0; font-size: .9rem; color: var(--ash); }
@media (max-width: 1039px) { .toc { position: static; order: 2; } .toc ol { display: none; } .toc h2 { display: none; } }

.article { max-width: 72ch; font-size: 1.075rem; }
.article > * + * { margin-top: 1.15em; }
.article h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); line-height: 1.12; margin-top: 2.2em; scroll-margin-top: calc(var(--header-h) + 20px); }
/* The shared disclaimer partial keeps its small label heading inside articles (was 44px ash Trajan on paper, 1.85:1) */
.article .disclaimer h2 { margin-top: 0; font: 600 .78rem/1.2 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-muted); }
.article h3 { font-size: var(--step-1); font-weight: 700; margin-top: 1.8em; }
.article p, .article li { color: var(--paper-ink); }
.article ul, .article ol { padding-left: 1.3em; }
.article li + li { margin-top: .45em; }
.article a { color: var(--fg); text-decoration-color: var(--link-line); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.article strong { font-weight: 700; }
.article .lede { color: var(--paper-ink); font-size: var(--step-1); }
.key-points { padding: 22px 24px; border-radius: var(--radius); background: var(--paper-raised); border: 1px solid var(--paper-line); }
.key-points h2 { margin: 0 0 10px !important; font: 600 .78rem/1.2 var(--font-body) !important; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-muted); }
.key-points ul { margin: 0; }
.callout { padding: 20px 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--paper-line); }
.callout--dark { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.callout--dark p { color: var(--bone); }
.callout--dark a { color: var(--bone); }
.paper-stats { display: grid; gap: 1px; border: 1px solid var(--paper-line); border-radius: var(--radius); overflow: hidden; background: var(--paper-line); }
@media (min-width: 640px) { .paper-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .paper-stats--3 { grid-template-columns: repeat(3, 1fr); } }
.paper-stat { background: var(--paper-raised); padding: 22px; display: grid; gap: 6px; align-content: start; }
.paper-stat__value { margin: 0 !important; font: 700 clamp(1.5rem, 1.1rem + 1.2vw, 2.05rem)/1.1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--paper-red); }
.paper-stat__label { margin: 0 !important; color: var(--paper-ink); }
.paper-stat__source { margin: 0 !important; font-size: .8rem; color: var(--paper-muted); }
.paper-stat__source a { color: inherit; }
.table-wrap { overflow-x: auto; border: 1px solid var(--paper-line); border-radius: var(--radius); background: var(--paper-raised); }
.data-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.data-table th, .data-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--paper-line); vertical-align: top; }
.data-table th { font-weight: 700; background: #f8f4ef; }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tr:last-child td { border-bottom: 0; }
.article figure { margin-inline: 0; }
.article figure img { border-radius: var(--radius); width: 100%; }
.article figcaption { margin-top: 8px; font-size: .85rem; color: var(--paper-muted); }
.sources { margin-top: 3em !important; padding-top: 1.6em; border-top: 1px solid var(--paper-line); font-size: .9rem; }
.sources h2 { font: 600 .78rem/1.2 var(--font-body) !important; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-muted); margin: 0 0 12px !important; }
.sources ol { padding-left: 1.4em; margin: 0; display: grid; gap: 8px; }
.sources li { color: var(--paper-muted); }
.sources li:target { background: #fff3c4; border-radius: 4px; }
.sources a { color: var(--paper-ink); word-break: break-word; text-decoration-color: rgba(29, 26, 25, .35); }
.related { margin-top: 3em !important; }
.related h2 { font: 600 .78rem/1.2 var(--font-body) !important; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-muted); margin: 0 0 12px !important; }
.related-grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
.related-grid a { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--paper-line); border-radius: var(--radius); background: var(--paper-raised); text-decoration: none; color: var(--paper-ink); }
.related-grid a:hover { border-color: var(--paper-ink); }
.related-grid span { font-size: .88rem; color: var(--paper-muted); }
.glossary-list { display: grid; gap: 0; margin: 0; }
.glossary-list dt { font-weight: 700; font-size: 1.1rem; margin-top: 1.4em; scroll-margin-top: calc(var(--header-h) + 20px); }
.glossary-list dd { margin: .4em 0 0; color: var(--paper-ink); }
.az { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.az a { display: grid; place-items: center; min-width: 40px; min-height: 40px; border: 1px solid var(--paper-line); border-radius: 8px; text-decoration: none; color: var(--paper-ink); font-weight: 600; }
.az a:hover { border-color: var(--paper-ink); }

.band { background: var(--ink); color: var(--bone); padding: clamp(56px, 8vw, 96px) 0; }
.band__inner { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .band__inner { grid-template-columns: 1.3fr 1fr; } }
.band h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); line-height: 1.1; }
.band p { color: var(--ash); margin: 12px 0 0; }

/* Quiz */
.quiz { display: grid; gap: 22px; }
.quiz__progress { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.quiz__progress span { display: block; height: 100%; background: var(--leaf); transform-origin: 0 50%; transform: scaleX(0); transition: transform .3s ease; }
.quiz__q { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); line-height: 1.15; margin: 0; }
.quiz__options { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.quiz__options button {
  width: 100%; min-height: 56px; padding: 12px 18px; text-align: left;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--ink-raised); color: var(--bone); cursor: pointer; font-size: 1.02rem;
}
.quiz__options button:hover { border-color: var(--bone); }
.forest-card { display: grid; gap: 18px; padding: clamp(24px, 4vw, 44px); border-radius: calc(var(--radius) * 1.4); border: 1px solid rgba(143, 214, 168, .35); background: linear-gradient(150deg, #0f2219, var(--ink-raised) 70%); }
.forest-card__name { font-family: var(--font-display); font-size: var(--step-4); line-height: 1.02; color: var(--leaf); margin: 0; }
.forest-card dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.forest-card dt { color: var(--smoke); }
.forest-card dd { margin: 0; }

/* Ending landing pages */
.ending-page { min-height: 100svh; display: grid; align-items: center; padding: calc(var(--header-h) + 40px) 0 64px; background: radial-gradient(ellipse at 50% 20%, #13261c, var(--ink) 70%); }

/* Motion */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .hero { align-items: center; }
  .hero__media { background-position: 50% 0; background-size: auto 78%; background-color: #2b2a2a; }
  /* Phones centre the copy on the lightest fog, so it gets an edge-to-edge ink scrim (tagline worst pixel 1.4 to 5.5:1, sub 2.9 to 7.5:1).
     The -16px sides cancel the .wrap gutter; it fades in over 44px at the top and out over 56px at the bottom. */
  .hero__content { position: relative; isolation: isolate; }
  .hero__content::before {
    content: ""; position: absolute; inset: 0 -16px -56px; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(12,11,11,0), rgba(12,11,11,.55) 44px, rgba(12,11,11,.55) calc(100% - 56px), rgba(12,11,11,0));
  }
  .hero__tagline { font-size: 1.3rem; font-weight: 700; letter-spacing: .02em; text-wrap: balance; }
  .consent__actions { grid-template-columns: 1fr; }
  .btn { width: auto; }
  .chapter { padding: 64px 0; }
}

@media print {
  .site-header, .chapter-nav, .wa-float, .consent, .mini-player, .toc__cta, .band, .motion-toggle { display: none !important; }
  body, body.theme-paper, body.theme-dark { background: #fff; color: #000; }
  .page-hero { background: #fff; color: #000; padding: 0 0 24px; }
  .page-hero, .theme-paper .page-hero { --fg: var(--paper-ink); --fg-muted: var(--paper-muted); }
}

/* Homepage sources */
.home-sources-wrap { padding-top: 0; }
.home-sources { padding-top: 28px; border-top: 1px solid var(--line); color: var(--smoke); }
.home-sources h2 { font: 600 .78rem/1.2 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--ash); margin: 0 0 12px; }
.home-sources ol { padding-left: 1.4em; margin: 0; display: grid; gap: 8px; font-size: .88rem; }
.home-sources a { color: var(--ash); }
.home-sources li:target { color: var(--bone); }

/* Knowledge-page helpers */
.article ul.az { padding-left: 0; }
.article ul.az li + li { margin-top: 0; }
.press-stills { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.press-stills figure { margin: 0; }
.press-stills img { border-radius: 8px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.press-stills figcaption { font-size: .82rem; }
.table-note { margin-top: .5em !important; color: var(--paper-muted); }
[data-quiz-stage] { display: grid; gap: 18px; }
[data-quiz-stage] .eyebrow { margin: 0; }

/* ==========================================================================
   Motion: the projector. Above the fold a lamp strikes, fog lifts off the
   three reviews, the title is pulled into focus, ash falls and embers rise.
   Further down: chapter titles focus in, the counter rushes, the forest turns
   from rust to green. Only transform, opacity and filter animate, and every
   element rests in its final readable state. With prefers-reduced-motion:
   reduce nothing in this block applies and the hero layers are not rendered.
   html.motion-off (the Pause motion switch) stops all of it.
   ========================================================================== */
.hero__mist, .hero__veil, .hero__ash { display: none; }
.count { display: inline-block; text-align: right; }

@media (prefers-reduced-motion: no-preference) {
  /* --- Hero: the camera creeps in once the title card has landed (starts at scale 1, so the first paint is untouched) --- */
  .hero__media {
    transform-origin: 50% 15%;
    animation: hero-push 40s ease-in-out 1.2s infinite alternate;
  }
  /* Ambient layers (grain, mist, ash) render only after campaign.js adds .is-live, so they cost nothing at first paint */
  .hero.is-live .hero__media::before {
    content: ""; position: absolute; inset: -12%; z-index: 1; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 .6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .1;
    animation: hero-grain .8s steps(1, end) infinite, fade-in 2s ease backwards;
  }
  /* The projector lamp: strikes on in the first second, stutters now and then */
  .hero__media::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: #050404;
    opacity: 0;
    animation: hero-lamp 1.1s linear backwards, hero-stutter 9s steps(1, end) 3s infinite;
  }

  /* Mist: two fog banks drifting in opposite directions, masked to the frame edges so the text column stays as clear as the photo */
  .hero.is-live .hero__mist { display: block; animation: fade-in 2.5s ease backwards; }
  .hero__mist {
    position: absolute; inset: 0; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .1) 22%, rgba(0, 0, 0, .1) 78%, #000);
    mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .1) 22%, rgba(0, 0, 0, .1) 78%, #000);
  }
  .hero__fog {
    position: absolute; left: 0; width: 200%;
    background-repeat: repeat-x; background-size: 50% 100%;
  }
  .hero__fog--far {
    top: 26%; height: 48%;
    background-image:
      radial-gradient(34% 60% at 25% 55%, rgba(206, 204, 201, .55), rgba(206, 204, 201, 0) 70%),
      radial-gradient(28% 50% at 64% 42%, rgba(206, 204, 201, .45), rgba(206, 204, 201, 0) 70%),
      radial-gradient(14% 40% at 90% 62%, rgba(206, 204, 201, .4), rgba(206, 204, 201, 0) 70%);
    animation: fog-drift 110s linear infinite, fog-breathe 14s ease-in-out infinite alternate;
  }
  .hero__fog--near {
    top: 58%; height: 46%;
    background-image:
      radial-gradient(30% 55% at 30% 60%, rgba(214, 211, 207, .5), rgba(214, 211, 207, 0) 70%),
      radial-gradient(36% 45% at 72% 50%, rgba(214, 211, 207, .42), rgba(214, 211, 207, 0) 70%);
    animation: fog-drift 70s linear infinite reverse, fog-breathe 10s ease-in-out -5s infinite alternate;
  }

  /* Fog over the three one-star reviews (baked into the photo), lifting one by one like title cards */
  .hero__veil { display: block; position: absolute; inset: 0 0 auto; height: 36%; pointer-events: none; }
  .hero__veil i {
    position: absolute; top: 0; bottom: 0; width: 44%;
    background: radial-gradient(closest-side, rgb(var(--fog)) 62%, rgba(var(--fog), 0));
    opacity: 0;
    animation: veil-lift .7s var(--ease-film) backwards;
  }
  .hero__veil i:nth-child(1) { --fog: 169, 173, 176; left: -5%; animation-delay: .15s; }
  .hero__veil i:nth-child(2) { --fog: 179, 182, 184; left: 25%; width: 50%; animation-delay: .32s; }
  .hero__veil i:nth-child(3) { --fog: 152, 157, 160; left: 61%; animation-delay: .49s; }
  @media (max-aspect-ratio: 1/1) {
    .hero__veil i:nth-child(2) { left: -40%; width: 180%; }
    .hero__veil i:nth-child(1), .hero__veil i:nth-child(3) { display: none; }
  }

  /* Ash and embers, drawn by campaign.js */
  .hero__ash { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2s ease; }
  .hero.is-live .hero__ash { opacity: 1; }

  /* --- Hero: the title card. The title's ink band is its ::before, so it focuses in and flickers with it --- */
  body[data-page="home"] .site-header { animation: fade-in .7s ease .5s backwards; }
  .hero__eyebrow { animation: rise-in .6s var(--ease-film) .1s backwards; }
  .hero__title { animation: title-focus 1.05s cubic-bezier(.3, .6, .3, 1) backwards, title-flicker 11s steps(1, end) 5s infinite; }
  .hero__tagline { animation: rise-soft .7s var(--ease-film) .42s backwards; }
  .hero__sub { animation: rise-in .6s var(--ease-film) .56s backwards; }
  .hero__actions .btn--ghost { animation: rise-in .5s var(--ease-film) .62s backwards; }
  .hero__actions .btn--play { animation: rise-in .5s var(--ease-film) .74s backwards, heartbeat 3.2s ease-in-out 2s infinite; }
  .hero__actions .btn--play:hover, .hero__actions .btn--play:focus-visible { animation-play-state: running, paused; }
  .hero__credit, .hero .scroll-cue, .motion-toggle { animation: fade-in .6s ease .8s backwards; }

  /* A pulse rings out of the play icon on every first beat */
  .hero .btn--play .btn__icon, .band .btn--play .btn__icon, .film-frame__button { position: relative; }
  .hero .btn--play .btn__icon::after, .band .btn--play .btn__icon::after, .film-frame__button::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    border: 2px solid rgba(255, 255, 255, .75); opacity: 0;
  }
  .hero .btn--play .btn__icon::after { animation: heart-ring 3.2s var(--ease-film) 2s infinite; }
  .band .btn--play .btn__icon::after { animation: heart-ring 3.2s var(--ease-film) infinite; }

  .consent { animation: rise-in .45s var(--ease-film) backwards; }
  .wa-float { animation: fade-in .6s ease 1.2s backwards; }

  /* Scrolling away: the photo sinks, the title card recedes (browsers without scroll timelines skip this) */
  @supports (animation-timeline: view()) {
    .hero { view-timeline: --hero block; }
    .hero__media {
      animation: hero-push 40s ease-in-out 1.2s infinite alternate, hero-sink linear both;
      animation-timeline: auto, --hero;
      animation-range: normal, exit 0% exit 100%;
    }
    .hero__content {
      animation: hero-recede linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 65%;
    }
  }

  /* --- Knowledge pages and /film/: the dark page hero gets the same title card --- */
  .page-hero h1 { transform-origin: 0 50%; animation: focus-in .9s var(--ease-film) backwards; }
  .page-hero .breadcrumbs { animation: fade-in .5s ease backwards; }
  .page-hero__dek { animation: rise-in .6s var(--ease-film) .25s backwards; }
  .page-hero__meta { animation: rise-in .6s var(--ease-film) .35s backwards; }

  @media (max-width: 640px) {
    .hero__media { transform-origin: 50% 6%; --push: 1.015; }
    .hero__fog--far { display: none; }
  }

  /* --- Chapter titles: a focus pull, the red words land a beat later. Hidden states switch instantly; only the way in animates --- */
  .reveal:not(.is-in) .chapter__title { opacity: 0; filter: blur(10px); translate: 0 .3em; }
  .reveal:not(.is-in) .chapter__title .accent { opacity: 0; filter: blur(8px); }
  .reveal.is-in .chapter__title { transition: opacity .9s ease .12s, filter 1.1s var(--ease-film) .12s, translate 1.1s var(--ease-film) .12s; }
  .reveal.is-in .chapter__title .accent { transition: opacity .8s ease .6s, filter 1s var(--ease-film) .6s; }

  /* --- The crisis: a one-second sweep under the counter (485 trees each pass) --- */
  .counter { position: relative; overflow: hidden; }
  .counter::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--blood); transform-origin: 0 50%; scale: 0 1;
  }
  .counter.is-in::after { animation: counter-sweep 1s linear infinite; }

  .reveal:not(.is-in) .stat > * { opacity: 0; translate: 0 14px; }
  .reveal.is-in .stat > * { transition: opacity .6s ease, translate .8s var(--ease-film); }
  .reveal.is-in .stat:nth-child(2) > * { transition-delay: .12s; }
  .reveal.is-in .stat:nth-child(3) > * { transition-delay: .24s; }

  /* --- The film: the frame's lamp strikes when it scrolls in --- */
  .film-frame::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
  .film-frame.m:not(.is-in)::after { opacity: .85; }
  .film-frame.is-in::after { animation: frame-lamp 1.3s linear backwards; }
  .film-frame.is-in .film-frame__button::after { animation: heart-ring 3.2s var(--ease-film) 1.4s infinite; }

  /* --- The turn: the forest comes back from rust to green, the cure turns green --- */
  .chapter--hope { isolation: isolate; }
  .chapter--hope::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: inherit;
    filter: grayscale(1) sepia(.8) hue-rotate(-28deg) saturate(2.6) brightness(.5) contrast(1.15);
    opacity: 0;
  }
  @supports (animation-timeline: view()) {
    .chapter--hope { view-timeline: --turn block; }
    .chapter--hope::before { animation: turn-dawn linear both; animation-timeline: --turn; animation-range: entry 15% entry 90%; }
  }
  @supports not (animation-timeline: view()) {
    .chapter--hope.m::before { opacity: 1; }
    .chapter--hope.m.is-in::before { opacity: 0; transition: opacity 2.6s ease .3s; }
  }
  .chapter--hope .reveal:not(.is-in) .chapter__title .accent { filter: hue-rotate(-135deg) saturate(5) brightness(.8) contrast(1.4); }
  .chapter--hope .reveal.is-in .chapter__title .accent { transition: opacity .7s ease .45s, filter 2s ease-in-out 1.5s; }
  .read-progress::after { content: ""; position: absolute; inset: 0; background: var(--canopy); opacity: 0; transition: opacity .8s ease; }
  .is-turned .read-progress::after { opacity: 1; }
  .is-turned .chapter-nav a[aria-current="true"]::after { background: var(--canopy); border-color: var(--canopy); }

  /* Floating islands drift (home only; /film/ has a poster in .split__media); with scroll timelines they also move against the scroll */
  [data-page="home"] .split__media img, .contact > div > img { animation: island-bob 7s ease-in-out infinite alternate; }
  @supports (animation-timeline: view()) {
    [data-page="home"] .split__media img {
      animation: island-bob 7s ease-in-out infinite alternate, island-drift linear both;
      animation-timeline: auto, view();
      animation-range: normal, cover 0% cover 100%;
    }
  }
  .benefits > .reveal.is-in:nth-child(2), .quotes > .reveal.is-in:nth-child(2) { transition-delay: .08s; }
  .benefits > .reveal.is-in:nth-child(3), .quotes > .reveal.is-in:nth-child(3) { transition-delay: .16s; }
  .benefits > .reveal.is-in:nth-child(4) { transition-delay: .24s; }
  .benefits > .reveal.is-in:nth-child(5) { transition-delay: .32s; }

  /* --- Your ending: the three cards are dealt; a chosen ending sprouts --- */
  .endings.m:not(.is-in) .ending { opacity: 0; }
  .endings.is-in .ending, .endcard:not([hidden]) .ending { animation: deal .8s var(--ease-film) backwards; }
  .endings .ending:nth-child(1) { --tilt: -2.5deg; }
  .endings .ending:nth-child(2) { animation-delay: .12s; }
  .endings .ending:nth-child(3) { --tilt: 2.5deg; animation-delay: .24s; }
  .endcard .ending:nth-child(1) { animation-delay: .45s; }
  .endcard .ending:nth-child(2) { animation-delay: .57s; }
  .endcard .ending:nth-child(3) { animation-delay: .69s; }
  .endcard:not([hidden]) .endcard__kicker { animation: rise-in .6s var(--ease-film) backwards; }
  .endcard:not([hidden]) .endcard__title { animation: focus-in .9s var(--ease-film) .15s backwards; }
  .ending-result:not([hidden]) { animation: rise-in .6s var(--ease-film) backwards; }
  .ending[aria-pressed="true"] .ending__mark { transform-origin: 50% 90%; animation: sprout .8s cubic-bezier(.16, 1, .3, 1) backwards; }

  /* --- The finale: the canopy drifts, the happy ending focuses in. Same layers as the static .finale, split so the photo can move --- */
  .finale { isolation: isolate; overflow: hidden; background: var(--ink); }
  .finale::before {
    content: ""; position: absolute; inset: -10% 0; z-index: -2;
    background: url("/campaign/img/rainforest-canopy-birds.webp") center / cover no-repeat;
  }
  .finale::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
      radial-gradient(ellipse 60% 45% at 50% 48%, rgba(12,11,11,.6), rgba(12,11,11,0)),
      linear-gradient(180deg, var(--ink), rgba(12,11,11,.35) 35%, rgba(12,11,11,.55) 75%, var(--ink));
  }
  @supports (animation-timeline: view()) {
    .finale { view-timeline: --finale block; }
    .finale::before { animation: finale-drift linear both; animation-timeline: --finale; animation-range: cover 0% cover 100%; }
  }
  .finale.m:not(.is-in) .finale__title { opacity: 0; filter: blur(12px); }
  .finale.m:not(.is-in) .finale__text { opacity: 0; translate: 0 12px; }
  .finale.is-in .finale__title, .finale.is-in .finale__text { transition: opacity 1s ease, filter 1.2s var(--ease-film), translate 1.2s var(--ease-film); }
  .finale.is-in .finale__text { transition-delay: .35s; }
  .finale .btn--hope { position: relative; }
  .finale .btn--hope::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
    border: 2px solid var(--leaf); opacity: 0;
  }
  .finale.is-in .btn--hope::after { animation: hope-breathe 3.6s ease-out 1.4s infinite; }
}

/* Pause motion: [data-motion-toggle] sets html.motion-off. Every animation outside the film player stops and rests in its final state */
html.motion-off :not(.cinema, .cinema *),
html.motion-off :not(.cinema *)::before,
html.motion-off :not(.cinema *)::after { animation: none !important; }
html.motion-off .hero__ash, html.motion-off .hero__mist { display: none; }

@keyframes hero-push { to { scale: var(--push, 1.06); } }
@keyframes hero-sink { to { translate: 0 18%; } }
@keyframes hero-recede { to { opacity: 0; translate: 0 -8vh; } }
@keyframes hero-grain {
  0% { translate: 0 0; } 20% { translate: -4% 3%; } 40% { translate: 3% -5%; } 60% { translate: -6% -2%; } 80% { translate: 5% 4%; }
}
@keyframes hero-lamp {
  0% { opacity: .9; } 10% { opacity: .62; } 15% { opacity: .85; } 27% { opacity: .38; } 32% { opacity: .58; } 58% { opacity: .14; } 100% { opacity: 0; }
}
@keyframes hero-stutter {
  0%, 92.8%, 94.4%, 100% { opacity: 0; } 92% { opacity: .14; } 93.6% { opacity: .08; }
}
@keyframes fog-drift { from { translate: 0 0; } to { translate: -50% 0; } }
@keyframes fog-breathe { from { opacity: .45; } to { opacity: .9; } }
@keyframes veil-lift { from { opacity: 1; } to { opacity: 0; translate: 4% -6%; scale: 1.2; } }
@keyframes title-focus {
  0% { opacity: .22; filter: blur(14px); scale: 1.06; }
  55% { opacity: .92; filter: blur(2px); }
  63% { opacity: .55; }
  71% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; filter: blur(0); scale: 1; }
}
@keyframes title-flicker {
  0%, 94.4%, 95.6%, 100% { opacity: 1; } 93.6% { opacity: .55; } 95% { opacity: .75; }
}
@keyframes focus-in { from { opacity: .2; filter: blur(10px); scale: 1.03; } }
@keyframes rise-in { from { opacity: 0; translate: 0 14px; } }
@keyframes rise-soft { from { opacity: 0; filter: blur(6px); translate: 0 8px; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes heartbeat {
  0%, 30%, 100% { scale: 1; } 7% { scale: 1.045; } 14% { scale: 1; } 20% { scale: 1.03; }
}
@keyframes heart-ring { 0% { opacity: .8; scale: 1; } 32%, 100% { opacity: 0; scale: 2.1; } }
@keyframes counter-sweep { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes frame-lamp {
  0% { opacity: .85; } 12% { opacity: .5; } 18% { opacity: .8; } 34% { opacity: .3; } 40% { opacity: .5; } 70% { opacity: .08; } 100% { opacity: 0; }
}
@keyframes turn-dawn { from { opacity: 1; } to { opacity: 0; } }
@keyframes island-bob { from { transform: translateY(-6px) rotate(-.5deg); } to { transform: translateY(6px) rotate(.4deg); } }
@keyframes island-drift { from { translate: 0 9%; } to { translate: 0 -9%; } }
@keyframes deal { from { opacity: 0; translate: 0 40px; rotate: var(--tilt, 0deg); } }
@keyframes sprout { from { opacity: .2; scale: .3; } }
@keyframes finale-drift { from { translate: 0 -7%; scale: 1.06; } to { translate: 0 7%; scale: 1; } }
@keyframes hope-breathe { 0% { opacity: .6; scale: 1; } 70%, 100% { opacity: 0; scale: 1.12 1.5; } }