/* ==========================================================================
   William S. Massey Foundation
   Shared stylesheet — converted from the Canva design export
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand colour — sampled directly from the Canva export */
  --green: #11472d;
  --green-dark: #0c3320;
  --green-mid: #1c5a3a;
  --green-tint: #e8efe9;

  /* --gold is the exact accent from the Canva file. It measures 2.5–2.8:1 on
     the light backgrounds, so it is used for decoration only — rules, button
     fills, borders and icons. Gold *text* on light uses --gold-text, a deeper
     tone of the same hue that clears WCAG AA. */
  --gold: #c69131;
  --gold-text: #8f651b;
  --gold-light: #d9b25c;
  --gold-pale: #f1e4c9;

  --cream: #f6f3ee;
  --cream-2: #faf8f4;
  --white: #ffffff;

  --ink: #1f2a24;
  --body-text: #3c4a42;
  --muted: #5c6862;
  --line: #e2dcd2;
  --line-gold: rgba(198, 145, 49, 0.45);

  /* Type */
  --display: "EB Garamond", Georgia, "Times New Roman", serif;
  --serif-alt: "Libre Baskerville", Georgia, serif;
  --script: "Great Vibes", cursive;
  --sans: "Mulish", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Layout */
  --max: 1180px;
  --max-wide: 1360px;
  --gutter: 24px;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 18px 40px rgba(12, 51, 32, 0.10);
  --shadow-sm: 0 6px 18px rgba(12, 51, 32, 0.08);
  --header-h: 78px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--body-text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--green); text-decoration-color: var(--line-gold); text-underline-offset: 3px; }
a:hover { color: var(--gold); }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--green);
  line-height: 1.12;
  margin: 0 0 0.5em;
  font-weight: 600;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul { margin: 0; padding: 0; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--green-dark);
  padding: 12px 20px;
  font-family: var(--sans);
  font-weight: 800;
  z-index: 2000;
}
.skip-link:focus { left: 8px; top: 8px; }

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

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--max));
  margin-inline: auto;
}
.wrap--wide { width: min(100% - (var(--gutter) * 2), var(--max-wide)); }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), 860px); }

.section { padding: 88px 0; }
.section--tight { padding: 60px 0; }
.section--cream { background: var(--cream); }
.section--white { background: var(--white); }

.section--green {
  background: linear-gradient(150deg, var(--green) 0%, var(--green-dark) 100%);
  color: rgba(255, 255, 255, 0.9);
}
.section--green h2,
.section--green h3,
.section--green h4 { color: var(--white); }
.section--green .eyebrow { color: var(--gold-light); }
.section--green .lede { color: rgba(255, 255, 255, 0.86); }

.centered { text-align: center; }
.centered .rule { margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. Type patterns
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--serif-alt);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}

.rule {
  width: 68px;
  height: 3px;
  background: var(--gold);
  border: 0;
  margin: 0 0 24px;
}
.rule--center { margin-inline: auto; }

.section-title {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  letter-spacing: 0.01em;
}
.section-title--spaced { letter-spacing: 0.04em; }

.subtitle {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  color: var(--gold);
  margin: 0 0 20px;
}

.lede {
  font-size: 1.1rem;
  color: var(--body-text);
  max-width: 62ch;
}
.centered .lede { margin-inline: auto; }

.script-name {
  font-family: var(--script);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  color: var(--green);
  line-height: 1.1;
  font-weight: 400;
  margin: 0 0 18px;
}

.small-caps {
  font-family: var(--serif-alt);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
}

.pull-quote {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 2.05rem);
  line-height: 1.4;
  color: var(--white);
  text-align: center;
  margin: 0;
  max-width: 24ch;
  margin-inline: auto;
}
.pull-quote--wide { max-width: 34ch; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 30px;
  font-family: var(--serif-alt);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--gold { background: var(--gold); color: var(--green-dark); }
.btn--gold:hover { background: var(--gold-light); color: var(--green-dark); }

.btn--green { background: var(--green); color: var(--white); }
.btn--green:hover { background: var(--green-mid); color: var(--white); }

.btn--outline { border-color: var(--green); color: var(--green); background: transparent; }
.btn--outline:hover { background: var(--green); color: var(--white); }

.btn--outline-light { border-color: rgba(255, 255, 255, 0.7); color: var(--white); background: transparent; }
.btn--outline-light:hover { background: var(--white); color: var(--green); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 30px;
}
.centered .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   6. Site header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--green);
  border-bottom: 3px solid var(--gold);
}

.nav-bar {
  width: min(100% - 32px, var(--max-wide));
  margin-inline: auto;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.brand img { width: 84px; height: auto; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 48px;
  height: 48px;
  padding: 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--white);
  margin: 5px 0;
  transition: transform 0.25s ease, opacity 0.2s 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-list {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 26px);
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
}

