/* ============================================================
   THE CROM SHED, shared site stylesheet
   Brand + component base for every page (per docs/design-system.md).
   The homepage (index.html) keeps its own inline copy; every
   other page links this file. Keep the two visually in sync.
   ============================================================ */

:root {
  /* Brand palette */
  --firth: #4D7F59;
  --peat: #4C4137;
  --river: #37B1E4;
  --burn-bank: #5E4636;
  --sandstone: #8A6A4C;
  --gorse: #F2C84B;
  --rowan: #E8744A;
  --heather: #8B5E96;
  --loch: #1F6E8C;
  --firth-deep: #2F5A3E;
  --firth-soft: #A8C5AE;
  --cream: #F7ECDD;
  --paper: #FCF6EB;
  --ink: #2A2520;
  /* System */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --container: 1280px;
  --pad-x: clamp(20px, 4vw, 64px);
  --font-display: 'Bebas Neue', sans-serif; /* big display: hero, page titles, stat numbers */
  --font-title: 'Poppins', 'Helvetica Neue', system-ui, -apple-system, sans-serif; /* headings + UI */
  --font-body: 'Poppins', 'Helvetica Neue', system-ui, -apple-system, sans-serif; /* body */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  background: var(--cream);
  color: var(--peat);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a[href], button, [role="button"], summary, label[for] { cursor: pointer; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
/* Two-tone focus ring: a dark peat outline shows on light backgrounds and a
   light paper ring (box-shadow) shows on dark ones, so the indicator always
   clears 3:1 (WCAG 1.4.11). A single --river outline was only ~2.1:1 on cream. */
:focus-visible { outline: 2px solid var(--peat); outline-offset: 2px; box-shadow: 0 0 0 2px var(--paper); border-radius: 4px; }

/* ---------- SKIP LINK (a11y) ---------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--peat);
  color: var(--cream);
  padding: 10px 18px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600;
  transition: top 160ms ease;
}
.skip-link:focus { top: 0; }
#main:focus { outline: none; }

/* ---------- FORMS: honeypot + status messages ---------- */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note {
  border-radius: var(--r-sm);
  padding: 14px 18px;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 14px;
}
.form-note--ok { background: rgba(77, 127, 89, 0.12); color: var(--firth-deep); border: 1px solid var(--firth-soft); }
.form-note--err { background: rgba(232, 116, 74, 0.12); color: var(--peat); border: 1px solid var(--rowan); }

/* ---------- COMMUNITY STORIES SLIDER (design-system 4.8) ---------- */
.stories-band { background: var(--firth-deep); color: var(--cream); padding: clamp(56px, 7vw, 96px) 0; }
.stories-band .stories-head { text-align: center; max-width: 640px; margin: 0 auto clamp(28px, 4vw, 44px); }
.stories-band .stories-head .eyebrow { color: var(--gorse); }
.stories-band .stories-head h2 { font-family: var(--font-title); font-weight: 700; font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -0.02em; margin: 10px 0 0; color: var(--cream); }
.quote-carousel { position: relative; max-width: 860px; margin: 0 auto; }
.quote-slides { position: relative; }
.quote-slide {
  opacity: 0; visibility: hidden; position: absolute; inset: 0;
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 36px); align-items: center;
  transition: opacity 600ms ease;
}
.quote-slide.is-active { opacity: 1; visibility: visible; position: relative; }
.quote-portrait { width: 88px; height: 88px; border-radius: 50%; background: var(--firth-soft) center/cover no-repeat; flex: none; }
.quote-slide blockquote { margin: 0; font-family: var(--font-body); font-style: italic; font-size: clamp(19px, 2.3vw, 28px); line-height: 1.45; color: var(--cream); }
.quote-attr { margin-top: 16px; display: flex; flex-direction: column; gap: 2px; }
.quote-attr .name { font-family: var(--font-title); font-weight: 700; font-size: 14px; color: var(--cream); }
.quote-attr .role { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(247, 236, 221, 0.72); }
.quote-dots { display: flex; gap: 10px; justify-content: center; margin-top: clamp(28px, 4vw, 40px); }
.quote-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(247, 236, 221, 0.32); cursor: pointer; padding: 0; transition: background 200ms ease, transform 200ms ease; }
.quote-dot:hover { background: rgba(247, 236, 221, 0.6); }
.quote-dot.is-active { background: var(--gorse); transform: scale(1.25); }
@media (max-width: 560px) { .quote-slide { grid-template-columns: 1fr; text-align: center; justify-items: center; } }

/* ---------- LISTING PAGINATION (server-side, ?cat&page links) ---------- */
.pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 44px; }
.pager a, .pager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px;
  border: 1px solid rgba(76, 65, 55, 0.25); background: transparent; color: var(--peat);
  font-weight: 600; font-size: 14px;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.pager a:hover { border-color: var(--firth); color: var(--firth-deep); }
.pager a.is-active { background: var(--firth); border-color: var(--firth); color: var(--cream); }
.pager span[aria-disabled] { opacity: 0.4; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}
.container.narrow { max-width: 880px; }

/* ---------- SCROLL REVEAL ---------- */
/* Gated on .js (set by an inline head script) so content is fully visible
   when JavaScript is disabled or fails, instead of staying at opacity:0. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 280ms ease-in, transform 280ms ease-in;
  transition-delay: 0ms;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 800ms cubic-bezier(.2,.7,.2,1), transform 800ms cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- TYPE PRIMITIVES ---------- */
.bebas { font-family: var(--font-display); letter-spacing: 0.01em; line-height: 0.96; }
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(12px, 0.9vw, 13px);
  color: var(--peat);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow .rule { width: 40px; height: 1px; background: currentColor; opacity: 0.5; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-self: flex-start; /* never stretch to fill a flex-column parent; opt back in with align-self: stretch */
  align-items: center;
  gap: 12px;
  padding: 14px 22px 14px 26px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
  white-space: nowrap;
}
.btn .arrow {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: currentColor;
}
.btn .arrow svg { color: var(--cream); }
.btn-primary { background: var(--firth); color: var(--cream); border-color: var(--firth); }
.btn-primary:hover { background: var(--firth-deep); border-color: var(--firth-deep); }
.btn-primary .arrow { background: var(--cream); }
.btn-primary .arrow svg { color: var(--firth); }
/* Dark ink on rowan = ~5:1 (AA). Cream-on-rowan was 2.56:1 and failed. */
.btn-donate { background: var(--rowan); color: var(--ink); border-color: var(--rowan); }
.btn-donate:hover { background: var(--peat); border-color: var(--peat); color: var(--cream); }
.btn-donate .arrow { background: var(--cream); }
.btn-donate .arrow svg { color: var(--ink); }
.btn-donate:hover .arrow svg { color: var(--peat); }
.btn-ghost { background: transparent; color: var(--peat); border-color: rgba(76, 65, 55, 0.4); }
.btn-ghost:hover { background: var(--peat); color: var(--cream); border-color: var(--peat); }
.btn-ghost .arrow { background: var(--peat); }
.btn-ghost:hover .arrow { background: var(--cream); }
.btn-ghost:hover .arrow svg { color: var(--peat); }
.btn-on-dark { background: transparent; color: var(--cream); border-color: rgba(246, 240, 228, 0.6); }
.btn-on-dark:hover { background: var(--cream); color: var(--peat); border-color: var(--cream); }
.btn-on-dark .arrow { background: var(--cream); }
.btn-on-dark .arrow svg { color: var(--peat); }
.btn-on-dark:hover .arrow { background: var(--peat); }
.btn-on-dark:hover .arrow svg { color: var(--cream); }
.btn-gorse { background: var(--gorse); color: var(--peat); border-color: var(--gorse); }
.btn-gorse:hover { background: var(--peat); color: var(--cream); border-color: var(--peat); }
.btn-gorse .arrow { background: var(--peat); }
.btn-gorse .arrow svg { color: var(--gorse); }
.btn-gorse:hover .arrow { background: var(--cream); }
.btn-gorse:hover .arrow svg { color: var(--peat); }

