/* =========================================================================
   BOS Australia — "Return to the Canopy" homepage
   Single-theme by design: every ground and colour is painted explicitly.
   Sections are numbered top to bottom, the same order as index.html.
   ====================================================================== */

/* ------------------------------------------------------------ 0. tokens */
:root {
  /* brand palette — shared with every other BOSA build */
  --white: #FFFFFF;
  --ember: #D4551F;        /* the logo orange: accents, markers, eyebrows */
  --ember-deep: #A83D12;
  --brick: #8B1A1A;        /* donate, urgency */
  --brick-deep: #6B1010;
  --leaf: #6FC078;         /* highlights on dark ground, stat numerals */
  --forest: #0B8043;       /* the working green */
  --forest-deep: #076A36;
  --canopy: #06231A;       /* deepest forest ground */
  --canopy-2: #0A3324;

  /* neutrals, tinted green so they read as chosen */
  --ink: #14211B;
  --ink-soft: #4C5D54;
  --ink-faint: #64766C;
  --rule: #E0E7E1;
  --wash: #F3F7F3;

  /* layout */
  --shell: min(1240px, calc(100% - 3rem));
  --nav-h: 84px;
  --radius: 8px;

  /* depth */
  --shadow-raised: 0 2px 5px rgba(20, 33, 27, .05), 0 1px 2px rgba(20, 33, 27, .04);
  --shadow-float: 0 20px 46px rgba(20, 33, 27, .13);
  --shadow-overlay: 0 28px 70px rgba(20, 33, 27, .17);

  /* the tree-ring motif geometry */
  --ring-w: min(780px, 88vw);
  --ring-cut: 220px;
  --ring-right: -14%;
  --act-ring-w: min(640px, 72vw);
  --act-ring-cut: clamp(90px, 16vw, 190px);
  --act-ring-left: -10%;

  /* how far the take-action reel drops past its own section into the green */
  --reel-drop: clamp(170px, 24vw, 340px);

  /* type */
  --f-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --f-body: "Newsreader", Georgia, "Times New Roman", serif;
  --f-util: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* brand artwork used as alpha masks, so one file takes any colour */
  --img-hands: url("../img/brand/hands-mask.webp");
  --img-mark: url("../img/brand/mark-mask.webp");
  --img-rings: url("../img/brand/ringsfull-mask.webp");
  --img-treerings: url("../img/brand/treerings-mask.webp");
}

/* ------------------------------------------------------------- 1. base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: clamp(1.06rem, .4vw + .98rem, 1.2rem);
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: hidden would make body a scroll container */
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.022em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }

:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell { width: var(--shell); margin-inline: auto; }

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

.skip {
  position: absolute; top: -70px; left: 16px; z-index: 999;
  background: var(--white); color: var(--forest);
  font-family: var(--f-util); font-weight: 700; font-size: .9rem;
  padding: 10px 18px; border-radius: 0 0 8px 8px; text-decoration: none;
}
.skip:focus { top: 0; }

section[id], footer[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }

/* -------------------------------------------------------- 2. type roles */
.eyebrow {
  font-family: var(--f-util);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: currentColor;
  opacity: .55;
}
.eyebrow--ember { color: var(--ember); }
.eyebrow--forest { color: var(--forest); }
.eyebrow--leaf { color: var(--leaf); }
.eyebrow--peach { color: #F2A88F; }
.eyebrow--mint { color: #BFE8CC; }

.h-sec { font-size: clamp(2.3rem, 5vw, 4.05rem); }

.sec-head { position: relative; z-index: 2; max-width: 62ch; }
.sec-head .h-sec { margin-top: 1rem; }
.sec-head .lede { margin-top: 1.2rem; }

/* Marker highlight. One phrase per passage — it works by being rare. */
.mark {
  background: var(--leaf);
  color: var(--ink);
  padding: .02em .3em .14em;
  margin: 0 -.06em;
  border-radius: 2px;
  font-style: normal;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  max-width: 100%;
}
.mark--leaf { background: var(--leaf); color: var(--ink); }
.mark--brick { background: var(--brick); color: var(--white); }
.mark--orange { background: var(--ember); color: var(--white); }
.lede .mark, .hero__sub .mark { font-weight: 500; }

.lede {
  font-size: clamp(1.18rem, .75vw + 1.05rem, 1.46rem);
  line-height: 1.58;
  color: var(--ink-soft);
  max-width: 60ch;
  font-weight: 300;
}
.on-dark .lede { color: #BFD3C6; }
.muted { color: var(--ink-soft); }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--f-util);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--forest);
  text-decoration: none;
}
.textlink .arw { transition: transform .18s ease; }
.textlink:hover .arw { transform: translateX(4px); }

/* ----------------------------------------------------------- 3. controls */
.btn {
  font-family: var(--f-util);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .86rem 1.5rem;
  border-radius: 4px;
  border: 2px solid transparent;
  color: var(--white);
  background: var(--ember);
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--ember-deep); transform: translateY(-2px); }
.btn--lg { padding: 1rem 1.7rem; font-size: .82rem; }
.btn--sm { padding: .62rem .95rem; font-size: 0.72rem; }
.btn--forest { background: var(--forest); }
.btn--forest:hover { background: var(--forest-deep); }
.btn--brick { background: var(--brick); }
.btn--brick:hover { background: var(--brick-deep); }
.btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .55); color: var(--white); }
.btn--ghost:hover { background: rgba(255, 255, 255, .13); border-color: var(--white); }
.btn--outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--wash); }
.btn .arw { transition: transform .18s ease; }
.btn:hover .arw { transform: translateX(4px); }

.arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, opacity .18s ease;
}
.arrow svg { width: 20px; height: 20px; }
.arrow:hover { background: var(--wash); border-color: var(--ink-faint); }
.arrow[aria-disabled="true"] { opacity: .3; pointer-events: none; }
.arrows { display: flex; gap: .4rem; }

.chip {
  font-family: var(--f-util);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: .5rem .95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.chip:hover { border-color: var(--ink-faint); }
.map__filters .chip { padding: .58rem 1.05rem; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tone, currentColor); }
.chip[aria-pressed="true"] { color: var(--white); background: var(--canopy-2); border-color: var(--canopy-2); }

/* --------------------------------------------------------------- 4. nav */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  color: var(--white);
  background: transparent;
  transition: background-color .3s ease, box-shadow .3s ease, color .2s ease;
}
/* legibility over the hero photograph before the bar turns solid */
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 -40px 0;
  background: linear-gradient(180deg, rgba(6, 35, 26, .62), rgba(6, 35, 26, 0));
  pointer-events: none;
  transition: opacity .3s ease;
}
.nav--solid {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--rule), var(--shadow-raised);
}
.nav--solid::before { opacity: 0; }