.nav-list a {
  display: inline-block;
  padding: 8px 2px;
  font-family: var(--display);
  font-size: 1.02rem;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav-list a:hover { color: var(--gold-light); border-bottom-color: var(--gold-light); }
.nav-list a[aria-current="page"] {
  color: var(--white);
  font-weight: 600;
  border-bottom-color: var(--gold);
}

.nav-donate {
  display: inline-flex;
  align-items: center;
  padding: 11px 26px;
  background: var(--white);
  color: var(--green) !important;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  border-bottom: 0 !important;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.nav-donate:hover { background: var(--gold); color: var(--green-dark) !important; transform: translateY(-1px); }

/* ---- Dropdowns ---------------------------------------------------------- */
.has-dropdown { position: relative; }

/* invisible bridge so the pointer can cross the gap to the panel */
.has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 2px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--display);
  font-size: 1.02rem;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.dropdown-toggle:hover,
.has-dropdown:hover .dropdown-toggle {
  color: var(--gold-light);
  border-bottom-color: var(--gold-light);
}
.dropdown-toggle[data-section="current"] {
  color: var(--white);
  font-weight: 600;
  border-bottom-color: var(--gold);
}
.dropdown-toggle .chev {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.dropdown-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  min-width: 258px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 44px rgba(12, 51, 32, 0.26);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 950;
}
.has-dropdown:hover > .dropdown-menu,
.has-dropdown:focus-within > .dropdown-menu,
.dropdown-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-menu a {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  border-bottom: 0;
  font-family: var(--display);
  font-size: 1.02rem;
  color: var(--green);
  white-space: normal;
}
.dropdown-menu a:hover {
  background: var(--cream);
  color: var(--green);
  border-bottom: 0;
}
.dropdown-menu a[aria-current="page"] {
  /* .nav-list a[aria-current] sets white for the dark bar and matches with
     equal specificity, so the colour must be restated here or the current
     item renders white-on-cream and disappears. */
  background: var(--cream);
  color: var(--green);
  font-weight: 600;
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   7. Heroes — photo as the div background, text overlaid

   The photography from the Canva file carries its own left-to-right fade in
   the pixels (sampled: #f6f5f1, #f6f1ed, #f3efeb at the left edge). So the
   photo is a background on the section, bled to the right edge, and the page
   colour is set to that same fade value — the photo dissolves into the page
   with no visible seam and no card, border or shadow around it.

   --hero-img   the photograph
   --hero-fade  the colour its left edge fades to (also the section background)
   --hero-rgb   the same colour as raw channels, for gradient stops
   -------------------------------------------------------------------------- */
.hero,
.page-hero,
.campaign-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--hero-fade, #ffffff);
  background-image: var(--hero-img, none);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}

/* Veil that carries the fade across the text column. Sits above the photo,
   below the copy. Photos that already fade need only a light veil; those that
   do not get a wider one via .hero--soft. */
.hero::before,
.page-hero::before,
.campaign-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(96deg,
    var(--hero-fade, #f8f7f3) 0%,
    var(--hero-fade, #f8f7f3) 24%,
    rgba(var(--hero-rgb, 248, 247, 243), 0.55) 44%,
    rgba(var(--hero-rgb, 248, 247, 243), 0) 63%);
}

.hero--soft::before,
.page-hero--soft::before,
.campaign-hero::before {
  background: linear-gradient(96deg,
    var(--hero-fade, #f8f7f3) 0%,
    var(--hero-fade, #f8f7f3) 33%,
    rgba(var(--hero-rgb, 248, 247, 243), 0.86) 46%,
    rgba(var(--hero-rgb, 248, 247, 243), 0.30) 62%,
    rgba(var(--hero-rgb, 248, 247, 243), 0) 76%);
}

.hero > .wrap,
.page-hero > .wrap,
.campaign-hero > .wrap { position: relative; z-index: 3; }

/* Per-page photography. Fade values measured from each file. */
.hero--home     { --hero-img: url("../images/hero-friends-bench.jpg");  --hero-fade: #f6f5f1; --hero-rgb: 246, 245, 241; }
.page-hero--about  { --hero-img: url("../images/story-coffee-table.jpg"); --hero-fade: #faf8f4; --hero-rgb: 250, 248, 244; }
.page-hero--board  { --hero-img: url("../images/boardroom.jpg");         --hero-fade: #f6f1ed; --hero-rgb: 246, 241, 237; }
.page-hero--impact { --hero-img: url("../images/couple-sunset.jpg");     --hero-fade: #f3efeb; --hero-rgb: 243, 239, 235; }
.campaign-hero     { --hero-img: url("../images/paa-van-road.jpg");      --hero-fade: #f8f7f3; --hero-rgb: 248, 247, 243; }

/* Copy column — holds roughly the left half so the photo reads clearly */
.hero-inner,
.page-hero-inner {
  display: flex;
  align-items: center;
  min-height: min(78vh, 660px);
  padding: 62px 0 78px;
}
.page-hero-inner { min-height: min(58vh, 520px); padding: 72px 0; }

.hero-copy { max-width: min(54%, 600px); }
.page-hero-copy { max-width: min(52%, 580px); }

.hero-title {
  font-size: clamp(2.4rem, 5.4vw, 4.3rem);
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 26px;
  text-align: center;
}

.hero-logo { margin: 0 0 26px; }

.hero-tagline {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.95rem);
  color: var(--gold-text);
  line-height: 1.3;
  margin: 0 0 22px;
  max-width: 26ch;
}

.hero-pillars {
  font-family: var(--serif-alt);
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  line-height: 1.75;
  margin: 0;
  list-style: none;
  text-transform: uppercase;
}

/* The green-and-gold sweep, sitting over the photo at the bottom-right */
/* Placed in the Canva file at x 32.4%–100.5%, y 65.5%–115.9% of the page:
   68% of the width, anchored bottom-right, with roughly a third of its height
   running off the bottom edge. .hero clips the overflow. */
.hero-curve {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 68%;
  transform: translateY(31.5%);
  pointer-events: none;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   8. Inner-page hero copy
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
}
.page-hero-title {
  font-size: clamp(2.3rem, 5vw, 3.9rem);
  color: var(--ink);
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}

.page-hero--green { background: linear-gradient(150deg, var(--green) 0%, var(--green-dark) 100%); }
.page-hero--green::before { display: none; }
.page-hero--green .page-hero-title { color: var(--white); }
.page-hero--green .lede { color: rgba(255, 255, 255, 0.88); }
.page-hero--green .subtitle { color: var(--gold-light); }

/* --------------------------------------------------------------------------
   9. Generic grids and cards
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 28px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--split { grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; }
.grid--split-media { grid-template-columns: 0.85fr 1.15fr; align-items: center; gap: 56px; }

.card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
}
.card--white { background: var(--white); box-shadow: var(--shadow-sm); }
.card h3 { font-size: 1.5rem; }

.media-frame {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.media-frame img { width: 100%; }

.media-plain img { width: 100%; }

/* Icon badge — the round green medallions used through the design */
.badge {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--green);
  color: var(--gold-light);
  flex-shrink: 0;
  margin: 0 0 18px;
}
.badge svg { width: 32px; height: 32px; }
.badge--gold { background: var(--gold); color: var(--white); }
.badge--slate { background: #8d938f; color: var(--white); }
.badge--sm { width: 52px; height: 52px; margin: 0; }
.badge--sm svg { width: 24px; height: 24px; }
.centered .badge { margin-inline: auto; }

/* Mission / vision */
.mission-card { text-align: center; box-shadow: var(--shadow);}
.mission-card .badge { margin-inline: auto; }
.mission-card h3 { font-size: 1.75rem; margin-bottom: 12px; }
.mission-card .rule { margin: 0 auto 20px; width: 54px; height: 2px; }

/* Core values row */
.values-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}
.values-head::before,
.values-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-gold);
}
.values-head h2 {
  font-family: var(--serif-alt);
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
  text-align: center;
}

.value { text-align: center; padding: 0 12px; }
.value h3 {
  font-family: var(--serif-alt);
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.value p { font-size: 0.97rem; color: var(--muted); }
.value .badge { background: transparent; color: var(--gold); width: 58px; height: 58px; margin: 0 auto 14px; }
.value .badge svg { width: 44px; height: 44px; }

/* Divided row — vertical gold rules between columns */
.divided { display: grid; gap: 0; }
.divided > * { padding: 0 34px; }
.divided > * + * { border-left: 1px solid var(--line-gold); }

/* Stat trio */
.stat { padding: 0 26px; }
.stat h3 {
  font-family: var(--serif-alt);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.stat p { font-size: 1.02rem; text-align: left; }

/* Programme list (Bill Massey) */
.programme-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 30px;
  list-style: none;
  margin: 22px 0 0;
}
.programme-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.05rem;
  color: var(--ink);
}

/* Board grid */
.board-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.member {
  text-align: center;
  padding: 30px 20px;
  border-right: 1px solid var(--line-gold);
  border-bottom: 1px solid var(--line-gold);
}
.member:nth-child(4n) { border-right: 0; }
.member:nth-last-child(-n + 4) { border-bottom: 0; }
.member h3 {
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 600;
  margin-bottom: 12px;
}
.member .role {
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--gold);
  margin: 0;
}
.member .org {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--gold);
  margin: 2px 0 0;
}

/* Split feature panel — image one side, green panel the other */
.feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.feature-split__media { min-height: 380px; }
.feature-split__media img { width: 100%; height: 100%; object-fit: cover; }
.feature-split__panel {
  background: linear-gradient(150deg, var(--green) 0%, var(--green-dark) 100%);
  color: rgba(255, 255, 255, 0.9);
  padding: clamp(36px, 5vw, 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.feature-split__panel h2 { color: var(--white); font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: 0.03em; }
.feature-split__panel .rule { background: var(--gold); }
.feature-split--reverse .feature-split__media { order: 2; }

/* Benefit row with inline icons */
.benefit {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 22px;
  text-align: left;
}
.benefit p {
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--green);
  margin: 0;
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   10. Pillars of Giving
   -------------------------------------------------------------------------- */
.pillars-head { position: relative; text-align: center; margin-bottom: 14px; }
.pillars-head .eyebrow { letter-spacing: 0.3em; }
.pillars-title {
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  color: var(--ink);
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}

.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5%; align-items: start; }

/* Measured off page 5 of the Canva file. Widths are a share of the column:

     capital / base moulding ... 90%
     circular photo ............ 70%   (a FULL circle, widest at its equator)
     shaft ..................... 68%
     button .................... 46%

   The circle is a complete circle whose lower quarter tucks behind the
   capital, and the label is text sitting on the capital's flat upper plate —
   not a separate band. The moulding artwork itself is: flat plate for its top
   45%, a gold pinstripe at 50%, fluting from 60–85%.                          */
.pillar {
  --pc: #13223d;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pillar--navy  { --pc: #13223d; }
.pillar--green { --pc: #1f3022; }
.pillar--slate { --pc: #505154; }

.pillar__crown {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin-bottom: -19%;          /* the capital overlaps the circle's foot */
}
.pillar__photo {
  width: 70%;
  aspect-ratio: 1;              /* full circle */
  object-fit: cover;
  object-position: center center;
  border: 3px solid var(--gold);
  border-radius: 50%;
  background: var(--cream);
}
.pillar__photo--contain { object-fit: contain; padding: 9%; background: var(--cream-2); }

.pillar__capital {
  position: relative;
  z-index: 2;
  width: 90%;
  margin-inline: auto;
}
.pillar__capital img { display: block; width: 100%; height: auto; }

/* centred on the flat plate, which occupies the artwork's top 45% */
.pillar__label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 67%;
  margin: 0;
  padding: 0 7%;
  display: grid;
  place-items: center;
  color: var(--white);
  text-align: center;
  font-family: var(--display);
  font-size: clamp(0.86rem, 1.32vw, 1.18rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
}

.pillar__base {
  display: block;
  width: 90%;
  height: auto;
  margin-inline: auto;
  transform: scaleY(-1);
}

.pillar__shaft {
  flex: 1;
  width: 68%;
  margin-inline: auto;
  padding: 26px 18px 30px;
  background: var(--cream-2);
  border-left: 3px solid var(--gold);
  border-right: 3px solid var(--gold);
  text-align: center;
  display: flex;
  flex-direction: column;
}
.pillar__shaft h3 {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.02rem, 1.45vw, 1.24rem);
  color: var(--green);
  margin-bottom: 12px;
}
.pillar__shaft > p { font-size: 0.94rem; }
.pillar__shaft .btn {
  margin-top: auto;
  align-self: center;
  width: 79%;                   /* = 46% of the column */
  min-width: 150px;
  padding: 13px 14px;
  font-size: 0.76rem;
  letter-spacing: 0.07em;
}

.btn--pillar { background: var(--pc); color: var(--white); }
.btn--pillar:hover { background: var(--pc); color: var(--gold-light); }

/* Header measured off page 5:
     "THE"      25.7pt CanvaSans, black, gold rule either side (8% of page)
     title      83.5pt EB Garamond Regular  = 8.15% of the page width
     subtitle   27.3pt EB Garamond Italic, gold
     intro      19.0pt, centred, 68.6% of the page wide
     green blocks x 0–6.6% and 93.2–100%, centred on the title            */
.pillars-head { position: relative; text-align: center; }

.pillars-head .eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 28px);
  font-family: var(--sans);
  font-size: clamp(0.95rem, 2.5vw, 2.3rem);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 4px;
}
.pillars-head .eyebrow::before,
.pillars-head .eyebrow::after {
  content: "";
  width: clamp(52px, 8vw, 118px);
  height: 2px;
  background: var(--gold);
  flex: none;
}

.pillars-title {
  position: relative;
  font-size: clamp(2.4rem, 8.15vw, 7.3rem);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.015em;
  line-height: 1.02;
  margin: 0 0 6px;
}
.pillars-title::before,
.pillars-title::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 6.6vw;
  height: clamp(24px, 3.1vw, 46px);
  background: var(--green);
}
.pillars-title::before { left: calc(50% - 50vw); }
.pillars-title::after { right: calc(50% - 50vw); }

.pillars-head .subtitle {
  font-size: clamp(1.15rem, 2.65vw, 2.3rem);
  margin: 0;
}

.pillars-intro {
  font-size: clamp(1.02rem, 1.85vw, 1.62rem);
  max-width: min(69vw, 1000px);
  margin-inline: auto;
  color: var(--body-text);
}

.pillars-ornament {
  display: block;
  width: clamp(64px, 7vw, 100px);
  height: auto;
  margin: clamp(14px, 1.8vw, 26px) auto clamp(18px, 2.4vw, 34px);
  color: var(--gold);
}

.goal-box {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 20px;
  margin: 6px 0 26px;
}
.goal-box .small-caps { display: block; margin-bottom: 6px; }
.goal-box strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 600;
  color: var(--green);
  line-height: 1;
}

.tier-list { list-style: none; margin: 4px 0 26px; text-align: left; }
.tier-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.tier-list li:last-child { border-bottom: 0; }
.tier-list .tier-name {
  font-family: var(--serif-alt);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--green);
  display: block;
}
.tier-list .tier-amount { font-size: 0.98rem; color: var(--muted); }

.check-list { list-style: none; margin: 4px 0 26px; text-align: left; }
.check-list li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 0;
  font-size: 1.03rem;
  color: var(--ink);
}
.check-list svg { width: 22px; height: 22px; color: var(--gold); flex-shrink: 0; }

/* Closing CTA panel with photo */
/* Closing panel measured off page 5: copy centred near the page centre
   (cx ~49%), photograph at x 70.6%–103.5% bleeding past the right edge. */
.legacy-cta {
  position: relative;
  overflow: hidden;
  background: url("../images/golden-light-panel.jpg") center / cover no-repeat;
}
/* No veil. The artwork is already near-white (#faf7f2) across the middle
   where the copy sits, and carries its golden light only in the left ~12%.
   A wash over it flattened the whole panel to plain cream, which is what the
   design does NOT do — the PDF shows #ebb54d / #f7d472 at x 5%. */

.legacy-cta__inner {
  position: relative;
  padding: clamp(46px, 6vw, 80px) 0;
}
.legacy-cta__copy {
  position: relative;
  z-index: 2;
  max-width: min(44vw, 640px);
  margin-inline: auto;
  text-align: center;
}
.legacy-cta__copy h2 {
  font-size: clamp(1.55rem, 2.6vw, 2.35rem);
  color: var(--ink);
  letter-spacing: 0.01em;
}
.legacy-cta__copy .lede {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  margin-inline: auto;
}
.legacy-cta__copy .rule { margin-inline: auto; }
.legacy-cta__copy .subtitle {
  font-size: clamp(1.1rem, 1.78vw, 1.6rem);
  margin-bottom: 0;
}
/* .legacy-cta__photo is gone — the photograph is a background layer now */

@media (max-width: 880px) {
  .legacy-cta__copy { max-width: none; padding-inline: clamp(20px, 5vw, 44px); }
  /* the copy now spans the full width, including the golden edge, so a light
     wash goes back in purely to keep the text legible */
  .legacy-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(250, 248, 244, 0.82);
  }
}

