/* ============================================================
   B Corridor — site styles
   Organised by component. The brand palette and layout tokens
   live in :root; everything else references them by name.
   ============================================================ */

:root {
  /* Typography */
  --font-display: 'Gaegu', sans-serif;          /* headings + UI labels */
  --font-body: 'Open Sans', sans-serif;          /* readable body copy */
  --font-serif-display: 'Cormorant Garamond', Georgia, serif; /* honeycomb titles */
  --font-serif-body: 'Libre Baskerville', Georgia, serif;     /* honeycomb body */
  --font-hand: 'Gaegu', sans-serif;              /* hand-drawn numerals; sans fallback flashes far less than cursive */

  /* Brand palette */
  --forest: #16311f;            /* darkest leaf green — headings & body */
  --green: #46855c;             /* primary green — buttons & accents */
  --green-dark: #386b49;        /* primary green, hover */
  --brown: #896c4b;             /* earth brown — donate, route lines */
  --brown-dark: #6f5638;        /* earth brown, hover */
  --blue: #83b0ca;              /* dusty blue — secondary buttons */
  --blue-dark: #6f9fbc;
  --sage: #d8e4b9;
  --sage-light: #eef3df;
  --sage-tint: #e3ecc9;
  --cream: #fcfdf9;             /* page background */
  --cream-panel: #f1f3e6;       /* framed panel background */
  --footer-bg: #eef1e4;
  --white: #ffffff;

  /* Text tones */
  --text-body: #16311f;
  --text-muted: #3c5b50;
  --text-muted-2: #5a7068;
  --text-muted-3: #6a807a;

  /* Hairline borders */
  --hairline: rgba(22, 49, 31, 0.12);
  --hairline-strong: rgba(22, 49, 31, 0.14);
  --hairline-brown: rgba(137, 108, 75, 0.20);

  /* Layout */
  --page-gutter: 5cm;           /* desktop side margin */
  --announce-h: 80px;
  --section-y: clamp(64px, 7vw, 112px);
  --section-y-tight: clamp(38px, 4.5vw, 72px);
}

body.announce-closed { --announce-h: 0px; }

/* ───────────── Reset & base ───────────── */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(92px + var(--announce-h));
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--cream);
}

img { max-width: 100%; }

h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 500; }
h1 { font-size: clamp(2.75rem, 6vw, 5.25rem); }
h2 { font-size: clamp(2.25rem, 5vw, 3.875rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
h4 { font-size: clamp(1rem, 2vw, 1.25rem); }

p { font-family: var(--font-body); font-size: clamp(1rem, 1.6vw, 1.125rem); }

button, input, textarea, select { font: inherit; }

/* ───────────── Accessibility helpers ───────────── */
.visually-hidden,
.skip-link:not(:focus):not(:focus-visible) {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 14px; left: 14px;
  z-index: 9999;
  display: inline-flex;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid rgba(137, 108, 75, 0.85);
  outline-offset: 4px;
  border-radius: 10px;
}

/* Offset anchor jumps so fixed header doesn't cover the target */
.anchor-target {
  position: absolute;
  top: calc(-1 * (96px + var(--announce-h)));
  left: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(28, 63, 42, 0.25);
  border-radius: 14px;
  font-family: var(--font-hand);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--btn-shadow, #2f6d4d);
  transition: background-color .2s ease, color .2s ease, transform .12s ease, box-shadow .12s ease;
}
/* chunky block button: it sinks toward its bottom shadow on hover/press */
.btn:hover,
.btn:focus-visible { transform: translateY(2px); box-shadow: 0 3px 0 var(--btn-shadow, #2f6d4d); }
.btn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--btn-shadow, #2f6d4d); }

/* Primary — solid green */
.btn--primary {
  --btn-shadow: #2f6d4d;
  padding: 15px 34px;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  background: var(--green);
  color: var(--white);
}
.btn--primary:hover,
.btn--primary:focus-visible { background: var(--green-dark); }

/* Secondary — dusty blue (over light sections) */
.btn--secondary {
  --btn-shadow: #5a86a3;
  padding: 15px 33px;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  background: var(--blue);
  color: var(--forest);
  border-color: var(--blue-dark);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: var(--forest);
}

/* Donate — green to match primary CTA, label + heart */
.btn--donate {
  --btn-shadow: #2f6d4d;
  padding: 12px 26px;
  gap: 0.48em;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--green);
  color: var(--white);
}
.btn--donate:hover,
.btn--donate:focus-visible { background: var(--green-dark); }

.donate-label {
  order: 1;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 1px;
  line-height: 1;
}
.donate-heart {
  order: 2;
  display: inline-flex;
  align-items: center;
  font-size: 1.05em;
  line-height: 1;
}
.donate-heart svg {
  width: 1.35em;
  height: auto;
  display: block;
  fill: currentColor;   /* matches the button's text color */
}

/* Heartbeat the Donate heart on hover */
@keyframes heart-pulse {
  0%   { transform: scale(1); }
  15%  { transform: scale(1.28); }
  30%  { transform: scale(1); }
  45%  { transform: scale(1.2); }
  60%, 100% { transform: scale(1); }
}
.btn--donate:hover .donate-heart,
.btn--donate:focus-visible .donate-heart,
.btn--cta-solid:hover .donate-heart,
.btn--cta-solid:focus-visible .donate-heart {
  transform-origin: center;
  animation: heart-pulse 0.9s ease-in-out infinite;
}
.btn:hover .donate-label,
.btn:focus-visible .donate-label { border-bottom-color: currentColor; }

/* Map — solid green pill */
.btn--map {
  --btn-shadow: #2f6d4d;
  min-height: 52px;
  padding: 0 30px;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  background: var(--green);
  color: var(--white);
}
.btn--map:hover,
.btn--map:focus-visible { background: var(--green-dark); color: var(--white); }

/* News — white pill on the green panel */
.btn--news {
  --btn-shadow: #b7c7a8;
  padding: 12px 24px;
  min-width: 188px;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--cream);
  color: var(--forest);
}
.btn--news:hover,
.btn--news:focus-visible { background: var(--white); color: var(--forest); }

/* CTA buttons (on the green CTA panel) */
.btn--cta-solid,
.btn--cta-outline {
  padding: 12px 28px;
  font-family: var(--font-hand);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.btn--cta-solid {
  --btn-shadow: #b7c7a8;
  gap: 0.48em;
  background: var(--cream);
  color: #2f6d4d;   /* "Donate Now" label + heart (heart inherits this color) */
}
.btn--cta-solid:hover,
.btn--cta-solid:focus-visible { --btn-shadow: #2f6d4d; background: var(--green); color: var(--white); border-color: var(--white); }
.btn--cta-solid .donate-label,
.btn--cta-solid .donate-heart { color: inherit; }

.btn--cta-outline {
  --btn-shadow: #2f6d4d;   /* dark green ledge so it reads on the green section */
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
}
/* on hover/focus and on click: label + hand icon and the shadow turn dark green */
.btn--cta-outline:hover,
.btn--cta-outline:focus-visible,
.btn--cta-outline:active { --btn-shadow: #2f6d4d; background: var(--cream); color: #2f6d4d; }

/* Trailing circular arrow badge (Explore the corridor / map / news) */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75em;
  height: 1.75em;
  margin-left: 0.7em;
  border-radius: 50%;
  background: var(--white);
  color: var(--green);
  font-size: 0.86em;
  line-height: 1;
  transition: transform .2s ease;
}
/* SVG arrow used in CTA badges + 'Learn more' links */
.cta-arrow {
  width: 0.95em;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  transition: transform .2s ease;
}
/* slide the arrow inside the circular badge from left to right on hover */
:hover > .btn-icon .cta-arrow,
:focus-visible > .btn-icon .cta-arrow { transform: translateX(3px); }
/* On the cream news button, invert: green circle, white arrow */
.btn--news .btn-icon { background: var(--green); color: var(--white); }

/* Trailing plant sprig icon — sits right of the label, follows button text color */
.btn-leaf {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 0.5em;
}
.btn-leaf svg {
  height: 1.5em;
  width: auto;
  display: block;
  fill: currentColor;
}

/* ============================================================
   SHARED ACCENTS
   ============================================================ */
/* Brown "kicker" pill above a section heading */
.kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  padding: 9px 18px;
  border-radius: 6px;
  background: var(--brown);
  color: var(--white);
  font-family: var(--font-hand);   /* Gaegu */
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.kicker:hover { background: var(--brown-dark); }

/* ============================================================
   HEADER — announcement + transparent navbar
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 5000;
  background: transparent;
  transition:
    background-color .55s cubic-bezier(.22, 1, .36, 1),
    box-shadow .55s cubic-bezier(.22, 1, .36, 1),
    backdrop-filter .55s cubic-bezier(.22, 1, .36, 1);
}
.site-header.is-scrolled,
.site-header.menu-is-open {
  background: rgba(255, 255, 255, 0.9);
  /* lighter blur: an 18px backdrop-blur over the autoplaying hero video made
     scrolling janky; 10px (and a touch more opacity) keeps the glass look cheap */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 36px rgba(70, 133, 92, 0.12);
}

/* Announcement bar */
.announce {
  position: relative;
  z-index: 110;
  min-height: var(--announce-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}
.announce.is-hidden { display: none; }

.announce-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
/* "PROTECTING WATERFORD'S BIODIVERSITY" — Gaegu, compact, spaced */
.announce-content > span {
  font-family: var(--font-hand);   /* Gaegu */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  font-weight: 700;
}
.announce-icon {
  display: block;
  width: 74px; height: 80px;
  flex: 0 0 74px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.announce-icon--bee { filter: brightness(0) invert(1); }
.announce-icon--art { width: 52px; height: 56px; flex-basis: 52px; }
.announce-icon--plant { width: 46px; height: 50px; flex-basis: 46px; }

.announce-close {
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.announce-close:hover,
.announce-close:focus-visible {
  background: rgba(255, 255, 255, 0.26);
  transform: translateY(-50%) scale(1.04);
}

/* Navbar */
.navbar {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: padding .55s cubic-bezier(.22, 1, .36, 1);
}

/* Brand — full / short logo crossfade on scroll */
.brand {
  position: relative;
  display: inline-grid;
  align-items: center;
  justify-items: start;
  min-width: 92px;
  text-decoration: none;
  transition: min-width .55s cubic-bezier(.22, 1, .36, 1);
}
.brand-logo {
  grid-area: 1 / 1;
  display: block;
  width: auto;
  transform-origin: left center;
  transition: height .55s cubic-bezier(.22, 1, .36, 1), opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1);
  will-change: height, transform;
}
.brand-logo--full { height: 90px; opacity: 1; transform: scale(1); }

.site-header.is-scrolled .brand,
.site-header.menu-is-open .brand { min-width: 74px; }
.site-header.is-scrolled .navbar,
.site-header.menu-is-open .navbar { padding-top: 6px; padding-bottom: 6px; }
.site-header.is-scrolled .brand-logo--full,
.site-header.menu-is-open .brand-logo--full { height: 56px; }

/* Nav links — white over the hero, forest once scrolled */
.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 28px;
  z-index: 5001;
}
.nav-links a {
  position: relative;
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 501;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 4px 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.28);
  transition: color .2s ease;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.45, .05, .25, 1);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after { transform: scaleX(1); }

.site-header.is-scrolled .nav-links a,
.site-header.menu-is-open .nav-links a { color: #386b49; text-shadow: none; }
.site-header.is-scrolled .nav-links a::after,
.site-header.menu-is-open .nav-links a::after { background: var(--green); }

.nav-donate-link { display: none; }

.mobile-menu {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  cursor: pointer;
}
.mobile-menu span,
.mobile-menu::before,
.mobile-menu::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 2px;
  border-radius: 999px;
  background: var(--cream);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
.mobile-menu span    { transform: translate(-50%, -50%); }
.mobile-menu::before { transform: translate(-50%, -50%) translateY(-6px); }
.mobile-menu::after  { transform: translate(-50%, -50%) translateY(6px); }
.site-header.is-scrolled .mobile-menu,
.site-header.menu-is-open .mobile-menu { background: var(--green); }
/* hamburger morphs into an X while the menu is open (and back on close) */
.site-header.menu-is-open .mobile-menu span    { opacity: 0; }
.site-header.menu-is-open .mobile-menu::before { transform: translate(-50%, -50%) rotate(45deg); }
.site-header.menu-is-open .mobile-menu::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.site-hero {
  position: relative;
  width: 100%;
  height: 112vh;
  min-height: 760px;
  overflow: hidden;
  /* Poster always shows behind the video, so the hero is never black even if
     the video is slow to start or autoplay is blocked. */
  background: var(--green) url('assets/hero-poster.jpg') center / cover no-repeat;
  isolation: isolate;
  z-index: 1;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
  pointer-events: none;
  /* Hidden until it's actually playing, then fade in over the poster. */
  opacity: 0;
  transition: opacity .7s ease;
  transform: translate3d(0, 0, 0) scale(1.001);
  backface-visibility: hidden;
  will-change: transform;
}
.hero-video.is-playing { opacity: 1; }
/* On tablet/laptop the centered crop hides the bee — nudge the window a touch. */
@media (max-width: 1200px) {
  .hero-video { object-position: 56% center; }
}
@media (max-width: 900px) {
  .hero-video { object-position: 68% center; }
}

/* Legibility gradient between video and copy */
.site-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, 0) 75%),
    linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, 0) 40%);
}