.nav__in {
  position: relative;
  width: 100%;
  max-width: 1600px;
  padding-inline: clamp(1rem, 2.5vw, 2.5rem);
  margin-inline: auto;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.logo { display: flex; align-items: center; flex: none; text-decoration: none; }
.logo img { height: 54px; width: auto; }
.nav:not(.nav--solid) .logo__dark { display: none; }
.nav--solid .logo__light { display: none; }

/* the nav takes the free space and the menu sits centred in it */
.nav__in > nav { flex: 1 0 auto; display: flex; justify-content: center; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav__links > li > a {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .98rem;
  letter-spacing: .015em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  padding: .4rem 0;
  position: relative;
  white-space: nowrap;
}
.nav__links > li > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.nav__links > li > a:hover::after,
.mm.open > a::after { transform: scaleX(1); }

.nav__acts { display: flex; align-items: center; gap: .55rem; flex: none; }
.nav__acts .btn { padding: .7rem 1.05rem; font-size: .72rem; }
.nav .btn--outline { border-color: rgba(255, 255, 255, .5); color: var(--white); }
.nav .btn--outline:hover { background: rgba(255, 255, 255, .12); }
.nav--solid .btn--outline { border-color: var(--ink); color: var(--ink); }
.nav--solid .btn--outline:hover { background: var(--wash); }

.iconbtn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 4px;
  background: rgba(255, 255, 255, .06);
  color: inherit;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.iconbtn:hover { background: rgba(255, 255, 255, .16); }
.nav--solid .iconbtn { border-color: var(--rule); background: var(--white); }
.nav--solid .iconbtn:hover { background: var(--wash); color: var(--ember); }
.burger { display: none; }

.chev {
  width: 9px; height: 6px; flex: none;
  color: currentColor; opacity: .7;
  transition: transform .2s ease, opacity .2s ease;
}

/* ---- the Orangutans menu, hung off the brand mark ---- */
.om { position: relative; display: flex; align-items: center; flex: none; }
.om__trig {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .45rem; border-radius: 6px; text-decoration: none;
  transition: background-color .18s ease;
}
.om__trig:hover { background: rgba(255, 255, 255, .12); }
.nav--solid .om__trig:hover { background: var(--wash); }
.om__mark { width: 44px; height: auto; transition: transform .25s ease; }
.om__trig:hover .om__mark { transform: scale(1.06); }
.om.open .chev { transform: rotate(180deg); color: var(--ember); opacity: 1; }

.om__panel {
  position: absolute; left: 0; top: 100%;
  padding-top: 12px;
  z-index: 95;
  width: min(92vw, 560px);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  color: var(--ink);
}
.om.open .om__panel { opacity: 1; visibility: visible; transform: none; }
.om__card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: var(--shadow-overlay);
  padding: 1.4rem;
}
.om__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--rule); padding-bottom: .9rem; margin-bottom: 1rem;
}
.om__chips { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.om__chip {
  font-family: var(--f-util); font-weight: 800; font-size: 0.72rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ember); background: rgba(212, 85, 31, .1);
  border-radius: 3px; padding: .25rem .5rem;
}
.om__sub { font-family: var(--f-util); font-weight: 700; font-size: 0.72rem; letter-spacing: .09em; color: var(--ink-faint); }
.om__head h3 { font-size: 1.4rem; margin-top: .4rem; }
.om__body { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.3rem; }
.om__grp + .om__grp { margin-top: .9rem; border-top: 1px solid var(--rule); padding-top: .8rem; }
.om__grp h4 {
  font-family: var(--f-util); font-weight: 800; font-size: 0.72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--forest); margin-bottom: .4rem;
}
.om__grp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .05rem; }
.om__grp a {
  display: block; padding: .4rem .45rem; border-radius: 4px;
  font-family: var(--f-display); font-weight: 700; font-size: 1rem;
  color: var(--ink); text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.om__grp a:hover { background: var(--wash); color: var(--ember); }
.om__feat { border: 1px solid var(--rule); border-radius: 6px; padding: .7rem; display: flex; flex-direction: column; gap: .5rem; }
.om__thumb { position: relative; display: block; aspect-ratio: 4/3; border-radius: 4px; overflow: hidden; background: var(--forest); }
.om__thumb img { width: 100%; height: 100%; object-fit: cover; }
.om__feat h5 { font-family: var(--f-display); font-weight: 800; font-size: 1rem; color: var(--ink); margin: 0; }
.om__feat p { font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }
.om__feat .btn { margin-top: auto; }

/* ---- mega menu panels (built by main.js from MEGA_NAV) ---- */
.nav__links li.mm { position: static; }
.mm__trig { display: inline-flex; align-items: center; gap: .4rem; }
.mm.open .chev { transform: rotate(180deg); color: var(--ember); opacity: 1; }

.mm__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  padding-top: 12px;                   /* hover bridge */
  z-index: 90;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  color: var(--ink);
}
.mm.open .mm__panel { opacity: 1; visibility: visible; transform: none; }
.mm__card {
  position: relative; overflow: hidden;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: var(--shadow-overlay);
  padding: clamp(1.2rem, 1.8vw, 1.75rem);
  max-width: min(980px, 100%);
  margin-inline: auto;
}
.mm__rings {
  position: absolute; top: -58%; right: -6%;
  width: min(560px, 52%);
  opacity: .07; pointer-events: none;
  color: var(--accent, var(--forest));
}
.mm__head {
  position: relative; z-index: 2;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding-bottom: 1rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--rule);
}
.mm__title {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.35rem, 1.9vw, 1.85rem); letter-spacing: -.022em;
  color: var(--accent, var(--forest)); text-decoration: none;
  display: inline-flex; align-items: center; gap: .5rem;
}
.mm__title .arw { transition: transform .18s ease; }
.mm__title:hover .arw { transform: translateX(4px); }
.mm__all {
  font-family: var(--f-util); font-weight: 800; font-size: 0.72rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-faint); text-decoration: none; white-space: nowrap;
}
.mm__all:hover { color: var(--accent, var(--ember)); }
.mm__body {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr minmax(220px, 260px);
  gap: clamp(1.2rem, 1.8vw, 1.8rem);
}
.mm__col h4 {
  font-family: var(--f-util); font-weight: 800; font-size: .75rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink);
  padding-bottom: .5rem; margin-bottom: .7rem;
  border-bottom: 2px solid var(--accent, var(--forest));
}
.mm__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.mm__link { display: block; padding: .5rem .55rem; border-radius: 4px; text-decoration: none; transition: background-color .15s ease; }
.mm__link:hover { background: var(--wash); }
.mm__link b {
  display: block; font-family: var(--f-display); font-weight: 700; font-size: 1rem;
  letter-spacing: -.01em; color: var(--ink); transition: color .15s ease;
}
.mm__link:hover b { color: var(--accent, var(--forest)); }
.mm__ext { font-size: 0.72rem; color: var(--ink-faint); margin-left: .25rem; }
.mm__feat {
  border-left: 1px solid var(--rule);
  padding-left: clamp(1.2rem, 2vw, 1.8rem);
  display: flex; flex-direction: column; gap: .7rem;
}
.mm__thumb {
  position: relative; display: block; aspect-ratio: 16/10; border-radius: 4px; overflow: hidden;
  background: var(--accent, var(--forest));
}
.mm__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mm__badge {
  position: absolute; top: .55rem; left: .55rem; z-index: 2;
  font-family: var(--f-util); font-weight: 800; font-size: 0.72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--white);
  background: rgba(6, 35, 26, .72); border-radius: 100px; padding: .28rem .66rem;
}
.mm__feat h5 { font-family: var(--f-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -.015em; color: var(--ink); margin: 0; }
.mm__feat p { font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }
.mm__featbody { display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.mm__feat .btn { margin-top: auto; font-size: .72rem; padding: .7rem 1rem; }

/* ---- mobile drawer ---- */
.drawer {
  display: none;
  position: relative;
  border-top: 1px solid var(--rule);
  background: var(--white);
  color: var(--ink);
  max-height: min(72vh, 620px);
  overflow-y: auto;
}
.drawer.open { display: block; }
.drawer__in { width: var(--shell); margin-inline: auto; padding: .6rem 0 2rem; }
.drawer__grp { border-bottom: 1px solid var(--rule); padding: .2rem 0; }
.drawer__top {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: 0; cursor: pointer; padding: .95rem .2rem;
  font-family: var(--f-display); font-weight: 800; font-size: 1.1rem; letter-spacing: .01em;
  text-transform: uppercase; color: var(--ink); text-align: left;
}
.drawer__grp.open .drawer__top { color: var(--ember); }
.drawer__grp.open .chev { transform: rotate(180deg); color: var(--ember); opacity: 1; }
.drawer__sub { display: none; padding: 0 0 1rem; }
.drawer__grp.open .drawer__sub { display: block; }
.drawer__sub h4 {
  font-family: var(--f-util); font-weight: 800; font-size: 0.72rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-faint); margin: .9rem 0 .4rem;
}
.drawer__sub ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.drawer__acts { display: flex; flex-wrap: wrap; gap: .6rem; padding: 1.2rem 0 .4rem; }

/* the full row — wordmark, mark, five menus, search and three buttons — is
   about 40px too wide just above the drawer breakpoint, so it tightens first */
@media (max-width: 1340px) and (min-width: 1181px) {
  .nav__in { gap: .9rem; }
  .nav__links { gap: 1.05rem; }
  .nav__links > li > a { font-size: .9rem; }
  .nav__acts { gap: .45rem; }
  .nav__acts .btn { padding: .66rem .85rem; font-size: .68rem; }
  .nav__now { display: none; }
  .om__mark { width: 40px; }
}
@media (max-width: 1180px) {
  .nav__links { display: none; }
  .burger { display: grid; }
  .om__panel { display: none; }
  .om .chev { display: none; }
}
@media (min-width: 1181px) { .drawer { display: none !important; } }
@media (max-width: 960px) {
  .mm__body { grid-template-columns: 1fr 1fr; }
  .mm__feat { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1.2rem; flex-direction: row; align-items: flex-start; gap: 1.2rem; }
  .mm__thumb { width: 210px; flex: none; }
}
@media (max-width: 720px) {
  :root { --shell: min(1240px, calc(100% - 1.6rem)); }
  .nav__acts .btn--forest, .nav__shop { display: none; }
}
@media (max-width: 560px) {
  :root { --nav-h: 70px; }
  .logo img { height: 42px; }
  .om__mark { width: 34px; }
  .nav__in { gap: .5rem; }
  .nav__acts { gap: .35rem; }
  .nav__acts .btn { padding: .6rem .72rem; font-size: .66rem; gap: .3rem; }
  .iconbtn { width: 34px; height: 34px; }
  .om__body { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .nav__now, .nav__acts .btn .arw { display: none; }
  .logo img { height: 36px; }
}

/* -------------------------------------------------------------- 5. hero */
.hero {
  position: relative;
  background: var(--canopy);
  color: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(600px, 86vh, 860px);
}
.hero__media { position: absolute; inset: 0; }
/* anchored to the left edge of the photograph so the whole face sits to the
   right of the copy column instead of the headline covering one eye */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 30%; }
/* weighted to the left so the headline reads while the face stays on the right */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 35, 26, .5) 0%, rgba(6, 35, 26, 0) 28%, rgba(6, 35, 26, 0) 56%, rgba(6, 35, 26, .84) 100%),
    linear-gradient(96deg, rgba(6, 35, 26, .94) 0%, rgba(6, 35, 26, .8) 30%, rgba(6, 35, 26, .38) 56%, rgba(6, 35, 26, .04) 78%, rgba(6, 35, 26, 0) 100%);
}
.hero__slot {
  position: relative; z-index: 2;
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4rem)) 0 clamp(3rem, 6vw, 4.5rem);
}
.hero__copy { max-width: 42rem; }
.hero__tag {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-util); font-weight: 800; font-size: 0.72rem; letter-spacing: .2em;
  text-transform: uppercase; color: #FFD9C8;
  border: 1px solid rgba(212, 85, 31, .6); background: rgba(212, 85, 31, .18);
  padding: .42rem .9rem; border-radius: 100px; margin-bottom: 1.4rem;
}
.hero__tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); flex: none; }
/* three short lines ("Before," on the marker, then the status broken in two)
   so the headline stays left of the face instead of running across it */
.hero h1 {
  font-size: clamp(3rem, 6.6vw, 5.8rem);
  letter-spacing: -.038em;
  line-height: .94;
}
.hero h1 em { display: inline-block; margin-top: .06em; }
.hero__sub {
  margin-top: 1.5rem;
  max-width: 46ch;
  font-size: clamp(1.12rem, .65vw + 1rem, 1.4rem);
  font-weight: 300;
  line-height: 1.6;
  color: #D3E3D8;
}
.hero__sub strong { font-weight: 500; color: var(--white); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.1rem; }
.hero__trust {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .55rem 1.5rem;
  font-family: var(--f-util); font-weight: 700; font-size: 0.72rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255, 255, 255, .78);
}
.hero__trust li { display: inline-flex; align-items: center; gap: .5rem; }
.hero__trust li::before {
  content: "";
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  background: var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-4.8' fill='none' stroke='%2306231A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* page-load rise, only once JS confirms the page is live */
.js .hero__copy > * { animation: rise .9s cubic-bezier(.16, 1, .3, 1) both; }
.js .hero__copy > :nth-child(2) { animation-delay: .08s; }
.js .hero__copy > :nth-child(3) { animation-delay: .16s; }
.js .hero__copy > :nth-child(4) { animation-delay: .24s; }
.js .hero__copy > :nth-child(5) { animation-delay: .32s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  .hero { min-height: 0; }
  .hero__media img { object-position: 68% 30%; }
  .hero__scrim { background: linear-gradient(180deg, rgba(6, 35, 26, .55) 0%, rgba(6, 35, 26, .25) 30%, rgba(6, 35, 26, .88) 72%, rgba(6, 35, 26, .96) 100%); }
  .hero__slot { padding-top: calc(var(--nav-h) + 12rem); }
  .hero__cta .btn { flex: 1 1 auto; }
}

/* ------------------------------------------------- 6. seams and motifs */
.seam {
  position: relative; z-index: 1;
  display: block; width: 100%;
  line-height: 0; pointer-events: none;
}
.seam svg {
  display: block; width: 100%;
  /* the sweep is a designed edge rather than a hairline flourish, so it gets
     real height; preserveAspectRatio="none" lets it stretch to any width */
  height: clamp(86px, 13vw, 190px);
}
/* the svg can land mid-pixel; a sliver of the destination colour hides the hairline */
.seam::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--seam-to, transparent);
}

.mask-rings {
  display: block; width: 100%; aspect-ratio: 326/308;
  background-color: currentColor;
  -webkit-mask: var(--img-rings) center / contain no-repeat;
  mask: var(--img-rings) center / contain no-repeat;
}

/* photographic backdrops with a parallax layer */
.pbg {
  position: absolute; left: 0; right: 0; top: -20%; bottom: -20%;
  background-size: cover; background-position: center 30%; background-repeat: no-repeat;
  will-change: transform;
}
.pscrim { position: absolute; inset: 0; }

/* ----------------------------------------------------------- 8. mission */
.mission {
  position: relative;
  background: var(--white);
  padding: clamp(4rem, 8vw, 6.5rem) 0 0;
  overflow: hidden;
}
.mission > .seam { z-index: 0; margin-top: clamp(2.5rem, 6vw, 4rem); }
.mission__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.mission__stmt {
  margin-top: 1.1rem;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.9vw, 2.5rem);
  line-height: 1.22;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.mission__stmt b { font-weight: 800; }
.mission__body { display: grid; gap: 1.1rem; }

.ticker {
  position: relative; z-index: 2;
  margin-top: clamp(2rem, 4.5vw, 3.2rem);
  width: 100%; overflow: hidden;
  border-block: 1px solid var(--rule);
  padding-block: .9rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker__track { display: flex; width: max-content; animation: marquee 58s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__set { display: flex; flex: none; }
.fact {
  display: inline-flex; align-items: center; gap: .85rem;
  padding-inline: 1.4rem; white-space: nowrap;
  font-size: 1rem; color: var(--ink-soft);
}
.fact::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

@media (max-width: 820px) { .mission__grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------- 9. journey */
.journey {
  position: relative;
  background: var(--wash);
  /* the wave above already gives the section air, so the padding is lighter
     here than on the sections that meet on a flat edge */
  padding: clamp(2.5rem, 5vw, 4rem) 0 0;
  overflow: hidden;
}
.journey > .seam { margin-top: clamp(2rem, 5vw, 3.5rem); }
/* Heading left, the paragraph and its button right: the two blocks sit side by
   side rather than stacked, which is both the editorial split the residents
   section uses and the shorter section. */
.journey__head {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 1.4rem clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.journey__title .h-sec { margin-top: 1rem; }
.journey__side { display: grid; gap: 1.3rem; justify-items: start; }
.journey__side .lede { max-width: min(56ch, 100%); }
/* minmax(0,1fr) rather than 1fr: a grid item's automatic minimum is its
   content, which lets a long measure push past a narrow column */
@media (max-width: 860px) {
  .journey__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* Four photographs edge to edge. Each card is the picture: the title sits on
   the foot of it, and the description rises over it on hover, tap or focus,
   set large enough to read at a glance. */
.stages {
  position: relative; z-index: 2;
  list-style: none; margin: 0; padding: 0 4px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.stage {
  position: relative; overflow: hidden; border-radius: 4px;
  aspect-ratio: 5 / 6;
  background: var(--canopy); color: var(--white);
  cursor: pointer; outline-offset: -3px;
}
.stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.stage:hover > img, .stage.is-open > img { transform: scale(1.05); }
.stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 35, 26, 0) 20%, rgba(6, 35, 26, .4) 46%, rgba(6, 35, 26, .8) 70%, rgba(6, 35, 26, .96) 100%);
}
.stage__face {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1rem, 1.8vw, 1.6rem);
  display: grid; gap: .5rem;
  transition: opacity .25s ease;
}
.stage__meta {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--f-util); font-weight: 800; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ember);
}
/* On the picture the label sits on a dark chip: ember on a bright photograph
   is the one place the palette cannot hold its own, and the chip gives it the
   same ground on every card. Inside the reveal the ground is already dark. */