/* ---------- HEADER / NAV ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(247, 236, 221, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(76, 65, 55, 0.08);
}
.nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding-block: 16px; /* keep the .container side gutter */
  gap: 32px;
}
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav a { position: relative; padding: 6px 0; transition: color 180ms ease; }
.nav a:hover { color: var(--firth); }
.nav a.active { color: var(--firth); }
.nav a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--firth);
}
.brand-link { display: inline-flex; align-items: center; }
.brand-logo { height: 84px; width: auto; display: block; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(76, 65, 55, 0.2);
  background: transparent;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--peat);
  border-radius: 2px;
  transition: transform 240ms ease, opacity 200ms ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-sheet {
  position: fixed;
  inset: 0;
  background: var(--cream);
  z-index: 40;
  display: none;
  flex-direction: column;
  padding: 120px var(--pad-x) 40px;
  gap: 24px;
  overflow-y: auto;
}
.nav-sheet.is-open { display: flex; }
.nav-sheet a {
  font-family: var(--font-display);
  font-size: 48px;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--peat);
  padding: 8px 0;
  border-bottom: 1px solid rgba(76, 65, 55, 0.1);
}
.nav-sheet a:hover { color: var(--firth); }
.nav-sheet .account-pill {
  align-self: flex-start;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  background: var(--rowan);
  color: var(--ink);
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav a.account-pill {
  display: inline-flex;
  align-items: center;
  background: var(--rowan);
  /* Dark ink on rowan = ~5:1 (AA). Cream-on-rowan was 2.5:1 and failed. */
  color: var(--ink);
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.nav a.account-pill:hover { background: var(--peat); color: var(--cream); transform: translateY(-1px); }
.nav a.account-pill::after { display: none; }

/* ---------- PAGE HEADER BAND (interior pages) ---------- */
.page-header {
  background: var(--cream);
  padding: clamp(132px, 15vw, 200px) 0 clamp(48px, 6vw, 80px);
  text-align: left;
}
.page-header.on-paper { background: var(--paper); }
/* Breadcrumbs dropped site-wide (markup left in place, hidden here). */
.breadcrumb { display: none; }
.page-header .ph-grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.page-header h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(66px, 9.5vw, 150px);
  line-height: 0.9;
  letter-spacing: 0.012em;
  margin: 10px 0 0;
  color: var(--peat);
  max-width: 20ch;
}
.page-header .lede {
  margin: 0;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--burn-bank);
  max-width: 60ch;
}
.page-header .ph-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- SECTION SHELL ---------- */
section { padding: clamp(72px, 9vw, 128px) 0; }
section.tight { padding: clamp(48px, 6vw, 80px) 0; }
.section-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: end;
  margin-bottom: 56px;
}
.section-head .titling { display: flex; flex-direction: column; gap: 16px; }
.section-head h2 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--peat);
}
.section-head .subtitle {
  margin: 0;
  color: var(--burn-bank);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  max-width: 48ch;
}
.section-head .cta-slot { display: flex; justify-content: flex-end; align-items: end; }
.on-paper-bg { background: var(--paper); }
.on-cream-bg { background: var(--cream); }
.on-firth-bg { background: var(--firth-deep); color: var(--cream); }

/* ---------- PROSE (article / long read body) ---------- */
.prose { font-size: 17px; line-height: 1.75; color: var(--burn-bank); max-width: 68ch; }
.prose > * + * { margin-top: 1.25em; }
.prose h2 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(30px, 3.5vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--peat);
  margin-top: 1.8em;
}
.prose h3 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(22px, 2vw, 25px);
  letter-spacing: -0.01em;
  color: var(--peat);
  margin-top: 1.6em;
}
.prose p { margin: 0; }
/* Restore the gap between paragraphs (the rule above was cancelling ".prose > * + *"). */
.prose > * + p { margin-top: 1.25em; }
.prose a { color: var(--firth); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; }
.prose li + li { margin-top: 0.5em; }
.prose blockquote {
  margin: 1.6em 0;
  padding: 8px 0 8px 28px;
  border-left: 3px solid var(--firth);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--peat);
  font-style: normal;
}
.prose figure { margin: 2em 0; }
.prose figure img, .prose .figph {
  width: 100%;
  border-radius: var(--r-md);
  display: block;
  background: var(--firth-soft) center/cover no-repeat;
  aspect-ratio: 16 / 9;
}
.prose figcaption { margin-top: 10px; font-size: 13px; color: var(--burn-bank); }

/* ---------- EDITORIAL SPLIT ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.split.reverse > .split-media { order: 2; }
.split-media {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  background: var(--firth-soft) center/cover no-repeat;
  width: 100%;
}
.split-text { display: flex; flex-direction: column; gap: 22px; }
.split-text h2 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(36px, 4.8vw, 66px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--peat);
  max-width: 18ch;
}
.split-text p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--burn-bank); max-width: 52ch; }

/* ---------- STAT STRIP ---------- */
.stat-strip { background: var(--cream); padding: clamp(48px, 6vw, 88px) 0; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stat-cell {
  padding: 16px 32px;
  border-left: 1px solid rgba(76, 65, 55, 0.15);
  display: flex; flex-direction: column; gap: 12px;
}
.stat-cell:first-child { border-left: 0; padding-left: 0; }
.stat-cell .num {
  font-family: var(--font-display);
  font-size: clamp(56px, 6.5vw, 108px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--firth);
  display: inline-flex;
  align-items: baseline;
}
.stat-cell .num sup {
  font-family: var(--font-body);
  font-size: 0.26em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--burn-bank);
  margin-left: 6px;
  top: -1.7em;
  position: relative;
}
/* Baseline suffix (units like "ha"/"km"), sits level with the number instead of raised. */
.stat-cell .num .suffix-base {
  font-family: var(--font-body);
  font-size: 0.34em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--burn-bank);
  margin-left: 8px;
}
.stat-cell .label {
  font-family: var(--font-title);
  color: var(--burn-bank);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---------- VALUE / FEATURE CARDS ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr; /* every row the same height, so all boxes match whatever the text length */
  gap: 24px;
}
.feature-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.feature-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.feature-card {
  background: var(--paper);
  border: 1px solid rgba(76, 65, 55, 0.08);
  border-radius: var(--r-md);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feature-card .icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--firth-soft);
  color: var(--firth-deep);
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}
.feature-card h3 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--peat);
}
.feature-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--burn-bank); }
.feature-card .num-badge {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--firth);
}

/* ---------- PROJECT CARDS (homepage 2-up style) ---------- */
.proj-card {
  background: var(--paper);
  border-radius: var(--r-md);
  overflow: hidden;
  display: grid;
  grid-template-columns: 240px 1fr;
  transition: transform 240ms ease, box-shadow 240ms ease;
  border: 1px solid rgba(76, 65, 55, 0.06);
}
.proj-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(76, 65, 55, 0.3); }
.proj-card .photo { background: var(--firth-soft) center/cover no-repeat; min-height: 240px; position: relative; }
.proj-card .tag {
  position: absolute; top: 14px; left: 14px;
  background: var(--cream); color: var(--peat);
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}
.proj-card .tag.heather { background: var(--heather); color: var(--cream); }
.proj-card .tag.river { background: var(--river); color: var(--peat); }
.proj-card .tag.land { background: var(--sandstone); color: var(--cream); }
.proj-card .body { padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.proj-card .body h3 {
  font-family: var(--font-title);
  font-weight: 600; font-size: clamp(22px, 1.9vw, 26px); line-height: 1.15; letter-spacing: -0.015em;
  margin: 0; color: var(--peat);
}
.proj-card .body p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--burn-bank); flex: 1; }
.proj-card .body .meta {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--firth); padding-top: 12px; border-top: 1px solid rgba(76, 65, 55, 0.08);
}