.hero-inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  padding: clamp(180px, 24vh, 240px) 32px 160px;
  display: flex;
  align-items: flex-start;
}

.hero-copy {
  display: grid;
  gap: 22px;
  width: min(86vw, 460px);
}

.site-hero h1 {
  color: var(--white);
  font-size: clamp(2.6rem, 9vw, 3.8rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.hero-copy p {
  max-width: 470px;
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.5;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* Hero secondary button is a glass pill so it reads over the video */
.site-hero .btn--secondary {
  --btn-shadow: rgba(0, 0, 0, 0.3);
  color: var(--white);
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.site-hero .btn--secondary:hover,
.site-hero .btn--secondary:focus-visible {
  color: var(--white);
  background: rgba(255, 255, 255, 0.24);
  border-color: var(--white);
}

/* Organic cream wave at the foot of the hero */
.hero-wave {
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  width: 100%;
  height: clamp(108px, 10vw, 162px);
  z-index: 5;
  line-height: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-wave svg { display: block; width: 100%; height: 100%; }
.hero-wave path { fill: var(--cream); }

@media (min-width: 901px) {
  .site-hero { height: 118vh; min-height: 920px; }
  .hero-inner { align-items: stretch; padding: 0; }
  .hero-copy {
    position: absolute;
    top: clamp(230px, 26vh, 340px);
    left: 0;
    width: min(720px, 56vw);
    z-index: 6;
  }
  .site-hero h1 {
    max-width: 720px;
    margin-bottom: 10px;
    font-size: clamp(3.45rem, 5.1vw, 5.6rem);
    line-height: 0.96;
  }
}
@media (min-width: 901px) and (max-height: 800px) {
  .site-hero { height: 124vh; min-height: 900px; }
  .hero-copy { top: clamp(205px, 25vh, 285px); }
}
@media (max-width: 900px) {
  .hero-wave { height: 92px; }
  .hero-actions { margin-top: clamp(150px, 28vw, 220px); justify-content: center; }
}
@media (max-width: 560px) {
  .hero-inner { padding-top: 168px; padding-bottom: 140px; }
  .hero-wave { height: 76px; }
  .hero-actions { margin-top: clamp(220px, 44vw, 320px); justify-content: center; }
}

/* ============================================================
   POST-HERO IMPACT CARD
   ============================================================ */
.impact-card-section {
  position: relative;
  z-index: 30;
  margin-top: calc(-1 * clamp(92px, 8.4vw, 136px));
  padding: 0 0 var(--section-y);
  background: transparent;
  overflow: visible;
}
.impact-card-inner {
  position: relative;
  z-index: 31;
  width: min(1280px, calc(100% - 64px));
  max-width: 1280px;
  margin: 0 auto;
}
.impact-card {
  position: relative;
  z-index: 32;
  min-height: clamp(160px, 13vw, 212px);
  padding: clamp(30px, 3.8vw, 50px) clamp(28px, 4.8vw, 66px) clamp(58px, 5vw, 74px);
  /* asymmetric corners give a sketched / hand-drawn feel */
  border-radius: 26px 42px 22px 36px / 32px 22px 36px 26px;
  background: linear-gradient(180deg, var(--sage-light) 0%, var(--sage-tint) 100%);
  border: 1.5px solid #46855c;
  /* offset solid shadow = quick double-trace of the ink line */
  box-shadow: 4px 5px 0 0 #46855c;
  transform: rotate(-0.4deg);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  overflow: visible;
}

.impact-card-item {
  position: relative;
  min-height: 100px;
  padding: 0 clamp(16px, 2.4vw, 30px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(10px, 1.2vw, 18px);
  row-gap: 6px;
  align-content: center;
  justify-items: start;
  text-align: left;
  color: var(--forest);
}
/* icon in the left column, spanning the text rows; copy in the right column */
.impact-card-item .impact-card-icon { grid-column: 1; grid-row: 1 / span 3; align-self: center; }
.impact-card-item .impact-card-title,
.impact-card-item p,
.impact-card-item .impact-card-list { grid-column: 2; }
.impact-card-title {
  margin: 0;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  letter-spacing: 0.04em;
  line-height: 1;
  color: #593c0e !important;   /* brown, matching the SVG icons */
}
.impact-card-list {
  list-style: none;
  display: grid;
  gap: 4px;
  margin: 2px 0 0;
  padding: 0;
}
.impact-card-list li {
  font-family: var(--font-hand);   /* Gaegu */
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-muted);
}
.impact-card-list li::before { content: "\2713 "; }   /* ✓ + space */
.impact-card-item:not(:last-of-type)::after {
  content: "";
  position: absolute;
  right: 0; top: 16%; bottom: 16%;
  width: 1px;
  background: rgba(22, 49, 31, 0.16);
}
.impact-card-icon {
  width: clamp(50px, 4vw, 66px);
  height: clamp(50px, 4vw, 66px);
  display: block;
  filter: drop-shadow(4px 4px 0 #ffffff);
}
.impact-card-icon :where(path, circle, line, polyline) { stroke: var(--green); }
/* Filled "Action" icon: solid green silhouette, no line-art stroke */
.impact-card-icon--action { color: var(--green); }
.impact-card-icon--action path { fill: currentColor; stroke: none; }
/* "Education" icon: brand-green book + cap (white overlay removed) */
.impact-card-icon--education { color: var(--green); }
/* "Community" icon: brand-green people + rings */
.impact-card-icon--community { color: var(--green); }
.impact-card-item p {
  max-width: 230px;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--forest);
}

.impact-card-cta {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translate(-50%, 50%);
  z-index: 34;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: min(320px, calc(100% - 48px));
  padding: 16px 22px 16px 32px;
  border-radius: 14px;
  border: 1px solid rgba(28, 63, 42, 0.25);
  background: var(--green);
  color: var(--white);
  font-family: var(--font-hand);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 5px 0 #2f6d4d;   /* solid block shadow */
  transition: transform .12s ease, box-shadow .12s ease, background-color .2s ease;
}
/* sink toward the block shadow on hover/press (keeps its centered translate) */
.impact-card-cta:hover,
.impact-card-cta:focus-visible {
  transform: translate(-50%, calc(50% + 2px));
  background: var(--green-dark);
  box-shadow: 0 3px 0 #2f6d4d;
}
.impact-card-cta:active {
  transform: translate(-50%, calc(50% + 5px));
  box-shadow: 0 0 0 #2f6d4d;
}

@media (max-width: 900px) {
  .impact-card-section { margin-top: -72px; padding-bottom: clamp(76px, 10vw, 104px); }
  .impact-card-inner { width: calc(100% - 44px); max-width: calc(100% - 44px); }
  .impact-card { padding: 28px 20px 62px; }
  .impact-card-item { padding: 0 16px; }
}
@media (max-width: 660px) {
  .impact-card-section { margin-top: -58px; padding-bottom: 78px; }
  .impact-card-inner { width: calc(100% - 28px); max-width: calc(100% - 28px); }
  .impact-card { grid-template-columns: 1fr; gap: 22px; padding: 28px 20px 66px; }
  .impact-card-item { min-height: 0; padding: 0; }
  .impact-card-item:not(:last-of-type)::after { display: none; }
}

/* ============================================================
   BIODIVERSITY + HONEYCOMB
   ============================================================ */
.biodiversity-section {
  position: relative;
  z-index: 2;
  background: var(--cream);
  overflow: visible;
}
.biodiversity-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(520px, 1.1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 56px);
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--section-y-tight) 32px var(--section-y);
}

.content-left {
  position: relative;
  max-width: 500px;
}
.content-left > * { position: relative; z-index: 1; }
.content-left h2 {
  margin-bottom: 26px;
  color: var(--forest);
  font-size: clamp(2.25rem, 5vw, 3.875rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.content-left p {
  max-width: 400px;
  margin-bottom: 14px;
  color: var(--text-body);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.55;
}
.content-left p:last-of-type { margin-bottom: 28px; }

/* Hover the B in "B Corridor" — the bee takes its place */
.bee-b { position: relative; transition: color .2s ease; }
.bee-b::after {
  content: "🐝";
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  color: initial;   /* don't inherit the transparent color used to hide the B */
  opacity: 0;
  transform: scale(0.5) rotate(-10deg);
  transition: opacity .2s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}
.bee-b:hover, .bee-b:focus-visible { color: transparent; }
.bee-b:hover::after, .bee-b:focus-visible::after { opacity: 1; transform: scale(1) rotate(0); }

.biodiversity-bee {
  position: absolute;
  left: clamp(-88px, -5vw, -38px);
  bottom: 230px;
  width: 176px;
  height: auto;
  color: #593c0e;   /* dark brown — drives the currentColor fills */
  pointer-events: none;
}
/* Honeycomb grid */
.honeycomb-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  overflow: visible;
}
.honeycomb {
  --comb-green: var(--green);
  --comb-deep-green: var(--forest);
  --comb-gold: var(--brown);
  --comb-ink: #171512;
  position: relative;
  width: min(900px, 100%);
  aspect-ratio: 1.7 / 1;   /* slightly taller hexagons so content fits */
  isolation: isolate;
  container-type: inline-size;
}

.comb {
  position: absolute;
  z-index: 2;
  clip-path: url(#hex-rounded);
  opacity: 0;
  transform: scale(.78) translateY(18px);
  transform-origin: center;
  transition:
    opacity .55s ease,
    transform .62s cubic-bezier(.34, 1.56, .64, 1),
    filter .35s ease;
  will-change: opacity, transform;
}
.honeycomb.in-view .comb { opacity: 1; transform: scale(.94) translateY(0); }
.honeycomb.in-view .comb:hover {
  transform: scale(1) translateY(-2px);
  z-index: 10;
  filter: drop-shadow(0 10px 24px rgba(70, 133, 92, 0.16));
}
/* Staggered reveal */
.honeycomb.in-view .comb--mission   { transition-delay: .00s; }
.honeycomb.in-view .comb--butterfly { transition-delay: .08s; }
.honeycomb.in-view .comb--community { transition-delay: .16s; }
.honeycomb.in-view .comb--river     { transition-delay: .24s; }
.honeycomb.in-view .comb--vision    { transition-delay: .32s; }
.honeycomb.in-view .comb--bumblebee { transition-delay: .40s; }
.honeycomb.in-view .comb--connect   { transition-delay: .48s; }

.comb-card {
  --border: var(--comb-green);
  background: var(--border);
  padding: clamp(1px, .15vw, 3px);
}
.comb--green { --border: var(--comb-green); }
.comb--gold { --border: var(--comb-gold); }
.comb--water { --border: #3eb4f2; }   /* Rivers & Wetlands hexagon */

.comb-inner {
  width: 100%; height: 100%;
  clip-path: url(#hex-rounded);
  background: radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.92), rgba(255, 250, 240, 0.96) 72%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14% 10% 11%;
}
.comb-icon {
  width: 17%;
  height: auto;
  margin-bottom: 4%;
  stroke: var(--comb-green);
  stroke-width: 3.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.comb-icon--gold { stroke: var(--comb-gold); }
/* Detailed illustrated icon (e.g. Rivers & Wetlands) — colors come from its own <style> */
.comb-art { width: 32%; height: auto; margin-bottom: 4%; display: block; }
.comb-art--tree { width: 40%; }
.comb-art--water { width: 40%; }   /* Rivers & Wetlands illustration */
.comb-art--bee {
  width: 25%;
  aspect-ratio: 823 / 963;   /* matches the bee SVG viewBox */
}
.comb-inner h3 {
  margin: 0 0 7.2%;
  font-family: var(--font-serif-display);
  font-size: clamp(10px, 2.4cqw, 17px);
  line-height: .95;
  letter-spacing: 0.02em;
  font-weight: 700;
  color: var(--comb-deep-green);
}
.comb-inner p {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(8px, 1.7cqw, 12.5px);
  line-height: 1.45;
  color: var(--comb-ink);
}
.comb--photo { overflow: hidden; background: #d9d9d9; }
.comb--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Cell placement (percentages of the honeycomb box) */
.comb--mission   { left: 12.5%; top: 0;      width: 25%; height: 57.14%; }
.comb--butterfly { left: 37.5%; top: 0;      width: 25%; height: 57.14%; }
.comb--community { left: 62.5%; top: 0;      width: 25%; height: 57.14%; }
.comb--river     { left: 0;     top: 42.86%; width: 25%; height: 57.14%; }
.comb--vision    { left: 25%;   top: 42.86%; width: 25%; height: 57.14%; }
.comb--bumblebee { left: 50%;   top: 42.86%; width: 25%; height: 57.14%; }
.comb--connect   { left: 75%;   top: 42.86%; width: 25%; height: 57.14%; }

/* ============================================================
   6-hexagon honeycomb — icon + title over photo; hover fades the
   photo and reveals the explanation. No zoom on hover.
   ============================================================ */
.comb6 {
  --c: var(--green);
  position: absolute;
  width: 27.14%;
  height: 57.2%;
  clip-path: url(#hex-rounded);
  background: var(--c);                 /* coloured hexagon border ring */
  padding: clamp(2px, 0.5cqw, 5px);
  transition: opacity .55s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1),
              filter .3s ease;
  will-change: opacity, transform;
}
/* scroll-reveal start state — only when JS is there to add .in-view */
.js .honeycomb:not(.in-view) .comb6 {
  opacity: 0;
  transform: translateY(16px) scale(.96);
}
.honeycomb.in-view .comb6 { opacity: 1; transform: none; }
.comb6:hover { filter: drop-shadow(0 9px 20px rgba(0, 0, 0, 0.16)); }

/* honeycomb placement: 3 over 3, top row nudged half a cell right so the
   bottom row staggers out to the left (matches the reference) */
.comb6:nth-child(1) { left: 14.57%;  top: 0; }
.comb6:nth-child(2) { left: 43.71%;  top: 0; }
.comb6:nth-child(3) { left: 72.85%;  top: 0; }
.comb6:nth-child(4) { left: 0;       top: 42.86%; }
.comb6:nth-child(5) { left: 29.14%;  top: 42.86%; }
.comb6:nth-child(6) { left: 58.28%;  top: 42.86%; }
.honeycomb.in-view .comb6:nth-child(1) { transition-delay: .00s; }
.honeycomb.in-view .comb6:nth-child(2) { transition-delay: .08s; }
.honeycomb.in-view .comb6:nth-child(3) { transition-delay: .16s; }
.honeycomb.in-view .comb6:nth-child(4) { transition-delay: .24s; }
.honeycomb.in-view .comb6:nth-child(5) { transition-delay: .32s; }
.honeycomb.in-view .comb6:nth-child(6) { transition-delay: .40s; }

/* per-hexagon colours (matched to the reference) */
.comb6--pollinators { --c: #4f9a5e; }
.comb6--habitats    { --c: #8a7a3e; }
.comb6--rivers      { --c: #3eb4f2; }
.comb6--communities { --c: #e0a52b; }
.comb6--birds       { --c: #4a9d72; }
.comb6--meadows     { --c: #8b6fb0; }

.comb6-inner {
  width: 100%; height: 100%;
  clip-path: url(#hex-rounded);
  background: #fff;
  display: flex;
  flex-direction: column;
}

/* top half — icon + title */
.comb6-head {
  flex: 0 0 47%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 5%;
  padding: 0 12% 5%;
}
.comb6-icon {
  width: 30%;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
}
.comb6-icon--mask {
  background-color: var(--c);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.comb6-icon--svg svg { width: 100%; height: 100%; display: block; }
.comb6-title {
  margin: 0;
  text-align: center;
  font-size: clamp(8px, 3cqw, 18px);
  line-height: .96;
  letter-spacing: .01em;
  color: var(--c) !important;           /* beats the global heading colour */
}

/* bottom half — photo with the explanation hidden behind it */
.comb6-media {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.comb6-photo,
.comb6-text {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.comb6-photo {
  object-fit: cover;
  transition: opacity .45s ease;
  z-index: 2;
}
.comb6-text {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4% 12% 15%;
  background: #fff;
  font-family: var(--font-body);
  font-size: clamp(7.5px, 2.05cqw, 13px);
  line-height: 1.4;
  color: var(--comb-ink);
}
.comb6:hover .comb6-photo,
.comb6:focus-within .comb6-photo { opacity: 0; }

/* touch devices can't hover — reveal text on tap via :target-like focus,
   and otherwise keep the photo (icon + title still convey the topic) */
@media (hover: none) {
  .comb6-text { padding-bottom: 16%; }
}

@media (max-width: 1100px) {
  .biodiversity-inner { grid-template-columns: 1fr; gap: 40px; padding-left: 24px; padding-right: 24px; }
  .content-left { max-width: 640px; }
}
@media (max-width: 640px) {
  .honeycomb { width: min(560px, 100%); transform: none; }
  .comb-card { padding: 2px; }
  /* Only the title + SVG remain inside each hex cell on mobile */
  .comb-inner h3 { font-size: clamp(9px, 2.6cqw, 13px); margin: 0 0 4%; }
  .comb-inner p { display: none; }
  /* mobile icon sizes */
  .comb-art--bee { width: 40%; }                  /* pollinator */
  .comb-art--water { width: 57%; }                /* rivers & wetlands */
  .comb-art--tree { width: 57%; }                 /* native habitats */
  .comb--connect .comb-art { width: 57%; }        /* connecting communities */
}

/* ============================================================
   QUOTE
   ============================================================ */
.quote-section {
  --pad-y: clamp(56px, 5.2vw, 76px);
  --next-overlap: clamp(42px, 7vw, 82px);  /* mission overlaps upward */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(rgba(22, 49, 31, 0.20), rgba(22, 49, 31, 0.20)),
    url("assets/quote_img.webp") center / cover no-repeat;
  padding: var(--pad-y) 32px calc(var(--pad-y) + var(--next-overlap));
  overflow: hidden;
}
.quote-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: clamp(40px, 6vw, 90px);
  background-color: var(--cream);
  -webkit-mask: url("assets/section-brushstroke_002.webp") center / 100% 100% no-repeat;
          mask: url("assets/section-brushstroke_002.webp") center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 2;
}
.quote-content {
  width: min(720px, calc(100% - 64px));
  margin: 0 auto;
  padding: clamp(28px, 3.4vw, 48px) clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--green);
  /* same chunky treatment as the Explore the corridor button — on both bottom & right */
  border: 1.5px solid #46855c;
  border-radius: 14px;
  box-shadow: 5px 5px 0 #2f6d4d;
}

.quote-text,
.quote-author { transition: opacity .45s ease, transform .45s ease; }
.quote-content.is-fading .quote-text,
.quote-content.is-fading .quote-author { opacity: 0; transform: translateY(-8px); }

.quote-text {
  max-width: 720px;
  min-height: 2.8em;
  font-family: var(--font-hand);
  font-size: clamp(1.2rem, 1.9vw, 1.75rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--white);
  text-align: center;
}
.quote-text::before,
.quote-text::after {
  content: "";
  display: inline-block;
  width: 1.6em;
  height: 1.2em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: -0.25em;
}
.quote-text::before {
  background-image: url("assets/quote-open-white-edge.png");
  margin-right: 0.35em;
}
.quote-text::after {
  background-image: url("assets/quote-close-white-edge.png");
  margin-left: 0.35em;
}
.quote-author {
  display: block;
  margin-top: clamp(14px, 1.4vw, 20px);
  font-family: var(--font-body);
  font-style: normal;
  font-size: clamp(0.68rem, 0.82vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
}

@media (max-width: 1100px) {
  .quote-section { --pad-y: 54px; --next-overlap: 48px; padding-left: 24px; padding-right: 24px; }
  .quote-text { min-height: 4.4em; }
}
@media (max-width: 600px) {
  .quote-section { --pad-y: 42px; padding-left: 18px; padding-right: 18px; }
  .quote-content { padding: 22px 20px; border-radius: 18px; }
  .quote-text { min-height: 5.8em; }
}

/* ============================================================
   MISSION
   ============================================================ */
.mission-section {
  position: relative;
  z-index: 2;
  background: var(--cream);
  margin-top: clamp(-82px, -7vw, -42px);   /* overlaps the quote */
  padding: clamp(108px, 10vw, 154px) 0 clamp(58px, 7vw, 96px);
  overflow: visible;
}
.mission-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 3px);
  height: clamp(40px, 6vw, 90px);
  background-color: var(--cream);
  -webkit-mask: url("assets/section-brushstroke_002.webp") center / 100% 100% no-repeat;
          mask: url("assets/section-brushstroke_002.webp") center / 100% 100% no-repeat;
  transform: scaleY(-1);
  pointer-events: none;
  z-index: 3;
}
.mission-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(340px, 0.95fr) minmax(360px, 1.05fr);
  align-items: center;
  gap: clamp(36px, 5vw, 64px);
}

/* Polaroid photo cluster */
.mission-illustration {
  position: relative;
  width: 100%;
  aspect-ratio: 1.08 / 1;
  max-width: min(860px, 100%);
  margin: clamp(-120px, -8vw, -62px) auto clamp(40px, 6vw, 90px);
}
.polaroid {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.18),
    0 5px 14px rgba(0, 0, 0, 0.10);
  transition: left .55s cubic-bezier(.4,0,.2,1),
              top  .55s cubic-bezier(.4,0,.2,1),
              width .55s cubic-bezier(.4,0,.2,1),
              box-shadow .35s ease;
}
.polaroid img,
.polaroid video {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: cover;
  background: #e8f0e3;
}
/* Coast polaroid holds a video + overlaid play button */
.polaroid-media {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
.polaroid-media video {
  height: 100%;
  cursor: pointer;
}
/* Play button — same chunky green button as the rest of the site,
   shaped into a circle and centred over the clip. */
.polaroid-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(48px, 6vw, 64px);
  height: clamp(48px, 6vw, 64px);
  padding: 0;
  border-radius: 50%;
  z-index: 3;
}
.polaroid-play svg {
  width: 44%;
  height: 44%;
  margin-left: 8%;   /* optically centre the triangle */
}
.polaroid-play[hidden] {
  display: none;
}
.polaroid-caption {
  flex: 0 0 auto;
  padding: clamp(8px, 1vw, 14px) clamp(12px, 1.4vw, 18px);
  font-family: var(--font-hand);
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--forest);
  text-align: center;
}

/* Layout slots — JS rotates these classes between the polaroids */
.polaroid.is-slot-1 { width: 68%; left: 24%; top: -1%; z-index: 4; }
.polaroid.is-slot-2 { width: 41%; left: -2%; top: 10%; z-index: 2; }
.polaroid.is-slot-3 { width: 43%; left: 7%;  top: 54%; z-index: 5; }

/* Chunky circular arrow nav for cycling featured image */
.polaroid-nav-group {
  position: absolute;
  right: clamp(8px, 1.6vw, 22px);
  bottom: clamp(12px, 1.6vw, 22px);
  display: inline-flex;
  gap: 14px;
  z-index: 10;
}
.polaroid-nav {
  --btn-shadow: #2f6d4d;
  width: clamp(48px, 4vw, 60px);
  height: clamp(48px, 4vw, 60px);
  padding: 0;
  border: 1px solid rgba(28, 63, 42, 0.25);
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--btn-shadow);
  transition: background-color .2s ease, transform .12s ease, box-shadow .12s ease;
}
.polaroid-nav:hover,
.polaroid-nav:focus-visible {
  background: var(--green-dark);
  transform: translateY(2px);
  box-shadow: 0 3px 0 var(--btn-shadow);
}
.polaroid-nav:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 var(--btn-shadow);
}
.polaroid-nav .cta-arrow {
  width: 58%;
  height: auto;
  display: block;
}
.polaroid-nav--prev .cta-arrow { transform: scaleX(-1); }
.polaroid-nav--next:hover .cta-arrow,
.polaroid-nav--next:focus-visible .cta-arrow { transform: translateX(3px); }
.polaroid-nav--prev:hover .cta-arrow,
.polaroid-nav--prev:focus-visible .cta-arrow { transform: scaleX(-1) translateX(3px); }

.mission-content { padding: 20px 0; }
.mission-content h2 {
  max-width: 520px;
  margin-bottom: 26px;
  color: var(--forest);
  font-size: clamp(2.25rem, 5vw, 3.875rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.mission-content > p {
  max-width: 480px;
  margin-bottom: 16px;
  color: var(--text-body);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.6;
}
.mission-content > p:last-of-type { margin-bottom: 0; }

@media (max-width: 1100px) {
  .mission-section { margin-top: -48px; padding-left: 30px; padding-right: 30px; }
  .mission-inner { grid-template-columns: 1fr; gap: 50px; text-align: center; }
  /* Stack order: text first, illustration after */
  .mission-content { order: 1; }
  .mission-illustration { order: 2; }
  .mission-content h2,
  .mission-content > p { margin-left: auto; margin-right: auto; }
  .mission-illustration { max-width: min(720px, 96vw); margin-top: clamp(36px, 5vw, 64px); margin-bottom: clamp(80px, 10vw, 140px); }
  .polaroid.is-slot-2 { left: 1%; }
  .polaroid.is-slot-3 { left: 10%; }
}
@media (max-width: 700px) {
  .mission-section { padding-left: 22px; padding-right: 22px; }
  .mission-illustration { max-width: 100%; aspect-ratio: 1 / 1.05; margin-top: -34px; }
  .polaroid { border-radius: 14px; }
  .polaroid-caption { padding: 8px 10px; font-size: 1rem; }
  .polaroid.is-slot-1 { width: 70%; left: 22%; top: 4%; }
  .polaroid.is-slot-2 { width: 42%; left: 0;   top: 18%; }
  .polaroid.is-slot-3 { width: 46%; left: 6%;  top: 58%; }
  .polaroid-nav { width: 46px; height: 46px; }
  .polaroid-nav-group { gap: 10px; }
}

/* ============================================================
   DID YOU KNOW (live fact card)
   ============================================================ */
.fact-section {
  position: relative;
  z-index: 8;
  background: var(--cream);
  padding: clamp(26px, 3.5vw, 48px) 0 clamp(34px, 4vw, 58px);
  overflow: visible;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
/* hidden + slid left until scrolled into view — but only when JS is there to reveal it */
.js .fact-section:not(.is-revealed) {
  opacity: 0;
  transform: translateX(-52px);
}
.fact-section.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fact-section { opacity: 1; transform: none; }   /* always visible, no motion */
}
.fact-card {
  position: relative;
  width: min(1280px, calc(100% - 64px));
  max-width: 1280px;
  margin: 0 auto;
  /* 0.5cm of breathing room around the (now taller) image: top / right / bottom / left */
  padding: 0.5cm clamp(24px, 3.4vw, 42px) 0.5cm 0.5cm;
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) minmax(260px, 0.72fr);
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  border: 1.5px solid #46855c;
  /* asymmetric corners give a sketched / hand-drawn feel */
  border-radius: 26px 42px 22px 36px / 32px 22px 36px 26px;
  background: linear-gradient(180deg, var(--sage-light) 0%, var(--sage-tint) 100%);
  color: var(--forest);
  /* offset solid shadow = quick double-trace of the ink line */
  box-shadow: 4px 5px 0 0 #46855c;
  transform: rotate(-0.4deg);
  transition: box-shadow .25s ease, transform .25s ease;
}
.fact-card:hover {
  transform: rotate(-0.4deg) translateY(-2px);
  box-shadow: 4px 5px 0 0 #46855c;
}
.fact-image {
  align-self: center;
  justify-self: start;
  width: clamp(170px, 17vw, 230px);   /* fixed size — same for every fact */
  height: clamp(170px, 17vw, 230px);
  aspect-ratio: 1 / 1;
  border-radius: 18px 26px 16px 22px / 22px 16px 24px 18px;
  border: 1.5px solid #46855c;
  object-fit: cover;
  box-shadow: 2px 3px 0 0 #46855c;
}
.fact-content { position: relative; z-index: 1; min-width: 0; max-width: 620px; }
.fact-quick {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 4px 0 4px clamp(18px, 2.6vw, 34px);
  border-left: 1px solid rgba(22, 49, 31, 0.16);
}
.fact-quick h3 {
  margin-bottom: 12px;
  font-family: 'Display Heading', var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--green);
}
.fact-list {
  list-style: none;
  display: grid;
  gap: 0;
}
.fact-item {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  column-gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(22, 49, 31, 0.11);
}
.fact-item:first-child { padding-top: 0; }
.fact-item:last-child { padding-bottom: 0; border-bottom: 0; }

.fact-item--with-icon {
  grid-template-columns: 74px minmax(0, 1fr);
}
.fact-row-icon {
  width: 62px;
  height: 62px;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #46855c;
  border-radius: 50%;
  background: var(--cream);
  overflow: hidden;
  box-shadow: 2px 3px 0 0 rgba(70, 133, 92, 0.55);
}
.fact-row-icon img {
  width: 59px;
  height: 43px;
  display: block;
  object-fit: contain;
}
.fact-row-icon--bird img {
  width: 55px;
  height: 30px;
}
.fact-row-icon--name img {
  width: 59px;
  height: 43px;
}
.fact-item::before,
.fact-item::after { display: none; }
.fact-item .fact-term {
  grid-column: 2;
  font-family: var(--font-hand);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--green);
}
.fact-item .fact-desc {
  grid-column: 2;
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: clamp(0.82rem, 0.95vw, 0.96rem);
  line-height: 1.35;
  color: var(--forest);
}
.fact-header {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  font-weight: 500;
  line-height: 1;
  color: var(--forest);
}
.fact-body {
  max-width: 60ch;
  margin-bottom: 8px;
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.48;
  color: var(--forest);
}
.fact-body .species-name { font-weight: 700; color: var(--forest); }
.fact-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-hand);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--green);
  text-decoration: none;
}
.fact-link:hover,
.fact-link:focus-visible { color: var(--forest); }
.fact-link .arrow { display: inline-block; transition: transform 0.2s ease; }
.fact-link .cta-arrow { width: 1.25em; }
.fact-link:hover .arrow { transform: translateX(4px); }
.fact-meta {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-muted-2);
}


.fact-refresh {
  position: absolute;
  top: 14px; right: 16px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid #46855c;
  /* asymmetric corners — sketched feel */
  border-radius: 14px 18px 12px 16px / 16px 12px 18px 14px;
  background: var(--cream);
  color: var(--forest);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 3px 4px 0 0 #46855c;
  transition: background-color .2s ease, box-shadow .15s ease, transform .15s ease;
}
.fact-refresh:hover,
.fact-refresh:focus-visible {
  background: var(--sage-tint);
  transform: translate(1px, 1px);
  box-shadow: 2px 3px 0 0 #46855c;
}
.fact-refresh:active {
  transform: translate(3px, 4px);
  box-shadow: 0 0 0 0 #46855c;
}
.fact-refresh.spinning { animation: fact-spin 0.8s linear infinite; }
@keyframes fact-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

@media (max-width: 860px) {
  .fact-card {
    width: calc(100% - 28px);
    grid-template-columns: auto 1fr;
    align-items: start;
    padding: 26px 20px;
  }
  .fact-quick {
    grid-column: 1 / -1;
    width: 100%;
    padding: 18px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(22, 49, 31, 0.16);
  }
  .fact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
}

@media (max-width: 660px) {
  /* stack everything in one centered column */
  .fact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .fact-image { width: 140px; height: 140px; align-self: center; }
  /* let the card's flex layout control the children directly so we can reorder them */
  .fact-content { display: contents; }
  .fact-header { justify-content: center; }
  .fact-body { max-width: none; }
  .fact-link { align-self: center; }
  .fact-quick { order: 1; width: 100%; }
  .fact-meta { order: 2; }              /* Source pinned to the very bottom of the box */
  .fact-list { grid-template-columns: 1fr; text-align: left; }
  .fact-item { grid-template-columns: 74px minmax(0, 1fr); }
}

/* ============================================================
   CONNECTED LANDSCAPE / MAP
   ============================================================ */
.landscape-section {
  position: relative;
  background: var(--cream);
  padding: clamp(72px, 8vw, 115px) 0 clamp(72px, 8vw, 128px);
  overflow: visible;
}
.landscape-inner {
  max-width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(34px, 4vw, 56px);
  align-items: start;
}

/* Intro copy — stacked above the map */
.landscape-copy {
  max-width: 860px;
  margin: 0 auto;
  padding-top: 4px;
  text-align: center;
}
.landscape-copy h2 {
  max-width: 16ch;
  margin: 0 auto 18px;
  color: var(--forest);
  font-size: clamp(2.3rem, 3.6vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.landscape-lede {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.7;
  color: var(--text-muted);
}

/* Numbered approach list on hairlines */
.approach-list {
  counter-reset: step;
  list-style: none;
  max-width: 760px;
  margin: clamp(26px, 3.2vw, 38px) auto 32px;
  text-align: left;
}
.approach-list li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-top: 3px solid var(--brown);
}
.approach-list li.has-icon { grid-template-columns: 32px 1fr auto; }
.approach-list li:last-child { border-bottom: 3px solid var(--brown); }
.approach-icon {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  width: clamp(70px, 8vw, 70px);
  height: auto;
  margin-left: 16px;
  pointer-events: none;
  user-select: none;
}
.approach-list li > span { grid-row: 1; }
.approach-list li > span::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-hand);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brown);
}
.approach-list strong {
  grid-column: 2;
  font-family: var(--font-hand);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--forest);
}
.approach-list em {
  grid-column: 2;
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-muted-2);
}
.landscape-actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Map — full-width framed object below the intro */
.map-panel {
  position: relative;
  /* same chunky treatment as the Explore the corridor button - on both bottom & right */
  border: 1.5px solid #46855c;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 5px 5px 0 #2f6d4d;
  overflow: hidden;
}
.map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  background: var(--cream);
  border-bottom: 3px solid var(--brown);
}
.map-header-copy { display: grid; gap: 3px; }
.map-header-copy span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-hand);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}
.map-header-copy strong {
  font-family: var(--font-display);
  font-size: clamp(1.04rem, 1.5vw, 1.3rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--forest);
}