.stage__face .stage__meta {
  justify-self: start; width: -moz-fit-content; width: fit-content;
  padding: .4rem .8rem .4rem .55rem; border-radius: 100px;
  background: rgba(6, 35, 26, .78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(212, 85, 31, .45);
}
.stage__ring { width: 24px; height: 24px; flex: none; color: var(--ember); }
.stage h3 {
  font-size: clamp(1.35rem, 1.95vw, 1.95rem); line-height: 1.02; letter-spacing: -.015em;
  text-transform: uppercase; color: var(--white); text-wrap: balance;
  text-shadow: 0 2px 18px rgba(6, 35, 26, .55);
}
.stage__reveal {
  position: absolute; inset: 0;
  padding: clamp(1.15rem, 2vw, 1.8rem);
  display: flex; flex-direction: column; justify-content: flex-end; gap: .85rem;
  background: rgba(6, 35, 26, .9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.stage__reveal h3 { font-size: clamp(1.32rem, 1.7vw, 1.72rem); text-shadow: none; }
.stage__reveal .stage__meta { text-shadow: none; color: var(--ember); }
.stage__reveal > p:not(.stage__meta):not(.stage__where) { font-size: clamp(1.16rem, 1.35vw, 1.42rem); line-height: 1.52; color: #EDF3EF; }
.stage__where {
  font-family: var(--f-util); font-weight: 800; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--leaf);
  padding-top: .75rem; border-top: 1px solid rgba(255, 255, 255, .18);
}
.stage:hover .stage__reveal, .stage:focus-visible .stage__reveal, .stage.is-open .stage__reveal { opacity: 1; transform: none; }
.stage:hover .stage__face, .stage:focus-visible .stage__face, .stage.is-open .stage__face { opacity: 0; }
@media (hover: none) {
  .stage:hover .stage__reveal { opacity: 0; transform: translateY(14px); }
  .stage:hover .stage__face { opacity: 1; }
  .stage.is-open .stage__reveal { opacity: 1; transform: none; }
  .stage.is-open .stage__face { opacity: 0; }
}
@media (max-width: 960px) { .stages { grid-template-columns: repeat(2, 1fr); } .stage { aspect-ratio: 4 / 5; } }
@media (max-width: 540px) { .stages { grid-template-columns: 1fr; } .stage { aspect-ratio: 16 / 10; } }
@media (prefers-reduced-motion: reduce) { .stage__reveal { transform: none; } }

/* ------------------------------------------------------------ 10. family */
.family {
  position: relative;
  background: var(--white);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.family__head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: end; }
.family__title .h-sec { margin-top: 1rem; }
.family__side { display: grid; gap: 1.3rem; }
.family__acts { display: flex; align-items: center; gap: .8rem; }
@media (max-width: 860px) { .family__head { grid-template-columns: 1fr; } }
.family__reel { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.family__track {
  list-style: none; margin: 0;
  display: flex;
  gap: clamp(.8rem, 1.4vw, 1.2rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: .5rem max(1.5rem, calc((100% - var(--shell)) / 2)) 1rem;
  scrollbar-width: none;
}
.family__track::-webkit-scrollbar { display: none; }
.family__track:focus-visible { outline: 2px solid var(--forest); outline-offset: -2px; }
.rcard { flex: 0 0 clamp(210px, 19vw, 250px); scroll-snap-align: start; }
.rcard a { position: relative; display: flex; flex-direction: column; gap: .5rem; text-decoration: none; color: var(--ink); }
.rcard__pic {
  display: block; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;
  background: var(--wash); box-shadow: var(--shadow-raised);
}
.rcard__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.rcard a:hover .rcard__pic img { transform: scale(1.06); }
.rcard__chip {
  position: absolute; top: .65rem; left: .65rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255, 255, 255, .93); color: var(--ink);
  border-radius: 100px; padding: .32rem .7rem .32rem .55rem;
  font-family: var(--f-util); font-weight: 800; font-size: 0.72rem; letter-spacing: .12em; text-transform: uppercase;
}
.rcard__chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tone, var(--forest)); }
.rcard__name { margin-top: .3rem; font-family: var(--f-display); font-weight: 800; font-size: 1.18rem; letter-spacing: -.015em; }
.rcard__more {
  font-family: var(--f-util); font-weight: 800; font-size: 0.72rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--tone, var(--forest)); display: inline-flex; align-items: center; gap: .4rem;
}
.rcard__more .arw { transition: transform .2s ease; }
.rcard a:hover .rcard__more .arw { transform: translateX(4px); }

@media (max-width: 600px) { .rcard { flex-basis: 62%; } }

/* --------------------------------------------------------------- 11. map */
.map {
  position: relative;
  background: var(--white);
  padding: clamp(2rem, 5vw, 4rem) 0 0;
  overflow: hidden;
}
.map > .seam { margin-top: clamp(3rem, 7vw, 5rem); }
.map__bg {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  /* white easing into the photograph's own sky, so the join has nothing to give it away */
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F7F9 24%, #E3E7EC 40%, #CDD3DE 54%, #B9C0CF 66%);
}
.map__bg .pbg {
  top: auto; bottom: 0; left: 0; right: 0;
  aspect-ratio: 1376/768;
  background-size: 100% 100%; background-position: center bottom;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 11%, #000 26%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 11%, #000 26%);
}
.map__bg .pscrim {
  background: linear-gradient(180deg, rgba(6, 35, 26, 0) 76%, rgba(6, 35, 26, .3) 89%, rgba(6, 35, 26, .78) 97%, rgba(6, 35, 26, .95) 100%);
}
.map__intro {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: center;
  margin-bottom: clamp(1.2rem, 3vw, 2.2rem);
}
.map__hero { display: flex; justify-content: flex-end; }
.map__cutout {
  width: 100%; max-width: 480px; height: auto;
  filter: drop-shadow(0 20px 40px rgba(11, 40, 28, .2));
  pointer-events: none; user-select: none;
}
/* The filters sit on their own row above the map, so the detail card starts
   level with the top of the plate rather than with the top of the filters. */
.map__grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  grid-template-rows: auto auto;
  gap: 0 clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
}
.map__filters {
  grid-column: 1; grid-row: 1;
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem;
}
.map__plate { grid-column: 1; grid-row: 2; }
.map__detail { grid-column: 2; grid-row: 2; }
.map__plate {
  position: relative;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: var(--shadow-float);
  border-radius: var(--radius);
  padding: clamp(.8rem, 1.6vw, 1.3rem);
  overflow: hidden;
}
.map__plate svg { display: block; width: 100%; height: auto; overflow: visible; }
.map__grat { stroke: rgba(20, 33, 27, .16); stroke-width: .25; fill: none; }
.map__island { fill: #D3E7D8; stroke: var(--forest); stroke-width: .6; stroke-linejoin: round; }
.map__coord { font-family: var(--f-util); font-size: 2.5px; font-weight: 700; letter-spacing: .28px; fill: rgba(20, 33, 27, .55); text-transform: uppercase; }

.pin, .pin:focus, .pin:focus-visible { outline: none; }
.pin { cursor: pointer; }
.pin__hit { fill: transparent; }
.pin__halo { fill: currentColor; opacity: .18; transition: opacity .2s ease; }
.pin__ring { fill: none; stroke: currentColor; stroke-width: 0; transition: stroke-width .18s ease; }
.pin__dot { fill: currentColor; stroke: #FFFFFF; stroke-width: .8; }
.pin__label {
  font-family: var(--f-util); font-size: 3.1px; font-weight: 800; letter-spacing: .14px;
  fill: var(--ink); paint-order: stroke; stroke: #F3F7F3; stroke-width: 1.1px; stroke-linejoin: round;
}
.pin:hover .pin__halo, .pin.on .pin__halo { opacity: .32; }
.pin.on .pin__ring { stroke-width: .55; }
.pin.off { opacity: .22; pointer-events: none; }
.pin:focus-visible .pin__ring { stroke: var(--ember); stroke-width: .8; }
.pin:focus-visible .pin__dot { stroke: var(--ember); }

.map__detail {
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: var(--radius); overflow: hidden;
  background: var(--white); box-shadow: var(--shadow-float);
}
.map__bar {
  padding: .75rem 1.1rem;
  background: var(--accent, var(--forest)); color: var(--white);
  font-family: var(--f-util); font-weight: 800; font-size: .78rem; letter-spacing: .15em; text-transform: uppercase;
}
.map__body { padding: 1.35rem; }
.map__body h3 { font-size: 1.5rem; letter-spacing: -.02em; }
.map__where { margin-top: .35rem; font-family: var(--f-util); font-weight: 700; font-size: .78rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-faint); }
.map__facts { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1rem 0; border-block: 1px solid var(--rule); padding: .9rem 0; }
.map__fact span { display: block; font-family: var(--f-util); font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .28rem; }
.map__fact b { font-family: var(--f-display); font-weight: 800; font-size: 1.12rem; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.map__body > p:not(.map__where) { font-size: 1.12rem; line-height: 1.55; color: var(--ink-soft); }
.map__wins { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.map__wins li { display: flex; gap: .65rem; align-items: flex-start; font-size: 1.08rem; line-height: 1.5; color: var(--ink-soft); }
.map__wins li::before { content: ""; flex: none; margin-top: .45rem; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, var(--forest)); }

@media (max-width: 900px) {
  .map__intro, .map__grid { grid-template-columns: 1fr; }
  .map__filters, .map__plate, .map__detail { grid-column: 1; grid-row: auto; }
  .map__detail { margin-top: clamp(1.2rem, 3vw, 2rem); }
  .map__hero { justify-content: center; }
  .map__cutout { max-width: 420px; }
}
@media (max-width: 420px) { .map__facts { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ 12. impact */
.impact {
  position: relative;
  background: var(--canopy);
  color: var(--white);
  padding: clamp(3rem, 6vw, 5rem) 0 0;
  overflow: hidden;
}
.impact > .seam { margin-top: clamp(3rem, 7vw, 5rem); }
.impact__top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.impact .h-sec { color: var(--white); }
.impact .lede { color: #A9C2B2; max-width: 46ch; }
.impact__hero { display: flex; justify-content: flex-end; }
.impact__pic {
  width: 100%; max-width: 640px; height: auto;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .28));
  pointer-events: none;
}

.stats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem) clamp(1.2rem, 2.5vw, 2.25rem);
}
.stat { display: flex; align-items: flex-start; gap: clamp(.9rem, 1.5vw, 1.3rem); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.stat:hover { transform: translateY(-4px); }
.stat__icon { flex: none; width: clamp(54px, 4.5vw, 66px); height: clamp(54px, 4.5vw, 66px); display: grid; place-items: center; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.stat:hover .stat__icon { transform: scale(1.1) rotate(-6deg); }
.stat:nth-child(even):hover .stat__icon { transform: scale(1.1) rotate(6deg); }
.stat__icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .2)); }
.stat__num {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.3rem, 4.6vw, 3.8rem); line-height: .92; letter-spacing: -.025em;
  color: var(--leaf); font-variant-numeric: tabular-nums;
  margin-bottom: .35rem;
}
.stat__label { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.05rem, 1.3vw, 1.22rem); line-height: 1.2; letter-spacing: -.01em; color: var(--white); margin-bottom: .3rem; }
.stat__desc { font-size: clamp(1.02rem, 1.1vw, 1.12rem); line-height: 1.5; color: #A9C2B2; }

/* give card */
.give {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  background: var(--white); color: var(--ink);
  border-radius: 12px;
  padding: clamp(1.4rem, 2.4vw, 2.2rem) clamp(1.5rem, 2.8vw, 2.6rem);
  box-shadow: var(--shadow-overlay);
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.65fr);
  gap: clamp(1.4rem, 3vw, 3rem);
  align-items: center;
}
.give__copy h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); margin-top: .7rem; }
.give__copy p { margin-top: .6rem; color: var(--ink-soft); font-size: 1.12rem; line-height: 1.5; }
.give__row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; }
.give__seg { display: flex; background: #E5ECE6; border-radius: 6px; padding: 3px; flex: none; }
.seg {
  font-family: var(--f-util); font-weight: 800; font-size: 0.72rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .62rem .95rem; border: 0; border-radius: 4px;
  background: transparent; color: #2D523E; cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.seg:hover { color: var(--ink); }
.seg.is-on { background: var(--canopy-2); color: var(--white); }
.give__amts { display: flex; align-items: center; gap: .45rem; flex: 1; min-width: 0; flex-wrap: wrap; }
.amt {
  font-family: var(--f-display); font-weight: 800; font-size: .98rem; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  padding: .55rem .95rem; min-width: 58px; text-align: center;
  background: var(--white); border: 1.5px solid #D6DFD7; border-radius: 6px; color: var(--ink);
  cursor: pointer; transition: border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.amt:hover { border-color: var(--leaf); }
.amt.is-on { border-color: var(--forest); color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }
.amt--other { font-family: var(--f-util); font-size: 0.72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); padding: .68rem .9rem; }
.give__other { display: flex; align-items: center; gap: .3rem; border: 2px solid var(--forest); border-radius: 6px; padding: .3rem .6rem; background: var(--white); }
.give__other[hidden] { display: none; }
.give__other span { font-family: var(--f-display); font-weight: 800; font-size: .98rem; color: var(--forest); }
.give__other input { width: 84px; font-family: var(--f-display); font-weight: 800; font-size: .98rem; color: var(--ink); border: 0; outline: none; background: transparent; padding: 0; }
.give__foot { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.2rem; margin-top: 1rem; }
.give__fine { flex: 1; min-width: 220px; font-size: 1.02rem; line-height: 1.5; color: var(--ink-faint); }

@media (max-width: 1040px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px) {
  .give { grid-template-columns: 1fr; }
  .give__go { width: 100%; }
}
@media (max-width: 860px) { .impact__top { grid-template-columns: 1fr; } .impact__hero { justify-content: center; } }
@media (max-width: 600px) {
  .stats { grid-template-columns: 1fr; }
  .give__seg { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .give__amts { width: 100%; }
  .amt { flex: 1; }
}

/* ----------------------------------------------------------- 13. threats */
.threats {
  position: relative;
  background: var(--brick);
  color: var(--white);
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  overflow: hidden;
}
.threats > .seam { margin-top: clamp(3rem, 7vw, 5rem); }
.threats .lede { color: #F0CFC5; max-width: min(56ch, 100%); }
.threats .lede strong, .donate .lede strong { color: var(--white); font-weight: 500; }
/* the same editorial head the journey, residents and donate sections use */
.threats__head {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 1.4rem clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.threats__title .h-sec { margin-top: 1rem; color: var(--white); }
.threats__side { display: grid; gap: 1.3rem; justify-items: start; }
.hand {
  position: absolute; top: 9rem; right: 3%;
  width: min(300px, 30vw); aspect-ratio: 395/354;
  background-color: currentColor; color: var(--white); opacity: .07;
  -webkit-mask: var(--img-hands) center / contain no-repeat;
  mask: var(--img-hands) center / contain no-repeat;
  transform: rotate(9deg); pointer-events: none; z-index: 1;
}
/* Four across, no grid lines and no boxes: the photographs sit on the brick
   ground and the words sit under them, the same object as the gift cards. */
.tlist {
  position: relative; z-index: 2;
  list-style: none; padding: 0;
  margin: clamp(2.2rem, 4.5vw, 3.4rem) 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2.2rem);
}
.threat {
  display: flex; flex-direction: column; gap: .95rem;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.threat:hover { transform: translateY(-5px); }
.threat__pic { display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: 6px; background: var(--brick-deep); }
.threat__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.threat:hover .threat__pic img { transform: scale(1.05); }
.threat__body { display: grid; gap: .5rem; align-content: start; }
.threat__k { font-family: var(--f-util); font-weight: 800; font-size: .78rem; letter-spacing: .18em; color: #F2A88F; }
.threat h3 { font-size: clamp(1.32rem, 1.7vw, 1.55rem); color: var(--white); }
.threat__body > p:not(.threat__k) { font-size: 1.12rem; line-height: 1.55; color: #EDC8BE; font-weight: 300; }
@media (max-width: 1040px) { .tlist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .threats__head { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 560px) {
  .tlist { grid-template-columns: 1fr; gap: 1.6rem; }
  .threat__pic { aspect-ratio: 16/9; }
}

/* --------------------------------------------------------------- 14. act */
/* The section itself stays open so the reel can hang out of its bottom edge;
   the ring motif gets its own clipped layer instead. */
.act {
  position: relative;
  background: var(--white);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 0;
}
.act__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.act > .shell { position: relative; z-index: 1; }
/* the wave follows the reel directly: any margin here would collapse against
   the reel's negative one and eat into the drop */
.act > .seam { margin-top: 0; }
/* the same editorial head the other sections use, rather than centred */
.act__head {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 1.4rem clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.act__title .h-sec { margin-top: 1rem; }
.act__side { display: grid; gap: 1.3rem; justify-items: start; }
.act__side .lede { max-width: min(56ch, 100%); }
@media (max-width: 860px) { .act__head { grid-template-columns: 1fr; align-items: start; } }

/* The strip drops through the wave and lies on the green of the section
   below — the same seam-crossing move the tree rings make, done once with
   photographs. The donate section pads its top by the same amount. */
.reel {
  position: relative; z-index: 3;
  margin-top: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: calc(-1 * var(--reel-drop));
}
.reel__track {
  --reel-h: clamp(360px, 44vw, 600px);
  display: flex; gap: 10px;
  overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity;
  /* the first tile starts level with the section's copy, not the window edge */
  padding: .4rem max(1.5rem, calc((100% - var(--shell)) / 2)) .6rem;
  scrollbar-width: none;
}
.reel__track::-webkit-scrollbar { display: none; }
.reel__track:focus-visible { outline: 2px solid var(--forest); outline-offset: -2px; }
/* columns, not tiles, make the strip: most hold one picture, some two stacked */
.rcol {
  flex: 0 0 auto;
  width: calc(var(--reel-h) * var(--w, .75));
  height: var(--reel-h);
  display: flex; flex-direction: column; gap: 10px;
  scroll-snap-align: center;
}
.rtile {
  position: relative; flex: 1; min-height: 0;
  display: block; overflow: hidden; border-radius: 6px;
  background: var(--wash); text-decoration: none;
  box-shadow: 0 18px 40px rgba(6, 35, 26, .22), 0 2px 6px rgba(6, 35, 26, .08);
  transition: transform .22s ease, box-shadow .22s ease;
}
.rtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.rtile:hover { transform: translateY(-5px); }
.rtile:hover img { transform: scale(1.04); }
.rtile__label {
  position: absolute; left: 0; bottom: clamp(.9rem, 2vw, 1.4rem);
  max-width: calc(100% - 1.4rem);
  background: var(--canopy); color: var(--white);
  font-family: var(--f-util); font-weight: 800; font-size: 0.75rem; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.35; padding: .66rem 1.05rem;
  transition: background-color .2s ease;
}
.rtile:hover .rtile__label { background: var(--ember); }
.rcol--stack .rtile__label { font-size: 0.72rem; letter-spacing: .1em; bottom: clamp(.6rem, 1.3vw, .95rem); padding: .5rem .85rem; }

.arrow--float { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; box-shadow: var(--shadow-float); }
.arrow--prev { left: clamp(.5rem, 1.5vw, 1.3rem); }
.arrow--next { right: clamp(.5rem, 1.5vw, 1.3rem); }
.reel .arrow[aria-disabled="true"] { opacity: 0; }
@media (max-width: 700px) { .reel .arrow { display: none; } }

/* ------------------------------------------------------------ 15. donate */
.donate {
  position: relative;
  background: var(--forest);
  color: var(--white);
  /* room for the reel hanging in from above: its drop, less the wave it
     already covers (the wave svg is 100/1200 of the width), plus breathing space */
  padding: calc(var(--reel-drop) - 8.333vw + clamp(2.5rem, 5vw, 4rem)) 0 0;
  overflow: hidden;
}
.donate > .seam { margin-top: clamp(3rem, 7vw, 5rem); }
/* Head first, then the gifts run the full width, so each card has room for a
   picture and copy at reading size rather than three narrow boxes beside the
   heading. */
.donate__head {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 1.4rem clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem);
}
.donate__title .h-sec { margin-top: 1rem; }
.donate__side { display: grid; gap: 1.5rem; justify-items: start; }
.donate .h-sec { font-size: clamp(2.1rem, 4.4vw, 3.4rem); color: var(--white); }
.donate .lede { color: #D6EEDD; max-width: min(56ch, 100%); }
.donate__cta { display: flex; flex-wrap: wrap; gap: .8rem; }

/* No card chrome: the photograph is the card, the price is the heading and the
   line beneath it is the promise. */
.gifts {
  position: relative; z-index: 2;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.6vw, 2.4rem);
}
.gift {
  display: flex; flex-direction: column; gap: .95rem;
  text-decoration: none; color: var(--white);
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.gift:hover { transform: translateY(-5px); }
.gift__pic { display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: 6px; background: rgba(0, 0, 0, .12); }
.gift__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.gift:hover .gift__pic img { transform: scale(1.05); }
.gift__body { display: flex; flex-direction: column; gap: .45rem; }
.gift b {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--white);
}
.gift span span { font-size: 1.12rem; color: #D6EEDD; line-height: 1.5; font-weight: 300; }
@media (max-width: 860px) { .donate__head { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 620px) {
  /* one per row, the picture alongside the words */
  .gifts { grid-template-columns: 1fr; gap: 1.1rem; }
  .gift { flex-direction: row; align-items: center; gap: 1.1rem; }
  .gift__pic { width: 132px; flex: none; aspect-ratio: 1; }
}

/* ------------------------------------------------------------ 16. footer */
.foot {
  position: relative;
  background: var(--canopy);
  color: #A9C2B2;
  padding: 0 0 2rem;
  font-size: .98rem;
  overflow: hidden;
}
.foot__keep {
  position: relative; z-index: 2;
  padding: clamp(2.2rem, 4vw, 3rem) 0;
  margin-bottom: clamp(2.2rem, 4vw, 3rem);
}
.foot__keepin { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; }
.foot__keep h3 { margin-top: .7rem; font-size: clamp(1.35rem, 2.4vw, 1.9rem); letter-spacing: -.02em; color: var(--white); }
.foot__keep p:not(.eyebrow) { margin-top: .6rem; font-weight: 300; max-width: 46ch; }
.signup { display: flex; gap: .5rem; flex-wrap: wrap; }
.signup input {
  flex: 1; min-width: 180px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 4px; padding: .8rem 1rem;
  color: var(--white); font-family: var(--f-body); font-size: 1rem;
}
.signup input::placeholder { color: #8AA595; }
.signup input:focus { outline: 2px solid var(--leaf); outline-offset: 1px; }
.socials { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.socials a {
  font-family: var(--f-util); font-weight: 700; font-size: 0.72rem; letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; color: #A9C2B2;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 100px; padding: .42rem .85rem;
  transition: color .18s ease, border-color .18s ease;
}
.socials a:hover { color: var(--white); border-color: var(--leaf); }

.foot__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.25fr; gap: clamp(1.4rem, 3vw, 2.6rem); }
.foot__brand img { width: 150px; height: auto; }
.foot__note { max-width: 34ch; margin-top: 1.1rem; font-weight: 300; line-height: 1.55; }
.foot__tag {
  display: inline-block; margin-top: 1rem;
  font-family: var(--f-util); font-weight: 800; font-size: 0.72rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--leaf); border: 1px solid rgba(111, 192, 120, .4); border-radius: 100px; padding: .35rem .8rem;
}
.foot h4 { font-family: var(--f-util); font-weight: 800; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--white); margin-bottom: 1rem; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.foot a { text-decoration: none; color: #A9C2B2; }
.foot a:hover { color: var(--leaf); }
.foot address { font-style: normal; line-height: 1.6; font-weight: 300; margin-top: .9rem; }
.foot__bar {
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-family: var(--f-util); font-size: .78rem; letter-spacing: .06em;
}
@media (max-width: 1040px) { .foot__grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 860px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__keepin { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ 17. motion */
/* scroll reveals: only once JS is live, and main.js strips the class again
   after the reveal so hover transforms are never fighting it */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
  .ticker { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 620px) {
  .gifts { grid-template-columns: 1fr; gap: 1.1rem; }
  .gift { flex-direction: row; align-items: center; gap: 1.1rem; }
  .gift__pic { width: 132px; flex: none; aspect-ratio: 1; }
}


/* =========================================================================
   18. KENT SHAPE LANGUAGE — a steep curve as the section edge, a card that
   straddles it, and one torn paper edge. The curve and the rip are the real
   assets from the Kent-layout build, reused as masks so they take any colour.
   ====================================================================== */

/* a single steep sweep, low on the left and rising to full height on the
   right, rather than the gentle ripple the other seams use */
.seam--curve {
  display: block; width: 100%;
  height: clamp(72px, 11.5vw, 168px);
  background-color: var(--seam-to);
  -webkit-mask: url("../img/shapes/hero-curve.svg") 0 0 / 100% 100% no-repeat;
  mask: url("../img/shapes/hero-curve.svg") 0 0 / 100% 100% no-repeat;
}
.seam--curve::after { content: none; }

/* torn paper: the artwork carries a second ghosted rip, so the mask gives a
   two-layer edge rather than a single clean tear */
.seam--torn {
  display: block; width: 100%;
  height: clamp(42px, 6.4vw, 96px);
  background-color: var(--seam-to);
  -webkit-mask: url("../img/shapes/rip.svg") 0 0 / 100% 100% no-repeat;
  mask: url("../img/shapes/rip.svg") 0 0 / 100% 100% no-repeat;
  /* the artwork tears along its lower edge; flipped, the tear lands at the
     top of the seam where the new colour meets the old */
  transform: scaleY(-1);
}
.seam--torn::after { content: none; }

/* the card that straddles the curve: it starts inside the hero and finishes
   in the mission, which is what ties the two sections into one composition */
.mission { overflow: visible; }
.appeal {
  position: relative; z-index: 3;
  width: min(620px, 100%);
  margin-top: calc(-1 * clamp(150px, 19vw, 300px));
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
  background: var(--white);
  border-radius: 22px;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-overlay);
  display: grid; gap: 1.1rem; justify-items: start;
}
.appeal .mission__stmt { margin-top: 0; font-size: clamp(1.45rem, 2.4vw, 2.05rem); }

/* with the statement in the card, the explanation runs as one column */
.mission__grid { grid-template-columns: minmax(0, 1fr); }
.mission__body { max-width: 68ch; }

@media (max-width: 720px) {
  .appeal { margin-top: calc(-1 * clamp(70px, 12vw, 120px)); border-radius: 16px; }
}

/* ---- blobs that carry something -----------------------------------------
   The blob is not decoration here: it holds a photograph, and where there is
   a figure worth stating it carries that too, sitting across the shape's edge
   the way the reference sites do. */
.blob {
  position: relative;
  margin: 0;
  align-self: center;
  justify-self: center;
  width: min(460px, 100%);
  aspect-ratio: 1.04 / 1;
}
.blob > img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 57% 43% 48% 52% / 45% 54% 46% 55%;
  display: block;
}
.blob figcaption {
  position: absolute; right: -4%; bottom: 6%;
  display: grid; gap: .1rem;
  background: var(--white);
  border-radius: 16px;
  padding: .9rem 1.15rem;
  box-shadow: var(--shadow-float);
  text-align: left;
}
.blob figcaption b {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.3rem, 1.8vw, 1.6rem); letter-spacing: -.02em; color: var(--forest);
}
.blob figcaption span {
  font-family: var(--f-util); font-weight: 800; font-size: .72rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint);
}

/* the mission runs as copy beside a blob again, which fills the half the
   appeal card left empty */
.mission__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
.mission__body { max-width: 58ch; }
@media (max-width: 860px) {
  .mission__grid { grid-template-columns: 1fr; }
  .blob--mission { margin-top: 1.5rem; }
}

/* the residents become blobs rather than squares, each one a little
   different so the row reads as hand-cut */
.rcard__pic { border-radius: 56% 44% 49% 51% / 47% 52% 48% 53%; }
.rcard:nth-child(2n) .rcard__pic { border-radius: 44% 56% 52% 48% / 53% 46% 54% 47%; }
.rcard:nth-child(3n) .rcard__pic { border-radius: 52% 48% 43% 57% / 48% 56% 44% 52%; }
.rcard:nth-child(5n) .rcard__pic { border-radius: 47% 53% 55% 45% / 55% 47% 53% 45%; }
.rcard__chip { top: 8%; left: 10%; }

/* ---- restored: the blob behind the statistics --------------------------
   These rules were lost when an earlier block was stripped, which left the
   photograph in the markup with no styling at all: a full-width rectangle
   sitting in the impact section. It carries a different picture from the map
   backdrop now, so the same forest never appears twice. */
.impact__blob {
  position: absolute;
  left: -9%; top: 30%;
  width: min(680px, 54vw);
  aspect-ratio: 1.12 / 1;
  z-index: 0;
  overflow: hidden;
  border-radius: 58% 42% 51% 49% / 46% 55% 45% 54%;
  transform: rotate(-6deg);
  opacity: .5;
  pointer-events: none;
}
.impact__blob img {
  width: 100%; height: 100%; object-fit: cover;
  transform: rotate(6deg) scale(1.18);
}
.impact__blob::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(6, 35, 26, .14) 0%, rgba(6, 35, 26, .6) 46%, rgba(6, 35, 26, .9) 100%);
}
.impact > .shell { position: relative; z-index: 2; }
@media (max-width: 860px) {
  .impact__blob { left: -24%; top: 26%; width: 88vw; opacity: .38; }
}

/* ---- the gift tiles become blobs too ---- */
.gift__pic { border-radius: 55% 45% 48% 52% / 46% 53% 47% 54%; }
.gift:nth-child(2) .gift__pic { border-radius: 45% 55% 53% 47% / 54% 45% 55% 46%; }
.gift:nth-child(3) .gift__pic { border-radius: 52% 48% 44% 56% / 47% 56% 44% 53%; }
.gifts > li:nth-child(2) .gift__pic { border-radius: 45% 55% 53% 47% / 54% 45% 55% 46%; }
.gifts > li:nth-child(3) .gift__pic { border-radius: 52% 48% 44% 56% / 47% 56% 44% 53%; }

/* ---- the map panel softens to match, rather than staying a plain box ---- */
.map__plate { border-radius: 42px 18px 42px 18px; }

/* ---- the heading as the transition ---------------------------------------
   The boundary between the threats and take action runs flat, and the heading
   crosses it: the first line sits at the foot of the brick section in white,
   the second opens the white section in ink. The line itself becomes the
   transition, so no wave is needed. Both halves share one type spec, so they
   read as a single heading broken over two grounds. */
.cross {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.3rem, 5vw, 4.05rem);
  line-height: .98;
  letter-spacing: -.022em;
  margin: 0;
}
.cross--up { color: var(--white); }
.cross--down { color: var(--ink); margin-top: 0; }

/* the brick section closes flush against the boundary */
.threats { padding-bottom: 0; }
.cross__lead {
  position: relative; z-index: 2;
  margin-top: clamp(2.4rem, 5vw, 4rem);
  display: grid; gap: .9rem; justify-items: start;
}

/* and the white section opens on it, with the standfirst dropped to sit
   against the second line rather than floating level with the boundary */
.act { padding-top: 0; }
.act__head { align-items: start; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.act__title .h-sec { margin-top: 0; }
.act__side { padding-top: .5rem; }

@media (max-width: 860px) {
  .act__side { padding-top: 1rem; }
}

/* ---- one curve language for every join ---------------------------------
   The wave seams are gone: every transition now uses the same steep hero
   curve, flipped on alternate joins so the page does not repeat one gesture
   all the way down. */
.seam--curve--flip { transform: scaleX(-1); }

/* ---- the heading sits closer to the reel now the standfirst has gone ---- */
.act__head { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
.act .reel { margin-top: clamp(1.2rem, 2.4vw, 2rem); }

/* ---- raindrop blobs entering from the page edges ------------------------
   Large, lopsided and cropped by the section edge, so they read as shapes
   the page is sitting on rather than objects placed on it. */
.sideblob {
  position: absolute;
  display: block;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.sideblob img { width: 100%; height: 100%; object-fit: cover; }

.sideblob--journey {
  right: -14%; top: 8%;
  width: min(620px, 46vw); aspect-ratio: .82 / 1;
  border-radius: 72% 28% 54% 46% / 38% 62% 38% 62%;
  transform: rotate(9deg);
  opacity: .17;
}
.sideblob--family {
  left: -16%; top: 18%;
  width: min(560px, 44vw); aspect-ratio: 1 / 1.18;
  border-radius: 26% 74% 46% 54% / 62% 36% 64% 38%;
  background: var(--leaf);
  transform: rotate(-12deg);
  opacity: .16;
}
.sideblob--donate {
  left: -17%; top: 22%;
  width: min(640px, 48vw); aspect-ratio: .86 / 1;
  border-radius: 28% 72% 56% 44% / 66% 34% 66% 34%;
  transform: rotate(-14deg);
  opacity: .22;
}
/* the shapes bleed off the edge, so each host clips its own overflow */
.family, .act { overflow: hidden; }
.family > .shell, .threats > .shell, .act > .shell, .donate > .shell { position: relative; z-index: 2; }

/* ---- cards that straddle a join, so the mission card is a pattern ------- */
.crosscard {
  position: relative; z-index: 3;
  width: min(520px, 100%);
  margin-top: calc(-1 * clamp(80px, 11vw, 170px));
  margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem);
  background: var(--white);
  color: var(--ink);
  border-radius: 20px;
  padding: clamp(1.2rem, 2.4vw, 1.8rem) clamp(1.3rem, 2.6vw, 2rem);
  box-shadow: var(--shadow-overlay);
  display: grid; gap: .7rem;
}
.crosscard p:not(.eyebrow) {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.28; letter-spacing: -.015em; margin: 0;
}
.crosscard b { font-weight: 800; color: var(--forest); }
.crosscard--impact { margin-left: auto; }

@media (max-width: 860px) {
  .crosscard { margin-top: calc(-1 * clamp(50px, 9vw, 90px)); width: 100%; }
  .crosscard--impact { margin-left: 0; }
  .sideblob { opacity: .1 !important; }
}

/* =========================================================================
   19. FIXES — clipping, stacking, seam hairlines, and the second straddle
   ====================================================================== */

/* ---- 6. the faint line between sections --------------------------------
   The curve artwork stops a fraction short of its own viewBox, so a sliver of
   the outgoing section showed under every join. A solid band of the incoming
   colour closes it. */
.seam--curve, .seam--torn { position: relative; }
.seam--curve::after, .seam--torn::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--seam-to);
}
.seam--curve--flip::after { background: var(--seam-to); }

/* ---- 2 & 4. nothing that overlaps a boundary may be clipped -------------
   The sections stopped clipping their own overflow; each decorative blob now
   sits in its own clipping layer instead, so the showreel and the straddling
   cards can cross their edges freely. */
.family, .act, .journey, .threats, .donate { overflow: visible; }
.blobwrap {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* the showreel drops into the green below, so take action paints above it */
.act { position: relative; z-index: 2; }
.reel { z-index: 4; }
.donate { z-index: 1; }

/* ---- 3. the gift tiles go back to cards, not blobs ---- */
.gift__pic,
.gifts > li:nth-child(2) .gift__pic,
.gifts > li:nth-child(3) .gift__pic,
.gift:nth-child(2) .gift__pic,
.gift:nth-child(3) .gift__pic { border-radius: 10px; }

/* ---- 1. the second straddle: across the torn edge ---- */
.impact { padding-bottom: 0; }
.cross__lead--impact { margin-top: clamp(2.2rem, 4.5vw, 3.4rem); }
.cross--onbrick { color: var(--white); }
.threats { padding-top: 0; }
.threats__head { align-items: start; margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem); }
.threats__title .h-sec { margin-top: 0; }
.threats__side { padding-top: .5rem; }
/* a shallow tear keeps the two halves of the heading close enough to read as
   one line broken by the rip */
.seam--torn { height: clamp(26px, 3.2vw, 44px); }

/* ---- 5. the blobs move to emptier ground ---- */
.sideblob--journey { right: -12%; top: 46%; width: min(520px, 38vw); opacity: .14; }
.sideblob--donate { left: auto; right: -14%; top: 8%; width: min(540px, 40vw); opacity: .18; }

/* the impact section clips only its own blob layer, so the card that
   straddles its top edge is no longer cut off */
.impact { overflow: visible; }
.impact__blob { position: absolute; }
/* the torn seam carries the heading across it, so it takes no top margin:
   that 80px gap was pushing the two halves of the line apart */
.impact > .seam--torn { margin-top: 0; }

/* =========================================================================
   20. CANOPY CURVES — the sweep turned through 180 degrees, so the edge
   arches up like a canopy instead of sagging away from it. The hairline band
   rotates with the element, so it still lands on the side where the artwork
   stops short of its own viewBox.
   ====================================================================== */
.seam--curve {
  -webkit-mask-image: url("../img/shapes/canopy-curve.svg");
  mask-image: url("../img/shapes/canopy-curve.svg");
  transform: none;
}
.seam--curve--flip { transform: scaleX(-1); }

/* =========================================================================
   21. COLOURED OVERLAY CARDS — each straddling card takes the colour of what
   it is about, rather than all three being white. Type inverts to suit, and
   every pairing used here already exists elsewhere on the page.
   ====================================================================== */

/* the mission and its ask: the working green, with the brick marker and brick
   Donate button on it, exactly as the donate section already pairs them */
.appeal { background: var(--forest); color: var(--white); }
.appeal .eyebrow { color: var(--white); }          /* 5.0:1 on forest */
.appeal .mission__stmt { color: var(--white); }

/* the rehabilitation journey: deep forest, the ground the stages sit on */
.crosscard--family { background: var(--canopy-2); color: var(--white); }
.crosscard--family .eyebrow { color: var(--leaf); }
.crosscard--family p:not(.eyebrow) { color: var(--white); }
.crosscard--family b { color: var(--leaf); }

/* land protected: the brand's orange, the one accent loud enough to carry a
   number this large */
.crosscard--impact { background: var(--ember-deep); color: var(--white); }
.crosscard--impact .eyebrow { color: var(--white); }
/* the mid orange cannot carry 11px type at 4.5:1 against white or black, so
   this card takes the deeper brand orange instead and everything passes */
.crosscard--impact p:not(.eyebrow) { color: var(--white); font-weight: 600; }
.crosscard--impact b { color: var(--white); }

/* =========================================================================
   22. THE MISSION BLOB, ENLARGED — it now runs off the right edge of the page
   and climbs past the copy, so it reads as a shape the page is cut into
   rather than a picture sitting in a column. The body clips horizontally, so
   the bleed costs no sideways scroll.
   ====================================================================== */
.blob--mission {
  width: min(780px, 60vw);
  aspect-ratio: .84 / 1;
  justify-self: end;
  align-self: start;
  /* out to the side, and up */
  margin-right: calc(-1 * clamp(2.5rem, 8vw, 11rem));
  margin-top: calc(-1 * clamp(3rem, 10vw, 9rem));
  margin-bottom: clamp(1rem, 3vw, 2.5rem);
}
/* a lopsided drop: heavy and round at the foot, drawn up and narrower at the
   top right where it leaves the page */
.blob--mission > img {
  border-radius: 74% 26% 52% 48% / 46% 30% 70% 54%;
}
/* the figure moves to the inner edge so it never leaves the page with the shape */
.blob--mission figcaption { left: 2%; right: auto; bottom: 9%; }

@media (max-width: 1100px) {
  .blob--mission { margin-top: calc(-1 * clamp(1rem, 4vw, 3rem)); width: min(620px, 70vw); }
}
@media (max-width: 860px) {
  .blob--mission {
    width: min(560px, 92vw); justify-self: center;
    margin-right: 0; margin-top: 1.5rem;
  }
  .blob--mission figcaption { left: auto; right: 0; }
}

/* the blob bleeds off the right, so the section clips that axis only: the
   appeal card still has to overflow upward, which needs y to stay visible
   (clip on one axis does not force the other to scroll, unlike hidden) */
.mission { overflow-x: clip; overflow-y: visible; }

/* =========================================================================
   23. MISSION CARD IN ORANGE, BLOB TRIMMED
   ====================================================================== */
.appeal { background: var(--ember-deep); }
/* brick on orange is warm-on-warm and goes muddy, so the marker takes the
   deep forest instead: dark on orange is the crispest pairing available */
.appeal .mission__stmt b.mark--brick { background: var(--canopy); color: var(--white); }
/* and the Donate button keeps its brick, ringed in white so it still reads
   as a button against a warm ground */
.appeal .btn--brick { border-color: rgba(255, 255, 255, .8); }
.appeal .btn--brick:hover { border-color: var(--white); }

/* the blob comes down a size */
.blob--mission {
  width: min(660px, 51vw);
  margin-right: calc(-1 * clamp(2rem, 6vw, 8rem));
  margin-top: calc(-1 * clamp(2.5rem, 8vw, 7rem));
}
@media (max-width: 1100px) { .blob--mission { width: min(560px, 66vw); } }
@media (max-width: 860px) { .blob--mission { width: min(520px, 90vw); } }

/* =========================================================================
   24. AN ORANGE SECTION — the rehabilitation stages take the brand orange, so
   the page runs dark, orange, white, forest, red rather than leaning green.
   The deeper orange rather than the mid one: white body copy needs 4.5:1 and
   only the deep tone carries it (6.3:1 against 3.9:1).
   ====================================================================== */
.journey { background: var(--ember-deep); color: var(--white); }
.journey__title .h-sec { color: var(--white); }
.journey .eyebrow { color: var(--white); }
.journey .lede { color: #FFE4D8; }
.journey .btn--outline { border-color: rgba(255, 255, 255, .7); color: var(--white); }
.journey .btn--outline:hover { background: rgba(255, 255, 255, .14); }
/* the white stage cards now sit on orange, so they need no border to separate */
.journey .stage { border-color: transparent; }

/* =========================================================================
   25. A RED MISSION CARD, AND A TORN FOOT TO THE THREATS
   ====================================================================== */

/* the card goes to the serious red. Its marker and button were tuned for an
   orange ground and both need rethinking on this one. */
.appeal { background: var(--brick); }
/* dark on dark would vanish, so the marker takes the leaf, as it does in the hero */
.appeal .mission__stmt b.mark--brick { background: var(--leaf); color: var(--ink); }
/* and a brick button on a brick card is invisible: it inverts to white with
   brick lettering, so Donate still reads as the red action */
.appeal .btn--brick {
  background: var(--white); color: var(--brick); border-color: var(--white);
}
.appeal .btn--brick:hover { background: #F2E4E4; color: var(--brick-deep); }

/* the threats section is now torn at both ends, so it reads as a strip of
   paper ripped out of the page. The seam takes no top margin: it sits between
   the two halves of the heading that crosses it. */
.threats > .seam--torn { margin-top: 0; }

/* trying the map without its graticule: delete this rule to bring it back */
.map__grat { display: none; }

/* =========================================================================
   26. THE MAP LOSES ITS BOX, THE DETAIL CARD BECOMES A WINDOW
   ====================================================================== */

/* no panel behind the island: it sits straight on the rainforest */
.map__plate {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* and the sanctuary card takes the frosted treatment the panel used to have,
   so the forest reads through it rather than being blocked out */
.map__detail {
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 24px 8px 24px 8px;
  box-shadow: 0 18px 44px rgba(6, 35, 26, .22);
}
/* the coloured header stays solid: it is the one part that has to hold its
   own against whatever the photograph is doing behind it */
.map__bar { position: relative; z-index: 1; }

/* the frosted card only reads as a window if there is something behind it.
   The rainforest was starting below the card and fading in over 200px, so the
   card's upper half sat on the pale gradient. The photograph now rises to
   cover the whole map area and reaches full strength above the card. */
.map__bg .pbg {
  aspect-ratio: auto;
  height: 70%;
  background-size: cover;
  background-position: center 58%;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 7%, #000 14%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 7%, #000 14%);
}
/* with forest actually behind it, the window can be a little more open */
.map__detail { background: rgba(255, 255, 255, .68); }

/* =========================================================================
   27. MISSION BLOB — positioned by hand in the tuner. The nudge is folded
   back into the margins so it scales with the viewport instead of sitting as
   a fixed pixel shift: at 1440 these resolve to the exact values tuned
   (-260 across, -302 up), and they ease off on narrower screens.
   ====================================================================== */
.blob--mission {
  width: min(596px, 46vw);
  aspect-ratio: 1.04;
  margin-right: calc(-1 * clamp(2rem, 18vw, 260px));
  margin-top: calc(-1 * clamp(2.5rem, 21vw, 302px));
}
.blob--mission > img { border-radius: 74% 26% 52% 48% / 46% 30% 70% 54%; }
@media (max-width: 1100px) {
  .blob--mission { width: min(520px, 62vw); margin-top: calc(-1 * clamp(1rem, 8vw, 120px)); }
}
@media (max-width: 860px) {
  .blob--mission { width: min(500px, 88vw); margin-right: 0; margin-top: 1.5rem; }
}

/* =========================================================================
   28. TUNED BLOBS — positions taken from the tuner and converted from pixel
   nudges into percentages of their own section, so they hold at other widths.
   Several sit partly outside their section by design, so the clipping wrapper
   is opened up and each one declares which layer it belongs on.
   ====================================================================== */
.blobwrap { overflow: visible; }

/* layer: behind its own section's content by default */
.blobwrap { z-index: 0; }
/* in front of it where the shape should read over the copy */
.blobwrap--front { z-index: 5; }

.sideblob { transform: none; }

.sideblob--journey {
  left: -2.5%; right: auto; top: -25.4%;
  width: min(378px, 26.3vw); aspect-ratio: 1.36; opacity: 1;
}
.sideblob--journey > img { border-radius: 72% 28% 54% 46% / 38% 62% 62% 62%; }

.sideblob--family {
  left: -6%; right: auto; top: 20%;
  width: min(1080px, 78vw); aspect-ratio: 1.55; opacity: .16;
  border-radius: 26% 74% 46% 54% / 62% 36% 64% 38%;
}

.impact__blob {
  left: -21.4%; right: auto; top: -7%;
  width: min(700px, 51.5vw); aspect-ratio: .9; opacity: .4;
  transform: none;
  /* the shape now lives on the blob itself, since the photograph inside it
     has been replaced by the contour fill */
  border-radius: 58% 42% 51% 49% / 46% 55% 45% 54%;
}


.sideblob--donate {
  left: 73.9%; right: auto; top: 69.6%;
  width: min(1038px, 76.3vw); aspect-ratio: .91; opacity: 1;
}
.sideblob--donate { border-radius: 28% 72% 56% 44% / 66% 34% 34% 34%; }

/* the mission blob is in flow, so its tuned place is already held by the
   margins set earlier; only its shape is restated here */
.blob--mission { width: min(596px, 46vw); aspect-ratio: 1.04; opacity: 1; transform: none; }
.blob--mission > img { border-radius: 74% 26% 52% 48% / 46% 30% 70% 54%; }

/* the blobs now run past their sections on purpose, which reintroduced
   sideways scroll. Each host clips the horizontal axis only: the shapes still
   cross into neighbouring sections vertically, they just cannot push the page
   wider than the window. */
.journey, .family, .impact, .threats, .act, .donate {
  overflow-x: clip;
  overflow-y: visible;
}





/* ======================================================================
   30. TUNED CARDS AND SPACING — taken from the tuner's Cards and Spacing
   tabs at 1360px wide. Pixel nudges are folded into the properties that
   actually hold each box in place, and the lifts keep a clamp so they
   scale down with the window instead of over-hanging on a laptop.
   ====================================================================== */

/* The journey card rises further into the section above than it did: the
   straddle is deeper, so more of the card sits on the ember ground. */
.crosscard--family {
  margin-top: calc(-1 * clamp(120px, 16.1vw, 219px));
  margin-left: -18px;
}

/* The 460,000 hectares card moves to the left of the shell and drops almost
   flush with the section top, so it reads as the opening statement of the
   dark section rather than something hanging over the join. */
.crosscard--impact {
  margin-top: -8px;
  margin-left: 19px;
  margin-right: auto;
  padding: 22px 24px;
}

/* The sanctuary panel drops to sit level with the top of the map plate and
   pulls in from the right edge. */
.map__detail {
  margin-top: 128px;
  /* shifted left in its grid cell without narrowing: the panel keeps the
     full width of the cell, it just sits 53px further in from the edge */
  margin-left: -53px;
  margin-right: 53px;
}

/* Section padding: the mission opens a little tighter, and the map and the
   dark impact section lose their top padding so their first element meets
   the seam above it. */
.mission { padding-top: clamp(3.5rem, 8vw, 90px); }
.map { padding-top: 0; }
.impact { padding-top: 0; }

/* The tuned values above are desktop measurements, so the stacked layouts get
   their own: the deep lift and the side nudges are meaningless once the cards
   run the full width, and the detail panel's negative margin would hang off
   the left edge of a phone. */
@media (max-width: 1020px) {
  .map__detail {
    margin-top: clamp(1.2rem, 3vw, 2rem);
    margin-left: 0;
    margin-right: 0;
  }
}
@media (max-width: 860px) {
  .crosscard--family {
    margin-top: calc(-1 * clamp(50px, 9vw, 90px));
    margin-left: 0;
  }
  .crosscard--impact { margin-left: 0; }
}


/* ======================================================================
   31. IMPACT — tighter, and the ember card properly across the join
   ====================================================================== */

/* The section carried too much air for what it says: the vertical rhythm is
   pulled in across every join inside it rather than taken out of one place,
   so the proportions hold and only the emptiness goes. */
.impact__top { margin-bottom: clamp(1.2rem, 2vw, 1.7rem); }
.impact__pic { max-width: 560px; }
.impact .stats { row-gap: clamp(1rem, 2vw, 1.9rem); }
.impact .give {
  margin-top: clamp(1.6rem, 2.4vw, 2.2rem);
  padding-top: clamp(1.1rem, 1.9vw, 1.7rem);
  padding-bottom: clamp(1.1rem, 1.9vw, 1.7rem);
}
.cross__lead--impact { margin-top: clamp(1.4rem, 2.4vw, 2.1rem); }

/* The ember card straddles the seam above it. With no top padding on the
   section, the card's negative margin was collapsing through and moving the
   section instead of the card, so the section takes a flow root: the margin
   now works inside it and the card climbs out over the map above. */
.impact { display: flow-root; }
.crosscard--impact {
  /* the dark ground starts at the top of the curve, not at the top of the
     section, so the lift is measured against the curve: the card sits half in
     the rainforest above and half on the dark below. Both values scale with
     the window, because the curve does too. */
  margin-top: calc(-1 * clamp(70px, 11.9vw, 190px));
  margin-bottom: clamp(50px, 8.4vw, 130px);
  z-index: 6;
}
@media (max-width: 860px) {
  .crosscard--impact {
    margin-top: calc(-1 * clamp(50px, 9vw, 90px));
    margin-bottom: clamp(1.4rem, 4vw, 2rem);
  }
}

/* ======================================================================
   32. IMPACT — a second pass at the height
   ====================================================================== */

/* Nothing gets smaller to read: the type, the numerals and the artwork keep
   their weight. What goes is the air between them, taken evenly so the
   section still breathes at every join. */
.impact__top { gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.impact__pic { max-width: 500px; }
.impact .stats { row-gap: clamp(.9rem, 1.5vw, 1.4rem); }
.impact .stat__num { margin-bottom: .25rem; }
.impact .stat__label { margin-bottom: .2rem; }
.impact .stat__desc { line-height: 1.42; }
.impact .give { margin-top: clamp(1.2rem, 1.8vw, 1.6rem); }
.cross__lead--impact { margin-top: clamp(1.1rem, 1.8vw, 1.6rem); }

/* the straddling card can sit closer to the headline below it now that the
   headline block itself is tighter */
.crosscard--impact { margin-bottom: clamp(40px, 5.9vw, 90px); }

/* the headline column takes a little more of the row, which lets the
   statement set on fewer lines and drops the height of the whole block */
.impact__top { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.impact__pic { max-width: 460px; }

/* the wider headline column is a desktop measure; the stacked layout keeps
   its single column */
@media (max-width: 860px) {
  .impact__top { grid-template-columns: 1fr; }
}

/* ======================================================================
   33. IMPACT — closer heading, bigger animal
   ====================================================================== */

/* the air under the straddling card was doing nothing: the card already
   separates itself from the heading by sitting on a different ground */
.crosscard--impact { margin-bottom: clamp(22px, 2.6vw, 40px); }

/* The orangutan grows by a third and is allowed to break its row: it climbs
   into the section above and bleeds past the right edge, so the extra size
   costs no height at all — the row is measured by the headline beside it. */
.impact__pic {
  /* it must not shrink back to the width of its column: the whole point is
     that it is bigger than the space it was given */
  flex: none;
  /* the base rule sets width:100%, which pins it to the column it is trying
     to escape, so the width is stated outright here */
  width: 600px;
  max-width: none;
}
.impact__hero {
  align-self: start;
  margin-top: -160px;
  /* the bleed stops at the window edge: any further and the right side of
     Borneo is clipped off by the section's horizontal clip */
  margin-right: -60px;
}
@media (max-width: 860px) {
  .impact__hero { align-self: auto; margin-top: 0; margin-right: 0; }
  .impact__pic { flex: 0 1 auto; width: 100%; max-width: 100%; }
}


/* The two halves of "Critically endangered / for a reason." read as one line
   broken by the tear, so the tear between them is shallower still: the second
   half now sits almost directly under the first. */
.impact > .seam--torn { height: clamp(12px, 1.5vw, 20px); }
.threats__title .h-sec { margin-top: 0; }

/* the second tear matches the first, so both straddling headlines break the
   same way */
.threats > .seam--torn { height: clamp(12px, 1.5vw, 20px); }


/* ======================================================================
   34. LEGIBILITY OVER THE CONTOUR GROUND
   ====================================================================== */

/* The mission sits on the topography now, and light serif body copy was the
   first thing the texture ate. Weight and colour both come up a step; the
   contours stay where they are. */
.mission .lede,
.mission__body p { font-weight: 400; color: var(--ink); }

/* the fact ticker was set at a size that assumed no ground behind it */
.fact { font-size: 1.12rem; color: var(--ink); }

/* The adopt blob is meant to run past the bottom of its own section. The
   section below is a later sibling, so its white ground was painting straight
   over the overflow: lifting the section carries the blob across the join. */
.family { z-index: 2; }

/* The curve above the impact section is drawn by a seam that sits on z-index 1
   in the page's own stacking order, so it was painting over the 70px of blob
   that reach up into the map. The section takes a layer of its own, the same
   way the adopt section does, and the blob crosses the join. */
.impact { z-index: 2; }

/* and the dark ground gets more air before the closing line, so the bottom of
   the section is not so tight — taken above the line rather than below it,
   which would have pushed the two halves of the heading apart again */
.cross__lead--impact { margin-top: clamp(3.2rem, 6vw, 5.1rem); }

/* ======================================================================
   35. THE OVERLAY CARDS LIFT OFF THE PAGE
   A deeper, two-part shadow: a wide soft pool for the height, and a tighter
   darker one right under the card so the edge reads as lifted rather than
   printed. Every card that sits over another surface gets it.
   ====================================================================== */
:root {
  --shadow-pop:
    0 34px 70px -18px rgba(6, 35, 26, .55),
    0 12px 26px -8px rgba(6, 35, 26, .38);
}
.crosscard,
.appeal,
.map__detail { box-shadow: var(--shadow-pop); }

/* ======================================================================
   36. THE REEL ARROWS — they sit on photography, so they have to carry
   their own contrast. Bigger circle, heavier chevron, and a shadow deep
   enough to separate them from whatever picture is behind them.
   ====================================================================== */
.reel .arrow--float {
  width: 58px;
  height: 58px;
  border-color: transparent;
  background: var(--white);
  color: var(--ink);
  box-shadow:
    0 12px 30px rgba(6, 35, 26, .5),
    0 2px 6px rgba(6, 35, 26, .34);
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.reel .arrow--float svg { width: 26px; height: 26px; }
.reel .arrow--float svg path { stroke-width: 2.9; }
.reel .arrow--float:hover {
  background: var(--white);
  transform: translateY(-50%) scale(1.07);
  box-shadow:
    0 16px 36px rgba(6, 35, 26, .55),
    0 3px 8px rgba(6, 35, 26, .38);
}
.reel .arrow--float:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 3px;
}


/* ======================================================================
   37. LEAF, DEEPER — a trial. The bright leaf reads lighter than its swatch
   against the near-black canopy, so the places where it is TEXT on a dark
   ground take a deeper green. Where leaf is a highlight block behind dark
   text, a focus ring or the contour tint, it stays as it was: dropping those
   would cost the contrast the block relies on.

   To go back: delete this section. To take it further: change --leaf-deep.
   ====================================================================== */
:root { --leaf-deep: #5AAF66; }   /* ~6:1 on canopy, against leaf's 7.5:1 */

.stat__num,
.eyebrow--leaf,
.stage__where,
.crosscard--family .eyebrow,
.crosscard--family b,
.foot__tag { color: var(--leaf-deep); }

/* ======================================================================
   38. THE REEL AS A GALLERY — a trial. Every way to help on screen at once
   instead of a track you have to push. The tiles keep their different
   widths and heights, so it reads as a mosaic rather than a grid of
   identical squares: ten columns, two of them double width, and the
   stacked ones holding a pair of smaller pictures.

   The spans add up to exactly twelve units across a six column grid, so the
   mosaic fills two complete bands with no holes left over.
   ====================================================================== */
.reel--gallery .reel__track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(96px, 13.5vh, 165px);
  gap: 10px;
  overflow: visible;
  scroll-snap-type: none;
  padding: .4rem max(1.5rem, calc((100% - var(--shell)) / 2)) .6rem;
}
.reel--gallery .rcol {
  width: auto;
  height: auto;
  grid-column: span 1;
  grid-row: span 2;
}
.reel--gallery .rcol:nth-child(2),
.reel--gallery .rcol:nth-child(10) { grid-column: span 2; }

/* nothing to page through any more */
.reel--gallery .arrow { display: none; }

/* On narrower grids the spans no longer add up to whole bands, so a double
   width tile that cannot fit beside its neighbour leaves a hole and drops to
   the next row. Dense packing lets a later single tile fill that space
   instead: the order shifts a little, the mosaic stays solid. */
@media (max-width: 980px) {
  .reel--gallery .reel__track {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row dense;
  }
}
@media (max-width: 620px) {
  .reel--gallery .reel__track {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row dense;
  }
  .reel--gallery .rcol:nth-child(2),
  .reel--gallery .rcol:nth-child(10) { grid-column: span 2; }
}

/* the gallery tiles get real size, and the green section's copy drops to make
   room for them: the mosaic keeps its two bands, each row simply taller */
.reel--gallery .reel__track { grid-auto-rows: clamp(125px, 18vh, 210px); }
/* and the green section closes up under the mosaic rather than sitting away
   from it: the reel's own drop already carries the tiles into the green, so
   this only sets how much air follows them */
.donate { padding-top: calc(var(--reel-drop) - 8.333vw + clamp(2.5rem, 5vw, 4rem) - 70px); }

/* ======================================================================
   39. THE MISSION BLOB AS FILM — the video takes the shape, the size and
   the crop the photograph had, so nothing about the layout changes. Every
   blob rule that addressed the image now addresses the video as well.
   ====================================================================== */
.blob > video {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  border-radius: 57% 43% 48% 52% / 45% 54% 46% 55%;
  background: var(--wash);
}
.blob--mission > video { border-radius: 74% 26% 52% 48% / 46% 30% 70% 54%; }

/* the four stages blob takes film on the same terms as the mission one */
.sideblob video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ======================================================================
   40. THE FOOT OF THE PAGE
   The donate blob is meant to cross into the footer, and it does — but its
   shape carries on 174px past the end of the footer, and an unclipped
   wrapper means that extra height becomes document height. The page was
   ending in a strip of the body's white.

   The ground under everything is the footer's own dark, so anything that
   hangs below the last section reads as the footer continuing rather than
   as a gap. Every section paints its own background, so nothing else
   changes.
   ====================================================================== */
body { background: var(--canopy); }

/* And the page now ends where the footer ends. The blob's tail is clipped at
   the body's own box, which stops it adding to the document's height, while
   everything above that edge — including the part of the shape that crosses
   into the footer — is untouched. The root keeps the scrolling, so the fixed
   nav and every sticky element behave exactly as before. */
html { overflow-y: auto; }
body { overflow-y: clip; }

/* ======================================================================
   41. THE COLOUR TURNED DOWN — what makes this canopy4.

   canopy3 runs three whole sections at full strength: the rehabilitation
   stages in the deep orange, the threats in brick, the donate in the
   working green. Read in sequence they make the page shout, and the
   overlay cards — the things actually worth shouting about — have
   nothing left to stand out against.

   So each of those three grounds drops to a fifth of its strength over
   white. The hue is kept, the volume comes down: a wash rather than a
   block. The hero, the deep-forest impact section, the footer and every
   overlay card keep their colour untouched, which now makes them the
   loudest things on the page rather than three of many.

   The tints are each colour at 20% over #FFFFFF, worked out once here:
     ember-deep  #A83D12  ->  #EED8D0
     brick       #8B1A1A  ->  #E8D1D1
     forest      #0B8043  ->  #CEE6D9
   The three seams that paint these grounds carry the same values inline
   in index.html, so change both together.

   A pale ground cannot carry white type, so everything inside these three
   sections inverts to ink, and the accents that were tuned against a dark
   ground take their section's own colour at full strength instead — which
   is where the hue now lives.
   ====================================================================== */
:root {
  --journey-wash: #EED8D0;
  --threats-wash: #E8D1D1;
  --donate-wash:  #CEE6D9;
}

/* ---- the stages: orange at a fifth ---- */
.journey { background: var(--journey-wash); color: var(--ink); }
.journey__title .h-sec { color: var(--ink); }
/* the eyebrow was white on orange; it now carries the orange itself */
.journey .eyebrow { color: var(--ember-deep); }
.journey .lede { color: var(--ink-soft); }
/* the outline button goes back to its own default, which was written for
   exactly this kind of light ground */
.journey .btn--outline { border-color: var(--ink); color: var(--ink); }
.journey .btn--outline:hover { background: rgba(255, 255, 255, .55); }

/* ---- the threats: brick at a fifth ---- */
.threats { background: var(--threats-wash); color: var(--ink); }
.threats__title .h-sec { color: var(--ink); }
.threats .lede { color: var(--ink-soft); }
.threats .lede strong { color: var(--ink); }
/* peach was a light tint for a dark ground and disappears on a pale one, so
   the eyebrow and the numbered keys take the full brick */
.threats .eyebrow--peach { color: var(--brick); }
.threat__k { color: var(--brick); }
.threat h3 { color: var(--ink); }
.threat__body > p:not(.threat__k) { color: var(--ink-soft); }
/* the box behind a picture while it loads: brick, at about the weight of the
   ground it sits on */
.threat__pic { background: rgba(139, 26, 26, .14); }
/* the hands emblem took currentColor, which has just become ink; it goes back
   to the section's own colour so it reads as a watermark, not a smudge */
.threats .hand { color: var(--brick); opacity: .12; }

/* the heading that straddles the join into take action: both halves are now
   ink on a light ground, which is what the two-tone trick was reaching for */
.cross--onbrick { color: var(--ink); }
.threats .cross--up { color: var(--ink); }

/* ---- the donate: forest at a fifth ---- */
.donate { background: var(--donate-wash); color: var(--ink); }
.donate .h-sec { color: var(--ink); }
.donate .lede { color: var(--ink-soft); }
.donate .lede strong { color: var(--ink); }
/* the working green only reaches 3.8:1 on its own fifth-strength wash, so the
   eyebrow takes the deep forest and clears 4.5:1 */
.donate .eyebrow--mint { color: var(--forest-deep); }
.donate .gift { color: var(--ink); }
.donate .gift b { color: var(--ink); }
.donate .gift span span { color: var(--ink-soft); }
.donate .gift__pic { background: rgba(11, 128, 67, .14); }
/* the ghost button was a white outline for a dark ground */
.donate .btn--ghost { border-color: var(--ink); color: var(--ink); }
.donate .btn--ghost:hover { background: rgba(255, 255, 255, .55); border-color: var(--ink); }

/* the donate blob draws its contours in leaf, which was pitched against the
   full green and vanishes against a fifth of it: the working green at a
   slightly higher weight puts the texture back.
   The section is named in the selector on purpose: rings.css loads after this
   file and sets the same property at .sideblob--donate::after, so an equally
   specific rule here would simply be overwritten. */
.donate .sideblob--donate::after { background: var(--forest); opacity: .14; }

/* The brick Donate button, the brick marker in its heading and every overlay
   card are deliberately left at full strength. They are the page's actions
   and its statements, and they are now the only saturated colour on a
   washed-back page — which is the whole point of the exercise. */

/* ======================================================================
   42. ALL THE WAY DOWN — every coloured section to zero.

   Block 41 took three sections to a fifth of their colour. This takes those
   three to nothing at all, and brings the fourth — the deep-forest impact
   section — down with them. Four sections, one white ground.

   What is left holding colour: the hero, the footer, and the overlay cards
   that straddle the joins (the mission appeal in brick, the family card in
   deep forest, the impact card in orange). Those cards now float on an
   unbroken white page and are, along with the photography, the only colour
   between the hero and the foot.

   The washes from block 41 are left defined above rather than deleted, so
   going back to a fifth is a matter of removing this block.

   Two consequences worth knowing before looking at it:

   1. The seams go with the grounds. A seam is a shape painted in the colour
      of the section it introduces, so white-on-white means the curves and
      the torn edges are still there and can no longer be seen. The page
      becomes one continuous scroll, and what separates sections now is
      spacing and photography alone.

   2. The impact section was carrying the page's heaviest contrast — white
      and leaf on near-black. Inverted, its statistics need the working green
      rather than the leaf, which is pitched for a dark ground and is far too
      light to sit on white.
   ====================================================================== */

/* ---- the four grounds ---- */
.journey,
.threats,
.donate,
.impact { background: var(--white); }

/* ---- the impact section, inverted ---- */
.impact { color: var(--ink); }
.impact .h-sec { color: var(--ink); }
.impact .lede { color: var(--ink-soft); }
/* leaf is a highlight for a dark ground; on white it is barely a colour */
.impact .eyebrow--leaf { color: var(--forest); }
.impact .stat__num { color: var(--forest); }
.impact .stat__label { color: var(--ink); }
.impact .stat__desc { color: var(--ink-soft); }
/* the icons were lit for a dark ground and their shadow was doing the
   separating; on white it only muddies them */
.impact .stat__icon img { filter: none; }

/* the give card was a white card on near-black and needed no edge. On white
   it has only its shadow, so it takes a hairline as well */
.impact .give { border: 1px solid var(--rule); }

/* the heading that straddles the join into the threats: both halves ink, and
   the eyebrow takes the brick of the section it is introducing */
.impact .cross--up { color: var(--ink); }
.impact .eyebrow--peach { color: var(--brick); }

/* The blob's contours are drawn in leaf by rings.css, which loads after this
   file: naming the section gives the rule the specificity to win. The working
   green at the same weight keeps the texture visible on white, and the blob's
   own tuned opacity is left alone. */
.impact .impact__blob::after { background: var(--forest); }

/* ---- the three washed sections, the rest of the way ---- */
/* the placeholder grounds behind pictures were tinted to match their washes */
.threats .threat__pic { background: var(--wash); }
.donate .gift__pic { background: var(--wash); }
/* the hands emblem was a watermark on brick, then on a brick wash; on white
   the same weight reads as a pink smudge rather than as texture */
.threats .hand { color: var(--brick); opacity: .06; }

/* ======================================================================
   44. THE CONTOURS GO

   Every topographic surface on the page is switched off, so the white runs
   flat from the bottom of the hero to the top of the footer with no texture
   in it at all. Block 43 tried the contours across the four white sections
   and is gone; this goes further and takes out the ones canopy3 shipped with
   as well.

   rings.css loads AFTER this file, so matching its specificity would lose.
   Each selector here is prefixed with `html` purely to outrank it by one
   element, and `content: none` removes the pseudo-element outright rather
   than painting it invisibly, so nothing is composited either.

   Two of these are not just texture. The impact blob and the donate blob
   have no fill of their own — rings.css sets `background: none` on both and
   the contour lines are the only thing drawing them — so switching the
   contours off removes those two shapes from the page entirely. That is
   intended here, not a side effect that was missed.

   To bring the whole treatment back, delete this block.
   ====================================================================== */

/* the contour arc on the overlay cards */
html .crosscard::before,
html .appeal::before { content: none; }

/* the contours across the mission, and in the white curve into the hero */
html .mission::before { content: none; }
html .hero .seam--curve::before { content: none; }

/* the blob shapes drawn in contour lines. The impact and donate blobs go with
   them, having nothing else to draw them; the family blob keeps its leaf fill,
   which lives on ::before and is a tint rather than a ring. */
html .impact__blob::before,
html .impact__blob::after { content: none; }
html .sideblob--donate::before,
html .sideblob--donate::after { content: none; }
html .sideblob--family::after { content: none; }