/* ---------- LISTING CARD GRID (projects / crom crumbs) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); gap: 22px; }
.listing-card {
  background: var(--paper);
  border: 1px solid rgba(76, 65, 55, 0.08);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), box-shadow 280ms ease;
}
.listing-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -30px rgba(76, 65, 55, 0.32); }
.listing-card .media {
  aspect-ratio: 3 / 2;
  background: var(--firth-soft) center/cover no-repeat;
  position: relative;
  overflow: hidden;
}
.listing-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.2,.7,.2,1); }
.listing-card:hover .media img { transform: scale(1.05); }
.cat-tag {
  position: absolute; top: 14px; left: 14px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  background: var(--cream); color: var(--peat);
}
.cat-tag.fieldnote { background: var(--firth); color: var(--cream); }
.cat-tag.vlog { background: var(--river); color: var(--peat); }
.cat-tag.podcast { background: var(--loch); color: var(--cream); }
.cat-tag.wildlife { background: var(--heather); color: var(--cream); }
.cat-tag.appeal { background: var(--rowan); color: var(--ink); }
.cat-tag.community { background: var(--gorse); color: var(--peat); }
.listing-card .body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.listing-card .body .kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--burn-bank);
}
.listing-card .body h3 {
  font-family: var(--font-title);
  font-weight: 700; font-size: clamp(22px, 1.9vw, 26px); line-height: 1.18; letter-spacing: -0.015em;
  margin: 0; color: var(--peat);
}
.listing-card .body p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--burn-bank); flex: 1; }
.listing-card .body .read {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--firth-deep); padding-top: 14px; border-top: 1px solid rgba(76, 65, 55, 0.1); margin-top: 4px;
}
.listing-card .body .read .arrow {
  width: 26px; height: 26px; border-radius: 50%; background: var(--firth-deep); color: var(--cream);
  display: inline-grid; place-items: center; transition: transform 200ms ease;
}
.listing-card:hover .body .read .arrow { transform: translateX(3px) rotate(-12deg); }

/* ---------- FILTER BAR (tag pills) ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; }
.filter-pill {
  display: inline-block; cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 10px 18px; border-radius: 999px;
  border: 1.5px solid rgba(76, 65, 55, 0.25);
  background: transparent; color: var(--peat);
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.filter-pill:hover { border-color: var(--firth); color: var(--firth); }
.filter-pill.is-active { background: var(--firth); border-color: var(--firth); color: var(--cream); }

/* ---------- PAGINATION ---------- */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 64px; }
.pagination a, .pagination span {
  min-width: 44px; height: 44px;
  display: inline-grid; place-items: center;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  color: var(--peat);
  border: 1.5px solid rgba(76, 65, 55, 0.2);
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.pagination a:hover { border-color: var(--firth); color: var(--firth); }
.pagination .is-active { background: var(--firth); border-color: var(--firth); color: var(--cream); }
.pagination .dots { border: 0; }

/* ---------- TEAM GRID ---------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.team-card { display: flex; flex-direction: column; gap: 16px; }
.team-card .portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  background: var(--firth-soft) center/cover no-repeat;
  position: relative;
  overflow: hidden;
}
.team-card .portrait img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 {
  font-family: var(--font-title);
  font-weight: 700; font-size: 19px; letter-spacing: -0.01em; margin: 0; color: var(--peat);
}
.team-card .role {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--firth);
  margin-top: -8px;
}
.team-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--burn-bank); }
/* Neutral "photo to follow" placeholders (no stock face on a real name) */
.portrait-ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.portrait-ph .initials {
  font-family: var(--font-display); font-size: 46px; line-height: 1; letter-spacing: 0.04em;
  color: var(--firth-deep); opacity: 0.72;
}
.portrait-ph .ph-note {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--firth-deep); opacity: 0.5;
}
.avatar-ph {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: var(--firth-soft); color: var(--firth-deep);
  display: grid; place-items: center; margin-bottom: 4px;
  font-family: var(--font-display); font-size: 22px; letter-spacing: 0.04em;
}

/* ---------- TIMELINE ---------- */
.timeline { border-left: 2px solid rgba(76, 65, 55, 0.15); margin-left: 8px; display: flex; flex-direction: column; gap: 8px; }
.timeline-item { position: relative; padding: 4px 0 32px 36px; }
.timeline-item::before {
  content: '';
  position: absolute; left: -9px; top: 8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--cream); border: 3px solid var(--firth);
}
.timeline-item .year {
  font-family: var(--font-display);
  font-size: 34px; line-height: 1; color: var(--firth); letter-spacing: 0.02em;
}
.timeline-item h3 {
  font-family: var(--font-title);
  font-weight: 700; font-size: 19px; letter-spacing: -0.01em; margin: 8px 0 6px; color: var(--peat);
}
.timeline-item p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--burn-bank); max-width: 56ch; }

/* ---------- VISION LIST (homepage pattern) ---------- */
.vision-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(76, 65, 55, 0.12); }
.vision-item {
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start;
  padding: 24px 0; border-bottom: 1px solid rgba(76, 65, 55, 0.12);
}
.vision-item .vicon {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--firth-soft); color: var(--firth-deep);
  display: grid; place-items: center; flex-shrink: 0;
}
.vision-item h4 {
  font-family: var(--font-title);
  font-weight: 700; font-size: 21px; line-height: 1.2; margin: 4px 0 6px; letter-spacing: -0.01em; color: var(--peat);
}
.vision-item p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--burn-bank); max-width: 62ch; }
.vision-item .arrow {
  width: 38px; height: 38px; border-radius: 50%; background: var(--firth-soft);
  display: grid; place-items: center; color: var(--firth-deep);
  transition: background 200ms ease, transform 200ms ease;
}
.vision-item:hover .arrow { background: var(--firth); color: var(--cream); transform: rotate(-12deg); }

/* ---------- STORY CARD (cinematic) ---------- */
.story-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 21 / 9; background: var(--firth-deep) center/cover no-repeat;
}
.story-card > img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.story-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(20, 30, 35, 0.8) 100%);
}
.story-overlay {
  position: absolute; inset: auto 0 0 0;
  padding: 32px 36px;
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px;
  color: var(--cream); z-index: 2;
}
.story-overlay h3 {
  font-family: var(--font-title);
  font-weight: 700; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.15; margin: 0; letter-spacing: -0.015em;
}
.story-overlay .sub { font-size: 13px; color: rgba(246, 240, 228, 0.82); margin: 6px 0 0; max-width: 56ch; }
.story-overlay .date {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(246, 240, 228, 0.8); display: flex; align-items: center; gap: 10px;
}
.story-overlay .date .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gorse); }

/* ---------- AUDIO CARD ---------- */
.audio-card {
  display: grid; grid-template-columns: 280px 1fr; gap: 0;
  background: var(--paper); border: 1px solid rgba(76, 65, 55, 0.08);
  border-radius: var(--r-lg); overflow: hidden;
}
.audio-card .cover { background: var(--firth-soft) center/cover no-repeat; min-height: 280px; }
.audio-card .body { padding: 36px 40px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.audio-card .body h3 {
  font-family: var(--font-title);
  font-weight: 700; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.02em; margin: 0; color: var(--peat);
}
.audio-card .body p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--burn-bank); max-width: 52ch; }
.audio-player {
  display: flex; align-items: center; gap: 16px;
  background: var(--cream); border-radius: 999px; padding: 10px 18px 10px 10px; margin-top: 8px;
}
.audio-player .play {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%;
  background: var(--firth); color: var(--cream); border: 0;
  display: grid; place-items: center;
}
.audio-player .play:hover { background: var(--firth-deep); }
.audio-player .wave { flex: 1; height: 28px; display: flex; align-items: center; gap: 3px; }
.audio-player .wave span {
  flex: 1; background: var(--sandstone); border-radius: 2px; opacity: 0.55;
  height: 30%;
}
.audio-player .time { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--burn-bank); }