.map-legend {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px;
}
.map-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 9px;
  background: var(--sage-light);
  /* chunky treatment to match the cards/buttons */
  border: 1.5px solid #46855c;
  box-shadow: 2px 3px 0 0 #46855c;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted-2);
}
.map-legend-chip::before { content: ""; width: 16px; }
.map-legend-chip--route::before { border-top: 3px dotted var(--brown); }
.map-legend-chip--area::before { border-top: 2px dashed var(--brown); }
.map-legend-chip--stop::before { width: 11px; height: 11px; border-radius: 999px; background: var(--green); }


.map-header-copy strong {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.map-header-arrow {
  width: clamp(52px, 6vw, 82px);
  height: auto;
  display: inline-block;
  flex: 0 0 auto;
  transform: translateY(3px) rotate(-8deg);
}

@media (max-width: 640px) {
  .map-header-copy strong {
    align-items: flex-start;
  }

  .map-header-arrow {
    width: 54px;
    transform: translateY(1px) rotate(-8deg);
  }
}

.map-canvas {
  position: relative;
  background: #e8f0e3;
}
.map-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  box-shadow:
    inset 0 0 0 1px rgba(22, 49, 31, 0.07),
    inset 0 12px 26px -22px rgba(22, 49, 31, 0.6);
}
.bcorridor-map {
  width: 100%;
  height: clamp(440px, 56vh, 620px);
  min-height: 420px;
  background: #e8f0e3;
}
.bcorridor-map .leaflet-control-attribution { display: none; }
/* Keep Leaflet panes beneath the fixed header */
.bcorridor-map .leaflet-control-container,
.bcorridor-map .leaflet-pane,
.bcorridor-map .leaflet-top,
.bcorridor-map .leaflet-bottom { z-index: 1; }