/* --------------------------------------------------------------------------
   11. Impact & statistics
   -------------------------------------------------------------------------- */
.pillar-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.pillar-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 28px;
  text-align: center;
}
.pillar-card .badge { margin: -60px auto 18px; box-shadow: 0 8px 20px rgba(12, 51, 32, 0.18); }
.pillar-card h3 { font-size: 1.45rem; margin-bottom: 10px; }
.pillar-card .rule { width: 52px; height: 2px; margin: 0 auto 16px; }
.pillar-card--navy .badge { background: #16355c; }
.pillar-card--slate .badge { background: #8d938f; }

.stat-cards-wrap { padding-top: 74px; }

.figure-stat { text-align: center; padding: 0 18px; }
.figure-stat h3 {
  font-family: var(--serif-alt);
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.figure-stat .divider { width: 46px; height: 1px; background: var(--line-gold); border: 0; margin: 0 auto 16px; }
.figure-stat .big {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 600;
  color: var(--green);
  line-height: 1.05;
  margin-bottom: 8px;
}
.figure-stat .big--gold { color: var(--gold); }
.figure-stat p { font-size: 1rem; }
.figure-stat .source {
  display: block;
  margin-top: 16px;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.45;
}

.alert-card {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 5px solid var(--green);
  border-radius: var(--radius);
  padding: 30px;
}
.alert-card h3 {
  font-family: var(--serif-alt);
  font-size: 1rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.alert-card p { font-size: 0.98rem; margin: 0; }

.closing-band {
  background: linear-gradient(150deg, var(--green) 0%, var(--green-dark) 100%);
  color: var(--white);
  padding: 54px 0;
}
.closing-band .grid--2 { gap: 0; }
.closing-band .closing-col { padding: 0 40px; }
.closing-band .closing-col + .closing-col { border-left: 1px solid var(--line-gold); }
.closing-band p {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 0;
}
.closing-band .stack { text-align: center; }
.closing-band .stack span {
  display: block;
  font-family: var(--display);
  letter-spacing: 0.05em;
  line-height: 1.7;
}
.closing-band .stack .gold { color: var(--gold-light); font-style: italic; }

/* --------------------------------------------------------------------------
   12. Campaign (Miles for Hope)
   The hero background is handled in section 7 alongside the other heroes.
   The winding-road graphic that sat here as a 12% texture has been dropped:
   it fought with the van photograph now carrying the section.
   -------------------------------------------------------------------------- */

.campaign-title {
  font-size: clamp(3rem, 8vw, 5.6rem);
  color: var(--ink);
  line-height: 0.98;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

.goal-panel {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 30px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.goal-panel__shield {
  background: #16355c;
  color: var(--white);
  padding: 34px 30px;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-decoration: none;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}
.goal-panel__shield:hover { background: #1d4374; color: var(--white); }
.goal-panel__shield strong { display: block; font-size: 2.1rem; }
.goal-panel__body { background: var(--cream); padding: 30px 34px; flex: 1; }
.goal-panel__body .eyebrow { font-size: 0.9rem; letter-spacing: 0.1em; margin-bottom: 6px; }
.goal-panel__body .amount {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 12px;
}
.goal-panel__body p { font-family: var(--display); font-size: 1.08rem; color: var(--ink); margin: 0; }

.impact-pair { display: grid; grid-template-columns: 1fr 1fr; }
.impact-pair .impact-figure { text-align: center; padding: 0 30px; }
.impact-pair .impact-figure + .impact-figure { border-left: 1px solid var(--line-gold); }
.impact-figure h3 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--gold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.impact-figure p { font-size: 1rem; margin: 0; }

/* --------------------------------------------------------------------------
   13. Contact
   -------------------------------------------------------------------------- */
.contact-logo { width: min(280px, 62%); margin: 0 auto 26px; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 20px;
}
.contact-tile {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 38px 34px;
  border-right: 1px solid var(--line-gold);
  border-bottom: 1px solid var(--line-gold);
}
.contact-tile:nth-child(2n) { border-right: 0; }
.contact-tile:nth-last-child(-n + 2) { border-bottom: 0; }
.contact-tile .badge { background: transparent; color: var(--gold); width: 56px; height: 56px; margin: 0; }
.contact-tile .badge svg { width: 46px; height: 46px; }
.contact-tile h2 {
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.contact-tile a,
.contact-tile address {
  font-family: var(--sans);
  font-size: 1.06rem;
  font-weight: 700;
  font-style: normal;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.5;
}
.contact-tile a:hover { color: var(--gold); }
.contact-tile .map-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: underline;
  text-decoration-color: var(--line-gold);
}
.contact-tile .map-link svg { width: 22px; height: 22px; color: var(--gold); }

/* Contact strip used at the foot of the board page */
.contact-strip {
  background: linear-gradient(150deg, var(--green) 0%, var(--green-dark) 100%);
  border-top: 3px solid var(--gold);
  color: rgba(255, 255, 255, 0.88);
  padding: 46px 0;
}
.contact-strip h2 { color: var(--gold); font-size: 1.7rem; letter-spacing: 0.05em; }
.contact-strip .grid--2 { gap: 0; }
.contact-strip .strip-col { padding: 0 40px; }
.contact-strip .strip-col + .strip-col { border-left: 1px solid var(--line-gold); }
.contact-strip ul { list-style: none; }
.contact-strip li { display: flex; align-items: center; gap: 14px; padding: 7px 0; }
.contact-strip li svg { width: 26px; height: 26px; color: var(--gold); flex-shrink: 0; }
.contact-strip a { color: var(--white); text-decoration: none; }
.contact-strip a:hover { color: var(--gold-light); text-decoration: underline; }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--green-dark);
  color: rgba(255, 255, 255, 0.78);
  padding: 62px 0 0;
  border-top: 3px solid var(--gold);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr;
  gap: 46px;
}
.site-footer h3 {
  font-family: var(--serif-alt);
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 18px;
}
.site-footer p { font-size: 0.98rem; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: rgba(255, 255, 255, 0.86); text-decoration: none; }
.site-footer a:hover { color: var(--gold-light); text-decoration: underline; }
.footer-logo { width: 150px; margin-bottom: 20px; }
.footer-bottom {
  margin-top: 46px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.62);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   15. Decorative
   -------------------------------------------------------------------------- */
.wave-divider { display: block; width: 100%; margin: 0; }
.wave-divider img { width: 100%; display: block; }

.thanks-band {
  position: relative;
  background: linear-gradient(150deg, var(--green) 0%, var(--green-dark) 100%);
  padding: 56px 0;
}
.thanks-band p {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  color: var(--gold-light);
  text-align: center;
  margin: 0;
  max-width: 30ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   16. Responsive — tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --header-h: 70px; }

  .nav-toggle { display: block; }

  .nav-list {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 12px 16px 20px;
    background: var(--green);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 3px solid var(--gold);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav-list.is-open { display: flex; }
  .nav-list li { width: 100%; }
  .nav-list a {
    display: block;
    width: 100%;
    padding: 14px 6px;
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .nav-list a:hover { border-bottom-color: rgba(255, 255, 255, 0.1); }
  .nav-list a[aria-current="page"] { border-bottom-color: var(--gold); }
  .nav-donate { justify-content: center; margin-top: 14px; padding: 14px 26px; }

  /* Dropdowns become accordions inside the mobile panel */
  .has-dropdown { position: static; }
  .has-dropdown::after { display: none; }

  .dropdown-toggle {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 14px 6px;
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .dropdown-toggle:hover,
  .has-dropdown:hover .dropdown-toggle { border-bottom-color: rgba(255, 255, 255, 0.1); }
  .dropdown-toggle[data-section="current"] { border-bottom-color: var(--gold); }

  /* Hover no longer opens anything — only an explicit tap does */
  .dropdown-menu {
    position: static;
    display: none;
    min-width: 0;
    margin: 0;
    padding: 4px 0 10px 14px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .has-dropdown:hover > .dropdown-menu,
  .has-dropdown:focus-within > .dropdown-menu { transform: none; }
  .dropdown-menu.is-open { display: block; transform: none; }

  .dropdown-menu a { color: rgba(255, 255, 255, 0.9); padding: 13px 12px; }
  .dropdown-menu a:hover { background: rgba(255, 255, 255, 0.12); color: var(--gold-light); }
  .dropdown-menu a[aria-current="page"] { background: rgba(255, 255, 255, 0.14); color: var(--white); }

  .section { padding: 68px 0; }

}

/* --------------------------------------------------------------------------
   16b. Responsive — content layout

   Deliberately NOT tied to the navigation breakpoint above. The nav has to
   fold at 1080px because seven items stop fitting, but the Canva artboard is
   only 1024pt wide — so the designed multi-column layouts (the three pillars,
   the impact split, the board grid) hold all the way down to 880px. Collapsing
   them at 1080 flattened the pages into a single stack on ordinary laptop
   windows, which is not what the design shows.
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
  .grid--split,
  .grid--split-media { grid-template-columns: 1fr; gap: 36px; }

  /* Hero: the photograph is dropped entirely; the section keeps the colour it
     faded into, so no text ever sits over an image on a small screen. */
  .hero,
  .page-hero,
  .campaign-hero {
    background-image: none;
    background-color: var(--hero-fade, #f8f7f3);
  }
  .hero::before,
  .page-hero::before,
  .campaign-hero::before,
  .hero--soft::before,
  .page-hero--soft::before { display: none; }
  .hero-curve { display: none; }

  .hero-inner,
  .page-hero-inner {
    min-height: 0;
    padding: 52px 0 56px;
    justify-content: center;
  }
  .hero-copy,
  .page-hero-copy {
    max-width: none;
    margin-inline: auto;
    text-align: center;
  }
  .hero-logo { margin-inline: auto; }
  .hero-tagline { max-width: none; }
  .hero-copy .rule,
  .page-hero-copy .rule { margin-inline: auto; }
  .page-hero-copy .lede { margin-inline: auto; }
  .goal-panel { margin-inline: auto; }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .board-grid { grid-template-columns: repeat(2, 1fr); }
  .member:nth-child(4n) { border-right: 1px solid var(--line-gold); }
  .member:nth-child(2n) { border-right: 0; }
  .member:nth-last-child(-n + 4) { border-bottom: 1px solid var(--line-gold); }
  .member:nth-last-child(-n + 2) { border-bottom: 0; }

  .pillar-grid,
  .pillar-cards { grid-template-columns: 1fr; gap: 56px; }
  .pillar-grid { max-width: 460px; margin-inline: auto; }
  /* the shaft keeps its 68% at every width — the moulding must always
     overhang it, or the column reads as a flat box */
  .pillar-card .badge { margin-top: -58px; }
  .stat-cards-wrap { padding-top: 70px; }

  .feature-split { grid-template-columns: 1fr; }
  .feature-split--reverse .feature-split__media { order: 0; }
  .feature-split__media { min-height: 300px; }

  .divided > * { padding: 22px 24px; }
  .divided > * + * { border-left: 0; border-top: 1px solid var(--line-gold); }
  .divided.grid--4 > * { border-left: 0; border-top: 0; }
  .divided.grid--4 { gap: 10px 0; }

  .footer-grid { grid-template-columns: 1fr 1fr; }

  .closing-band .closing-col { padding: 22px 24px; text-align: center; }
  .closing-band .closing-col + .closing-col { border-left: 0; border-top: 1px solid var(--line-gold); }

  .contact-strip .strip-col { padding: 22px 24px; text-align: center; }
  .contact-strip .strip-col + .strip-col { border-left: 0; border-top: 1px solid var(--line-gold); }
  .contact-strip li { justify-content: center; }

  /* centring, per the brief */
  .grid--split > *,
  .grid--split-media > * { text-align: center; }
  .grid--split .rule,
  .grid--split-media .rule,
  .feature-split__panel .rule { margin-inline: auto; }
  .grid--split .lede,
  .grid--split-media .lede,
  .feature-split__panel p { margin-inline: auto; }
  .feature-split__panel { text-align: center; align-items: center; }
  .feature-split__panel .btn-row { justify-content: center; }
  .benefit { flex-direction: column; text-align: center; gap: 12px; }
  .programme-list li { justify-content: center; }
  .media-plain img,
  .media-frame { margin-inline: auto; }
  .tier-list li,
  .check-list li { justify-content: center; }
  .tier-list,
  .check-list { text-align: center; }
}

/* --------------------------------------------------------------------------
   17. Responsive — mobile
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
  :root { --gutter: 18px; }

  body { font-size: 1.02rem; }

  .section { padding: 52px 0; }
  .section--tight { padding: 40px 0; }

  .grid--2,
  .grid--3,
  .grid--4,
  .impact-pair,
  .contact-grid,
  .board-grid { grid-template-columns: 1fr; }

  .grid { gap: 22px; }

  .card { padding: 26px 22px; }

  .values-head { flex-direction: column; gap: 14px; }
  .values-head::before,
  .values-head::after { width: 60%; flex: none; }

  .member { border-right: 0 !important; }
  .member:not(:last-child) { border-bottom: 1px solid var(--line-gold) !important; }
  .member:last-child { border-bottom: 0 !important; }

  .programme-list { grid-template-columns: 1fr; }

  .impact-pair .impact-figure { padding: 22px 0; }
  .impact-pair .impact-figure + .impact-figure { border-left: 0; border-top: 1px solid var(--line-gold); }

  .contact-tile {
    border-right: 0 !important;
    padding: 26px 4px;
    gap: 16px;
  }
  .contact-tile:not(:last-child) { border-bottom: 1px solid var(--line-gold) !important; }
  .contact-tile:last-child { border-bottom: 0 !important; }

  .goal-panel { flex-direction: column; }
  .goal-panel__shield { padding: 24px; }

  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }

  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-bottom { flex-direction: column; }

  .alert-card { flex-direction: column; gap: 16px; }

}

/* --------------------------------------------------------------------------
   18. Motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .btn:hover { transform: none; }
}

@media print {
  .site-header, .nav-toggle, .site-footer { display: none; }
  body { color: #000; }
}

/* --------------------------------------------------------------------------
   19. Utilities & component fixes
   -------------------------------------------------------------------------- */
.stack-top { margin-top: 48px; }
.stack-top-sm { margin-top: 26px; }

.hero-copy .rule { margin-bottom: 18px; }

.pillars-head .eyebrow { letter-spacing: 0.32em; margin-bottom: 8px; }

.pillar__figure--contain { background: var(--cream); }
.pillar__figure--contain img { object-fit: contain; padding: 18px; }

.tier-list svg { width: 24px; height: 24px; color: var(--gold); flex-shrink: 0; }
.tier-list .tier-amount { display: block; }

.contact-tile { text-align: left; }

.legacy-cta__inner .lede { margin-inline: auto; }
.legacy-cta__inner .subtitle { margin-bottom: 0; }

.alert-card .badge { margin: 0; background: transparent; color: var(--green); }
.alert-card .badge svg { width: 42px; height: 42px; }

.figure-stat .big { display: block; }

.quote-band {
  position: relative;
  background: var(--cream-2);
  padding: 58px 0;
  text-align: center;
  border-top: 1px solid var(--line);
}
.quote-band p {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.8vw, 2rem);
  line-height: 1.4;
  color: var(--green);
  margin: 0;
  max-width: 34ch;
  margin-inline: auto;
}

@media (max-width: 880px) {
  .divided.grid--4 > * { border-left: 0; border-top: 0; }
  .divided.grid--4 { gap: 10px 0; }
}

/* --------------------------------------------------------------------------
   20. Long-string containment
   Email addresses and URLs are unbreakable words; without min-width:0 they
   force their flex parents wider than the viewport on narrow screens.
   -------------------------------------------------------------------------- */
.contact-tile > div,
.contact-strip li,
.contact-strip li > * { min-width: 0; }

.contact-tile a,
.contact-tile address,
.contact-tile h2,
.contact-strip a,
.site-footer a { overflow-wrap: anywhere; }

@media (max-width: 880px) {
  .contact-tile { padding: 30px 22px; gap: 16px; }
}

/* --------------------------------------------------------------------------
   21. Accessible gold for text
   Decorative gold (--gold) is kept everywhere it is a shape: rules, button
   fills, borders, icons and badges. Wherever gold carries *words* on a light
   background it is swapped for --gold-text, which holds the same hue at a
   contrast that passes WCAG AA.
   -------------------------------------------------------------------------- */
.eyebrow,
.subtitle,
.hero-tagline,
.member .role,
.member .org,
.impact-figure h3,
.figure-stat .big--gold { color: var(--gold-text); }

/* On the dark green panels the lighter gold already passes, so restore it. */
.section--green .eyebrow,
.page-hero--green .subtitle,
.feature-split__panel .eyebrow,
.contact-strip h2,
.closing-band .stack .gold,
.thanks-band p { color: var(--gold-light); }

/* --------------------------------------------------------------------------
   22. Light cards on dark bands
   .section--green sets white text for its own children. Cards that sit on top
   of a green band have their own light background, so they must reclaim dark
   text or they render white-on-cream.
   -------------------------------------------------------------------------- */
.section--green .pillar-card,
.section--green .pillar-card p,
.section--green .card,
.section--green .card p { color: var(--body-text); }

.section--green .pillar-card h3,
.section--green .card h3 { color: var(--green); }

/* --------------------------------------------------------------------------
   23. Impact page — numbers beside the map, as laid out in the Canva file
   -------------------------------------------------------------------------- */
.grid--impact {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: 52px;
  align-items: start;
}

/* Sections 23–24 are appended after the responsive blocks above, so their
   plain rules would out-order any earlier media query. Anything here that
   needs to change with viewport must carry its own query. */
@media (max-width: 880px) {
  .grid--impact { grid-template-columns: 1fr; gap: 44px; }
}

.figure-stat .badge { margin: 0 auto 16px; width: 74px; height: 74px; }
.figure-stat .badge svg { width: 36px; height: 36px; }

.heading-pin {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.heading-pin svg { width: 26px; height: 26px; color: var(--gold); flex-shrink: 0; }

.pillars-head .eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.pillars-head .eyebrow::before,
.pillars-head .eyebrow::after {
  content: "";
  width: clamp(60px, 12vw, 150px);
  height: 1px;
  background: var(--line-gold);
}

/* --------------------------------------------------------------------------
   24. Mobile — photography steps aside, content centres

   Below 900px the hero photographs are removed rather than dimmed. A veiled
   photo behind a paragraph is still a photo behind a paragraph, and on a small
   screen it costs legibility for an audience that can least afford it. The
   section keeps the colour the photo faded into, so the palette is unchanged.
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
  /* extras beyond the shared rules in 16b */
  .alert-card { text-align: center; align-items: center; }
  .alert-card .badge { margin-inline: auto; }
  .grid--impact > * { text-align: center; }
}

@media (max-width: 680px) {
  .contact-tile { flex-direction: column; align-items: center; text-align: center; }
  .contact-tile .map-link { justify-content: center; }
  .values-head h2 { text-align: center; }
  .heading-pin { justify-content: center; }
}

/* --------------------------------------------------------------------------
   25. Impact — asymmetric full-bleed split

   Measured from page 4 of the Canva file: a white numbers column occupying
   59.4% of the page, a cream aside at 40.6%, and the map bleeding all the way
   to the right edge. The alert sits inside the numbers column, not below it.
   -------------------------------------------------------------------------- */
.impact-split {
  display: grid;
  grid-template-columns: 1.463fr 1fr;   /* 59.4 / 40.6 */
  background: var(--cream);
  align-items: stretch;
}

.impact-split__numbers {
  background: var(--white);
  padding: 74px clamp(26px, 3.2vw, 54px) 74px clamp(20px, 5.6vw, 96px);
}

.impact-split__aside { background: var(--cream); padding: 74px 0 78px; }
.impact-split__aside .aside-copy { padding-inline: clamp(24px, 3.2vw, 52px); }

/* no right padding, so the map runs off the edge of the page */
.impact-split__aside .aside-map { margin: 34px 0 40px; }
.impact-split__aside .aside-map img { display: block; width: 100%; }

.aside-title {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.9vw, 1.8rem);
  font-weight: 600;
  line-height: 1.22;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 16px;
}

/* three plain columns — the design carries no rules between them */
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}

/* pin trails the heading, as in the design */
.heading-pin { display: block; }
.heading-pin svg {
  width: 22px;
  height: 22px;
  color: var(--gold);
  vertical-align: -3px;
  margin-left: 10px;
}

.alert-card {
  display: flex;
  gap: 22px;
  align-items: center;
  margin-top: 48px;
  padding: 28px 30px;
  background: #fff9ef;
  border: 1px solid var(--line-gold);
  border-left: 1px solid var(--line-gold);
  border-radius: 16px;
}
.alert-card h3 {
  font-family: var(--serif-alt);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 10px;
}
.alert-card p { font-size: 0.95rem; margin: 0; }
.alert-card .badge {
  margin: 0;
  width: 76px;
  height: 76px;
  background: var(--green);
  color: var(--white);
}
.alert-card .badge svg { width: 44px; height: 44px; }

@media (max-width: 880px) {
  .impact-split { grid-template-columns: 1fr; }
  .impact-split__numbers { padding: 56px clamp(18px, 5vw, 40px); }
  .impact-split__aside { padding: 12px 0 60px; }
  .numbers-grid { gap: 34px; }
  .impact-split__numbers,
  .impact-split__aside { text-align: center; }
  .impact-split__aside .aside-copy { padding-inline: clamp(18px, 5vw, 40px); }
  .alert-card { flex-direction: column; text-align: center; }
  .alert-card .badge { margin-inline: auto; }
  .heading-pin svg { margin-left: 8px; }
}

@media (max-width: 680px) {
  .numbers-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* --------------------------------------------------------------------------
   26. Miles for Hope — laid out from page 6 of the Canva file

   Measured text and image placements:
     title           x  4.2%–24.0%   y  6.1%–22.6%   (winding road behind it)
     van             x 42.5%–101.4%  y  3.5%–31.4%
     goal panel      x ~44%–100%     y ~22%–37%
     "More Than…"    photo x 0–46% left, copy x 58.2%–97.3% right
     "Why This…"     photo x 0–47.7% left, green panel right
     closing quote   green/gold corner graphics, 19.9% wide, bottom corners
   -------------------------------------------------------------------------- */
.campaign-hero {
  position: relative;
  overflow: hidden;
  background: var(--cream-2);
}
.campaign-hero::before {
  content: "";
  position: absolute;
  left: 2%;
  top: 4%;
  width: 38%;
  padding-top: 26%;
  background: url("../images/winding-road.png") left top / contain no-repeat;
  opacity: 0.42;
  pointer-events: none;
  z-index: 0;
}
.campaign-hero > .wrap { position: relative; z-index: 2; }

.campaign-hero__grid {
  display: grid;
  grid-template-columns: 46% 54%;
  align-items: start;
  padding: 46px 0 62px;
}
.campaign-hero__copy { padding-top: 8px; }
.campaign-hero__media { display: flex; flex-direction: column; gap: 22px; }
.campaign-hero__media > img {
  display: block;
  width: 108%;
  max-width: none;
  /* anchored to the column's left edge, bleeding off to the right as the
     design does (van x 45.9%-102.4%) rather than intruding on the copy */
  margin-left: auto;
  margin-right: -8%;
}

.campaign-title {
  font-size: clamp(2.8rem, 7vw, 5.2rem);
  color: var(--ink);
  line-height: 0.98;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

/* Shield + goal, sitting under the van on the right */
.goal-panel {
  display: flex;
  align-items: stretch;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.goal-panel__shield {
  flex: 0 0 34%;
  display: grid;
  place-items: center;
  padding: 26px 18px;
  background: #16355c;
  color: var(--white);
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
  border-radius: 4px 4px 44% 44% / 4px 4px 22% 22%;
  transition: background-color 0.2s ease;
}
.goal-panel__shield:hover { background: #1d4374; color: var(--white); }
.goal-panel__shield strong { display: block; font-size: 1.85rem; }

.goal-panel__body { flex: 1; background: var(--cream); padding: 26px 30px 30px; }
.goal-panel__body .eyebrow { font-size: 1rem; letter-spacing: 0.06em; margin-bottom: 4px; }
.goal-panel__body .amount {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 12px;
}
.goal-panel__body p { font-family: var(--display); font-size: 1.05rem; color: var(--ink); margin: 0; }

/* Full-bleed photo on the left, copy on the right */
.split-feature {
  display: grid;
  grid-template-columns: 46% 54%;
  align-items: center;
  background: var(--white);
}
.split-feature__media { align-self: stretch; }
.split-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-feature__copy { padding: clamp(38px, 5vw, 74px) clamp(24px, 4vw, 60px) clamp(38px, 5vw, 74px) clamp(28px, 5vw, 88px); }

.split-feature--green { grid-template-columns: 48% 52%; }
.split-feature--green .split-feature__panel {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(150deg, var(--green) 0%, var(--green-dark) 100%);
  color: rgba(255, 255, 255, 0.92);
  padding: clamp(38px, 5vw, 74px) clamp(24px, 4vw, 60px) clamp(38px, 5vw, 74px) clamp(28px, 5vw, 78px);
}
.split-feature--green .split-feature__panel h2 {
  color: var(--white);
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  letter-spacing: 0.02em;
}

/* Closing quote with the corner graphics */
.quote-band--corners { position: relative; overflow: hidden; }
.quote-band--corners .corner {
  position: absolute;
  bottom: 0;
  width: 19.9%;
  pointer-events: none;
}
.quote-band--corners .corner--left { left: -2.8%; transform: scaleX(-1); }
.quote-band--corners .corner--right { right: -4.9%; }
.quote-band--corners p { position: relative; z-index: 2; max-width: 46ch; }

@media (max-width: 880px) {
  .campaign-hero__grid,
  .split-feature,
  .split-feature--green { grid-template-columns: 1fr; }
  .campaign-hero__grid { padding: 40px 0 48px; text-align: center; }
  .campaign-hero__copy .rule,
  .campaign-hero__copy .lede { margin-inline: auto; }
  .campaign-hero::before { display: none; }
  .campaign-hero__media > img { width: 100%; align-self: center; }
  .split-feature__media { min-height: 280px; }
  .split-feature__copy,
  .split-feature--green .split-feature__panel { text-align: center; padding-inline: clamp(20px, 5vw, 44px); }
  .split-feature__copy .rule,
  .split-feature--green .rule { margin-inline: auto; }
  .legacy-cta__inner { grid-template-columns: 1fr; }
  .legacy-cta__copy { padding-inline: clamp(20px, 5vw, 44px); }
  .quote-band--corners .corner { width: 34%; }
}

@media (max-width: 680px) {
  .goal-panel { flex-direction: column; }
  .goal-panel__shield { flex: none; border-radius: 4px; padding: 20px; }
}

/* --------------------------------------------------------------------------
   27. Capitalisation and heading scale, matched to the Canva file

   The design sets some headings in full capitals and others in title case.
   Every heading below was checked against the PDF text; only the ones the
   design capitalises are transformed here. Sizes are the design's point
   values converted against the 1024.5pt artboard.
   -------------------------------------------------------------------------- */
.page-hero-title,          /* OUR STORY / BOARD OF DIRECTORS / WHY THIS FOUNDATION EXISTS */
.campaign-title,           /* MILES FOR HOPE */
.pillars-title,            /* PILLARS OF GIVING */
.contact-title,            /* CONTACT US */
.feature-split__panel h2,  /* JOIN A LEGACY / WHY THIS CAMPAIGN MATTERS */
.split-feature--green .split-feature__panel h2,
.contact-strip h2,         /* JOIN A LEGACY */
.contact-tile h2,          /* CALL US / EMAIL US / WEBSITE / VISIT US */
.legacy-cta__copy h2 {     /* YOUR LEGACY BEGINS TODAY */
  text-transform: uppercase;
}

/* "double" is set in capitals in the statistics block */
.figure-stat .big--gold { text-transform: uppercase; }

/* Section rules sit at different sizes across the pages */
.values-head h2 { font-size: clamp(0.95rem, 1.6vw, 1.42rem); }        /* 16–18pt */
.values-head--lg h2 { font-size: clamp(1.6rem, 4.4vw, 3.94rem); }     /* 44.8pt  */
.values-head--md h2 { font-size: clamp(1.25rem, 2.37vw, 2.13rem); }   /* 24.2pt  */

.contact-tile h2 { font-size: clamp(1.3rem, 2.43vw, 2.19rem); }       /* 24.9pt  */
.contact-title { font-size: clamp(2.4rem, 6.42vw, 5.78rem); }         /* 65.8pt  */

/* --------------------------------------------------------------------------
   28. Closing panel artwork

   The panel is placed at 126% of the page width with only its top 45%
   showing. `cover` was centring it vertically and showing the wrong band.
   -------------------------------------------------------------------------- */
.legacy-cta {
  /* two layers: the cutout photograph over the golden artwork. Being a
     background rather than an <img> means it cannot overlap the copy, and it
     drops out cleanly on small screens by swapping the layer list. */
  background-image: url("../images/three-seniors-couch.png"),
                    url("../images/golden-light-panel.jpg");
  background-repeat: no-repeat, no-repeat;
  /* 43% rather than centre: puts the visible span at source x 8.8%–88.3%,
     which is exactly what the PDF crops to */
  background-position: right -3.5% bottom, 43% top;
  background-size: 33% auto, 126% auto;
}

@media (max-width: 880px) {
  .legacy-cta {
    background-image: url("../images/golden-light-panel.jpg");
    background-position: 43% top;
    background-size: 200% auto;
  }
}

/* --------------------------------------------------------------------------
   29. "Why your gift matters" — rebuilt from page 5

     heading   44.8pt EB Garamond, gold, centred, x 22.4%–77.5%,
               with a 7.9%-wide gold rule either side
     columns   text left-aligned at x 9.5% / 44.1% / 76.2%
     headings  14.2pt EB Garamond caps, black, sitting ABOVE the body
     icons     ~5% discs centred at x 5.5% / 39.2% / 72.2%, to the LEFT
               of the body copy, not above it
     body      12.2pt Nourd (sans)
   -------------------------------------------------------------------------- */
.gift-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.9vw, 42px);
  margin-bottom: clamp(28px, 3.6vw, 52px);
}
.gift-head::before,
.gift-head::after {
  content: "";
  width: 7.9%;
  height: 2px;
  background: var(--gold);
  flex: none;
}
.gift-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 4.37vw, 3.94rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  /* the design uses #c69231; at 2.8:1 on white that fails even the
     large-text threshold, so the deeper tone of the same hue is used */
  color: var(--gold-text);
  text-align: center;
}

.gift-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 5.6% column gap puts the three columns on the design's 33.35% pitch */
  column-gap: 5.6%;
  row-gap: 30px;
}
.gift {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    ".    title"
    "icon body";
  column-gap: clamp(12px, 1.4vw, 20px);
  row-gap: 10px;
  align-items: center;
  text-align: left;
}
.gift h3 {
  grid-area: title;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(0.92rem, 1.39vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}
.gift .badge {
  grid-area: icon;
  margin: 0;
  width: clamp(46px, 4.9vw, 70px);
  height: clamp(46px, 4.9vw, 70px);
}
.gift .badge svg { width: 48%; height: 48%; }
.gift p {
  grid-area: body;
  margin: 0;
  font-size: clamp(0.86rem, 1.19vw, 1.07rem);
}

/* --------------------------------------------------------------------------
   30. Closing CTA type, matched to the design
       body 14.2pt EB Garamond (serif, not the sans the build was using)
       button 16.1pt Nourd on a #1e2f20 fill, 34pt tall
   -------------------------------------------------------------------------- */
.legacy-cta__copy .lede {
  font-family: var(--display);
  font-size: clamp(1rem, 1.39vw, 1.25rem);
  line-height: 1.5;
}
.legacy-cta .btn {
  font-family: var(--sans);
  font-size: clamp(0.92rem, 1.57vw, 1.41rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  background: #1e2f20;
  color: var(--white);
  min-height: 0;
  padding: 12px 36px;
}
.legacy-cta .btn:hover { background: var(--green); color: var(--gold-light); }

@media (max-width: 880px) {
  .gift-grid { grid-template-columns: 1fr; gap: 30px; max-width: 460px; margin-inline: auto; }
  .gift-head::before, .gift-head::after { width: 12%; }
}

/* --------------------------------------------------------------------------
   31. Closing panel height

   The artwork is cropped by the panel's own height: at 126% width the scaled
   image is ~741px tall, and the design reveals only its top 44.7% (~331px).
   A taller panel drags the dark lower band of the photograph into view, which
   is what made the golden light look wrong. Spacing is tightened so the panel
   lands near the design's proportion.
   -------------------------------------------------------------------------- */
.legacy-cta__inner { padding: clamp(26px, 2.6vw, 38px) 0; }
.legacy-cta__copy h2 { margin-bottom: 10px; }
.legacy-cta__copy .rule { margin-bottom: 14px; }
.legacy-cta__copy .lede { margin-bottom: 0; }
.legacy-cta__copy .btn-row { margin-top: 18px; }
.legacy-cta__copy .subtitle { margin-top: 14px; }

/* --------------------------------------------------------------------------
   32. Miles for Hope — type and layout matched line by line to page 6

   Every size below is the design's point value against the 1024.5pt artboard,
   expressed in vw so it scales:
     title 69.6pt=6.79vw · subtitle 21.4pt=2.09vw · lede 16.1pt=1.57vw
     campaign goal 25pt=2.44vw · $65,000 60.1pt=5.87vw · note 15.9pt=1.55vw
     "More Than…" 26pt=2.54vw, body 17.5pt=1.71vw
     "Your gift…" 24.2pt=2.36vw · figures 25.2pt=2.46vw, captions 14pt=1.37vw
     "Why this…" 27.9pt=2.72vw, body 18.1pt=1.77vw · quote 25pt=2.44vw
   -------------------------------------------------------------------------- */
.campaign-title {
  font-size: clamp(2.6rem, 6.79vw, 6.12rem);
  font-weight: 600;
  line-height: 1.29;
  letter-spacing: 0.01em;
  margin-bottom: 10px;
}
.campaign-hero__copy .rule { width: clamp(48px, 5.9vw, 85px); margin-bottom: 18px; }
.campaign-hero__copy .subtitle { font-size: clamp(1.05rem, 2.09vw, 1.88rem); margin-bottom: 20px; }
.campaign-hero__copy .lede { font-size: clamp(0.98rem, 1.57vw, 1.41rem); max-width: 46ch; }

.goal-panel__shield { flex: 0 0 29%; }
.goal-panel__body .eyebrow {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.44vw, 2.2rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.goal-panel__body .amount { font-size: clamp(2.2rem, 5.87vw, 5.29rem); margin-bottom: 10px; }
.goal-panel__body p { font-size: clamp(0.95rem, 1.55vw, 1.4rem); line-height: 1.35; }

.split-feature__copy .section-title { font-size: clamp(1.5rem, 2.54vw, 2.29rem); }
.split-feature__copy .lede { font-size: clamp(1rem, 1.71vw, 1.54rem); }

/* the design carries no rules either side of "Your gift creates impact" */
.values-head--plain::before,
.values-head--plain::after { display: none; }
.values-head--plain h2 {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.36vw, 2.13rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* the two figures sit close to the centre — cx 35.2% and 67% of the page */
.impact-pair { max-width: min(62vw, 900px); margin-inline: auto; }
.impact-figure h3 { font-size: clamp(1.35rem, 2.46vw, 2.21rem); }
.impact-figure p { font-size: clamp(0.9rem, 1.37vw, 1.23rem); }

.split-feature--green .split-feature__panel h2 { font-size: clamp(1.6rem, 2.72vw, 2.45rem); }
.split-feature--green .split-feature__panel p { font-size: clamp(1rem, 1.77vw, 1.59rem); }

.quote-band--corners p { font-size: clamp(1.15rem, 2.44vw, 2.2rem); max-width: 44ch; }

/* --------------------------------------------------------------------------
   33. Miles for Hope on small screens

   The van keeps its place — it is the subject of the campaign — but is capped
   so it never crowds the copy. The two delivery photographs become bands of a
   fixed height rather than half-height columns, and the corner graphics shrink
   so they stay clear of the closing line.
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
  .campaign-hero__media > img { width: min(100%, 460px); margin-inline: auto; }
  .campaign-hero__media { gap: 26px; }
  .goal-panel { max-width: 460px; }
  .split-feature__media { min-height: 0; }
  .split-feature__media img { max-height: 320px; object-fit: cover; }
  .impact-pair { max-width: none; }
}

@media (max-width: 680px) {
  .campaign-title { line-height: 1.12; }
  .split-feature__media img { max-height: 230px; }
  /* the corner graphics are decorative; give the closing line room to clear
     them rather than letting them run underneath the text */
  .quote-band--corners { padding-bottom: clamp(76px, 22vw, 104px); }
  .quote-band--corners .corner { width: 38%; opacity: 0.6; }
  .quote-band--corners p { max-width: 26ch; }
}

/* --------------------------------------------------------------------------
   34. Miles for Hope — horizontal alignment

   Text positions read straight off page 6 (x as a share of the page):
     hero copy      4.2%        goal panel body  70.0%
     "More Than…"  58.2%        "Why this…"      56.0%
     "Your gift…"  centred on 51.3%
     figures       centred on 35.2% and 67.0%
     quote         20.0%–82.7%, one line
   -------------------------------------------------------------------------- */
.campaign-hero__copy { padding-left: 1.4vw; }

/* the panel starts at 49.3%, not at the column edge; its body text at 70% */
.goal-panel { margin-left: 6%; }
.goal-panel__body { padding-left: 11.8%; }

/* the copy column is padded well in from the photograph's edge */
.split-feature__copy { padding-left: clamp(24px, 12.2vw, 176px); }
/* 7.3vw puts the copy at x 55.3%, exactly where the design starts it, and
   leaves the heading enough measure to hold one line even if the webfont
   fails and a wider fallback is substituted. */
.split-feature--green .split-feature__panel { padding-left: clamp(20px, 7.3vw, 105px); }

/* this heading has no flanking rules, so the flex row must centre it */
.values-head--plain { justify-content: center; }

/* the two figures sit closer to the centre than a full-width split */
.impact-pair { max-width: min(63.6vw, 916px); }

/* Set on one line in the design. The allowance is generous so it still fits
   on one line if EB Garamond has not loaded and a wider fallback is in use;
   max-width does not stretch the text, so the real face still measures ~903px. */
.quote-band--corners p { max-width: min(72vw, 1040px); }

@media (max-width: 880px) {
  .campaign-hero__copy { padding-left: 0; }
  .goal-panel { margin-left: auto; margin-right: auto; }
  .goal-panel__body { padding-left: 30px; }
  .split-feature__copy,
  .split-feature--green .split-feature__panel { padding-left: clamp(20px, 5vw, 44px); }
  .impact-pair { max-width: none; }
  .quote-band--corners p { max-width: 26ch; }
}

/* The design runs this heading out to x 98.2% — nearly the page edge — so the
   panel needs a much smaller right inset than the default. */
/* content runs 56vw -> 98.9vw, matching the design's 618px measure */
.split-feature--green .split-feature__panel { padding-right: clamp(14px, 1.1vw, 16px); }
.split-feature--green .split-feature__panel h2 { letter-spacing: 0; }

@media (max-width: 880px) {
  .split-feature--green .split-feature__panel { padding-right: clamp(20px, 5vw, 44px); }
}

/* --------------------------------------------------------------------------
   35. Miles for Hope — goal panel placement and shield shape

   The van cutout carries transparent padding below the vehicle: its ink ends
   at 76.7% of the file. In the design the goal panel rises into that empty
   band, which is what brings it level with the hero copy on the left rather
   than sitting below the whole image box.

   Design geometry at a 1440px viewport:
     shield   215 x 266px, tapering to a point over its lower ~31%
     panel    top level with the van's ink bottom, not its box bottom
   -------------------------------------------------------------------------- */
.campaign-hero__media { gap: 0; }

.goal-panel {
  /* lift the panel into the van's transparent lower band */
  margin-top: -8.2vw;
}

.goal-panel__shield {
  flex: 0 0 31%;
  /* squared shoulders, tapering to a rounded point — a badge, not a pill */
  border-radius: 4px 4px 48% 48% / 4px 4px 32% 32%;
}

@media (max-width: 880px) {
  /* stacked: no overlap, and the shield returns to a plain panel */
  .campaign-hero__media { gap: 26px; }
  .goal-panel { margin-top: 0; }
}

@media (max-width: 680px) {
  .goal-panel__shield { flex: none; border-radius: 4px; }
}

/* --------------------------------------------------------------------------
   35. Miles for Hope hero — the goal panel is level with the copy

   In the design the shield spans y 22.9%–36.0% and the subtitle/body block
   23.5%–34.6%: the panel sits alongside the copy, not below the van. A 2×2
   grid makes that structural rather than incidental —

       title | van
       copy  | goal

   The van is taller than the title, so it carries a negative bottom margin and
   overflows into the second row exactly as it does in the PDF (van bottom
   28.7%, panel top 22.9%). The panel is raised above it so the overlap can
   never obscure the shield.
   -------------------------------------------------------------------------- */
.campaign-hero__grid {
  grid-template-areas:
    "title van"
    "copy  goal";
  align-items: start;
  row-gap: 1.6%;
}
.campaign-hero__title { grid-area: title; padding-left: 1.4vw; }
.campaign-hero__van   { grid-area: van; }
.campaign-hero__copy  { grid-area: copy; }
.campaign-hero__goal  { grid-area: goal; position: relative; z-index: 2; }

.campaign-hero__van img {
  display: block;
  width: 108%;
  max-width: none;
  margin-left: auto;
  margin-right: -8%;
  margin-bottom: -18%;      /* lets the van overflow the title row */
}

/* The shield reads 153 x 189pt in the design — taller than wide, aspect 0.81.
   margin-top is reset here: an earlier revision lifted the panel with a
   negative margin to clear the old flex stack, which now fights the grid. */
.goal-panel { min-height: 18.4vw; margin-top: 0; }

@media (max-width: 880px) {
  .campaign-hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "copy"
      "van"
      "goal";
  }
  .campaign-hero__title { padding-left: 0; }
  .campaign-hero__van img { margin: 0 auto; width: min(100%, 460px); }
  .campaign-hero__goal { margin-top: 26px; }
  .goal-panel { min-height: 0; }
}

/* --------------------------------------------------------------------------
   36. DONATE NOW shield text

   The wording is drawn as vector outlines in the PDF, not live text, so it was
   measured off the pixels. Two lines inside the shield:

     "DONATE"  cap height 20.2pt -> ~28pt type  = 2.73vw
     "NOW"     cap height 35.5pt -> ~49pt type  = 4.81vw

   Both are set in capitals. The build had them at 20px and 29.6px — roughly
   half size — and without the uppercase transform, so they read "DonateNow".
   -------------------------------------------------------------------------- */
.goal-panel__shield {
  /* place-items centres each row but leaves align-content at its default,
     so the two auto rows were stretching to fill the shield and pushing the
     lines 72px apart. align-content packs them as one centred block. */
  align-content: center;
  font-size: clamp(1.1rem, 2.73vw, 2.46rem);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 22px 14px;
}
.goal-panel__shield strong {
  display: block;
  font-size: clamp(1.9rem, 4.81vw, 4.33rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
}

@media (max-width: 680px) {
  /* the shield goes full width above the goal figures here, so the two lines
     sit side by side rather than stacked */
  .goal-panel__shield { padding: 18px 14px; line-height: 1.05; }
}

/* --------------------------------------------------------------------------
   37. Shield inner stripe

   The design draws a thin white outline inside the shield, inset ~0.28% of the
   page from its edge (about 4px at 1440) and roughly 2px thick. It is a closed
   loop: a continuous run across the top, then two sides that follow the
   tapered bottom. Reproduced as an inset pseudo-element inheriting the
   shield's radius so it tracks the badge shape at every size.
   -------------------------------------------------------------------------- */
.goal-panel__shield { position: relative; }
.goal-panel__shield::after {
  content: "";
  position: absolute;
  inset: clamp(3px, 0.3vw, 5px);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: inherit;
  pointer-events: none;
}
.goal-panel__shield > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   38. Miles for Hope — road backdrop and the porch photograph
   -------------------------------------------------------------------------- */

/* The winding road sits behind the MILES FOR HOPE title. Raising its opacity
   makes the graphic read properly; the title is protected by the scrim below
   rather than by keeping the road faint. */
.campaign-hero::before { opacity: 0.85; }

/* A soft light scrim between the road and the copy, so the heading keeps its
   contrast at the higher opacity. Sits above the road, below the content. */
.campaign-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Confined to the title column (x 0-28%) so the road reads at close to full
     strength everywhere else. Widening the last stop dims more of the road;
     narrowing it brings the road further under the heading. */
  background: linear-gradient(95deg,
    rgba(255, 255, 255, 0.76) 0%,
    rgba(255, 255, 255, 0.74) 30%,
    rgba(255, 255, 255, 0.58) 42%,
    rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}

/* The porch delivery photograph: mirrored, and faded out along its right edge
   so it blends into the copy rather than ending on a hard vertical line. */
.split-feature__media--fade { position: relative; overflow: hidden; }
.split-feature__media--fade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.9949) 3%,
    rgba(255, 255, 255, 0.9803) 6%,
    rgba(255, 255, 255, 0.957) 9%,
    rgba(255, 255, 255, 0.9259) 12%,
    rgba(255, 255, 255, 0.8879) 15%,
    rgba(255, 255, 255, 0.8438) 18%,
    rgba(255, 255, 255, 0.7944) 21%,
    rgba(255, 255, 255, 0.7407) 24%,
    rgba(255, 255, 255, 0.6836) 27%,
    rgba(255, 255, 255, 0.6238) 30%,
    rgba(255, 255, 255, 0.5624) 33%,
    rgba(255, 255, 255, 0.5) 36%,
    rgba(255, 255, 255, 0.4376) 39%,
    rgba(255, 255, 255, 0.3762) 42%,
    rgba(255, 255, 255, 0.3164) 45%,
    rgba(255, 255, 255, 0.2593) 48%,
    rgba(255, 255, 255, 0.2056) 51%,
    rgba(255, 255, 255, 0.1562) 54%,
    rgba(255, 255, 255, 0.1121) 57%,
    rgba(255, 255, 255, 0.0741) 60%,
    rgba(255, 255, 255, 0.043) 63%,
    rgba(255, 255, 255, 0.0197) 66%,
    rgba(255, 255, 255, 0.0051) 69%,
    rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}

@media (max-width: 880px) {
  /* stacked, so the fade runs bottom-to-top instead of right-to-left */
  .split-feature__media--fade::after {
    background: linear-gradient(to top,
      var(--white) 0%,
      rgba(255, 255, 255, 0.55) 26%,
      rgba(255, 255, 255, 0) 60%);
  }
}

/* --------------------------------------------------------------------------
   39. Fade on the "Why This Campaign Matters" photograph

   The green section runs media-left / panel-right, so the photograph's RIGHT
   edge is the seam and the fade travels right-to-left into the panel.

   The panel's left edge is not a flat colour — it runs #11462c at the top to
   #0f3c26 at the foot, because the panel carries a 150deg gradient. So rather
   than approximating with one green, the overlay paints that same gradient and
   masks it with a horizontal alpha ramp: the colour at the seam matches the
   panel exactly at every height. The plain-gradient rule underneath is the
   fallback for anything without mask-image support.
   -------------------------------------------------------------------------- */
.split-feature__media--fade-green { position: relative; overflow: hidden; }

.split-feature__media--fade-green::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to left,
    rgba(16, 67, 42, 1) 0%,
    rgba(16, 67, 42, 0.9949) 3%,
    rgba(16, 67, 42, 0.9803) 6%,
    rgba(16, 67, 42, 0.957) 9%,
    rgba(16, 67, 42, 0.9259) 12%,
    rgba(16, 67, 42, 0.8879) 15%,
    rgba(16, 67, 42, 0.8438) 18%,
    rgba(16, 67, 42, 0.7944) 21%,
    rgba(16, 67, 42, 0.7407) 24%,
    rgba(16, 67, 42, 0.6836) 27%,
    rgba(16, 67, 42, 0.6238) 30%,
    rgba(16, 67, 42, 0.5624) 33%,
    rgba(16, 67, 42, 0.5) 36%,
    rgba(16, 67, 42, 0.4376) 39%,
    rgba(16, 67, 42, 0.3762) 42%,
    rgba(16, 67, 42, 0.3164) 45%,
    rgba(16, 67, 42, 0.2593) 48%,
    rgba(16, 67, 42, 0.2056) 51%,
    rgba(16, 67, 42, 0.1562) 54%,
    rgba(16, 67, 42, 0.1121) 57%,
    rgba(16, 67, 42, 0.0741) 60%,
    rgba(16, 67, 42, 0.043) 63%,
    rgba(16, 67, 42, 0.0197) 66%,
    rgba(16, 67, 42, 0.0051) 69%,
    rgba(16, 67, 42, 0) 72%);
}

@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
  .split-feature__media--fade-green::after {
    background: linear-gradient(150deg, var(--green) 0%, var(--green-dark) 100%);
    -webkit-mask-image: linear-gradient(to left,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.9949) 3%,
    rgba(0, 0, 0, 0.9803) 6%,
    rgba(0, 0, 0, 0.957) 9%,
    rgba(0, 0, 0, 0.9259) 12%,
    rgba(0, 0, 0, 0.8879) 15%,
    rgba(0, 0, 0, 0.8438) 18%,
    rgba(0, 0, 0, 0.7944) 21%,
    rgba(0, 0, 0, 0.7407) 24%,
    rgba(0, 0, 0, 0.6836) 27%,
    rgba(0, 0, 0, 0.6238) 30%,
    rgba(0, 0, 0, 0.5624) 33%,
    rgba(0, 0, 0, 0.5) 36%,
    rgba(0, 0, 0, 0.4376) 39%,
    rgba(0, 0, 0, 0.3762) 42%,
    rgba(0, 0, 0, 0.3164) 45%,
    rgba(0, 0, 0, 0.2593) 48%,
    rgba(0, 0, 0, 0.2056) 51%,
    rgba(0, 0, 0, 0.1562) 54%,
    rgba(0, 0, 0, 0.1121) 57%,
    rgba(0, 0, 0, 0.0741) 60%,
    rgba(0, 0, 0, 0.043) 63%,
    rgba(0, 0, 0, 0.0197) 66%,
    rgba(0, 0, 0, 0.0051) 69%,
    rgba(0, 0, 0, 0) 72%);
            mask-image: linear-gradient(to left,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.9949) 3%,
    rgba(0, 0, 0, 0.9803) 6%,
    rgba(0, 0, 0, 0.957) 9%,
    rgba(0, 0, 0, 0.9259) 12%,
    rgba(0, 0, 0, 0.8879) 15%,
    rgba(0, 0, 0, 0.8438) 18%,
    rgba(0, 0, 0, 0.7944) 21%,
    rgba(0, 0, 0, 0.7407) 24%,
    rgba(0, 0, 0, 0.6836) 27%,
    rgba(0, 0, 0, 0.6238) 30%,
    rgba(0, 0, 0, 0.5624) 33%,
    rgba(0, 0, 0, 0.5) 36%,
    rgba(0, 0, 0, 0.4376) 39%,
    rgba(0, 0, 0, 0.3762) 42%,
    rgba(0, 0, 0, 0.3164) 45%,
    rgba(0, 0, 0, 0.2593) 48%,
    rgba(0, 0, 0, 0.2056) 51%,
    rgba(0, 0, 0, 0.1562) 54%,
    rgba(0, 0, 0, 0.1121) 57%,
    rgba(0, 0, 0, 0.0741) 60%,
    rgba(0, 0, 0, 0.043) 63%,
    rgba(0, 0, 0, 0.0197) 66%,
    rgba(0, 0, 0, 0.0051) 69%,
    rgba(0, 0, 0, 0) 72%);
  }
}

@media (max-width: 880px) {
  /* stacked: the photograph sits above the panel, so the seam moves to its
     foot and the fade runs bottom-up */
  .split-feature__media--fade-green::after {
    background: linear-gradient(to top,
    rgba(16, 67, 42, 1) 0%,
    rgba(16, 67, 42, 0.9949) 3%,
    rgba(16, 67, 42, 0.9803) 6%,
    rgba(16, 67, 42, 0.957) 9%,
    rgba(16, 67, 42, 0.9259) 12%,
    rgba(16, 67, 42, 0.8879) 15%,
    rgba(16, 67, 42, 0.8438) 18%,
    rgba(16, 67, 42, 0.7944) 21%,
    rgba(16, 67, 42, 0.7407) 24%,
    rgba(16, 67, 42, 0.6836) 27%,
    rgba(16, 67, 42, 0.6238) 30%,
    rgba(16, 67, 42, 0.5624) 33%,
    rgba(16, 67, 42, 0.5) 36%,
    rgba(16, 67, 42, 0.4376) 39%,
    rgba(16, 67, 42, 0.3762) 42%,
    rgba(16, 67, 42, 0.3164) 45%,
    rgba(16, 67, 42, 0.2593) 48%,
    rgba(16, 67, 42, 0.2056) 51%,
    rgba(16, 67, 42, 0.1562) 54%,
    rgba(16, 67, 42, 0.1121) 57%,
    rgba(16, 67, 42, 0.0741) 60%,
    rgba(16, 67, 42, 0.043) 63%,
    rgba(16, 67, 42, 0.0197) 66%,
    rgba(16, 67, 42, 0.0051) 69%,
    rgba(16, 67, 42, 0) 72%);
  }
  @supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
    .split-feature__media--fade-green::after {
      background: linear-gradient(150deg, var(--green) 0%, var(--green-dark) 100%);
      -webkit-mask-image: linear-gradient(to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.9949) 3%,
    rgba(0, 0, 0, 0.9803) 6%,
    rgba(0, 0, 0, 0.957) 9%,
    rgba(0, 0, 0, 0.9259) 12%,
    rgba(0, 0, 0, 0.8879) 15%,
    rgba(0, 0, 0, 0.8438) 18%,
    rgba(0, 0, 0, 0.7944) 21%,
    rgba(0, 0, 0, 0.7407) 24%,
    rgba(0, 0, 0, 0.6836) 27%,
    rgba(0, 0, 0, 0.6238) 30%,
    rgba(0, 0, 0, 0.5624) 33%,
    rgba(0, 0, 0, 0.5) 36%,
    rgba(0, 0, 0, 0.4376) 39%,
    rgba(0, 0, 0, 0.3762) 42%,
    rgba(0, 0, 0, 0.3164) 45%,
    rgba(0, 0, 0, 0.2593) 48%,
    rgba(0, 0, 0, 0.2056) 51%,
    rgba(0, 0, 0, 0.1562) 54%,
    rgba(0, 0, 0, 0.1121) 57%,
    rgba(0, 0, 0, 0.0741) 60%,
    rgba(0, 0, 0, 0.043) 63%,
    rgba(0, 0, 0, 0.0197) 66%,
    rgba(0, 0, 0, 0.0051) 69%,
    rgba(0, 0, 0, 0) 72%);
              mask-image: linear-gradient(to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.9949) 3%,
    rgba(0, 0, 0, 0.9803) 6%,
    rgba(0, 0, 0, 0.957) 9%,
    rgba(0, 0, 0, 0.9259) 12%,
    rgba(0, 0, 0, 0.8879) 15%,
    rgba(0, 0, 0, 0.8438) 18%,
    rgba(0, 0, 0, 0.7944) 21%,
    rgba(0, 0, 0, 0.7407) 24%,
    rgba(0, 0, 0, 0.6836) 27%,
    rgba(0, 0, 0, 0.6238) 30%,
    rgba(0, 0, 0, 0.5624) 33%,
    rgba(0, 0, 0, 0.5) 36%,
    rgba(0, 0, 0, 0.4376) 39%,
    rgba(0, 0, 0, 0.3762) 42%,
    rgba(0, 0, 0, 0.3164) 45%,
    rgba(0, 0, 0, 0.2593) 48%,
    rgba(0, 0, 0, 0.2056) 51%,
    rgba(0, 0, 0, 0.1562) 54%,
    rgba(0, 0, 0, 0.1121) 57%,
    rgba(0, 0, 0, 0.0741) 60%,
    rgba(0, 0, 0, 0.043) 63%,
    rgba(0, 0, 0, 0.0197) 66%,
    rgba(0, 0, 0, 0.0051) 69%,
    rgba(0, 0, 0, 0) 72%);
    }
  }

  /* Your reorder put the copy above the photograph in the plain section, so
     that seam moved to the photograph's TOP edge. The stacked fade was still
     pointing at its foot; re-aimed. */
  .split-feature__media--fade::after {
    background: linear-gradient(to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.9949) 3%,
    rgba(255, 255, 255, 0.9803) 6%,
    rgba(255, 255, 255, 0.957) 9%,
    rgba(255, 255, 255, 0.9259) 12%,
    rgba(255, 255, 255, 0.8879) 15%,
    rgba(255, 255, 255, 0.8438) 18%,
    rgba(255, 255, 255, 0.7944) 21%,
    rgba(255, 255, 255, 0.7407) 24%,
    rgba(255, 255, 255, 0.6836) 27%,
    rgba(255, 255, 255, 0.6238) 30%,
    rgba(255, 255, 255, 0.5624) 33%,
    rgba(255, 255, 255, 0.5) 36%,
    rgba(255, 255, 255, 0.4376) 39%,
    rgba(255, 255, 255, 0.3762) 42%,
    rgba(255, 255, 255, 0.3164) 45%,
    rgba(255, 255, 255, 0.2593) 48%,
    rgba(255, 255, 255, 0.2056) 51%,
    rgba(255, 255, 255, 0.1562) 54%,
    rgba(255, 255, 255, 0.1121) 57%,
    rgba(255, 255, 255, 0.0741) 60%,
    rgba(255, 255, 255, 0.043) 63%,
    rgba(255, 255, 255, 0.0197) 66%,
    rgba(255, 255, 255, 0.0051) 69%,
    rgba(255, 255, 255, 0) 72%);
  }
}