/* ---------- IMAGE GALLERY + LIGHTBOX ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 14px;
}
.gallery .shot {
  position: relative;
  overflow: hidden;
  border: 0;
  padding: 0;
  border-radius: var(--r-md);
  background: var(--firth-soft) center/cover no-repeat;
  cursor: pointer;
  aspect-ratio: 1 / 1;
}
.gallery .shot.feature { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gallery .shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(.2,.7,.2,1); }
.gallery .shot:hover img { transform: scale(1.06); }
.gallery .shot::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(20, 30, 35, 0.4));
  opacity: 0; transition: opacity 220ms ease;
}
.gallery .shot:hover::after { opacity: 1; }
.gallery .shot .zoom {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(247, 236, 221, 0.94); color: var(--peat);
  display: grid; place-items: center;
  opacity: 0; transform: translateY(8px); transition: opacity 220ms ease, transform 220ms ease;
}
.gallery .shot:hover .zoom { opacity: 1; transform: translateY(0); }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 30, 35, 0.92); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 6vw;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 84vh; border-radius: var(--r-md); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7); }
.lightbox .lb-btn {
  position: absolute; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(247, 236, 221, 0.14); border: 1px solid rgba(246, 240, 228, 0.3); color: var(--cream);
  display: grid; place-items: center; cursor: pointer; transition: background 200ms ease, transform 200ms ease;
}
.lightbox .lb-btn:hover { background: rgba(247, 236, 221, 0.28); }
.lightbox .lb-close { top: 24px; right: 24px; }
.lightbox .lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-prev:hover { transform: translateY(-50%) translateX(-2px); }
.lightbox .lb-next:hover { transform: translateY(-50%) translateX(2px); }
.lightbox .lb-count {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: rgba(246, 240, 228, 0.85); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}

/* ---------- SPONSOR / PARTNER STRIP ---------- */
.sponsor-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.sponsor-logo {
  min-height: 96px; min-width: 170px; flex: 1;
  border-radius: var(--r-md);
  background: #FFFFFF;
  border: 1px solid rgba(76, 65, 55, 0.1);
  display: grid; place-items: center;
  padding: 22px 28px;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.sponsor-logo img { max-height: 46px; max-width: 100%; width: auto; object-fit: contain; }
.sponsor-logo:hover { transform: translateY(-2px); border-color: rgba(76, 65, 55, 0.2); box-shadow: 0 18px 36px -22px rgba(76, 65, 55, 0.4); }

/* ---------- INVOLVE TRIPTYCH (homepage pattern) ---------- */
.involve-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.involve-card {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none;
  min-height: 520px; color: var(--cream); isolation: isolate;
  transition: transform 320ms cubic-bezier(.2,.7,.2,1), box-shadow 320ms ease;
}
.involve-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -20px rgba(20, 30, 35, 0.4); }
.involve-card .photo { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.involve-card .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms cubic-bezier(.2,.7,.2,1); filter: saturate(1.02); }
.involve-card:hover .photo img { transform: scale(1.06); }
.involve-card .photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 30, 35, 0.15) 0%, rgba(20, 30, 35, 0.35) 35%, rgba(20, 30, 35, 0.92) 100%);
}
.involve-card .photo .index {
  position: absolute; top: 18px; left: 18px;
  background: rgba(246, 240, 228, 0.12); backdrop-filter: blur(8px); color: var(--cream);
  font-family: var(--font-title); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(246, 240, 228, 0.25); z-index: 2;
}
.involve-card .body { position: relative; z-index: 1; padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 14px; }
.involve-card .body .kind {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-title); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream);
}
.involve-card .body .kind::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--cream)); }
.involve-card .body h3 {
  font-family: var(--font-title);
  font-weight: 700; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.05; letter-spacing: -0.02em; margin: 0; color: var(--cream);
}
.involve-card .body p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(246, 240, 228, 0.88); max-width: 34ch; }
.involve-card .link {
  display: inline-flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  margin-top: 6px; padding-top: 18px; border-top: 1px solid rgba(246, 240, 228, 0.3); color: var(--cream);
}
.involve-card .link .arrow {
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent, var(--cream)); color: var(--peat);
  display: inline-flex; align-items: center; justify-content: center; transition: transform 240ms ease; flex-shrink: 0;
}
.involve-card .link .arrow svg { color: var(--peat); }
.involve-card:hover .link .arrow { transform: translateX(4px) rotate(-12deg); }
.involve-volunteer  { --accent: var(--firth); }
.involve-membership { --accent: var(--river); }
.involve-support    { --accent: var(--rowan); }
.involve-newsletter { --accent: var(--gorse); }
.involve-careers    { --accent: var(--heather); }

/* ---------- MEMBERSHIP / PRICING TIERS ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.tier-card {
  background: var(--paper); border: 1px solid rgba(76, 65, 55, 0.1); border-radius: var(--r-lg);
  padding: 36px 32px; display: flex; flex-direction: column; gap: 18px;
}
.tier-card.featured { background: var(--firth-deep); color: var(--cream); border-color: var(--firth-deep); }
.tier-card.featured .tier-name, .tier-card.featured h3, .tier-card.featured .price, .tier-card.featured li { color: var(--cream); }
.tier-card .tier-name {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--firth);
}
.tier-card.featured .tier-name { color: var(--gorse); }
.tier-card .price { font-family: var(--font-display); font-size: 64px; line-height: 0.9; color: var(--peat); }
.tier-card .price span { font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: var(--burn-bank); }
.tier-card.featured .price span { color: rgba(246, 240, 228, 0.75); }
.tier-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.tier-card li { display: flex; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--burn-bank); }
.tier-card.featured li { color: rgba(246, 240, 228, 0.9); }
.tier-card li .tick { color: var(--firth); flex-shrink: 0; }
.tier-card.featured li .tick { color: var(--gorse); }
.tier-card .btn { margin-top: auto; align-self: stretch; justify-content: center; }

/* ---------- FORMS ---------- */
.form { display: flex; flex-direction: column; gap: 22px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .field .field-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--peat);
}
.field .req { color: var(--rowan); }
.field input, .field textarea, .field select {
  font-family: var(--font-body); font-size: 15px; color: var(--peat);
  background: var(--paper);
  border: 1.5px solid rgba(76, 65, 55, 0.2);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(76, 65, 55, 0.4); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--firth); box-shadow: 0 0 0 3px rgba(77, 127, 89, 0.15);
}
.field textarea { resize: vertical; min-height: 140px; }
.field .hint { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--burn-bank); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--burn-bank); }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--firth); flex-shrink: 0; }
.form-card {
  background: var(--cream);
  border: 1px solid rgba(76, 65, 55, 0.1);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 48px);
}
.form-card.on-paper { background: var(--paper); }

/* ---------- CONTACT GRID ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 5vw, 80px); align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 28px; }
.contact-block { display: flex; flex-direction: column; gap: 6px; }
.contact-block .label { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--firth); }
.contact-block a, .contact-block p { margin: 0; font-size: 16px; color: var(--peat); line-height: 1.6; }
.contact-block a:hover { color: var(--firth); }
.map-embed {
  aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden;
  background: linear-gradient(140deg, #1F4632 0%, #2F5A3E 100%);
}
.map-embed .map-leaflet, .full-map .map-leaflet { position: absolute; inset: 0; }

/* ---------- FULL MAP PAGE ---------- */
.full-map-section { padding: 0; }
.full-map {
  position: relative;
  display: grid;
  grid-template-columns: 380px 1fr;
  height: calc(100vh - 120px);
  min-height: 620px;
  background: var(--firth-deep);
}
.full-map .map-rail {
  background: var(--peat); color: var(--cream);
  padding: 32px 28px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(246, 240, 228, 0.28) transparent;
}
.full-map .map-rail::-webkit-scrollbar { width: 8px; }
.full-map .map-rail::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
.full-map .map-rail::-webkit-scrollbar-thumb { background: rgba(246, 240, 228, 0.22); border-radius: 999px; }
.full-map .map-rail::-webkit-scrollbar-thumb:hover { background: rgba(246, 240, 228, 0.4); }
.full-map .map-rail h2 {
  font-family: var(--font-title);
  font-weight: 700; font-size: 26px; letter-spacing: -0.02em; margin: 0; color: var(--cream);
}
.full-map .map-rail .rail-sub { font-size: 13px; line-height: 1.6; color: rgba(246, 240, 228, 0.75); margin: 0; }
.full-map .map-canvas { position: relative; overflow: hidden; background: #C8D8E0; }
.rail-filters { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-top: 1px solid rgba(246, 240, 228, 0.15); border-bottom: 1px solid rgba(246, 240, 228, 0.15); }
.rail-filters .legend-label { font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(246, 240, 228, 0.55); margin-bottom: 6px; }
/* Filter layers as an overlay on the map canvas */
.map-legend {
  position: absolute;
  top: 18px; left: 18px;
  z-index: 500;
  background: rgba(20, 30, 35, 0.62);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(246, 240, 228, 0.14);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.5);
}
.map-legend .legend-label { font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(246, 240, 228, 0.6); margin-bottom: 4px; }