/* Stop strip - bottom icon cards */
.stop-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-top: 3px solid var(--brown);
  background: var(--cream);
}
.stop-button {
  position: relative;
  appearance: none;
  min-height: 150px;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  justify-items: center;
  gap: 7px;
  padding: 13px 10px 12px;
  background: var(--white);
  border: 1.5px solid rgba(70, 133, 92, 0.35);
  border-radius: 12px;
  box-shadow: 3px 4px 0 rgba(47, 109, 77, 0.18);
  text-align: center;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stop-button::before {
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: -18px;
  height: 4px;
  border-radius: 999px;
  background: rgba(22, 49, 31, 0.18);
  transition: background-color .2s ease, transform .2s ease;
}
.stop-button:not(:first-child) { border-left: 1.5px solid rgba(70, 133, 92, 0.35); }
.stop-button:hover,
.stop-button:focus-visible {
  background: #f8faf3;
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 4px 6px 0 rgba(47, 109, 77, 0.24);
}
.stop-button:hover::before,
.stop-button:focus-visible::before { background: var(--green); transform: scaleX(1.05); }
.stop-button.is-active {
  background: linear-gradient(180deg, var(--sage-light), var(--sage));
  border-color: var(--green);
  box-shadow: 4px 6px 0 #2f6d4d;
}
.stop-button.is-active::before { background: var(--green); transform: scaleX(1.12); }
.stop-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--sage-light);
  font-family: var(--font-hand);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--brown);
  transition: background-color .2s ease, color .2s ease;
}
.stop-icon {
  width: 48px;
  height: 48px;
  display: block;
  color: var(--forest);
  background-color: currentColor;
  -webkit-mask: var(--stop-icon-svg) center / contain no-repeat;
  mask: var(--stop-icon-svg) center / contain no-repeat;
}
.stop-icon--church { --stop-icon-svg: url("assets/stop-1.svg"); transform: scale(1.2); }
.stop-icon--leaf { --stop-icon-svg: url("assets/oak-tree.svg"); transform: scale(1.15); }
.stop-icon--flower { --stop-icon-svg: url("assets/stop-3.svg"); }
.stop-icon--bat { --stop-icon-svg: url("assets/stop-4.svg"); transform: scale(1.15); }
.stop-icon--bee { --stop-icon-svg: url("assets/stop-5.svg"); }
.stop-icon--wetland { --stop-icon-svg: url("assets/amphibian.svg"); }
.stop-button strong {
  font-family: var(--font-hand);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--forest);
}
.stop-button small { font-size: 0.74rem; line-height: 1.3; color: var(--text-muted-3); }
.stop-button.is-active .stop-number { background: var(--green); color: var(--white); }
.stop-button.is-active .stop-icon { color: var(--green); }
.stop-button.is-active strong,
.stop-button.is-active small { color: var(--forest); }

/* Stop detail panel - appears below the map + bottom icons */
.stop-detail {
  display: grid;
  grid-template-columns: minmax(220px, 0.78fr) minmax(280px, 1.22fr);
  gap: clamp(18px, 3vw, 32px);
  align-items: stretch;
  margin: 14px;
  padding: clamp(16px, 2vw, 24px);
  border: 1.5px solid rgba(70, 133, 92, 0.35);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, var(--cream));
  box-shadow: 4px 5px 0 rgba(47, 109, 77, 0.16);
}
.stop-detail__copy {
  display: grid;
  align-content: center;
  gap: 8px;
}
.stop-detail__eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--sage-light);
  color: var(--green);
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.stop-detail h3 {
  margin: 0;
  font-size: clamp(1.85rem, 3vw, 2.55rem);
  line-height: 0.96;
  color: var(--forest);
}
.stop-detail__subtitle {
  margin: 0;
  font-family: var(--font-hand);
  font-weight: 700;
  color: var(--brown);
}
.stop-detail__copy p:last-child {
  max-width: 48ch;
  font-size: clamp(0.95rem, 1.1vw, 1.04rem);
  line-height: 1.65;
  color: var(--text-muted);
}
.stop-detail__figure {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  border-radius: 12px;
  border: 1.5px solid rgba(70, 133, 92, 0.28);
  background: var(--sage-light);
}
.stop-detail__figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}
.stop-detail__figure figcaption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--text-muted-2);
  font-size: 0.7rem;
  font-weight: 700;
}