/* --------------------------------------------------------------------------
   40. Seam fix - fade the photograph, don't overlay the panel colour

   Painting the panel's 150deg gradient onto the media box could never match:
   the two boxes are different widths, so the same gradient angle resolves to
   different colours at the same height. Measured, that left an 8-level step at
   the join - a visible hairline.

   Instead the green now lives on the SECTION, the panel is transparent, and
   the photograph itself is masked to fade out. At the seam the photograph is
   100% transparent, so both sides are literally the same painted surface and
   the step cannot exist. The ::after overlay stays as a no-mask fallback.
   -------------------------------------------------------------------------- */
@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {

  .split-feature--green {
    background: linear-gradient(150deg, var(--green) 0%, var(--green-dark) 100%);
  }
  .split-feature--green .split-feature__panel { background: transparent; }

  /* the overlay is no longer needed - the photograph does the fading */
  .split-feature__media--fade-green::after { display: none; }

  .split-feature__media--fade-green img {
    -webkit-mask-image: linear-gradient(to left,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.0051) 3%,
    rgba(0, 0, 0, 0.0197) 6%,
    rgba(0, 0, 0, 0.043) 9%,
    rgba(0, 0, 0, 0.0741) 12%,
    rgba(0, 0, 0, 0.1121) 15%,
    rgba(0, 0, 0, 0.1562) 18%,
    rgba(0, 0, 0, 0.2056) 21%,
    rgba(0, 0, 0, 0.2593) 24%,
    rgba(0, 0, 0, 0.3164) 27%,
    rgba(0, 0, 0, 0.3762) 30%,
    rgba(0, 0, 0, 0.4376) 33%,
    rgba(0, 0, 0, 0.5) 36%,
    rgba(0, 0, 0, 0.5624) 39%,
    rgba(0, 0, 0, 0.6238) 42%,
    rgba(0, 0, 0, 0.6836) 45%,
    rgba(0, 0, 0, 0.7407) 48%,
    rgba(0, 0, 0, 0.7944) 51%,
    rgba(0, 0, 0, 0.8438) 54%,
    rgba(0, 0, 0, 0.8879) 57%,
    rgba(0, 0, 0, 0.9259) 60%,
    rgba(0, 0, 0, 0.957) 63%,
    rgba(0, 0, 0, 0.9803) 66%,
    rgba(0, 0, 0, 0.9949) 69%,
    rgba(0, 0, 0, 1) 72%);
            mask-image: linear-gradient(to left,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.0051) 3%,
    rgba(0, 0, 0, 0.0197) 6%,
    rgba(0, 0, 0, 0.043) 9%,
    rgba(0, 0, 0, 0.0741) 12%,
    rgba(0, 0, 0, 0.1121) 15%,
    rgba(0, 0, 0, 0.1562) 18%,
    rgba(0, 0, 0, 0.2056) 21%,
    rgba(0, 0, 0, 0.2593) 24%,
    rgba(0, 0, 0, 0.3164) 27%,
    rgba(0, 0, 0, 0.3762) 30%,
    rgba(0, 0, 0, 0.4376) 33%,
    rgba(0, 0, 0, 0.5) 36%,
    rgba(0, 0, 0, 0.5624) 39%,
    rgba(0, 0, 0, 0.6238) 42%,
    rgba(0, 0, 0, 0.6836) 45%,
    rgba(0, 0, 0, 0.7407) 48%,
    rgba(0, 0, 0, 0.7944) 51%,
    rgba(0, 0, 0, 0.8438) 54%,
    rgba(0, 0, 0, 0.8879) 57%,
    rgba(0, 0, 0, 0.9259) 60%,
    rgba(0, 0, 0, 0.957) 63%,
    rgba(0, 0, 0, 0.9803) 66%,
    rgba(0, 0, 0, 0.9949) 69%,
    rgba(0, 0, 0, 1) 72%);
  }

  @media (max-width: 880px) {
    /* stacked: the seam moves to the foot of the photograph */
    .split-feature__media--fade-green img {
      -webkit-mask-image: linear-gradient(to top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.0051) 3%,
    rgba(0, 0, 0, 0.0197) 6%,
    rgba(0, 0, 0, 0.043) 9%,
    rgba(0, 0, 0, 0.0741) 12%,
    rgba(0, 0, 0, 0.1121) 15%,
    rgba(0, 0, 0, 0.1562) 18%,
    rgba(0, 0, 0, 0.2056) 21%,
    rgba(0, 0, 0, 0.2593) 24%,
    rgba(0, 0, 0, 0.3164) 27%,
    rgba(0, 0, 0, 0.3762) 30%,
    rgba(0, 0, 0, 0.4376) 33%,
    rgba(0, 0, 0, 0.5) 36%,
    rgba(0, 0, 0, 0.5624) 39%,
    rgba(0, 0, 0, 0.6238) 42%,
    rgba(0, 0, 0, 0.6836) 45%,
    rgba(0, 0, 0, 0.7407) 48%,
    rgba(0, 0, 0, 0.7944) 51%,
    rgba(0, 0, 0, 0.8438) 54%,
    rgba(0, 0, 0, 0.8879) 57%,
    rgba(0, 0, 0, 0.9259) 60%,
    rgba(0, 0, 0, 0.957) 63%,
    rgba(0, 0, 0, 0.9803) 66%,
    rgba(0, 0, 0, 0.9949) 69%,
    rgba(0, 0, 0, 1) 72%);
              mask-image: linear-gradient(to top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.0051) 3%,
    rgba(0, 0, 0, 0.0197) 6%,
    rgba(0, 0, 0, 0.043) 9%,
    rgba(0, 0, 0, 0.0741) 12%,
    rgba(0, 0, 0, 0.1121) 15%,
    rgba(0, 0, 0, 0.1562) 18%,
    rgba(0, 0, 0, 0.2056) 21%,
    rgba(0, 0, 0, 0.2593) 24%,
    rgba(0, 0, 0, 0.3164) 27%,
    rgba(0, 0, 0, 0.3762) 30%,
    rgba(0, 0, 0, 0.4376) 33%,
    rgba(0, 0, 0, 0.5) 36%,
    rgba(0, 0, 0, 0.5624) 39%,
    rgba(0, 0, 0, 0.6238) 42%,
    rgba(0, 0, 0, 0.6836) 45%,
    rgba(0, 0, 0, 0.7407) 48%,
    rgba(0, 0, 0, 0.7944) 51%,
    rgba(0, 0, 0, 0.8438) 54%,
    rgba(0, 0, 0, 0.8879) 57%,
    rgba(0, 0, 0, 0.9259) 60%,
    rgba(0, 0, 0, 0.957) 63%,
    rgba(0, 0, 0, 0.9803) 66%,
    rgba(0, 0, 0, 0.9949) 69%,
    rgba(0, 0, 0, 1) 72%);
    }
  }
}