/* ---------- LEAFLET BRAND OVERRIDES ---------- */
.leaflet-container { background: #C8D8E0 !important; font-family: var(--font-body) !important; outline: none; }
.leaflet-tile { filter: saturate(1.05) contrast(1.02); }
.leaflet-control-attribution {
  background: rgba(20, 30, 35, 0.55) !important; backdrop-filter: blur(6px);
  color: rgba(246, 240, 228, 0.7) !important; font-size: 9px !important; padding: 3px 6px !important;
}
.leaflet-control-attribution a { color: var(--gorse) !important; }
.leaflet-control-zoom a {
  background: rgba(20, 30, 35, 0.7) !important; color: var(--cream) !important;
  border: 1px solid rgba(246, 240, 228, 0.15) !important;
}
.leaflet-control-zoom a:hover { background: var(--firth) !important; }
.crom-marker {
  width: 18px !important; height: 18px !important; border-radius: 50%;
  background: var(--cream); border: 3px solid var(--river); cursor: pointer; position: relative;
  transition: transform 240ms cubic-bezier(.2,.7,.2,1), opacity 240ms ease;
}
.crom-marker.species { border-color: var(--heather); }
.crom-marker.land { border-color: var(--sandstone); }
.crom-marker::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  background: rgba(55, 177, 228, 0.4); animation: pulse-marker 2.4s ease-out infinite; z-index: -1;
}
.crom-marker.species::after { background: rgba(139, 94, 150, 0.4); }
.crom-marker.land::after { background: rgba(153, 118, 86, 0.4); }
.crom-marker.outreach { border-color: var(--gorse); }
.crom-marker.outreach::after { background: rgba(242, 200, 75, 0.45); }
.swatch .dot.outreach { border-color: var(--gorse); }
.crom-marker:hover, .crom-marker.is-active { transform: scale(1.4); z-index: 9999 !important; }
.crom-marker.is-dimmed { opacity: 0.25; }
.crom-marker.is-dimmed::after { animation: none; opacity: 0; }
@keyframes pulse-marker { 0% { transform: scale(0.6); opacity: 0.85; } 100% { transform: scale(1.8); opacity: 0; } }
.leaflet-tooltip.crom-tooltip {
  background: var(--cream); color: var(--peat); font-family: var(--font-body);
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; border: 0; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.5);
}
.leaflet-tooltip.crom-tooltip::before { display: none; }
.leaflet-popup.crom-popup .leaflet-popup-content-wrapper {
  border-radius: var(--r-md); padding: 0; overflow: hidden; background: var(--cream);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45);
}
.leaflet-popup.crom-popup .leaflet-popup-content { margin: 0; width: 280px !important; font-family: var(--font-body); }
.leaflet-popup.crom-popup .leaflet-popup-tip { background: var(--cream); }
.leaflet-popup.crom-popup .leaflet-popup-close-button {
  width: 28px; height: 28px; top: 12px; right: 12px;
  background: rgba(20, 30, 35, 0.55) !important; color: var(--cream) !important;
  border-radius: 50% !important; display: grid; place-items: center;
  font-size: 18px !important; line-height: 1 !important; padding: 0 !important; font-weight: 400 !important; z-index: 2;
}
.leaflet-popup.crom-popup .leaflet-popup-close-button:hover { background: var(--peat) !important; }
.popup-card { display: flex; flex-direction: column; }
.popup-card .thumb { position: relative; aspect-ratio: 16 / 10; background: var(--firth-soft) center/cover no-repeat; }
.popup-card .thumb .tag {
  position: absolute; top: 12px; left: 12px; background: var(--cream); color: var(--peat);
  font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
}
.popup-card .thumb .tag.heather { background: var(--heather); color: var(--cream); }
.popup-card .thumb .tag.river { background: var(--river); color: var(--peat); }
.popup-card .thumb .tag.land { background: var(--sandstone); color: var(--cream); }
.popup-card .body { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.popup-card .body h4 {
  font-family: var(--font-title); font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: -0.015em; color: var(--peat); margin: 0;
}
.popup-card .body p { font-size: 13px; line-height: 1.55; color: var(--burn-bank); margin: 0; }
.popup-card .body .meta {
  font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--firth); margin-top: 2px;
}
.popup-card .body .link {
  display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--peat); padding-top: 12px; margin-top: 4px; border-top: 1px solid rgba(76, 65, 55, 0.12); width: fit-content; transition: color 200ms ease;
}
.popup-card .body .link .arrow {
  position: relative; width: 24px; height: 24px; border-radius: 50%; background: var(--firth); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; transition: background 200ms ease, transform 200ms ease; flex-shrink: 0;
}
.popup-card .body .link:hover { color: var(--firth); }
.popup-card .body .link:hover .arrow { background: var(--firth-deep); transform: translateX(3px) rotate(-12deg); }

/* Map side panel rows (shared with homepage teaser + full map rail) */
.map-row {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center;
  background: rgba(246, 240, 228, 0.06); border: 1px solid rgba(246, 240, 228, 0.1); border-radius: var(--r-md);
  padding: 12px; width: 100%; text-align: left; transition: background 200ms ease, transform 200ms ease; color: var(--cream);
}
.map-row:hover, .map-row.is-active { background: rgba(246, 240, 228, 0.14); transform: translateX(2px); }
.map-row .thumb { width: 56px; height: 56px; border-radius: var(--r-sm); background: var(--firth-soft) center/cover no-repeat; }
.map-row h4 { font-family: var(--font-title); font-weight: 600; font-size: 15px; margin: 0 0 2px; letter-spacing: -0.01em; color: var(--cream); }
.map-row .meta { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(246, 240, 228, 0.65); }
.map-row .chev { color: var(--gorse); font-size: 18px; line-height: 1; }
.swatch {
  display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0;
  color: rgba(246, 240, 228, 0.85); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 8px; margin: 0 -8px; border-radius: 999px;
}
.swatch:hover { background: rgba(246, 240, 228, 0.08); color: var(--cream); }
.swatch[aria-pressed="false"] { opacity: 0.4; }
.swatch .dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--river); background: var(--cream); }
.swatch .dot.species { border-color: var(--heather); }
.swatch .dot.land { border-color: var(--sandstone); }

/* ---------- MANIFESTO / QUOTE FEATURE (cinematic full-bleed) ----------
   The .manifesto-photo sits as a direct child of .text-feature and becomes the
   full-bleed background. The quote is overlaid in a readable column on top. */