/* Leaflet markers + popups */
.bcorridor-marker { background: transparent; border: none; }
.bcorridor-marker-pin {
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  border: 2.5px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(22, 49, 31, 0.42), 0 1px 2px rgba(22, 49, 31, 0.3);
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow .2s ease, background-color .2s ease;
}
.bcorridor-marker:hover .bcorridor-marker-pin {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 9px 18px rgba(22, 49, 31, 0.45);
}
.bcorridor-marker-pin span {
  color: var(--white);
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
}
/* Active marker - synced to the active stop button */
.bcorridor-marker.is-active { z-index: 1000 !important; }
.bcorridor-marker.is-active .bcorridor-marker-pin {
  background: #2f6d4d;
  transform: translateY(-2px) scale(1.12);
  box-shadow: 0 0 0 4px rgba(70, 133, 92, 0.32), 0 9px 20px rgba(22, 49, 31, 0.48);
}

.leaflet-popup-content-wrapper {
  border-radius: 12px;
  border: 1.5px solid #46855c;
  background: var(--white);
  box-shadow: 4px 4px 0 #2f6d4d;
}
.leaflet-popup-content { margin: 13px 15px; min-width: 200px; }
.bcorridor-popup strong {
  display: block;
  margin-bottom: 7px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--sage);
  font-family: var(--font-hand);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--forest);
}
.bcorridor-popup p { margin: 0; font-family: var(--font-body); font-size: 0.85rem; line-height: 1.45; color: var(--text-muted-2); }

@media (prefers-reduced-motion: reduce) {
  .bcorridor-marker-pin,
  .stop-button,
  .stop-button::before { transition: none; }
}

@media (max-width: 1080px) {
  .landscape-inner { gap: 38px; }
  .landscape-copy h2 { max-width: none; }
}
@media (max-width: 640px) {
  .stop-strip { display: flex; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .stop-strip::-webkit-scrollbar { display: none; }
  .stop-button { flex: 0 0 58%; min-height: 146px; }
  .map-legend { display: none; }
  .bcorridor-map { height: 440px; }
  .stop-detail { grid-template-columns: 1fr; margin: 14px; }
  .stop-detail__figure { order: -1; min-height: 210px; }
  .stop-detail__figure img { min-height: 210px; }
}

/* ============================================================
   EVENTS & NEWS
   ============================================================ */
.news-section {
  position: relative;
  background: var(--cream);
  padding: var(--section-y-tight) 0;
  overflow: visible;
}
.news-inner {
  width: min(1280px, calc(100% - 64px));
  margin: 0 auto;
  padding: clamp(38px, 5vw, 54px);
  display: grid;
  gap: clamp(26px, 4vw, 36px);
  background: var(--green);
  /* same chunky treatment as the Explore the corridor button — on both bottom & right */
  border: 1.5px solid #46855c;
  border-radius: 14px;
  box-shadow: 5px 5px 0 #2f6d4d;
}

.news-copy {
  max-width: min(980px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}
.news-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 42px);
  margin: 0;
  white-space: nowrap;
  color: var(--white);
  font-size: clamp(2.5rem, 4.6vw, 3.45rem);
  line-height: 0.95;
  text-transform: uppercase;
}
.news-title-text { display: inline-block; line-height: 0.95; }
.news-flower {
  flex: 0 0 auto;
  width: clamp(96px, 8.6vw, 150px);
  aspect-ratio: 1 / 1;
  background: url("assets/flower-event.svg") center / contain no-repeat;
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: none;
  user-select: none;
}
.news-flower--start { animation: news-flower-spin-start 12s linear infinite; }
.news-flower--end { animation: news-flower-spin-end 12s linear infinite; }
@keyframes news-flower-spin-start { from { transform: rotate(-18deg); } to { transform: rotate(342deg); } }
@keyframes news-flower-spin-end { from { transform: scaleX(-1) rotate(18deg); } to { transform: scaleX(-1) rotate(378deg); } }

.news-copy p {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  background: var(--cream);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
}
.news-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(70, 133, 92, 0.16); }
.news-card img { width: 100%; height: 230px; object-fit: cover; display: block; }
.news-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-tag {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-hand);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}
.news-card time {
  order: -1;
  font-family: var(--font-hand);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}
.news-card h3 {
  margin: 0;
  font-family: var(--font-hand) !important;
  font-size: clamp(1.25rem, 1.8vw, 1.45rem);
  font-weight: 500;
  line-height: 1.08;
  color: var(--forest);
}
.news-card p { margin: 0; font-family: var(--font-body); font-size: 0.92rem; line-height: 1.48; color: #5b5b55; }

.news-inner .btn--news { justify-self: center; }

@media (max-width: 780px) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-grid .news-card:nth-child(3) { grid-column: 1 / -1; max-width: 480px; margin: 0 auto; width: 100%; }
  /* let the title wrap and trim the flowers so the row can't overflow the green
     box in the 561–780px band (tablet portrait / Surface Duo) */
  .news-title { white-space: normal; }
  .news-flower { width: clamp(72px, 10vw, 110px); }
}
@media (max-width: 560px) {
  .news-inner { width: calc(100% - 28px); padding: 34px 20px 30px; border-radius: 18px; gap: 26px; }
  /* allow the title to wrap and shrink the flowers so the row can't overflow the box */
  .news-title { font-size: 2.25rem; white-space: normal; gap: 12px; }
  .news-flower { width: clamp(56px, 14vw, 84px); }
  .news-grid { grid-template-columns: 1fr; gap: 18px; }
  .news-grid .news-card:nth-child(3) { max-width: none; }
  .news-card img { height: 190px; }
  .news-inner .btn--news { width: 100%; }
}
@media (max-width: 480px) {
  .news-title { gap: 10px; }
  .news-flower { width: clamp(50px, 13vw, 78px); }
}
/* Galaxy Z Fold 5 cover screen (~344px) and other ultra-narrow phones */
@media (max-width: 400px) {
  .news-title { font-size: 1.85rem; gap: 7px; }
  .news-flower { width: clamp(38px, 11vw, 54px); }
  .news-inner { padding: 28px 16px 26px; }
}

/* ============================================================
   PARTNERS — split-frame title + marquee
   ============================================================ */
.partners-section {
  position: relative;
  background: var(--cream);
  padding: clamp(38px, 4.8vw, 58px) 0 clamp(42px, 5vw, 68px);
  overflow: visible;   /* let the inner container's green offset shadow show (marquee clips itself) */
}
.partners-inner {
  --frame-line: #46855c;                 /* green frame like the "Did you know?" card */
  --title-gap: clamp(150px, 20vw, 230px);
  position: relative;
  width: min(1280px, calc(100% - 64px));
  margin: 0 auto;
  padding: clamp(16px, 2vw, 24px) clamp(28px, 4.4vw, 58px) clamp(28px, 3.8vw, 42px);
  display: grid;
  gap: clamp(18px, 2.2vw, 26px);
  background: var(--cream);
  border-left: 1.5px solid var(--frame-line);
  border-right: 1.5px solid var(--frame-line);
  border-bottom: 1.5px solid var(--frame-line);
  border-radius: 14px;
  box-shadow: 4px 5px 0 0 #46855c;       /* matching offset solid shadow */
  overflow: visible;
}
/* Top border split so the title sits in the gap */
.partners-inner::before,
.partners-inner::after {
  content: "";
  position: absolute;
  top: 0; height: 1.5px;
  width: calc(50% - var(--title-gap) - 14px);
  background: var(--frame-line);
  pointer-events: none;
}
.partners-inner::before { left: 14px; }
.partners-inner::after { right: 14px; }

.partners-copy {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: calc(-1 * clamp(18px, 2vw, 24px)) auto 0;
  padding: 0 clamp(18px, 3vw, 38px);
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
}
.partners-copy h2 {
  margin: 0 auto;
  padding: 0 22px;
  background: var(--cream);
  color: var(--forest);
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  line-height: 1;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.partners-copy p { margin: 0; color: var(--text-body); font-size: clamp(0.82rem, 1vw, 0.94rem); line-height: 1.35; }

.partners-marquee {
  position: relative;
  overflow: hidden;
  padding: 4px 0 0;
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.partners-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  gap: clamp(18px, 2.4vw, 34px);
  animation: partners-scroll 32s linear infinite;
  will-change: transform;
}
.partners-marquee:hover .partners-track { animation-play-state: paused; }
@keyframes partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - clamp(9px, 1.2vw, 17px))); }
}

.partner-card {
  flex: 0 0 180px;
  min-height: 118px;
  padding: 16px 14px 14px;
  display: grid;
  grid-template-rows: 60px auto;
  align-items: center;
  justify-items: center;
  gap: 9px;
  border-radius: 10px;
  background: var(--white);
  border: 1.5px solid #46855c;          /* green border like the "Did you know?" card */
  box-shadow: 4px 5px 0 0 #46855c;      /* matching offset solid shadow */
}
.partner-card img { display: block; width: auto; max-width: 118px; max-height: 58px; object-fit: contain; }
.partner-name {
  font-family: var(--font-display);
  font-size: clamp(0.76rem, 0.92vw, 0.9rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--forest);
  text-align: center;
}

@media (max-width: 900px) {
  .partners-inner { width: calc(100% - 28px); padding: 18px 16px 24px; --title-gap: clamp(112px, 35vw, 170px); }
  .partners-copy { margin-top: -18px; padding: 0 12px; }
  .partners-copy h2 { padding: 0 14px; font-size: 1.2rem; }
  .partners-marquee { mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); }
  .partners-track { animation-duration: 26s; }
}

/* ============================================================
   CTA — Be part of the change
   ============================================================ */
.cta-section {
  position: relative;
  background: var(--green);
  /* no bottom padding: the footer's green wave (#46855c) continues the green
     and tapers it into the cream footer, so a solid bottom band would seam */
  padding: clamp(96px, 11vw, 156px) 0 clamp(40px, 5vw, 64px);
  overflow: hidden;
}
.cta-inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
.cta-content { max-width: 560px; margin: 0 auto; text-align: center; }
.cta-content h2 {
  margin-bottom: 14px;
  color: var(--white);
  font-size: clamp(1.85rem, 3vw, 2.5rem);
  line-height: 1.08;
}
.cta-bee {
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.35em;     /* sit on the baseline next to the "B" */
  margin-right: 0.18em;
}
.cta-content p {
  margin-bottom: 24px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 1.15vw, 1.05rem);
  line-height: 1.55;
  opacity: 0.95;
}
.cta-email {
  font-weight: 600;
  opacity: 1;
}
.cta-email a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cta-email a:hover,
.cta-email a:focus-visible {
  opacity: 0.85;
}
.cta-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* ============================================================
   SECTION WAVE DIVIDERS (CTA + footer)
   ============================================================ */
.section-wave {
  position: absolute;
  left: 0; right: 0; top: -1px;
  width: 100%;
  height: clamp(56px, 6vw, 96px);
  z-index: 3;
  line-height: 0;
  pointer-events: none;
}
.section-wave svg { display: block; width: 100%; height: 100%; }
.cta-section .section-wave path { fill: var(--cream); }
.site-footer .section-wave path { fill: #46855c; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative;
  background: #fcfdf9;
  color: var(--forest);
  padding-top: clamp(56px, 6vw, 88px);
  /* overflow visible so the green wave can bleed UP over the CTA seam instead of
     being clipped at the footer's top edge (that clip caused the hairline) */
  overflow: visible;
}
/* the footer wave starts a few px above the footer, painting green over the
   green CTA so there is no sub-pixel gap (green-on-green = invisible overlap) */
.site-footer .section-wave { top: -3px; }
.footer-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  justify-content: center;
  text-align: center;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 560px;
}

.footer-brand-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.footer-brand-logo img { height: 100px; width: auto; display: block; }
.footer-tagline { max-width: 260px; margin-bottom: 22px; font-family: var(--font-body); font-size: 0.9rem; line-height: 1.55; color: var(--text-body); }

.footer-socials { display: inline-flex; gap: 12px; list-style: none; }
.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
.footer-socials a:hover { background: var(--green-dark); transform: translateY(-2px); }
.footer-socials svg { width: 16px; height: 16px; fill: currentColor; }

.footer-col h4 {
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest);
}
.footer-col ul { list-style: none; display: grid; gap: 9px; }
.footer-col a { font-family: var(--font-body); font-size: 0.92rem; color: var(--text-body); text-decoration: none; transition: color .15s ease; }
.footer-col a:hover { color: var(--forest); }

.footer-legal {
  margin-top: 56px;
  background: var(--green);
  color: rgba(255, 255, 255, 0.85);
}
.footer-legal-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-legal p { margin: 0; font-family: var(--font-body); font-size: 0.82rem; color: var(--white); }
.footer-legal nav { display: inline-flex; gap: 24px; }
.footer-legal a { font-family: var(--font-body); font-size: 0.82rem; color: var(--white); text-decoration: none; transition: opacity .15s ease; }
.footer-legal a:hover { opacity: 0.8; }
.footer-credit a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1100px) {
  .footer-inner { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .footer-inner { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-tagline { max-width: 480px; }
}
@media (max-width: 500px) {
  .footer-inner { grid-template-columns: 1fr; padding: 0 22px; }
  .footer-legal-inner { padding: 14px 22px; justify-content: center; text-align: center; }
  .footer-legal nav { gap: 18px; }
}

/* ============================================================
   MOBILE NAV (dropdown panel) — applies below 900px
   ============================================================ */
@media (max-width: 900px) {
  .navbar { position: relative; padding: 10px 22px; }
  .brand-logo--full { height: 50px; }
  .site-header.is-scrolled .brand-logo--full,
  .site-header.menu-is-open .brand-logo--full { height: 40px; }

  .nav-links {
    position: absolute;
    top: calc(100% + 10px);
    right: 22px; left: 22px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(70, 133, 92, 0.12);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(70, 133, 92, 0.22);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    /* kept in the DOM and animated (display can't transition) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.985);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity .26s ease,
                transform .28s cubic-bezier(.4, 0, .2, 1),
                visibility 0s linear .28s;
  }
  .nav-links.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: opacity .26s ease,
                transform .28s cubic-bezier(.4, 0, .2, 1),
                visibility 0s;
  }
  .nav-links a {
    color: var(--forest);
    text-shadow: none;
    padding: 14px 16px;
    border-radius: 14px;
  }
  .nav-links a:hover,
  .nav-links a:focus-visible { background: #eef6ee; color: var(--forest); }
  .nav-links a::after { display: none; }

  .nav-donate-link { display: inline-flex; font-weight: 700; }
  .btn--donate { display: none; }
  .mobile-menu { display: inline-block; }
  body.menu-open { overflow: hidden; }

  .announce { font-size: 0.82rem; line-height: 1.25; }
  .announce-content { gap: 8px; }
  .announce-close { display: none; }   /* no dismiss button on mobile */
}

/* ============================================================
   DESKTOP GUTTER — wide side margins on large screens
   ============================================================ */
@media (min-width: 901px) {
  .navbar,
  .hero-inner,
  .biodiversity-inner,
  .mission-inner,
  .cta-inner,
  .footer-inner,
  .footer-legal-inner {
    width: calc(100% - (var(--page-gutter) * 2));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
  .mission-section { padding-left: 0; padding-right: 0; }
  .biodiversity-inner { gap: clamp(70px, 5vw, 110px); }
  .content-left { max-width: 520px; }
}

/* ============================================================
   MOBILE & LAPTOP POLISH
   ============================================================ */
html, body { overflow-x: hidden; }
img, svg, video { max-width: 100%; }

/* Tablet — center section titles & paragraphs that are left-aligned on desktop */
@media (max-width: 1100px) {
  .content-left,
  .landscape-copy { text-align: center; }
  .content-left { margin-left: auto; margin-right: auto; }
  .content-left h2,
  .content-left p,
  .landscape-copy h2,
  .landscape-copy .landscape-lede { margin-left: auto; margin-right: auto; }
  .landscape-actions { justify-content: center; }
  /* the approach list stays a structured left-aligned list inside its centered parent */
  .landscape-copy .approach-list { text-align: left; }
  .biodiversity-bee {
    position: absolute;
    left: clamp(-88px, -4vw, -36px);
    bottom: 230px;
    width: 145px;
    height: auto;
    color: #593c0e;
    pointer-events: none;
  }
}

/* Mobile — override the tablet bee values */
@media (max-width: 640px) {
  .biodiversity-bee {
    position: absolute;
    left: clamp(-88px, -4vw, -36px);
    bottom: 145px;
    width: 145px;
    height: auto;
    color: #593c0e;
    pointer-events: none;
  }
}

/* Tablet / small laptop — keep hand-drawn elements tidy */
@media (max-width: 900px) {
  /* Trim chunky 5px shadows so they don't crowd the viewport */
  .news-inner,
  .map-panel,
  .quote-content { box-shadow: 4px 4px 0 #2f6d4d; }
  .fact-card,
  .impact-card {
    box-shadow: 3px 4px 0 0 #46855c;
    transform: rotate(-0.2deg);
  }
  .fact-card:hover { transform: rotate(-0.2deg) translateY(-2px); }
  .fact-image { box-shadow: 2px 3px 0 0 #46855c; }

  /* Approach icon — keep it inline but smaller when stacked */
  .approach-icon { width: clamp(54px, 12vw, 84px); margin-left: 10px; }
}

/* Phones */
@media (max-width: 600px) {
  /* Drop the doodle tilt and downsize shadows further so nothing clips */
  .fact-card,
  .impact-card { transform: none; box-shadow: 3px 3px 0 0 #46855c; }
  .fact-card:hover { transform: translateY(-2px); }
  .news-inner,
  .map-panel,
  .quote-content { box-shadow: 3px 3px 0 #2f6d4d; }
  .fact-image { box-shadow: 1px 2px 0 0 #46855c; }

  /* The Follow / Read row keeps its number column, the icon shifts under the text */
  .approach-list li.has-icon { grid-template-columns: 32px 1fr; }
  .approach-icon {
    grid-column: 1 / -1;
    grid-row: auto;
    width: 88px;
    margin: 8px auto 0;
    align-self: center;
    justify-self: center;
  }

  /* Polaroid nav — compact circle buttons */
  .polaroid-nav { width: 42px; height: 42px; }
  .polaroid-nav-group { gap: 8px; bottom: 8px; right: 8px; }

  /* Brushstroke decorations — shorter so they don't dominate */
  .quote-section::before,
  .mission-section::before { height: clamp(28px, 8vw, 48px); }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .partners-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .partners-track { animation: none; }
}

/* ============================================================
   "Display Heading" display font for all headings
   ============================================================ */
/* Self-hosted Google fonts (latin + latin-ext subsets) */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Gaegu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/gaegu-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Gaegu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/gaegu-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/open-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/open-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/open-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/open-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/open-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/open-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Display Heading';
  src: url('display-heading/display-heading.woff2') format('woff2'),
       url('display-heading/display-heading.ttf') format('truetype');
  font-display: swap;
}

h1, h2, h3, h4, h5 {
  font-family: 'Display Heading', var(--font-display) !important;
  text-transform: uppercase;
  color: var(--green-dark) !important;   /* dark green from the palette (#386b49) */
}

/* Headings sitting on dark/green backgrounds stay white for legibility */
.site-hero h1,
.news-title,
.cta-content h2 { color: var(--white) !important; }



/* ============================================================
   UX refresh — guided one-column trail map
   ============================================================ */
.landscape-section {
  background:
    radial-gradient(circle at 8% 10%, rgba(216, 228, 185, 0.5), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(131, 176, 202, 0.22), transparent 30%),
    var(--cream);
}
.landscape-inner {
  max-width: min(1180px, calc(100% - 64px));
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 52px);
}
.landscape-copy {
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}
.landscape-copy h2 { max-width: none; margin-inline: auto; }
.landscape-lede { max-width: 66ch; margin-inline: auto; }
.approach-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 860px;
  margin-inline: auto;
}
.approach-list li,
.approach-list li:last-child {
  padding: 18px;
  border: 1.5px solid rgba(70, 133, 92, 0.28);
  border-radius: 14px;
  background: rgba(255,255,255,0.76);
  box-shadow: 3px 4px 0 rgba(47, 109, 77, 0.14);
}
.landscape-actions--top { justify-content: center; margin-bottom: 20px; }
.trail-how {
  max-width: 930px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 1.5px solid rgba(70, 133, 92, 0.28);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(238,243,223,0.78));
  box-shadow: 4px 5px 0 rgba(47, 109, 77, 0.13);
}
.trail-how__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-hand);
  font-weight: 700;
  color: var(--forest);
}
.trail-how__item strong {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-hand);
  font-size: 0.92rem;
}
.trail-how__arrow { color: var(--brown); font-weight: 800; }
.map-panel {
  border-radius: 22px;
  overflow: visible;
  padding: clamp(12px, 1.6vw, 18px);
  background: rgba(255,255,255,0.86);
  box-shadow: 8px 8px 0 #2f6d4d, 0 24px 60px rgba(22, 49, 31, 0.1);
}
.map-header {
  border: 1.5px solid rgba(70, 133, 92, 0.22);
  border-bottom: 3px solid var(--brown);
  border-radius: 16px 16px 0 0;
}
.map-canvas {
  overflow: hidden;
  border-inline: 1.5px solid rgba(70, 133, 92, 0.22);
}
.bcorridor-map { height: clamp(480px, 58vh, 650px); }
.stop-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 0;
  border-inline: 1.5px solid rgba(70, 133, 92, 0.22);
  background: var(--cream);
}
.stop-strip-header span {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}
.stop-strip-header strong {
  font-family: var(--font-hand);
  font-size: 1.02rem;
  color: var(--forest);
}
.stop-strip {
  position: relative;
  overflow-x: auto;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  padding: 14px 16px 22px;
  border-top: 0;
  border-inline: 1.5px solid rgba(70, 133, 92, 0.22);
  background: var(--cream);
  scroll-snap-type: x mandatory;
}
.stop-strip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 36px;
  right: 36px;
  border-top: 3px dotted rgba(137,108,75,0.38);
  transform: translateY(-50%);
  pointer-events: none;
}
.stop-button {
  z-index: 1;
  min-height: 136px;
  scroll-snap-align: center;
}
.stop-button.is-active {
  transform: translateY(-4px);
}
.stop-detail {
  position: relative;
  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
  gap: clamp(20px, 3.5vw, 44px);
  margin: 0;
  padding: clamp(18px, 2.2vw, 30px);
  border: 1.5px solid rgba(70, 133, 92, 0.26);
  border-top: 3px solid var(--brown);
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, #ffffff, #fbfcf6);
}
.stop-detail__figure {
  min-height: clamp(300px, 34vw, 420px);
  order: 1;
  box-shadow: 4px 5px 0 rgba(47, 109, 77, 0.14);
}
.stop-detail__figure img { min-height: clamp(300px, 34vw, 420px); }
.stop-detail__copy {
  order: 2;
  align-content: start;
  gap: 12px;
}
.stop-detail__eyebrow { margin-bottom: 4px; }
.stop-detail__copy p:last-child { max-width: 56ch; }
.stop-wildlife {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}
.stop-wildlife span,
.stop-why span,
.trail-download-card span {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}
.stop-wildlife ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.stop-wildlife li {
  padding: 8px 12px;
  border: 1px solid rgba(70, 133, 92, 0.24);
  border-radius: 999px;
  background: var(--sage-light);
  font-size: 0.88rem;
  color: var(--forest);
}
.stop-why {
  margin-top: 4px;
  padding: 16px;
  border: 1.5px solid rgba(137, 108, 75, 0.22);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--cream), var(--sage-light));
}
.stop-why p {
  margin-top: 8px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.stop-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.stop-nav__button {
  appearance: none;
  border: 1.5px solid rgba(70, 133, 92, 0.32);
  border-radius: 999px;
  background: #fff;
  color: var(--forest);
  padding: 10px 16px;
  font-family: var(--font-hand);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 2px 3px 0 rgba(47, 109, 77, 0.16);
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
}
.stop-nav__button:hover,
.stop-nav__button:focus-visible {
  transform: translateY(-2px);
  background: var(--sage-light);
  box-shadow: 3px 5px 0 rgba(47, 109, 77, 0.22);
}
.stop-nav__button--next {
  background: var(--green);
  color: var(--white);
  border-color: var(--green-dark);
}
.stop-nav__button--next:hover,
.stop-nav__button--next:focus-visible { background: var(--green-dark); }
.trail-download-card {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1.5px solid rgba(70, 133, 92, 0.24);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(238,243,223,0.86), rgba(255,255,255,0.94));
}
.trail-download-card p {
  margin-top: 4px;
  max-width: 46ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.trail-download-card .landscape-actions { justify-content: flex-end; }
.bcorridor-marker-pin {
  transition: transform .18s ease, box-shadow .18s ease;
}
.bcorridor-marker.is-active .bcorridor-marker-pin,
.bcorridor-marker-pin:hover {
  transform: scale(1.14);
  box-shadow: 0 0 0 6px rgba(70,133,92,0.18), 0 10px 20px rgba(22,49,31,0.2);
}
@media (max-width: 820px) {
  .landscape-inner { max-width: min(100% - 28px, 1180px); }
  .approach-list { grid-template-columns: 1fr; }
  .trail-how { align-items: stretch; justify-content: flex-start; }
  .trail-how__arrow { display: none; }
  .trail-how__item { width: 100%; }
  .map-header,
  .stop-strip-header,
  .trail-download-card { flex-direction: column; align-items: flex-start; }
  .map-legend { justify-content: flex-start; }
  .stop-detail { grid-template-columns: 1fr; }
  .stop-detail__figure { order: 1; }
  .stop-detail__copy { order: 2; }
  .trail-download-card .landscape-actions { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .map-panel { padding: 8px; box-shadow: 5px 5px 0 #2f6d4d; }
  .bcorridor-map { height: 420px; min-height: 360px; }
  .stop-strip { grid-template-columns: repeat(6, minmax(132px, 1fr)); }
  .stop-button { min-height: 126px; }
  .stop-icon { width: 40px; height: 40px; }
  .stop-detail__figure,
  .stop-detail__figure img { min-height: 240px; }
}

/* ============================================================
   Refinement — keep the guided map, remove the added decorative
   backgrounds, and return the section to the site's existing style.
   ============================================================ */
.landscape-section {
  background: var(--cream);
}

.landscape-inner {
  max-width: min(1180px, calc(100% - 64px));
}

.approach-list {
  display: block;
  max-width: 760px;
  gap: 0;
}

.approach-list li,
.approach-list li:last-child {
  padding: 16px 0;
  border: 0;
  border-top: 3px solid var(--brown);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.approach-list li:last-child {
  border-bottom: 3px solid var(--brown);
}

.trail-how {
  max-width: 760px;
  margin-top: 10px;
  padding: 16px 20px;
  border: 3px solid var(--brown);
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
}

.trail-how__item strong {
  background: var(--green);
  color: var(--white);
}

.map-panel {
  padding: 0;
  border: 1.5px solid #46855c;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 5px 5px 0 #2f6d4d;
  overflow: hidden;
}

.map-header {
  border: 0;
  border-bottom: 3px solid var(--brown);
  border-radius: 0;
  background: var(--cream);
}

.map-canvas {
  border: 0;
}

.stop-strip-header {
  border: 0;
  background: var(--cream);
}

.stop-strip {
  border-inline: 0;
  border-top: 3px solid var(--brown);
  background: var(--cream);
}

.stop-detail {
  margin: 14px;
  padding: clamp(16px, 2vw, 24px);
  border: 1.5px solid rgba(70, 133, 92, 0.35);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 4px 5px 0 rgba(47, 109, 77, 0.16);
}

.stop-why {
  border: 1.5px solid rgba(137, 108, 75, 0.22);
  background: var(--cream);
}

.trail-download-card {
  border: 1.5px solid rgba(70, 133, 92, 0.35);
  border-radius: 14px;
  background: var(--cream);
  box-shadow: 4px 5px 0 rgba(47, 109, 77, 0.14);
}

@media (max-width: 560px) {
  .map-panel {
    padding: 0;
    box-shadow: 5px 5px 0 #2f6d4d;
  }
}

/* ============================================================
   Trail map refinement — simplified steps and native button style
   ============================================================ */
.trail-how {
  max-width: 900px;
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.trail-how__item {
  min-height: 72px;
  padding: 10px 12px;
  gap: 10px;
}

.trail-how__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  object-fit: contain;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
}

.trail-how__icon--map svg {
  width: 42px;
  height: 42px;
  display: block;
}

.trail-how__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brown);
}

.trail-how__arrow .cta-arrow {
  width: 28px;
  height: auto;
}

.stop-wildlife { display: none !important; }

.stop-nav {
  align-items: center;
}

.stop-nav .stop-nav__button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid rgba(28, 63, 42, 0.25);
  border-radius: 14px;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-hand);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  box-shadow: 0 5px 0 #2f6d4d;
  transition: background-color .2s ease, color .2s ease, transform .12s ease, box-shadow .12s ease;
}