.text-feature {
  position: relative; overflow: hidden;
  background: var(--firth-deep); color: var(--cream);
  padding: clamp(104px, 15vw, 220px) 0;
}
.text-feature > .manifesto-photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  border-radius: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  filter: saturate(1.06);
}
.text-feature::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(96deg, rgba(20, 30, 35, 0.86) 0%, rgba(20, 30, 35, 0.62) 44%, rgba(31, 70, 50, 0.22) 100%);
}
.text-feature .container { position: relative; z-index: 2; }
.manifesto-grid { display: block; max-width: 720px; }
.manifesto-side { display: flex; flex-direction: column; gap: 22px; }
.text-feature .label {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-title); font-weight: 700; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gorse); margin: 0;
}
.text-feature .label::before { content: ''; width: 32px; height: 1px; background: currentColor; opacity: 0.7; }
.manifesto-mark { font-family: var(--font-display); font-size: clamp(70px, 8vw, 120px); line-height: 0.6; color: var(--gorse); margin: 0; opacity: 0.45; user-select: none; }
.manifesto-quote {
  font-family: var(--font-title); font-weight: 700; font-size: clamp(30px, 3.8vw, 54px); line-height: 1.08; letter-spacing: -0.025em;
  color: var(--cream); margin: -14px 0 0; max-width: 20ch; text-shadow: 0 2px 26px rgba(0, 0, 0, 0.4);
}
.manifesto-quote em { font-style: normal; color: var(--gorse); }
.manifesto-attr { display: flex; flex-direction: column; gap: 4px; padding-top: 18px; border-top: 1px solid rgba(246, 240, 228, 0.28); }
.manifesto-attr .name { font-family: var(--font-title); font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--cream); }
.manifesto-attr .role { font-family: var(--font-title); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(246, 240, 228, 0.72); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; align-items: start; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid rgba(76, 65, 55, 0.16); padding: 0; }
.faq-item:last-child { border-bottom: 1px solid rgba(76, 65, 55, 0.16); }
.faq-item summary {
  list-style: none; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px;
  padding: 24px 8px 24px 0; font-weight: 600; font-size: 15px; color: var(--peat); transition: color 200ms ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; width: 36px; height: 36px; border-radius: 50%; background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C4137' stroke-width='2' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
  background-position: center center; background-repeat: no-repeat; background-size: 14px 14px;
  border: 1px solid rgba(76, 65, 55, 0.3); flex-shrink: 0; transform-origin: center center;
  transition: background-color 300ms ease, border-color 300ms ease, transform 320ms cubic-bezier(.4, 0, .2, 1), background-image 200ms ease;
}
.faq-item[open] summary { color: var(--firth-deep); }
.faq-item[open] summary::after {
  background-color: var(--firth); border-color: var(--firth);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6F0E4' stroke-width='2' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
  transform: rotate(45deg);
}
.faq-item summary:hover::after {
  background-color: var(--peat); border-color: var(--peat);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6F0E4' stroke-width='2' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
}
.faq-item .answer { padding: 0 8px 24px 0; font-size: 14px; line-height: 1.65; color: var(--burn-bank); max-width: 70ch; }

/* ---------- CTA BANNER ---------- */
.cta-section { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(72px, 9vw, 128px); }
.cta-banner {
  position: relative; background: var(--firth-soft); color: var(--cream); border-radius: var(--r-xl);
  overflow: hidden; min-height: clamp(400px, 46vw, 520px); display: flex; align-items: center;
  padding: clamp(24px, 4vw, 56px);
  box-shadow: 0 40px 80px -40px rgba(31, 70, 50, 0.45);
}
/* Photo-forward: the landscape dominates under a light vignette only; legibility
   comes from the contained dark text panel (.cta-inner), not a heavy wash.
   Path is relative to THIS stylesheet (assets/site.css), so stock/… == assets/stock/…. */
.cta-banner::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 30, 35, 0.30) 0%, rgba(20, 30, 35, 0.10) 40%, rgba(20, 30, 35, 0) 68%),
    var(--cta-photo, url('stock/AdobeStock_525932142.jpeg')) center/cover no-repeat;
  filter: saturate(1.08);
}
.cta-banner .cta-inner {
  position: relative; z-index: 2;
  background: rgba(40, 34, 28, 0.72);
  backdrop-filter: blur(7px);
  border: 1px solid rgba(246, 240, 228, 0.14);
  border-radius: var(--r-lg);
  padding: clamp(30px, 3.4vw, 46px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 540px;
  box-shadow: 0 30px 60px -30px rgba(20, 30, 35, 0.5);
}
.cta-banner h2 {
  font-family: var(--font-title); font-weight: 700; font-size: clamp(34px, 3.9vw, 56px); line-height: 1.06; margin: 0;
  letter-spacing: -0.025em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
}
.cta-banner p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(246, 240, 228, 0.9); max-width: 46ch; }
.cta-banner .cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- NEWSLETTER BAND ---------- */
.news-band { background: transparent; color: var(--cream); }
.news-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center;
  background: linear-gradient(135deg, var(--firth) 0%, var(--firth-deep) 100%);
  border-radius: var(--r-xl);
  padding: clamp(40px, 5vw, 72px);
  box-shadow: 0 40px 80px -40px rgba(31, 70, 50, 0.5);
}
.news-grid h2 {
  font-family: var(--font-title); font-weight: 700; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 14px; color: var(--cream);
}
.news-grid p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(246, 240, 228, 0.9); max-width: 44ch; }
.news-form {
  display: flex; align-items: center; gap: 8px;
  background: var(--cream);
  border-radius: 999px;
  padding: 7px;
  width: 100%;
  align-self: center;
  box-shadow: 0 24px 48px -28px rgba(20, 30, 35, 0.55);
}
.news-form input {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-body); font-size: 15px; color: var(--peat);
  background: transparent; border: 0; border-radius: 999px; padding: 13px 20px;
}
.news-form input::placeholder { color: rgba(76, 65, 55, 0.45); }
.news-form input:focus { outline: none; }
.news-form .btn { align-self: center; flex: 0 0 auto; }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--cream); border-top: 1px solid rgba(76, 65, 55, 0.1); padding: 56px 0 24px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; margin-bottom: 56px; }
.footer-top h3 {
  font-family: var(--font-title); font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; margin: 0;
  letter-spacing: -0.02em; color: var(--peat); max-width: 18ch;
}
.footer-addr { font-size: 13px; line-height: 1.7; color: var(--burn-bank); }
.footer-addr strong { color: var(--peat); font-weight: 700; }
.footer-connect { display: flex; flex-wrap: wrap; gap: 56px; padding-bottom: 40px; margin-bottom: 8px; }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col-label { font-family: var(--font-title); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--burn-bank); margin-bottom: 4px; }
.footer-col a { font-size: 13px; color: var(--peat); transition: color 180ms ease; }
.footer-col a:hover { color: var(--firth); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; padding-top: 24px;
  border-top: 1px solid rgba(76, 65, 55, 0.1); flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--burn-bank);
}
.footer-bottom nav { display: flex; gap: 24px; }
.footer-bottom nav a:hover { color: var(--firth); }