.stop-nav .stop-nav__button.btn:hover,
.stop-nav .stop-nav__button.btn:focus-visible {
  transform: translateY(2px);
  background: var(--green-dark);
  color: var(--white);
  box-shadow: 0 3px 0 #2f6d4d;
}

.stop-nav .stop-nav__button.btn:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 #2f6d4d;
}

.stop-nav .btn-icon--prev {
  order: -1;
  margin-left: 0;
  margin-right: 0.7em;
}

.stop-nav .btn-icon--prev .cta-arrow {
  transform: scaleX(-1);
}

.stop-nav .stop-nav__button--prev:hover .btn-icon--prev .cta-arrow,
.stop-nav .stop-nav__button--prev:focus-visible .btn-icon--prev .cta-arrow {
  transform: scaleX(-1) translateX(3px);
}

@media (max-width: 700px) {
  .trail-how {
    align-items: stretch;
    justify-content: flex-start;
  }

  .trail-how__arrow {
    display: none;
  }

  .trail-how__item {
    width: 100%;
    justify-content: flex-start;
  }
}


/* Refinement: stop-number chips match the Route / Area / Stops legend style */
.stop-button {
  grid-template-rows: auto 1fr auto auto;
}
.stop-number {
  width: auto;
  min-width: 72px;
  height: auto;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(70, 133, 92, 0.28);
  background: var(--cream);
  color: var(--forest);
  font-family: var(--font-hand);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 2px 3px 0 rgba(47, 109, 77, 0.16);
}
.stop-button.is-active .stop-number {
  background: var(--green);
  border-color: var(--green-dark);
  color: var(--white);
  box-shadow: 2px 3px 0 #2f6d4d;
}

/* Refinement: Why it matters stays in the text flow, not inside a boxed callout */
.stop-why {
  margin-top: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.stop-why span {
  color: var(--brown);
}
.stop-why p {
  margin-top: 5px;
  max-width: 56ch;
  font-size: clamp(0.95rem, 1.1vw, 1.04rem);
  line-height: 1.65;
  color: var(--text-muted);
}

/* Refinement: remove guide lines under the stop chips and keep the selected stop card compact */
.stop-strip::before,
.stop-button::before,
.stop-button:hover::before,
.stop-button:focus-visible::before,
.stop-button.is-active::before {
  display: none !important;
  content: none !important;
}

.stop-strip {
  padding-bottom: 16px;
}

.stop-detail {
  width: min(900px, calc(100% - 28px));
  margin: 14px auto;
  grid-template-columns: minmax(220px, 0.82fr) minmax(300px, 1.18fr);
  align-items: stretch;
}

.stop-detail__figure {
  min-height: 0;
  height: auto;
  max-height: 320px;
}

.stop-detail__figure img {
  min-height: 0;
  height: 100%;
  max-height: 320px;
  object-fit: cover;
}

.stop-detail__copy {
  min-height: 260px;
}

@media (max-width: 820px) {
  .stop-detail {
    width: calc(100% - 28px);
    grid-template-columns: 1fr;
  }

  .stop-detail__figure,
  .stop-detail__figure img {
    max-height: 260px;
  }

  .stop-detail__copy {
    min-height: 0;
  }
}

/* Refinement: selected stop card matches the Quick Fact card palette */
.stop-detail {
  border: 1.5px solid #46855c;
  border-radius: 26px 42px 22px 36px / 32px 22px 36px 26px;
  background: linear-gradient(180deg, var(--sage-light) 0%, var(--sage-tint) 100%);
  box-shadow: 4px 5px 0 0 #46855c;
  color: var(--forest);
}

.stop-detail__figure {
  border: 1.5px solid #46855c;
  border-radius: 18px 26px 16px 22px / 22px 16px 24px 18px;
  background: var(--sage-light);
  box-shadow: 2px 3px 0 0 #46855c;
}

.stop-detail__eyebrow {
  padding: 5px 12px;
  border-radius: 9px;
  background: var(--sage-light);
  border: 1.5px solid #46855c;
  box-shadow: 2px 3px 0 0 #46855c;
  color: var(--text-muted-2);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* Refinement: smaller hint arrow + Gaegu stop pill in the selected stop card */
.map-header-arrow {
  width: clamp(34px, 4vw, 52px);
}

.stop-detail__eyebrow {
  font-family: var(--font-hand);
  font-weight: 700;
  letter-spacing: 0.1em;
}

@media (max-width: 640px) {
  .map-header-arrow {
    width: 38px;
  }
}

/* ============================================================
   Connected Landscape — match the header width (logo → donate)
   and show the stop story as a closable side panel on the map.
   ============================================================ */

/* Same content box as the navbar: max-width 1280 with 32px gutters,
   so the map card lines up with the logo on the left and the
   donate button on the right. */
.landscape-inner {
  max-width: min(1560px, calc(100% - 48px));
  padding-inline: 0;
}

/* Let the intro text span the full width of the section too, so the
   heading and lede line up with the map card edges (not a narrow column). */
.landscape-copy {
  max-width: none;
  margin-inline: 0;
}
.landscape-copy h2 { max-width: none; }
.landscape-lede { max-width: none; }

/* Map card splits into two columns while a stop is open:
   map + stop chips on the left, the stop story on the right. */
.map-panel.is-detail-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 30%, 380px);
  align-items: stretch;
}
.map-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Keep the six stop chips fitting under the (now narrower) map column. */
.map-panel.is-detail-open .stop-strip {
  grid-template-columns: repeat(6, minmax(110px, 1fr));
}

/* The stop story as a panel sitting against the map, not below it. */
.map-panel.is-detail-open .stop-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: auto;
  margin: 0;
  padding: clamp(18px, 1.8vw, 26px);
  border: 0;
  border-left: 3px solid var(--brown);
  border-radius: 0;
  background: var(--white);
  box-shadow: none;
  overflow-y: auto;
}
/* Image on top, then the copy block underneath. */
.map-panel.is-detail-open .stop-detail__figure {
  order: 0;
  flex: 0 0 auto;
  width: 100%;
  height: clamp(150px, 17vw, 210px);
  min-height: 0;
  max-height: none;
  margin: 0;
}
.map-panel.is-detail-open .stop-detail__figure img {
  height: 100%;
  min-height: 0;
  max-height: none;
}
.map-panel.is-detail-open .stop-detail__copy {
  order: 1;
  min-height: 0;
}
.map-panel.is-detail-open .stop-detail__eyebrow {
  margin-right: 44px;   /* clear of the close button */
}

/* Close (×) button — top-right of the panel. */
.stop-detail__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: none;        /* only shown inside the open side panel */
  place-items: center;
  padding: 0;
  border: 1.5px solid rgba(70, 133, 92, 0.4);
  border-radius: 50%;
  background: var(--white);
  color: var(--forest);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  z-index: 4;
  transition: background-color .2s ease, transform .15s ease;
}
.map-panel.is-detail-open .stop-detail__close { display: inline-grid; }
.stop-detail__close:hover,
.stop-detail__close:focus-visible {
  background: var(--sage-light);
  transform: scale(1.06);
}

/* When closed, hide the panel so the map fills the whole card. */
.map-panel:not(.is-detail-open) .stop-detail { display: none; }

/* Drag handle — only shown on the mobile bottom sheet. */
.stop-detail__handle { display: none; }

/* ---- Mobile: the stop story becomes a draggable bottom sheet ---- */
@media (max-width: 820px) {
  .landscape-inner { max-width: calc(100% - 32px); padding-inline: 0; }
  .map-panel.is-detail-open { display: block; }
  .map-panel.is-detail-open .stop-strip {
    grid-template-columns: repeat(6, minmax(132px, 1fr));
  }

  /* Sheet pinned to the bottom of the viewport, overlapping the map. */
  .map-panel.is-detail-open .stop-detail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6000;
    width: 100%;
    max-height: 86vh;
    margin: 0;
    padding: 30px clamp(16px, 5vw, 24px) max(18px, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 22px 22px 0 0;
    background: var(--white);
    box-shadow: 0 -12px 40px rgba(22, 49, 31, 0.28);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateY(0);
    will-change: transform;
    animation: stop-sheet-up .32s cubic-bezier(.22, 1, .36, 1);
  }

  /* Grab strip across the top, with the visible pill handle. */
  .stop-detail__handle {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: grab;
    touch-action: none;
    z-index: 2;
  }
  .stop-detail__handle::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 5px;
    border-radius: 999px;
    background: rgba(70, 133, 92, 0.45);
  }
  .stop-detail__handle:active { cursor: grabbing; }

  /* Keep the close button above the handle strip. */
  .map-panel.is-detail-open .stop-detail__close {
    top: 16px;
    z-index: 5;
  }
  .map-panel.is-detail-open .stop-detail__eyebrow { margin-top: 4px; }

  /* Make the prev/next buttons full-width inside the sheet. */
  .map-panel.is-detail-open .stop-nav { flex-direction: column-reverse; }
  .map-panel.is-detail-open .stop-nav .stop-nav__button.btn { width: 100%; }
}

@keyframes stop-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Stop chip icons are dark brown until their stop is selected. */
.stop-button:not(.is-active) .stop-icon { color: #593c0e; }

/* "Take the trail with you" — hiker icon in a bordered sage circle. */
.trail-download-card__intro {
  display: flex;
  align-items: center;
  gap: 16px;
}
.trail-download-card__icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sage);
  border: 1.5px solid #46855c;
  box-shadow: 3px 4px 0 rgba(47, 109, 77, 0.18);
}
.trail-download-card__icon img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  display: block;
}

/* Leading map icon inside the "View corridor map" button. */
.btn-lead-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 3.4em;
  height: 3.4em;
  margin-right: 0.6em;
}
.btn-lead-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Circle the "how to use the map" step icons — sage fill, border, shadow. */
.trail-how__icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  padding: 9px;
  border-radius: 50%;
  background: var(--sage);
  border: 1.5px solid #46855c;
  box-shadow: 3px 4px 0 rgba(47, 109, 77, 0.18);
}
.trail-how__icon--map svg {
  width: 100%;
  height: 100%;
}


/* ============================================================
   Map viewport + width fix
   Keeps the Connected Landscape block inside one viewport and
   corrects the map/card width so it no longer over-expands.
   ============================================================ */
.landscape-section {
  --map-section-y: clamp(28px, 4svh, 46px);
  min-height: 100svh;
  padding-block: var(--map-section-y);
  overflow-x: hidden;
  overflow-x: clip;
}

.landscape-inner {
  width: min(1280px, calc(100vw - 64px));
  max-width: none;
  min-height: calc(100svh - var(--map-section-y) - var(--map-section-y));
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(16px, 2.4svh, 28px);
  padding-inline: 0;
}

.landscape-copy {
  max-width: 900px;
  margin-inline: auto;
}

.landscape-copy h2 {
  max-width: 16ch;
  margin-bottom: 8px;
  font-size: clamp(2rem, 3.2vw, 3rem);
}

.landscape-lede {
  max-width: 62ch;
  line-height: 1.55;
}

.trail-how {
  max-width: 860px;
  margin-top: clamp(6px, 1svh, 10px);
  padding-block: clamp(8px, 1.2svh, 12px);
  gap: 10px;
}

.trail-how__item {
  min-height: auto;
  padding: 6px 10px;
}

.trail-how__icon {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}

.trail-how__icon--map svg {
  width: 32px;
  height: 32px;
}