/* ---------- UTILITIES ---------- */
.u-center { text-align: center; }
.u-mt-s { margin-top: 16px; }
.u-mt-m { margin-top: 32px; }
.u-mt-l { margin-top: 56px; }
.lead-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .full-map { grid-template-columns: 1fr; height: auto; }
  .full-map .map-canvas { min-height: 520px; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .card-grid.cols-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .nav { grid-template-columns: auto 1fr auto; gap: 16px; }
  .nav-links { display: none; }
  .nav-cta { justify-content: flex-end; gap: 12px; }
  .nav-cta .account-pill { padding: 10px 16px; font-size: 11px; }
  .nav-toggle { display: inline-flex; }
  .brand-logo { height: 64px; }
  .page-header .ph-grid { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .section-head { grid-template-columns: 1fr; gap: 24px; }
  .section-head .cta-slot { justify-content: flex-start; }
  .split, .split.reverse { grid-template-columns: 1fr; gap: 32px; }
  .split.reverse > .split-media { order: 0; }
  .split-media { aspect-ratio: 16 / 10; }
  .feature-grid, .feature-grid.cols-2, .feature-grid.cols-4 { grid-template-columns: 1fr 1fr; }
  .card-grid, .card-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .tier-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .involve-grid { grid-template-columns: 1fr; gap: 16px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .manifesto-grid { grid-template-columns: 1fr; gap: 32px; }
  .manifesto-photo { aspect-ratio: 16 / 10; }
  .faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .news-grid { grid-template-columns: 1fr; gap: 28px; }
  .audio-card { grid-template-columns: 1fr; }
  .audio-card .cover { min-height: 220px; aspect-ratio: 16 / 10; }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .stat-cell { padding: 16px; }
  .stat-cell:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat-cell:nth-child(3), .stat-cell:nth-child(4) { padding-top: 24px; border-top: 1px solid rgba(76, 65, 55, 0.15); }
  .proj-card { grid-template-columns: 1fr; }
  .proj-card .photo { min-height: 200px; aspect-ratio: 16 / 10; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer-bottom nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; width: 100%; }
  .cta-banner .cta-inner { padding: 40px 28px; }
}
@media (max-width: 600px) {
  .feature-grid, .feature-grid.cols-2, .feature-grid.cols-4, .card-grid, .card-grid.cols-2, .card-grid.cols-4, .team-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery .shot.feature { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 10; }
}

/* ============================================================
   Client-feedback additions (June 2026)
   Header social icons, omnipresent social dock, team read-more,
   injected globally via site.js initChrome / initTeamBios.
   ============================================================ */

/* Footer social icons (in the "Follow" column) */
.footer-social { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; color: var(--peat);
  background: rgba(76, 65, 55, 0.06);
  transition: background 160ms ease, color 160ms ease;
}
.footer-social a:hover { background: rgba(77, 127, 89, 0.14); color: var(--firth); }

/* Omnipresent floating social dock (bottom-right, fades in on scroll) */
.social-dock {
  position: fixed; right: 16px; bottom: 16px; z-index: 1200;
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
}
.social-dock.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.social-dock a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--firth); color: var(--cream);
  box-shadow: 0 6px 16px rgba(44, 40, 33, 0.24);
  transition: transform 160ms ease, background 160ms ease;
}
.social-dock a:hover { transform: translateY(-2px); background: var(--firth-deep, var(--peat)); }
@media (max-width: 600px) { .social-dock a { width: 38px; height: 38px; } }

/* Team bio "Read more" */
.team-card.has-clamp p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.team-card.has-clamp.is-open p { -webkit-line-clamp: unset; display: block; overflow: visible; }
.bio-toggle {
  margin-top: 8px; background: none; border: 0; padding: 0; font: inherit;
  font-size: 13px; font-weight: 600; color: var(--firth); cursor: pointer; letter-spacing: 0.02em;
}
.bio-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   HERO (block: blockHero) — ported from homepage mockup so the
   CMS-driven hero block has production styles in the shared sheet.
   ============================================================ */
.hero { padding: 0; background: var(--cream); }
.hero-wrap { position: relative; width: 100%; }
.hero-photo {
  position: relative;
  height: clamp(620px, 92vh, 1040px);
  overflow: hidden;
  background: var(--firth-soft);
}
.hero-photo .bg {
  position: absolute; inset: -4%;
  background: var(--firth-soft) center/cover no-repeat;
  animation: kenburns 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  0%   { transform: scale(1.02) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1.5%, -1%); }
}
@media (prefers-reduced-motion: reduce) { .hero-photo .bg { animation: none; } }
.hero-photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(50deg, rgba(20,30,35,0.78) 0%, rgba(20,30,35,0.5) 25%, rgba(20,30,35,0.18) 50%, rgba(20,30,35,0) 75%),
    linear-gradient(180deg, rgba(20,30,35,0.3) 0%, rgba(20,30,35,0) 25%);
}
.hero-photo video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hero-content {
  position: absolute; top: 140px; bottom: 56px; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--container); padding: 0 var(--pad-x);
  color: var(--cream); z-index: 2;
  display: flex; flex-direction: column; gap: 20px;
  align-items: flex-start; justify-content: flex-end;
}
.hero-meta {
  font-family: var(--font-title); font-size: clamp(12px, 0.9vw, 13px); font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: rgba(246,240,228,0.9);
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: auto;
}
.hero-meta .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gorse); }
.hero-content h1 {
  font-family: var(--font-display);
  font-size: clamp(84px, 13vw, 220px);
  line-height: 0.86; letter-spacing: 0.005em; margin: 0;
  text-shadow: 0 6px 40px rgba(0,0,0,0.4); max-width: 14ch;
}
.hero-sub {
  font-family: var(--font-title); font-size: clamp(18px, 1.5vw, 22px); font-weight: 400;
  line-height: 1.5; margin: 4px 0 12px; color: rgba(246,240,228,0.9);
  max-width: 38ch; text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}
.hero-sub a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.hero-actions { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-intro-card {
  position: absolute; bottom: 40px; right: 40px; max-width: 320px;
  background: rgba(247,236,221,0.98); backdrop-filter: blur(8px);
  border-radius: var(--r-md); padding: 22px 24px; color: var(--peat);
  font-size: 13px; line-height: 1.55; z-index: 2;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.4);
}
.hero-intro-card .label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-title); font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--firth); margin-bottom: 10px;
}
.hero-intro-card .label .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--firth); }
.hero-intro-card p { margin: 0; color: var(--peat); }
@media (max-width: 960px) {
  .hero-content { top: 128px; left: 20px; right: 20px; bottom: 32px; max-width: none; padding: 0; transform: none; width: auto; }
  .hero-content h1 { font-size: clamp(64px, 19vw, 112px); max-width: none; }
  .hero-content .hero-sub { font-size: 17px; max-width: none; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { padding: 12px 18px; font-size: 12px; }
  .hero-intro-card { display: none; }
}

/* ---- Cookie consent banner ---- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300; background: var(--peat); color: var(--cream); box-shadow: 0 -6px 24px rgba(0,0,0,0.22); }
.cookie-banner[hidden] { display: none; }
.cookie-inner { max-width: 1120px; margin: 0 auto; padding: 16px 20px; display: flex; gap: 16px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cookie-copy { margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 1.5; max-width: 72ch; }
.cookie-copy a { color: var(--firth-soft); text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex: none; }
.btn-cookie { font-family: var(--font-body); font-weight: 600; font-size: 14px; padding: 9px 20px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; }
.btn-cookie-accept { background: var(--firth); color: var(--cream); }
.btn-cookie-accept:hover { background: var(--firth-deep); }
.btn-cookie-reject { background: transparent; color: var(--cream); border-color: rgba(247,236,221,0.5); }
.btn-cookie-reject:hover { border-color: var(--cream); }
.cookie-reopen { cursor: pointer; }
@media (max-width: 640px) {
  .cookie-inner { flex-direction: column; align-items: flex-start; }
  .cookie-actions { width: 100%; }
  .btn-cookie { flex: 1; }
}

/* ---- Audit fixes (placeholder/responsive sweep) ---- */
/* Audio card with no cover image: collapse to a single column so there's no empty colour panel */
.audio-card.no-cover { grid-template-columns: 1fr; }
/* Rich-text safety: wide tables, code blocks and embeds must scroll/clamp, never push the page sideways on narrow screens */
/* Tighten the first content section right after a page-header band (was a ~200px gap). */
.page-header + section { padding-top: clamp(24px, 3vw, 44px); }
/* Rich-text tables: readable, bordered, with a header row; scroll only if genuinely wide. */
.prose table { width: 100%; border-collapse: collapse; margin: 1.25em 0; font-size: 15px; line-height: 1.5; display: block; overflow-x: auto; }
.prose table thead th { text-align: left; background: var(--paper); border-bottom: 2px solid var(--firth-soft); padding: 11px 14px; font-family: var(--font-title); font-weight: 700; color: var(--peat); white-space: nowrap; }
.prose table td { padding: 11px 14px; border-bottom: 1px solid rgba(76, 65, 55, 0.14); vertical-align: top; color: var(--burn-bank); }
.prose table tbody tr:last-child td { border-bottom: none; }
.prose table code { background: rgba(76, 65, 55, 0.08); padding: 1px 5px; border-radius: 4px; font-size: 0.92em; }
.prose pre { overflow-x: auto; white-space: pre; }
.prose iframe { max-width: 100%; }

/* Home page lower-section graphics (Sep 2026) */
/* 100-year vision split layout (photo + icon list), as in the approved prototype. */
.vision-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.vision-photo {
  aspect-ratio: 5 / 6; border-radius: var(--r-lg); overflow: hidden;
  background: var(--firth-soft) url('/images/home/vision-photo.webp') center/cover no-repeat;
}
.vision-section .section-head.vision-head { grid-template-columns: 1fr; margin-bottom: 32px; }
.vision-item .vicon img { width: 22px; height: 22px; object-fit: contain; }
.vision-cta { margin-top: 32px; }
@media (max-width: 960px) {
  .vision-grid { grid-template-columns: 1fr; gap: 40px; }
  .vision-photo { aspect-ratio: 4 / 3; }
}
/* CTA banner fallback photo: the original fallback path (css/stock/...) only existed in
   the static mockup and 404s in the app. Used when a CTA block has no background image. */
.cta-banner::before {
  background:
    linear-gradient(90deg, rgba(20, 30, 35, 0.30) 0%, rgba(20, 30, 35, 0.10) 40%, rgba(20, 30, 35, 0) 68%),
    var(--cta-photo, url('/images/home/cta-photo.webp')) center/cover no-repeat;
}

/* Hero background video (Sep 2026) */
/* Video sits over the still image (.bg) and fades in only once frames are actually playing, so there is never a black flash. */
.hero-photo .hero-video { opacity: 0; transition: opacity 900ms ease; background: transparent; }
.hero-photo .hero-video.is-playing { opacity: 1; }
@media (max-width: 639px), (prefers-reduced-motion: reduce) { .hero-photo .hero-video { display: none; } }

/* 7-item nav fit (Sep 2026) */
/* Adding "Tools in the Shed" takes the desktop nav to 7 links (~680px at 28px gaps).
   Logo (~238px) + links + Support pill (~188px) + grid gaps needs ~1170px, so between
   961px and ~1180px the grid squashed the logo. Keep the logo's aspect ratio, tighten
   link spacing on mid widths, and hand over to the burger sheet a little earlier. */
.brand-logo { max-width: none; }
@media (max-width: 1199px) {
  .nav-links { gap: 20px; }
}
@media (max-width: 1160px) {
  .nav { gap: 16px; }
  .nav-links { display: none; }
  .nav-cta { justify-content: flex-end; gap: 12px; }
  .nav-cta .account-pill { padding: 10px 16px; font-size: 11px; }
  .nav-toggle { display: inline-flex; }
  .brand-logo { height: 64px; }
}
.hero-photo:has(.hero-video.is-playing) .bg { animation: none; }

/* Map boundary + songs layer (Sep 2026) */
.crom-song-icon { background: transparent; border: 0; display: grid !important; place-items: center; }
.crom-song-marker {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: #37B1E4; color: #fff; border: 2px solid #fff;
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.45);
  cursor: pointer; transition: transform 200ms cubic-bezier(.2,.7,.2,1);
  touch-action: manipulation;
}
.crom-song-marker svg { display: block; }
.crom-song-marker:hover, .crom-song-marker:focus-visible { transform: scale(1.25); outline: none; box-shadow: 0 0 0 3px rgba(55, 177, 228, 0.45), 0 4px 10px -2px rgba(0, 0, 0, 0.45); }
.swatch .dot.song { border-color: #37B1E4; background: #37B1E4; }
.swatch .dot.boundary { border-radius: 2px; border-color: #4D7F59; background: rgba(77, 127, 89, 0.25); }
.leaflet-popup.crom-song-popup .song-card .body { padding: 18px 20px 16px; }
.leaflet-popup.crom-song-popup .song-card h4 { padding-right: 32px; }
.leaflet-popup.crom-song-popup .song-card p { max-height: 9.5em; overflow-y: auto; }
.song-card .song-kicker {
  display: inline-flex; align-items: center; gap: 6px; padding-right: 32px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #17698C;
}
.song-card .song-embed { display: block; width: 100%; height: 42px; border: 0; border-radius: 6px; background: #fff; }
.song-card .song-audio { display: block; width: 100%; height: 40px; }
/* Song routes: dashed blue line (drawn by Leaflet) + a white pin with a dashed blue ring at the midpoint */
.crom-song-marker.is-route { background: #fff; color: #17698C; border: 2px dashed #37B1E4; }
.leaflet-interactive.crom-song-route-hit { cursor: pointer; }
@media (max-width: 640px) {
  .leaflet-popup.crom-song-popup .leaflet-popup-content { width: min(280px, calc(100vw - 72px)) !important; }
  .crom-song-marker { width: 28px; height: 28px; }
}

/* Team full bios revealed by "Read more" (Sep 2026) */
.team-card .bio-full p { margin: 0 0 0.7em; }
.team-card .bio-full p:last-child { margin-bottom: 0; }

/* ---------- OCT 2026 CLIENT TWEAKS ---------- */
/* Meet the Team: Our Trustees sits closer under Our Staff. */
.team-group + .team-group { padding-top: 0; }
/* Video embeds (YouTube / Vimeo) in rich text scale to the column at 16:9. */
.prose iframe[src*="youtube"], .prose iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-md); }
/* Crom Crumbs intro with a photo on the right. */
.intro-split .split-media { aspect-ratio: 4 / 3; }
@media (max-width: 960px) { .intro-split .split-media { aspect-ratio: 16 / 10; } }
/* Meet the Team: "Our Staff" sits straight under the page header (no double gap). */
.page-header + .team-group { padding-top: 0; }

/* Home hero (Oct 2026): on shorter screens the bottom-anchored headline grew up under the
   fixed header. Photo and content now share one grid cell, so the content is in normal flow
   below the header and the hero grows if the copy needs more room. The headline size also
   scales with screen height. */
.hero-wrap { display: grid; }
.hero-photo { grid-area: 1 / 1; height: auto; min-height: clamp(620px, 92vh, 1040px); }
.hero-content {
  grid-area: 1 / 1; position: relative; top: auto; bottom: auto; left: auto; right: auto; transform: none;
  margin: 0 auto; padding-top: 168px; padding-bottom: 56px;
}
.hero-content h1 { font-size: clamp(84px, min(13vw, 19vh), 220px); }
@media (max-width: 960px) {
  .hero-content { width: auto; max-width: none; margin: 0; padding: 136px 20px 32px; }
  .hero-content h1 { font-size: clamp(64px, 19vw, 112px); }
}
/* Map overlay point popups (e.g. eDNA sample sites). */
.crom-overlay-pop { padding: 4px 2px; font-size: 13px; line-height: 1.5; color: var(--peat); }
.crom-overlay-pop p { margin: 6px 0 0; }
/* Map Point pop-ups (eDNA sample sites etc.). */
.crom-overlay-pop strong { display: block; font-size: 14px; }
.crom-point-type { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 4px; }
.crom-point-date { color: var(--burn-bank); font-size: 12px; }
.crom-point-img { display: block; width: 100%; height: 120px; object-fit: cover; border-radius: 6px; margin-bottom: 10px; }
/* Map Point legend dot (solid, colour set inline) and keeping "eDNA" lowercase in uppercase labels. */
.swatch .dot.point { width: 9px; height: 9px; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); }
.nocase { text-transform: none; }
/* Point / overlay pop-ups: the shared pop-up shell has no padding, so give the content its own,
   with room on the right of the heading for the close button. */
.leaflet-popup.crom-popup .crom-overlay-pop { padding: 20px 22px 20px; font-size: 14px; line-height: 1.55; }
.crom-overlay-pop .crom-point-type, .crom-overlay-pop strong { padding-right: 36px; }
.crom-overlay-pop .crom-point-type { margin-bottom: 6px; }
.crom-overlay-pop strong { font-size: 17px; line-height: 1.3; color: var(--peat); }
.crom-overlay-pop p { margin: 10px 0 0; }
.crom-overlay-pop .crom-point-date { margin-top: 4px; }
.crom-overlay-pop .crom-point-img { width: calc(100% + 44px); margin: -20px -22px 16px; height: 140px; border-radius: 0; }