.map-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.map-main {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.map-header,
.stop-strip-header,
.stop-strip {
  flex: 0 0 auto;
}

.map-header {
  padding: clamp(9px, 1.4svh, 13px) clamp(14px, 1.8vw, 20px);
}

.map-canvas {
  flex: 1 1 auto;
  min-height: 0;
}

.bcorridor-map {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.stop-strip-header {
  padding: 8px 12px 0;
}

.stop-strip {
  grid-template-columns: repeat(6, minmax(100px, 1fr));
  gap: 8px;
  padding: 8px 12px 10px;
}

.stop-button {
  min-height: 86px;
  padding: 8px 6px;
  gap: 4px;
}

.stop-number {
  width: 26px;
  height: 26px;
  font-size: 0.78rem;
}

.stop-icon {
  width: 30px;
  height: 30px;
}

.stop-button strong {
  font-size: 0.98rem;
}

.stop-button small {
  font-size: 0.75rem;
}

.map-panel.is-detail-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 28%, 360px);
}

.map-panel.is-detail-open .map-main,
.map-panel.is-detail-open .stop-detail {
  height: 100%;
  min-height: 0;
}

.map-panel.is-detail-open .stop-strip {
  grid-template-columns: repeat(6, minmax(92px, 1fr));
}

.map-panel.is-detail-open .stop-button {
  min-height: 78px;
}

.map-panel.is-detail-open .stop-detail {
  overflow-y: auto;
}

.map-panel.is-detail-open .stop-detail__figure {
  height: clamp(120px, 18svh, 190px);
}

@media (max-width: 820px) {
  .landscape-section {
    --map-section-y: 32px;
    min-height: auto;
    overflow-x: hidden;
  }

  .landscape-inner {
    width: calc(100vw - 32px);
    min-height: auto;
    grid-template-rows: auto;
    gap: 24px;
  }

  .landscape-copy h2 {
    max-width: none;
  }

  .map-panel {
    height: min(76svh, 620px);
    min-height: 520px;
  }

  .map-panel.is-detail-open {
    display: flex;
  }

  .map-panel.is-detail-open .stop-detail {
    height: auto;
    max-height: 82svh;
  }
}

@media (max-width: 560px) {
  .landscape-section {
    --map-section-y: 28px;
  }

  .landscape-inner {
    width: calc(100vw - 24px);
  }

  .trail-how__icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .map-panel {
    height: min(78svh, 560px);
    min-height: 460px;
  }

  .map-header {
    gap: 10px;
  }

  .stop-strip {
    grid-template-columns: repeat(6, minmax(112px, 1fr));
  }

  .stop-button {
    min-height: 104px;
  }
}


/* ============================================================
   Map viewport tightening
   Slightly reduces the whole Connected Landscape map card so
   the map, header and stop strip are visible in the viewport.
   Append after the previous map viewport fix.
   ============================================================ */
.landscape-section {
  --map-section-y: clamp(20px, 2.8svh, 34px);
}

.landscape-inner {
  width: min(1210px, calc(100vw - 96px));
  gap: clamp(10px, 1.6svh, 18px);
}

.landscape-copy .kicker {
  margin-bottom: 10px;
  padding: 7px 15px;
}

.landscape-copy h2 {
  margin-bottom: 4px;
  font-size: clamp(1.9rem, 2.8vw, 2.7rem);
  line-height: 0.98;
}

.landscape-lede {
  font-size: clamp(0.95rem, 0.95vw, 1.04rem);
  line-height: 1.45;
}

.trail-how {
  margin-top: clamp(4px, 0.7svh, 8px);
  padding-block: clamp(6px, 0.9svh, 9px);
  gap: 8px;
}

.trail-how__item {
  padding: 4px 8px;
  gap: 8px;
  font-size: 0.95rem;
}

.trail-how__icon {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  padding: 6px;
}

.trail-how__icon--map svg {
  width: 28px;
  height: 28px;
}

.map-panel {
  height: min(64svh, 620px);
  max-height: calc(100svh - 178px);
}

@media (min-height: 900px) {
  .map-panel {
    height: min(66svh, 660px);
    max-height: calc(100svh - 190px);
  }
}

.map-header {
  padding: clamp(7px, 1svh, 10px) clamp(12px, 1.5vw, 16px);
  gap: 12px;
}

.map-header-copy {
  gap: 1px;
}

.map-header-copy span {
  font-size: 0.66rem;
}

.map-header-copy strong {
  gap: 8px;
  font-size: clamp(0.98rem, 1.2vw, 1.12rem);
}

.map-header-arrow {
  width: clamp(28px, 3vw, 40px);
}

.map-legend {
  gap: 8px;
}

.map-legend-chip {
  padding: 4px 9px;
  font-size: 0.7rem;
}

.stop-strip-header {
  padding: 6px 10px 0;
}

.stop-strip-header span {
  font-size: 0.68rem;
}

.stop-strip-header strong {
  font-size: 0.85rem;
}

.stop-strip {
  grid-template-columns: repeat(6, minmax(86px, 1fr));
  gap: 6px;
  padding: 6px 10px 8px;
}

.stop-button {
  min-height: 70px;
  padding: 6px 5px;
  gap: 2px;
}

.stop-number {
  min-width: 56px;
  width: auto;
  height: auto;
  padding: 5px 8px;
  font-size: 0.7rem;
}

.stop-icon {
  width: 24px;
  height: 24px;
}

.stop-button strong {
  font-size: 0.88rem;
  line-height: 1;
}

.stop-button small {
  font-size: 0.68rem;
  line-height: 1.15;
}

.map-panel.is-detail-open {
  grid-template-columns: minmax(0, 1fr) clamp(250px, 26%, 320px);
}

.map-panel.is-detail-open .stop-strip {
  grid-template-columns: repeat(6, minmax(80px, 1fr));
}

.map-panel.is-detail-open .stop-button {
  min-height: 66px;
}

.map-panel.is-detail-open .stop-detail {
  padding: clamp(12px, 1.2vw, 18px);
  gap: 10px;
}

.map-panel.is-detail-open .stop-detail__figure {
  height: clamp(96px, 14svh, 150px);
}

.map-panel.is-detail-open .stop-detail h3 {
  font-size: clamp(1.45rem, 2vw, 1.85rem);
}

.map-panel.is-detail-open .stop-detail__subtitle,
.map-panel.is-detail-open .stop-detail__copy p,
.map-panel.is-detail-open .stop-why p {
  font-size: 0.9rem;
  line-height: 1.45;
}

.map-panel.is-detail-open .stop-nav {
  gap: 8px;
  margin-top: 4px;
}

.map-panel.is-detail-open .stop-nav .stop-nav__button.btn {
  min-height: 44px;
  padding: 0 18px;
  font-size: 0.95rem;
}

@media (max-width: 820px) {
  .landscape-section {
    --map-section-y: 24px;
  }

  .landscape-inner {
    width: calc(100vw - 44px);
    gap: 18px;
  }

  .map-panel {
    height: min(70svh, 560px);
    min-height: 460px;
    max-height: none;
  }

  .map-panel.is-detail-open .stop-detail {
    max-height: 78vh;
  }
}

@media (max-width: 560px) {
  .landscape-inner {
    width: calc(100vw - 30px);
  }

  .map-panel {
    height: min(68svh, 520px);
    min-height: 420px;
  }

  .stop-strip {
    grid-template-columns: repeat(6, minmax(98px, 1fr));
  }

  .stop-button {
    min-height: 86px;
  }
}

/* ============================================================
   Stadia / Stamen map styling
   Keeps Stamen Terrain soft enough for the route, area and stop
   markers to stay readable. The tile layer filters only affect
   the basemap images; route lines, pins and popups remain crisp.
   ============================================================ */
.map-tiles--soft-terrain {
  filter: saturate(0.74) brightness(1.04) contrast(0.92);
}

.map-tiles--soft-watercolor {
  filter: saturate(0.48) brightness(1.08) contrast(0.88);
}

.map-tiles--aerial {
  filter: saturate(0.86) brightness(1.02) contrast(0.94);
}

.bcorridor-map .leaflet-control-container,
.bcorridor-map .leaflet-top,
.bcorridor-map .leaflet-bottom {
  z-index: 20;
}

.bcorridor-map .leaflet-control-attribution {
  display: block !important;
  max-width: min(78%, 620px);
  padding: 3px 7px;
  border-radius: 8px 0 0 0;
  background: rgba(252, 253, 249, 0.9);
  color: rgba(22, 49, 31, 0.78);
  font-size: 10px;
  line-height: 1.25;
}

.bcorridor-map .leaflet-control-attribution a {
  color: inherit;
}

.bcorridor-map .leaflet-control-layers {
  margin-top: 12px;
  margin-right: 12px;
  border: 1.5px solid rgba(70, 133, 92, 0.34);
  border-radius: 12px;
  background: rgba(252, 253, 249, 0.94);
  box-shadow: 3px 4px 0 rgba(47, 109, 77, 0.18);
  color: var(--forest);
  font-family: var(--font-body);
  font-size: 0.82rem;
}

.bcorridor-map .leaflet-control-layers-toggle {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-size: 20px 20px;
}

.bcorridor-map .leaflet-control-layers-expanded {
  padding: 10px 12px;
}

.bcorridor-map .leaflet-control-layers-base label {
  display: block;
  margin: 0 0 6px;
  white-space: nowrap;
}

.bcorridor-map .leaflet-control-layers-base label:last-child {
  margin-bottom: 0;
}

@media (max-width: 560px) {
  .bcorridor-map .leaflet-control-layers {
    margin-top: 8px;
    margin-right: 8px;
    font-size: 0.76rem;
  }

  .bcorridor-map .leaflet-control-attribution {
    max-width: 88%;
    font-size: 9px;
  }
}


/* ============================================================
   Mobile map stop-detail fail-safe
   Keeps the stop story closed until the visitor actively opens a stop.
   This avoids mobile browsers jumping straight to the stop-description
   area while the page is loading or when the map section is reached.
   ============================================================ */
.map-panel:not(.is-detail-open) .stop-detail,
.stop-detail[hidden] {
  display: none !important;
  visibility: hidden !important;
}

@media (max-width: 820px) {
  .map-panel:not(.is-detail-open) .stop-detail {
    position: static !important;
    transform: none !important;
  }
}

/* ============================================================
   Final refinements
   ============================================================ */

/* "A Connected Landscape" — one line, same size as other section headings.
   overflow:hidden keeps the nowrap heading from inflating the section's
   grid track (the cause of the whole section overflowing on phones);
   script.js then shrinks the font just enough to fit the real rendered
   width, whatever font is active. */
.landscape-copy h2 {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: clamp(2.25rem, 5vw, 3.875rem);
  line-height: 1.05;
}

/* Safety net: no child of the section's grid may force the column
   track wider than the viewport. */
.landscape-inner > * {
  min-width: 0;
  max-width: 100%;
}

/* Steps ("Choose a stop → Discover → Take the route"): when they no
   longer fit on one row, stack them centered with the arrows visible
   and pointing downward. */
@media (max-width: 960px) {
  .trail-how {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .trail-how__item {
    width: auto;
    min-height: auto;
    justify-content: center;
    text-align: center;
  }

  .trail-how__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: rotate(90deg);
  }

  .trail-how__arrow .cta-arrow {
    width: 24px;
  }
}

/* Reset-view button on the map (below the zoom control). */
.map-reset-control .map-reset-button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--forest, #1c3f2a);
  background: var(--white, #fff);
  cursor: pointer;
}

.map-reset-control .map-reset-button:hover,
.map-reset-control .map-reset-button:focus-visible {
  background: var(--sage-light, #eef3df);
  color: var(--green, #46855c);
}

.map-reset-control .map-reset-button svg {
  display: block;
}

/* Mobile bottom sheet — give the stop photo a proper height so it
   isn't squeezed into a thin strip. */
@media (max-width: 820px) {
  .map-panel.is-detail-open .stop-detail__figure {
    height: clamp(200px, 52vw, 300px);
    min-height: 200px;
  }

  .map-panel.is-detail-open .stop-detail__figure img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
  }
}

/* ============================================================
   Uniform vertical rhythm between sections.
   Every cream-on-cream boundary gets half of --section-y on each
   side, so the visible gap between any two sections is the same
   --section-y (64–112px). Cream sections facing a full-bleed band
   (the quote photo, the green CTA) carry the full gap themselves.
   The hero/impact overlap and the quote/mission overlap are
   intentional designs and keep their own spacing.
   ============================================================ */
.impact-card-section {
  padding-bottom: calc(var(--section-y) / 2);
}

.biodiversity-section {
  padding-block: calc(var(--section-y) / 2) var(--section-y);
}

.mission-section {
  padding-bottom: calc(var(--section-y) / 2);
}

.fact-section {
  padding-block: calc(var(--section-y) / 2);
}

.landscape-section {
  /* drives the section's own padding AND its internal height math */
  --map-section-y: calc(var(--section-y) / 2);
}

.news-section {
  padding-block: calc(var(--section-y) / 2);
}

.partners-section {
  padding-block: calc(var(--section-y) / 2) var(--section-y);
}

/* ============================================================
   No-JS fallback — without scripting the header can't switch to
   its "scrolled" glass state, so apply it permanently to keep
   the nav readable over light sections.
   ============================================================ */
.no-js .site-header {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 36px rgba(70, 133, 92, 0.12);
}
.no-js .nav-links a { color: #386b49; text-shadow: none; }
.no-js .nav-links a::after { background: var(--green); }
.no-js .mobile-menu { background: var(--green); }