/* =============================================================
   Women's Light Foundation — Core stylesheet
   Mobile-first. Square geometry. Editorial restraint.
   ============================================================= */

/* -------------------------------------------------------------
   1. Reset & document
   ------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100svh;
}

body.is-locked { overflow: hidden; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

img { height: auto; }

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

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul, ol { padding: 0; list-style: none; }

/* -------------------------------------------------------------
   2. Typography
   ------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  line-height: var(--lh-heading);
  color: var(--color-text);
  font-weight: var(--fw-bold);
}

/* The reference site sets section headings in uppercase bold with
   positive tracking — the defining typographic gesture. */
.t-display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.t-h1 {
  font-size: var(--fs-h1);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
}

.t-h2 {
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
}

.t-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  line-height: var(--lh-snug);
}

.t-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--color-primary);
}

.t-lede {
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.1875rem);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

.t-small { font-size: var(--fs-small); }
.t-muted { color: var(--color-text-muted); }
.t-invert { color: var(--color-text-invert); }
.t-center { text-align: center; }

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

a:hover { color: var(--color-link-hover); }

/* Prose blocks — policy pages, articles */
.prose {
  max-width: var(--container-text);
  font-size: 1rem;
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

.prose > * + * { margin-top: var(--space-5); }

.prose h2 {
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: var(--border);
}

.prose h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  margin-top: var(--space-8);
}

.prose h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  margin-top: var(--space-6);
}

.prose ul, .prose ol { padding-left: var(--space-6); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: var(--space-2); }
.prose li::marker { color: var(--color-primary); }

.prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--wlf-teal-200);
}

.prose a:hover { text-decoration-color: currentColor; }

.prose blockquote {
  border-left: 3px solid var(--color-accent);
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  font-size: 1.125rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.prose th, .prose td {
  text-align: left;
  padding: var(--space-3);
  border-bottom: var(--border);
  vertical-align: top;
}

.prose th {
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  background: var(--color-bg-tint);
}

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* -------------------------------------------------------------
   3. Accessibility
   ------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

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

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: var(--color-text-invert);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-button);
}

.skip-link:focus {
  top: var(--space-3);
  color: var(--color-text-invert);
}

/* -------------------------------------------------------------
   4. Layout
   ------------------------------------------------------------- */
/* Reference container: width 90%, capped per breakpoint. Fluid margins
   keep the same proportional gutter at every width. */
.container {
  width: var(--container-w);
  max-width: var(--container);
  margin-inline: auto;
}

@media (max-width: 767px) {
  .container { width: 100%; padding-inline: var(--gutter); }
}

@media (min-width: 1400px) {
  .container { max-width: var(--container-wide); }
}

.container--text { max-width: calc(var(--container-text) + var(--gutter) * 2); }
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--tint { background: var(--color-bg-tint); }
.section--warm { background: var(--color-bg-warm); }
.section--deep { background: var(--color-primary-deep); color: var(--color-text-invert); }
.section--deep :is(h1, h2, h3, h4) { color: var(--color-text-invert); }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-8); }

.grid { display: grid; gap: var(--space-6); }

/* Section heading row: title left, "see more" right — reference pattern */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.section-head__text { max-width: 44rem; }
.section-head__sub { margin-top: var(--space-2); color: var(--color-text-muted); }

/* Accent rule to the left of a heading — the reference "In Brief" motif */
.section-head--ruled .section-head__text {
  border-left: 4px solid var(--color-accent);
  padding-left: var(--space-4);
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  color: var(--color-primary);
  white-space: nowrap;
}

.link-more svg { flex: 0 0 auto; transition: transform var(--dur) var(--ease); }

/* On a phone a long link ("Read our complaints and feedback mechanism",
   longer still in French) wider than the screen pushed the page sideways.
   It wraps there instead; the arrow stays attached to the last line. */
@media (max-width: 699px) {
  .link-more { white-space: normal; max-width: 100%; }
}
.link-more:hover svg { transform: translateX(4px); }

/* -------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  min-height: 48px; /* touch target */
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-invert);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-text-invert);
}

/* Gold is reserved for the single highest-value action: donating. */
.btn--donate {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--wlf-teal-900);
}

.btn--donate:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--wlf-teal-900);
}

.btn--outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--outline:hover {
  background: var(--color-primary);
  color: var(--color-text-invert);
}

.btn--ghost-invert {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--color-text-invert);
}

.btn--ghost-invert:hover {
  background: var(--color-text-invert);
  border-color: var(--color-text-invert);
  color: var(--color-primary-deep);
}

.btn--block { width: 100%; }
.btn--sm { min-height: 40px; padding: var(--space-2) var(--space-4); font-size: var(--fs-eyebrow); }

/* =============================================================
   6. HEADER — 80px bar, logo left, centred nav, utilities right
   Mirrors the reference site's header model.
   ============================================================= */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  padding-top: env(safe-area-inset-top, 0px);
  background: transparent;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.header.is-solid,
.header.is-open,
body:not(.has-hero) .header {
  background: var(--color-bg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: var(--header-h);
  width: var(--container-w);
  max-width: var(--container-wide);
  margin-inline: auto;
  transition: height var(--dur) var(--ease);
}

@media (max-width: 767px) {
  .header__inner { width: 100%; padding-inline: var(--gutter); }
}

.header.is-solid .header__inner { height: var(--header-h-scroll); }

/* ---- Logo lockup ---- */
.header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  color: var(--color-primary);
}

.header__logo img {
  height: 56px;
  width: auto;
  transition: height var(--dur) var(--ease);
}

.header.is-solid .header__logo img { height: 46px; }

.header__wordmark { display: none; line-height: 1.1; }

.header__wordmark-name {
  display: block;
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.header__wordmark-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

@media (min-width: 380px) { .header__wordmark { display: block; } }

/* ---- Nav: centred, as on the reference ---- */
.nav {
  display: none;
  flex: 1;
  justify-content: center;
}

.nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-4), 1.8vw, var(--space-8));
}

.nav__item { position: static; }

.nav__link {
  display: inline-flex;
  align-items: center;
  height: var(--header-h);
  padding: 0;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  line-height: 1.3;
  text-align: center;
  color: var(--color-text);
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  transition: color var(--dur-fast) var(--ease), height var(--dur) var(--ease);
}

.header.is-solid .nav__link { height: var(--header-h-scroll); }

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}

.nav__link:hover::after,
.nav__item.is-open .nav__link::after { transform: scaleX(1); }

/* ---- Utility cluster ---- */
.header__utils {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  margin-left: auto;
}

.header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  color: var(--color-text);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

.header__icon:hover { color: var(--color-primary); }

@media (min-width: 1100px) {
  .nav { display: flex; }
  .header__burger { display: none; }
}

/* ---- Over a photographic hero the chrome goes white ---- */
body.has-hero .header:not(.is-solid):not(.is-open) .header__wordmark-name,
body.has-hero .header:not(.is-solid):not(.is-open) .nav__link,
body.has-hero .header:not(.is-solid):not(.is-open) .header__icon,
body.has-hero .header:not(.is-solid):not(.is-open) .lang__btn { color: #fff; }

body.has-hero .header:not(.is-solid):not(.is-open) .header__wordmark-sub { color: rgba(255,255,255,.82); }

/* The emblem now carries a clean anti-aliased edge, so it needs only a
   soft shadow for separation over photography — no white halo. */
body.has-hero .header:not(.is-solid):not(.is-open) .header__logo img {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

/* ---- Mega menu: full-bleed panel ---- */
.megamenu {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  z-index: var(--z-megamenu);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-nav);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

.nav__item.is-open .megamenu { opacity: 1; visibility: visible; transform: translateY(0); }

.megamenu__inner {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  width: var(--container-w);
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-block: var(--space-10);
}

.megamenu__group-title {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.megamenu__link {
  display: block;
  padding: var(--space-2) 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease);
}

.megamenu__link:hover { color: var(--color-primary); }


/* =============================================================
   6b. Mobile drawer, burger and language menu
   These were lost when the header block was rewritten; without
   them the drawer renders inline on every page.
   ============================================================= */

/* ---- Language switcher ---- */
.lang {
  position: relative;
  display: flex;
  align-items: center;
}

.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  min-height: 44px;
  background: none;
  border: 0;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
}

.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility var(--dur-fast);
  z-index: var(--z-megamenu);
}

.lang.is-open .lang__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang__option {
  display: block;
  padding: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text);
}

.lang__option:hover { background: var(--color-bg-tint); color: var(--color-primary); }
.lang__option[aria-current="true"] { font-weight: var(--fw-bold); color: var(--color-primary); }

/* ---- Burger icon ---- */
.burger-icon { position: relative; width: 22px; height: 14px; }

.burger-icon span {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease),
              opacity var(--dur-fast) var(--ease),
              top var(--dur) var(--ease);
}

.burger-icon span:nth-child(1) { top: 0; }
.burger-icon span:nth-child(2) { top: 6px; }
.burger-icon span:nth-child(3) { top: 12px; }

[aria-expanded="true"] .burger-icon span:nth-child(1) { top: 6px; transform: rotate(45deg); }
[aria-expanded="true"] .burger-icon span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .burger-icon span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* ---- Mobile / tablet drawer ---- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer.is-open { transform: translateX(0); visibility: visible; }

/* Above the desktop breakpoint the drawer is never used */
@media (min-width: 1100px) { .drawer { display: none; } }

.drawer__inner { padding: var(--space-4) var(--gutter) var(--space-16); }

.drawer__section + .drawer__section { border-top: 1px solid var(--color-border); }

.drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
}

.drawer__toggle svg { transition: transform var(--dur) var(--ease); flex-shrink: 0; }
.drawer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer__toggle[aria-expanded="true"] { color: var(--color-primary); }

/* Collapsible panel via grid-template-rows, so height animates without JS measurement */
.drawer__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}

.drawer__panel > div { overflow: hidden; }
.drawer__toggle[aria-expanded="true"] + .drawer__panel { grid-template-rows: 1fr; }

.drawer__group-title {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

.drawer__link {
  display: block;
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  border-left: 2px solid var(--color-border);
  font-size: var(--fs-small);
  color: var(--color-text);
}

.drawer__link:hover { border-left-color: var(--color-accent); color: var(--color-primary); }

.drawer__footer {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-3);
}

/* The drawer's own language list is a plain stack, not a dropdown */
.drawer .lang { display: block; position: static; }
.drawer .lang__menu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0; }

/* -------------------------------------------------------------
   7. Hero
   ------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(88svh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--wlf-teal-900);
}

.hero__slides { position: absolute; inset: 0; }

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}

.hero__slide.is-active { opacity: 1; }

.hero__slide img,
.hero__slide video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Faces sit in the upper third of most photographs; a dead-centre crop
     cuts heads off. Content can override per image via --focal. */
  object-position: var(--focal, center 32%);
}

/* Slow drift adds life without distracting from the message */
.hero__slide.is-active img { animation: heroDrift 18s ease-out forwards; }

@keyframes heroDrift {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-active img { animation: none; }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.hero__content {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-10) var(--gutter) var(--space-16);
  color: #fff;
}

.hero__text { max-width: 60ch; }

.hero__eyebrow {
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.hero__title {
  color: #fff;
  text-wrap: balance;
}

.hero__desc {
  margin-top: var(--space-4);
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.125rem);
  line-height: var(--lh-snug);
  color: rgba(255, 255, 255, 0.92);
  max-width: 54ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.hero__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
}

.hero__dot {
  width: 34px; height: 3px;
  background: rgba(255, 255, 255, 0.4);
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: background-color var(--dur) var(--ease);
}

/* Enlarge the hit area without enlarging the visual mark */
.hero__dot::after {
  content: "";
  position: absolute;
  inset: -14px -4px;
}

.hero__dot.is-active { background: var(--color-accent); }

/* -------------------------------------------------------------
   8. In Brief — horizontally scrolling update cards
   ------------------------------------------------------------- */
.brief__scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(258px, 1fr);
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-4);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.brief__scroller::-webkit-scrollbar { height: 4px; }
.brief__scroller::-webkit-scrollbar-thumb { background: var(--color-border); }

.brief__card {
  scroll-snap-align: start;
  border: var(--border);
  padding: var(--space-5);
  background: var(--color-bg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.brief__card:hover {
  border-color: var(--color-primary);
  transform: translateY(-3px);
}

.brief__date {
  font-size: var(--fs-eyebrow);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.brief__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

@media (min-width: 720px) {
  .brief__scroller { grid-auto-columns: minmax(280px, 1fr); }
}

/* -------------------------------------------------------------
   9. Mission band + statistics
   ------------------------------------------------------------- */
.mission { text-align: center; }
.mission__lede { max-width: 62ch; margin-inline: auto; margin-top: var(--space-5); }

.stats {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.stat { text-align: center; }

.stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-bottom: var(--space-4);
  color: var(--color-primary);
}

.stat__icon svg { width: 40px; height: 40px; }

.stat__value {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  max-width: 30ch;
  margin-inline: auto;
}

/* auto-fit so three, four or five statistics all balance on one row */
@media (min-width: 640px) {
  .stats {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6) 0;
  }
  .stat { padding-inline: var(--space-4); }
  .stat + .stat { border-left: var(--border); }
}

/* -------------------------------------------------------------
   10. Pillar sections — text left, image cards right
   ------------------------------------------------------------- */
.pillar { display: grid; gap: var(--space-8); }

.pillar__intro { max-width: 42ch; }
.pillar__desc { margin-top: var(--space-4); color: var(--color-text-muted); }
.pillar__cta { margin-top: var(--space-6); }

.pillar__cards {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

@media (min-width: 900px) {
  .pillar {
    grid-template-columns: minmax(240px, 1fr) 2.1fr;
    gap: var(--space-12);
    align-items: start;
  }
}

/* Image card with caption over a gradient — the reference motif */
.tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--wlf-teal-800);
}

.tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focal, center 35%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.tile:hover img { transform: scale(1.05); }

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-card);
}

.tile__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-base);
  padding: var(--space-5);
  color: #fff;
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

.tile__label::after {
  content: "";
  display: block;
  width: 28px; height: 2px;
  margin-top: var(--space-3);
  background: var(--color-accent);
  transition: width var(--dur) var(--ease);
}

.tile:hover .tile__label::after { width: 56px; }

/* -------------------------------------------------------------
   11. Article cards
   ------------------------------------------------------------- */
.cards {
  display: grid;
  gap: var(--space-8) var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.card { display: flex; flex-direction: column; height: 100%; }

.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-bg-tint);
  margin-bottom: var(--space-4);
}

.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focal, center 35%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.card:hover .card__media img { transform: scale(1.04); }

.card__category {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.card__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

.card:hover .card__title { color: var(--color-primary); }
.card__title { transition: color var(--dur-fast) var(--ease); }

.card__excerpt {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: var(--lh-snug);
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: var(--border);
  font-size: var(--fs-eyebrow);
  color: var(--color-text-muted);
}

.card__meta > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.card__meta svg { width: 13px; height: 13px; color: var(--color-primary); flex-shrink: 0; }

/* A featured card spans two columns on wide screens */
@media (min-width: 900px) {
  .card--feature { grid-column: span 2; }
  .card--feature .card__media { aspect-ratio: 21 / 9; }
  .card--feature .card__title { font-size: var(--fs-h3); }
}

/* ---- Filter chips ---- */
.chips {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-8);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.chips::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-5);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border: var(--border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease);
}

.chip:hover { border-color: var(--color-primary); color: var(--color-primary); }

.chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-invert);
}

@media (min-width: 900px) { .chips { flex-wrap: wrap; overflow: visible; } }

/* -------------------------------------------------------------
   12. Logo strips (partners)
   ------------------------------------------------------------- */
.logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-top: var(--border);
  border-left: var(--border);
}

.logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-5);
  border-right: var(--border);
  border-bottom: var(--border);
  min-height: 130px;
}

.logo-cell img {
  max-height: 58px;
  width: auto;
  opacity: 0.65;
  filter: grayscale(1);
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}

.logo-cell:hover img { opacity: 1; filter: grayscale(0); }

/* -------------------------------------------------------------
   13. Call-to-action band
   ------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  /* Letterhead teal so the sweep divider above it is seamless */
  background: var(--wlf-teal-letterhead);
  color: #fff;
}

.cta-band__bg {
  position: absolute;
  inset: 0;
  opacity: 0.22;
}

.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }

.cta-band__inner {
  position: relative;
  z-index: var(--z-base);
  text-align: center;
  max-width: 54rem;
  margin-inline: auto;
}

.cta-band h2 { color: #fff; }
.cta-band p { margin-top: var(--space-4); color: rgba(255,255,255,0.88); }

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-8);
}

/* -------------------------------------------------------------
   14. Newsletter
   ------------------------------------------------------------- */
.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.input {
  flex: 1 1 220px;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--color-bg);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease);
}

.input:focus { border-color: var(--color-primary); }
.input::placeholder { color: var(--color-text-soft, #7A7879); }

.field { display: grid; gap: var(--space-2); }

.field label {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

.field__hint { font-size: var(--fs-eyebrow); color: var(--color-text-muted); }

textarea.input { min-height: 140px; resize: vertical; }

/* =============================================================
   15. FOOTER — three bands, mirroring the reference content model
   (brand + body text → social / caption / CTAs → sitemap → legal)
   ============================================================= */
.footer {
  background: var(--wlf-teal-900);
  color: rgba(255, 255, 255, 0.78);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.footer__container {
  width: var(--container-w);
  max-width: var(--container-wide);
  margin-inline: auto;
}

@media (max-width: 767px) {
  .footer__container { width: 100%; padding-inline: var(--gutter); }
}

.footer a { color: rgba(255, 255, 255, 0.78); transition: color var(--dur-fast) var(--ease); }
.footer a:hover { color: var(--color-accent); }

/* ---- Band 1: brand + engagement ---- */
.footer__top { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

.footer__top-grid {
  display: grid;
  gap: var(--space-12);
}

@media (min-width: 900px) {
  .footer__top-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-16);
    align-items: start;
  }
}

.footer__logo { height: 104px; width: auto; }

.footer__tagline {
  margin-top: var(--space-5);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: #fff;
  letter-spacing: 0.01em;
}

.footer__body {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
  max-width: 54ch;
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.footer__social a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--wlf-teal-900);
}

.footer__caption {
  margin-top: var(--space-8);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: #fff;
  line-height: var(--lh-snug);
}

.footer__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* ---- Band 2: sitemap columns ---- */
.footer__middle {
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer__columns {
  display: grid;
  gap: var(--space-8) var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.footer__col-title {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--space-4);
}

.footer__col-title a { color: #fff; }
.footer__col-title a:hover { color: var(--color-accent); }

.footer__col ul + ul { margin-top: var(--space-3); }
.footer__col li + li { margin-top: var(--space-3); }

.footer__col a {
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}

/* ---- Band 3: legal ---- */
.footer__legal {
  padding-block: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer__legal-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  font-size: var(--fs-eyebrow);
}

.footer__copyright { max-width: 78ch; line-height: var(--lh-snug); }

.footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.footer__legal-links li { display: inline-flex; align-items: center; }

.footer__legal-links li + li::before {
  content: "\00B7";
  margin-right: var(--space-4);
  color: rgba(255, 255, 255, 0.35);
}


/* -------------------------------------------------------------
   16. PWA install prompt
   ------------------------------------------------------------- */
.pwa-prompt {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-modal);
  max-width: 440px;
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-bg);
  border: var(--border);
  border-top: 3px solid var(--color-accent);
  box-shadow: var(--shadow-lg);
  transform: translateY(calc(100% + var(--space-8)));
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease), visibility var(--dur-slow);
}

.pwa-prompt.is-visible { transform: translateY(0); opacity: 1; visibility: visible; }

.pwa-prompt__icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
}

.pwa-prompt__body { flex: 1; min-width: 0; }

.pwa-prompt__title {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.pwa-prompt__text {
  font-size: var(--fs-eyebrow);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  line-height: var(--lh-snug);
}

.pwa-prompt__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.pwa-prompt__close {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--color-text-muted);
  cursor: pointer;
}

.pwa-prompt__close:hover { color: var(--color-text); }

/* iOS has no beforeinstallprompt — we show manual instructions instead */
.pwa-prompt__ios { display: none; font-size: var(--fs-eyebrow); color: var(--color-text-muted); margin-top: var(--space-3); }
.pwa-prompt.is-ios .pwa-prompt__ios { display: block; }
.pwa-prompt.is-ios .pwa-prompt__actions { display: none; }

/* -------------------------------------------------------------
   17. Cookie notice
   ------------------------------------------------------------- */
.cookie-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: var(--z-toast);
  background: var(--wlf-teal-900);
  color: rgba(255, 255, 255, 0.9);
  padding: var(--space-5) var(--gutter);
  padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.cookie-bar.is-visible { transform: translateY(0); }

.cookie-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--container);
  margin-inline: auto;
}

.cookie-bar p { flex: 1 1 320px; font-size: var(--fs-small); line-height: var(--lh-snug); }
.cookie-bar a { color: var(--color-accent); text-decoration: underline; }
.cookie-bar__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* -------------------------------------------------------------
   18. Breadcrumbs & page headers
   ------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-eyebrow);
  color: var(--color-text-muted);
}

.breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); }
.breadcrumb li + li::before { content: "/"; color: var(--color-border); }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: var(--fw-medium); }

.page-head {
  padding-top: calc(var(--header-h) + var(--space-10));
  padding-bottom: var(--space-10);
  background: var(--color-bg-tint);
}

.page-head__title { margin-top: var(--space-5); text-wrap: balance; }
.page-head__lede { margin-top: var(--space-5); max-width: 60ch; }

/* Photographic page header variant */
.page-head--image {
  position: relative;
  background: var(--wlf-teal-800);
  color: #fff;
  min-height: clamp(340px, 52svh, 560px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.page-head--image img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focal, center 35%);
}

.page-head--image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.page-head--image > .container { position: relative; z-index: var(--z-base); }
.page-head--image :is(h1, .breadcrumb, .page-head__lede) { color: #fff; }
.page-head--image .breadcrumb a,
.page-head--image .breadcrumb [aria-current="page"] { color: rgba(255,255,255,0.85); }
.page-head--image .breadcrumb li + li::before { color: rgba(255,255,255,0.45); }

/* -------------------------------------------------------------
   19. Utilities
   ------------------------------------------------------------- */
.flow > * + * { margin-top: var(--space-6); }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.hide { display: none !important; }

@media (min-width: 900px) { .hide-desktop { display: none !important; } }
@media (max-width: 899px) { .hide-mobile { display: none !important; } }

/* Lazy-loaded media fades in rather than popping */
.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.fade-in.is-visible { opacity: 1; transform: none; }

/* -------------------------------------------------------------
   20. Print
   ------------------------------------------------------------- */
@media print {
  .header, .footer__nav, .pwa-prompt, .cookie-bar, .hero__controls, .chips { display: none !important; }
  body { color: #000; background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}

/* -------------------------------------------------------------
   21. Contact page
   ------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: var(--space-12);
}

/* Grid columns otherwise grow to their widest unbreakable item, and on a
   narrow phone that pushed the whole contact page wider than the screen. */
.contact-grid > * { min-width: 0; }

@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
  }
}

.contact-list {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.contact-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding-bottom: var(--space-6);
  border-bottom: var(--border);
}

.contact-item:last-child { border-bottom: 0; padding-bottom: 0; }

.contact-item__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: var(--color-bg-tint);
  color: var(--color-primary);
}

.contact-item__value {
  margin-top: var(--space-1);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
}

.contact-item__value a { color: var(--color-text); }
.contact-item__value a:hover { color: var(--color-primary); }

.office-grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.office {
  border: var(--border);
  border-top: 3px solid var(--color-accent);
  padding: var(--space-5);
}

.contact-card {
  border: var(--border);
  padding: var(--space-6);
  background: var(--color-bg);
}

@media (min-width: 600px) { .contact-card { padding: var(--space-8); } }

.contact-form {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.contact-note {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--color-bg-tint);
  border-left: 4px solid var(--color-primary);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}

/* Safeguarding gets the accent so it reads as distinct from general contact */
.contact-note--alert { border-left-color: var(--color-accent); background: var(--color-bg-warm); }

/* -------------------------------------------------------------
   22. Team / leadership
   ------------------------------------------------------------- */
.team-grid {
  display: grid;
  gap: var(--space-8) var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}

.person__photo {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-bg-tint);
  margin-bottom: var(--space-4);
}

.person__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focal, center 18%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.person:hover .person__photo img { transform: scale(1.03); }

.person__name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.person__role {
  margin-top: var(--space-1);
  font-size: var(--fs-small);
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

.person__bio {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: var(--lh-snug);
}

.person__contact {
  margin-top: var(--space-3);
  font-size: var(--fs-eyebrow);
}

.person__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
}

.person__contact a:hover { color: var(--color-primary); }

/* Featured person (the founder) gets a wider two-column treatment */
.person--lead {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 800px) {
  .person--lead { grid-template-columns: minmax(240px, 340px) 1fr; gap: var(--space-12); }
  .person--lead .person__photo { margin-bottom: 0; }
}

.person--lead .person__name { font-size: var(--fs-h2); text-transform: uppercase; letter-spacing: var(--ls-heading); }
.person--lead .person__bio { font-size: var(--fs-body); line-height: var(--lh-relaxed); }

/* -------------------------------------------------------------
   23. Section rhythm
   Consecutive sections on the same background would otherwise stack
   two full paddings and leave a dead band between them.
   ------------------------------------------------------------- */
.section + .section:not([class*="--"]) { padding-top: 0; }
.section--tight + .section--tight { padding-top: 0; }

/* =============================================================
   24. Programme pages
   ============================================================= */

/* ---- At a glance ---- */
.glance {
  display: grid;
  gap: var(--space-8) var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.glance__item { text-align: center; padding-inline: var(--space-3); }
.glance__item + .glance__item { border-left: 1px solid var(--color-border); }

.glance__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.glance__value {
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.glance__label {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: var(--lh-snug);
}

/* ---- Two-column split: sticky lead + flowing body ---- */
.split { display: grid; gap: var(--space-8); }

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-16);
    align-items: start;
  }
  .split__lead { position: sticky; top: calc(var(--header-h) + var(--space-8)); }
}

.split__body > *:first-child { margin-top: 0; }
.split__body.prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* ---- Interventions ---- */
.interventions {
  display: grid;
  gap: var(--space-8) var(--space-10);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.intervention { padding-top: var(--space-5); border-top: 2px solid var(--color-primary); }

.intervention__num {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.intervention__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.intervention__text {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}

/* ---- Tick list ---- */
.ticklist { display: grid; gap: var(--space-4); }

.ticklist li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  line-height: var(--lh-snug);
}

.ticklist li:last-child { border-bottom: 0; padding-bottom: 0; }

.ticklist__mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  background: var(--color-primary);
  color: #fff;
  margin-top: 1px;
}

/* ---- Pill list (standards) ---- */
.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.pill {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  background: var(--color-bg-tint);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

/* ---- Goals ---- */
.goals { display: grid; gap: 0; }

.goal {
  display: grid;
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  line-height: var(--lh-snug);
}

.goal:last-child { border-bottom: 0; }

@media (min-width: 720px) {
  .goal { grid-template-columns: 180px 1fr; align-items: baseline; }
}

.goal__horizon {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-primary);
}

/* ---- Lateral pillar navigation ---- */
.pill-nav {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.pill-nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.pill-nav__item:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-tint);
  color: var(--color-primary);
}

.pill-nav__item svg { flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.pill-nav__item:hover svg { transform: translateX(4px); }

/* =============================================================
   25. Programme landing (What We Do)
   ============================================================= */
.pillar-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.pillar-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.pillar-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
}

.pillar-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--wlf-teal-800);
}

.pillar-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focal, center 35%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.pillar-card:hover .pillar-card__media img { transform: scale(1.04); }

.pillar-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-6);
}

.pillar-card__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.pillar-card__text {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}

.pillar-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-5);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-primary);
}

.pillar-card__more svg { transition: transform var(--dur) var(--ease); }
.pillar-card:hover .pillar-card__more svg { transform: translateX(4px); }

/* ---- SDG alignment grid ---- */
.sdg-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.sdg {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-tint);
}

.sdg__num {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-primary);
}

.sdg__name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.sdg__note {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: var(--lh-snug);
}

/* -------------------------------------------------------------
   26. Letterhead sweep divider
   Reproduces the curved band on the Foundation's official
   documents, so print and web share one identity.
   ------------------------------------------------------------- */
.wave {
  position: relative;
  width: 100%;
  line-height: 0;
  background: var(--wave-ground, var(--color-bg));
  pointer-events: none;
}

.wave svg {
  display: block;
  width: 100%;
  height: clamp(48px, 6vw, 92px);
}

/* The top variant is the same curve mirrored, matching the way the
   letterhead bands mirror each other at the head and foot of a page. */
.wave--top svg { transform: scaleY(-1); }

/* Sits flush against the section it closes, with no seam */
.wave + .section,
.section + .wave { margin-top: 0; }

/* -------------------------------------------------------------
   27. FAQ
   ------------------------------------------------------------- */
.faq-nav ul { margin-top: var(--space-4); display: grid; gap: var(--space-1); }

.faq-nav a {
  display: block;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: 2px solid var(--color-border);
  font-size: var(--fs-small);
  color: var(--color-text);
}

.faq-nav a:hover { border-left-color: var(--color-accent); color: var(--color-primary); }

.faq-nav__help {
  margin-top: var(--space-8);
  padding: var(--space-5);
  background: var(--color-bg-tint);
  border-left: 3px solid var(--color-accent);
}

.faq-group + .faq-group { margin-top: var(--space-12); }

.faq-group__title {
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-primary);
  margin-bottom: var(--space-2);
  scroll-margin-top: calc(var(--header-h) + var(--space-6));
}

.faq-item { border-bottom: 1px solid var(--color-border); }

.faq-item__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  cursor: pointer;
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  list-style: none;
  transition: color var(--dur-fast) var(--ease);
}

/* Remove the native disclosure triangle across engines */
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::marker { content: ""; }

.faq-item__q:hover { color: var(--color-primary); }

.faq-item__marker {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.faq-item[open] .faq-item__marker {
  transform: rotate(45deg);
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.faq-item__a {
  padding-bottom: var(--space-6);
  max-width: 68ch;
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}

/* Keyboard users need to see which question has focus */
.faq-item__q:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* -------------------------------------------------------------
   28. Policy documents
   ------------------------------------------------------------- */
.policy-status {
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  padding: var(--space-5);
  background: var(--color-bg);
}

.policy-status dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
  font-size: var(--fs-small);
}

.policy-status dt {
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  align-self: center;
}

.policy-status dd { margin: 0; }

.policy-toc { margin-top: var(--space-8); }

.policy-toc ol {
  margin-top: var(--space-4);
  counter-reset: toc;
  display: grid;
  gap: var(--space-1);
}

.policy-toc li { counter-increment: toc; }

.policy-toc a {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: 2px solid var(--color-border);
  font-size: var(--fs-small);
  color: var(--color-text);
}

.policy-toc a::before {
  content: counter(toc);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  min-width: 1.2em;
}

.policy-toc a:hover { border-left-color: var(--color-accent); color: var(--color-primary); }

.policy-section { scroll-margin-top: calc(var(--header-h) + var(--space-6)); }
.policy-section + .policy-section { margin-top: var(--space-10); }

.policy-section__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-primary);
  margin-bottom: var(--space-5);
}

.policy-section__num {
  flex-shrink: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

/* The prose block inside a policy section should not re-draw a rule */
.policy-section .prose h2 { border-top: 0; padding-top: 0; margin-top: var(--space-8); }
.policy-section .prose > *:first-child { margin-top: 0; }

.policy-report {
  margin-top: var(--space-10);
  padding: var(--space-6);
  background: var(--color-bg-warm);
  border-left: 4px solid var(--color-accent);
}

.policy-report ul { list-style: none; }

.policy-report li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
}

.policy-report svg { color: var(--color-primary); flex-shrink: 0; }

/* ---- Policy index ---- */
.policy-groups { display: grid; gap: var(--space-12); }

.policy-list {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.policy-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  color: var(--color-text);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.policy-card:hover {
  background: var(--color-bg-tint);
  border-left-color: var(--color-accent);
  transform: translateY(-2px);
  color: var(--color-text);
}

.policy-card__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.policy-card__desc { font-size: var(--fs-small); color: var(--color-text-muted); line-height: var(--lh-snug); }

/* -------------------------------------------------------------
   29. Founder profile
   ------------------------------------------------------------- */
.founder { display: grid; gap: var(--space-10); }

@media (min-width: 900px) {
  .founder {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: var(--space-16);
    align-items: start;
  }
  .founder__aside { position: sticky; top: calc(var(--header-h) + var(--space-8)); }
}

.founder__portrait {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-bg-tint);
  border-bottom: 4px solid var(--color-accent);
}

.founder__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focal, center 20%);
}

.founder__card {
  padding: var(--space-5);
  background: var(--color-bg-tint);
}

.founder__name {
  margin-top: var(--space-2);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.founder__alias { margin-top: var(--space-1); font-size: var(--fs-small); color: var(--color-text-muted); }

.founder__facts {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-small);
}

.founder__facts dt {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.founder__facts dd { margin: var(--space-1) 0 0; }

.founder__record {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 2px solid var(--color-primary);
}

.record-list { display: grid; gap: var(--space-5); margin-top: var(--space-6); }

.record {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.record:last-child { border-bottom: 0; padding-bottom: 0; }

.record__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: var(--color-bg-tint);
  color: var(--color-primary);
}

.record__title { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.record__text { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--color-text-muted); line-height: var(--lh-relaxed); }

/* =============================================================
   30. Chrome corrections — match the reference site's treatment
   The reference footer is a LIGHT band with dark text, and its
   mega menu is a dark translucent panel over the hero. The
   earlier build had both inverted.
   ============================================================= */

/* ---------------- Mega menu: dark panel, as on the reference ---- */
.megamenu {
  background: rgba(4, 52, 58, 0.97);
  border-top: 0;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}

@supports (backdrop-filter: blur(12px)) {
  .megamenu { background: rgba(4, 52, 58, 0.88); backdrop-filter: blur(14px); }
}

.megamenu__inner { padding-block: var(--space-10) var(--space-12); }

.megamenu__group-title {
  color: var(--wlf-gold-400);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
}

.megamenu__link {
  color: rgba(255, 255, 255, 0.88);
  padding: var(--space-2) 0;
}

.megamenu__link:hover,
.megamenu__link[aria-current="page"] { color: #fff; }

.megamenu__link[aria-current="page"] { font-weight: var(--fw-semibold); }

/* ---------------- Footer: light band, as on the reference ------- */
.footer {
  background: var(--wlf-teal-050);
  color: var(--color-text);
}

.footer a { color: var(--color-text); }
.footer a:hover { color: var(--color-primary); }

.footer__top { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem); }

/* Reference places the brand block left and engagement block right */
@media (min-width: 900px) {
  .footer__top-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

.footer__logo { height: 104px; width: auto; }

.footer__tagline {
  margin-top: var(--space-4);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  letter-spacing: 0.01em;
}

.footer__body { color: var(--color-text-muted); max-width: 52ch; }

/* Social: plain monochrome marks, not bordered boxes */
.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: flex-start;
}

.footer__social a {
  width: auto; height: auto;
  border: 0;
  color: var(--color-primary);
  padding: var(--space-1);
}

.footer__social a:hover { background: transparent; color: var(--color-accent-hover); }
.footer__social svg { width: 22px; height: 22px; }

@media (min-width: 900px) { .footer__social { justify-content: flex-end; } }

.footer__caption {
  margin-top: var(--space-6);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

@media (min-width: 900px) {
  .footer__caption, .footer__ctas { text-align: right; justify-content: flex-end; }
}

/* Reference CTA buttons are outlined with a chevron, not filled */
.footer__ctas .btn--ghost-invert {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}

.footer__ctas .btn--ghost-invert:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.footer__middle {
  border-top: 1px solid rgba(0, 94, 98, 0.22);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
}

.footer__col-title { color: var(--color-primary); }
.footer__col-title a { color: var(--color-primary); }
.footer__col-title a:hover { color: var(--color-accent-hover); }
.footer__col a { color: var(--color-text-muted); }
.footer__col a:hover { color: var(--color-primary); }

/* ---- Legal row: centred, as on the reference ---- */
.footer__legal {
  border-top: 1px solid rgba(0, 94, 98, 0.22);
  padding-block: var(--space-6);
}

.footer__legal-inner {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
}

.footer__copyright { color: var(--color-text-muted); max-width: 72ch; }

.footer__legal-links { justify-content: center; }
.footer__legal-links a { color: var(--color-text-muted); }
.footer__legal-links a:hover { color: var(--color-primary); }
.footer__legal-links li + li::before { color: var(--color-primary); opacity: 0.5; }

/* The letterhead sweep sits above a light footer, so it needs the
   light ground behind it rather than white. */
.footer-wave { background: var(--color-bg); }

/* =============================================================
   31. Mega menu — floating rounded panel, matching the reference
   The reference panel is NOT full-bleed: it is a content-sized,
   rounded, dark translucent card centred under the bar, with a
   caret pointing at the hovered nav item.
   ============================================================= */
.megamenu {
  /* JS sets --menu-left so the panel sits under the item that opened it.
     Falls back to a page-centred position before measurement. */
  left: var(--menu-left, 50%);
  right: auto;
  transform: translateY(-6px);
  width: max-content;
  max-width: min(94vw, 1180px);
  top: calc(100% - 6px);
  border-radius: 14px;
  border-top: 0;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.32);
  overflow: visible;
}

.nav__item.is-open .megamenu { transform: translateY(0); }

/* Caret pointing at the hovered item. JS sets --caret-x. */
.megamenu::before {
  content: "";
  position: absolute;
  top: -9px;
  left: var(--caret-x, 50%);
  width: 20px; height: 10px;
  transform: translateX(-50%);
  background: inherit;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transition: left var(--dur) var(--ease);
}

.megamenu__inner {
  width: auto;
  max-width: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(170px, auto);
  gap: var(--space-10);
  padding: var(--space-10) var(--space-12);
  margin: 0;
}

/* Many-column menus wrap to a second row rather than overflowing */
@media (max-width: 1099px) {
  .megamenu__inner { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* Group heading: mint, uppercase, with a short rule beneath the text only */
.megamenu__group-title {
  display: inline-block;
  color: #8FD3B0;
  border-bottom: 0;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
  position: relative;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
}

.megamenu__group-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 46px; height: 1px;
  background: rgba(255, 255, 255, 0.45);
}

.megamenu__link {
  font-size: 1rem;
  font-weight: var(--fw-regular);
  color: rgba(255, 255, 255, 0.94);
  padding: var(--space-2) 0;
  white-space: nowrap;
}

.megamenu__link:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* =============================================================
   32. Footer — bold, dark link set as on the reference
   ============================================================= */

/* Reference separates its bands with a fine coloured rule */
.footer__middle,
.footer__legal { border-top: 1px solid var(--color-primary); }

.footer__columns {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-10) var(--space-8);
}

.footer__col-title {
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wlf-teal-900);
  margin-bottom: var(--space-5);
}

.footer__col-title a { color: var(--wlf-teal-900); }

/* The defining detail: footer links are bold and dark, not muted */
.footer__col li + li { margin-top: var(--space-4); }

.footer__col a {
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  color: var(--wlf-teal-900);
  line-height: 1.35;
}

.footer__col a:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Brand block */
.footer__tagline {
  font-size: 1rem;
  font-weight: var(--fw-medium);
  font-style: italic;
  color: var(--color-text-muted);
  letter-spacing: 0;
}

.footer__body { color: var(--wlf-teal-900); font-size: 0.875rem; line-height: 1.7; }

/* Social marks: small, dark, plain */
.footer__social a { color: var(--wlf-teal-900); }
.footer__social svg { width: 20px; height: 20px; }

.footer__caption {
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  color: var(--wlf-teal-900);
}

/* Reference CTA buttons: outlined, left-aligned label, chevron right */
.footer__ctas { flex-direction: column; align-items: stretch; gap: var(--space-4); max-width: 230px; }

@media (min-width: 900px) { .footer__ctas { margin-left: auto; } }

.footer__ctas .btn {
  justify-content: space-between;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  padding: var(--space-3) var(--space-5);
  border-width: 1px;
}

.footer__ctas .btn::after {
  content: "›";
  font-size: 1.25rem;
  line-height: 1;
  font-weight: var(--fw-regular);
}

.footer__ctas .btn--donate {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--wlf-teal-900);
}

.footer__ctas .btn--ghost-invert {
  background: transparent;
  border-color: var(--wlf-teal-900);
  color: var(--wlf-teal-900);
}

.footer__ctas .btn--ghost-invert:hover {
  background: var(--wlf-teal-900);
  border-color: var(--wlf-teal-900);
  color: #fff;
}

/* Legal row */
.footer__copyright { color: var(--wlf-teal-900); }
.footer__legal-links a { color: var(--wlf-teal-900); font-weight: var(--fw-medium); }
.footer__legal-links a:hover { color: var(--color-primary); text-decoration: underline; }

/* -------------------------------------------------------------
   33. Media — gallery and video library
   ------------------------------------------------------------- */
.album + .album, .video-group + .video-group { margin-top: var(--space-16); }

.photo-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.photo figure { margin: 0; height: 100%; display: flex; flex-direction: column; }

.photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--focal, center 35%);
  background: var(--color-bg-tint);
  transition: transform var(--dur-slow) var(--ease-out);
}

.photo figure:hover img { transform: scale(1.02); }

.photo figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: var(--lh-snug);
}

/* First photo in an album leads at double width on wide screens */
@media (min-width: 900px) {
  .photo--wide { grid-column: span 2; }
  .photo--wide img { aspect-ratio: 16 / 9; }
}

/* ---- Video library ---- */
.video-grid {
  display: grid;
  gap: var(--space-8) var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--wlf-teal-900);
  cursor: pointer;
}

.video-facade img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease);
}

.video-facade:hover img { transform: scale(1.04); opacity: 0.9; }

.video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.video-play__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px; height: 62px;
  border-radius: 999px;
  background: rgba(240, 160, 32, 0.95);
  color: var(--wlf-teal-900);
  padding-left: 4px;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.video-facade:hover .video-play__mark { transform: scale(1.08); background: var(--wlf-gold-400); }
.video-play:focus-visible .video-play__mark { outline: 3px solid #fff; outline-offset: 3px; }

.video-badge {
  position: absolute;
  top: var(--space-3); left: var(--space-3);
  padding: 2px var(--space-2);
  background: rgba(4, 52, 58, 0.85);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.video-card__title {
  margin-top: var(--space-4);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.video-card__text {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}

.video-card__link { margin-top: var(--space-3); font-size: var(--fs-eyebrow); }

.video-card__link a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

/* =============================================================
   34. Type scale correction
   -------------------------------------------------------------
   Measured against the reference stylesheet, whose scale is
   12 / 14 / 16 / 18 / 20 / 22 / 24 / 28 / 30 / 36 / 48 with a
   16px base. Reference uses 14px (text-sm) sparingly, for
   metadata only — body copy is 16px and lead text 18px.

   The earlier build used 14px for a great deal of real body
   copy, which is why the site read small. Everything below
   promotes genuine body copy back to 16px, and lead-in copy
   to 18px, leaving 14px for dates, captions and document
   metadata where the reference also uses it.
   ============================================================= */

/* ---- Lead / intro copy: 18px, the reference's text-lg ---- */
.t-lede {
  font-size: 1.125rem;
  line-height: 1.7;
}

@media (min-width: 900px) {
  .t-lede { font-size: 1.125rem; }
}

/* ---- Prose: 18px body, matching reference article text ---- */
.prose { font-size: 1.125rem; line-height: 1.7; }
.prose li { font-size: 1.125rem; }

/* ---- Section subtitles are body copy, not metadata ---- */
.section-head__sub { font-size: 1rem; line-height: 1.6; }

/* ---- Cards ---- */
.card__title { font-size: 1.125rem; }
.card__excerpt { font-size: 1rem; line-height: 1.6; }

/* ---- Programme pages ---- */
.intervention__title { font-size: 1.125rem; }
.intervention__text  { font-size: 1rem; line-height: 1.65; }
.glance__label       { font-size: 1rem; line-height: 1.5; }
.pillar-card__title  { font-size: 1.125rem; }
.pillar-card__text   { font-size: 1rem; line-height: 1.6; }
.sdg__name           { font-size: 1.125rem; }
.sdg__note           { font-size: 1rem; line-height: 1.55; }
.ticklist li         { font-size: 1rem; }
.goal                { font-size: 1rem; }

/* ---- Home ---- */
.stat__label   { font-size: 1rem; line-height: 1.5; }
.brief__title  { font-size: 1rem; }
.tile__label   { font-size: 1.125rem; }

/* ---- People ---- */
.person__name  { font-size: 1.125rem; }
.person__role  { font-size: 1rem; }
.person__bio   { font-size: 1rem; line-height: 1.65; }
.record__title { font-size: 1.125rem; }
.record__text  { font-size: 1rem; line-height: 1.65; }
.founder__facts { font-size: 1rem; }

/* ---- Media ---- */
.video-card__title { font-size: 1.125rem; }
.video-card__text  { font-size: 1rem; line-height: 1.6; }
.photo figcaption  { font-size: 0.875rem; }

/* ---- FAQ ---- */
.faq-item__q { font-size: 1.125rem; }
.faq-item__a { font-size: 1rem; line-height: 1.7; }

/* ---- Policies ---- */
.policy-section__title { font-size: 1.25rem; }
.policy-card__title    { font-size: 1.125rem; }
.policy-card__desc     { font-size: 1rem; line-height: 1.55; }
.policy-toc a          { font-size: 1rem; }

/* ---- Contact ---- */
.contact-item__value { font-size: 1.125rem; }
.contact-note        { font-size: 1rem; line-height: 1.7; }
.office address      { font-size: 1rem; }

/* ---- Donate ---- */
.tier__impact   { font-size: 1rem; line-height: 1.55; }
.channel__meta  { font-size: 1rem; line-height: 1.6; }

/* ---- Navigation and footer ---- */
.megamenu__link { font-size: 1rem; }
.footer__col a  { font-size: 1rem; }
.footer__body   { font-size: 1rem; line-height: 1.7; }
.drawer__link   { font-size: 1rem; }

/* ---- Forms ---- */
.field label { font-size: 1rem; }
.input       { font-size: 1rem; }

/* ---- Buttons: reference uses 14px, not 12px ---- */
.btn     { font-size: 0.875rem; }
.btn--sm { font-size: 0.75rem; }

/* ---- 14px is retained only where the reference also uses it:
        dates, meta rows, chips, captions, document status ---- */
.card__meta,
.brief__date,
.breadcrumb,
.policy-status dl,
.field__hint,
.footer__legal-inner { font-size: 0.875rem; }

/* -------------------------------------------------------------
   35. Get Involved — roles, ways, notices, donate channels
   ------------------------------------------------------------- */
.empty-state {
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  padding: var(--space-8);
  background: var(--color-bg-tint);
  max-width: 68ch;
}

.notice {
  padding: var(--space-6);
  background: var(--color-bg-tint);
  border-left: 4px solid var(--color-primary);
  line-height: 1.7;
}

.notice--alert   { background: var(--color-bg-warm); border-left-color: var(--color-accent); }
.notice--pending { background: var(--color-bg); border-left-color: var(--color-accent); margin-bottom: var(--space-8); }

/* ---- Vacancies ---- */
.roles { display: grid; gap: var(--space-4); }

.role {
  display: grid;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  background: var(--color-bg);
}

@media (min-width: 860px) {
  .role { grid-template-columns: 1fr auto auto; gap: var(--space-8); align-items: center; }
}

.role__title { font-size: 1.125rem; font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.role__text  { margin-top: var(--space-2); color: var(--color-text-muted); line-height: 1.6; }

.role__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
  font-size: 0.875rem;
  white-space: nowrap;
}

.role__meta dt {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.role__meta dd { margin: 0; font-weight: var(--fw-semibold); }

/* ---- Ways to volunteer ---- */
.ways {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.way {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  background: var(--color-bg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.way:hover { transform: translateY(-3px); border-color: var(--color-primary); }

.way__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  background: var(--color-bg-tint);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.way__title { font-size: 1.125rem; font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.way__text  { margin-top: var(--space-3); color: var(--color-text-muted); line-height: 1.65; }

.way__commitment {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-5);
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

.way__commitment svg { flex-shrink: 0; }

/* ---- Donate: impact tiers ---- */
.tiers {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

.tier {
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  text-align: center;
  align-items: center;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.tier:hover { border-color: var(--color-accent); transform: translateY(-3px); }

.tier__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 999px;
  background: var(--color-bg-tint);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.tier__amount {
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.tier__usd    { font-size: 0.875rem; color: var(--color-text-muted); margin-top: 2px; }
.tier__impact { margin-top: var(--space-4); color: var(--color-text-muted); }

/* ---- Donate: channels ---- */
.channels {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.channel {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}

.channel--pending { opacity: 0.72; border-style: dashed; }

.channel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: var(--color-bg-tint);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.channel__title { font-size: 1rem; font-weight: var(--fw-bold); }
.channel__value { margin-top: var(--space-3); font-size: 1.25rem; font-weight: var(--fw-bold); color: var(--color-primary); }
.channel__meta  { margin-top: var(--space-2); color: var(--color-text-muted); }

.channel__details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
  font-size: 0.875rem;
}

.channel__details dt {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  align-self: center;
}

.channel__details dd { margin: 0; font-weight: var(--fw-semibold); }

/* -------------------------------------------------------------
   36. Footer type hierarchy — corrected
   The reference footer sets column HEADINGS larger than the links
   beneath them, and both are bold. An earlier rule left the
   headings at 15px while a later one raised the links to 16px,
   inverting the hierarchy.
   ------------------------------------------------------------- */
.footer__col-title {
  font-size: 1.125rem;            /* 18px — reference text-lg */
  font-weight: var(--fw-bold);    /* 700 */
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--wlf-teal-900);
  margin-bottom: var(--space-5);
}

.footer__col-title a {
  color: var(--wlf-teal-900);
  font-size: inherit;
  font-weight: inherit;
}

/* Links: one step down from the heading, and bold */
.footer__col a {
  font-size: 1rem;                /* 16px — reference text-base */
  font-weight: var(--fw-bold);    /* 700 */
  color: var(--wlf-teal-900);
  line-height: 1.4;
}

.footer__col li + li { margin-top: var(--space-4); }

/* Quick Links column matches the others exactly */
.footer__col ul + ul { margin-top: var(--space-4); }

/* -------------------------------------------------------------
   37. Search
   ------------------------------------------------------------- */
.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
  max-width: 44rem;
}

.search-form__input { flex: 1 1 260px; }

.results { display: grid; gap: var(--space-6); list-style: none; }

.result {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.result:last-child { border-bottom: 0; }

.result__type {
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.result__title { font-size: 1.25rem; font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.result__title a { color: var(--color-text); }
.result__title a:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

.result__excerpt {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.result__url {
  margin-top: var(--space-2);
  font-size: 0.875rem;
  color: var(--color-primary);
  word-break: break-word;
}

.search-suggest {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.search-suggest__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* =============================================================
   38. Mobile header + drawer + video lightbox
   Corrects a real failure: the full wordmark plus a non-shrinking
   logo pushed search, language and the menu button off-screen on
   phones, leaving no way to navigate.
   ============================================================= */

/* ---------------- Header: mobile layout ---------------- */
@media (max-width: 1099px) {
  .header__inner {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    gap: var(--space-2);
  }

  /* Emblem centred, wordmark hidden — it cannot fit at phone widths */
  .header__logo {
    grid-column: 2;
    justify-content: center;
    min-width: 0;
  }

  .header__wordmark { display: none; }

  .header__burger { grid-column: 1; justify-self: start; }

  .header__utils {
    grid-column: 3;
    justify-self: end;
    gap: 0;
  }

  /* Accessibility and language live inside the drawer on small screens,
     so the bar keeps a clean three-slot rhythm */
  .header__icon--a11y,
  .header__lang { display: none; }
}

/* Tablets have room for the wordmark beside the emblem */
@media (min-width: 700px) and (max-width: 1099px) {
  .header__inner { grid-template-columns: 48px 1fr auto; }
  .header__logo { justify-content: flex-start; grid-column: 2; }
  .header__wordmark { display: block; }
  .header__wordmark-sub { display: none; }
}

@media (min-width: 1100px) {
  .header__inner { display: flex; }
  .header__burger { display: none; }
  .header__wordmark { display: block; }
  .header__logo { flex-shrink: 0; }
}

/* ---------------- Drawer: full-screen dark panel ---------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  background: var(--wlf-teal-900);
  color: #fff;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer.is-open { transform: translateY(0); visibility: visible; }

@media (min-width: 1100px) { .drawer { display: none; } }

.drawer__bar {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: var(--space-2);
  height: var(--header-h);
  padding-inline: var(--gutter);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  position: sticky;
  top: 0;
  background: var(--wlf-teal-900);
  z-index: 1;
}

.drawer__close,
.drawer__search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
}

.drawer__close { justify-self: start; }
.drawer__search { justify-self: end; }
.drawer__close:hover, .drawer__search:hover { color: var(--color-accent); }

.drawer__brand { display: flex; justify-content: center; }
.drawer__brand img { height: 48px; width: auto; }

.drawer__nav { padding-inline: var(--gutter); }

.drawer__section + .drawer__section { border-top: 1px solid rgba(255, 255, 255, 0.16); }
.drawer__nav .drawer__section:first-child { border-top: 0; }

.drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  min-height: 60px;
  background: none;
  border: 0;
  text-align: left;
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}

.drawer__toggle-lang {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

/* Reference places a short rule before the chevron */
.drawer__chev {
  display: inline-flex;
  align-items: center;
  padding-left: var(--space-5);
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
}

/* Rotate the arrow, not its container. The container carries the short rule
   as a left border, so turning the whole span through 180 degrees swung that
   rule round to the right-hand side — every open section had its divider on
   the wrong side of the chevron. */
.drawer__chev svg { transition: transform var(--dur) var(--ease); }
.drawer__toggle[aria-expanded="true"] .drawer__chev svg { transform: rotate(180deg); }
.drawer__toggle[aria-expanded="true"] { color: var(--color-accent); }

.drawer__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}

.drawer__panel > div { overflow: hidden; }
.drawer__toggle[aria-expanded="true"] + .drawer__panel { grid-template-rows: 1fr; }

.drawer__group-title {
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--wlf-gold-400);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

.drawer__link {
  display: block;
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  border-left: 2px solid rgba(255, 255, 255, 0.22);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  min-height: 46px;
}

.drawer__link:hover,
.drawer__link[aria-current="page"] {
  border-left-color: var(--color-accent);
  color: #fff;
}

.drawer__link--all {
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  border-left-color: var(--color-accent);
}

.drawer__foot {
  margin-top: auto;
  padding: var(--space-8) var(--gutter) var(--space-10);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.drawer__actions { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }

.drawer__foot .btn--ghost-invert {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.drawer__section--lang { border-top: 1px solid rgba(255, 255, 255, 0.16); }

/* =============================================================
   39. Video lightbox — full-screen player
   ============================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  padding-top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  background: rgba(2, 24, 26, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}

@supports (backdrop-filter: blur(8px)) {
  .lightbox { backdrop-filter: blur(10px); }
}

.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__dialog {
  position: relative;
  width: min(100%, 1180px);
  transform: scale(0.97);
  transition: transform var(--dur) var(--ease-out);
}

.lightbox.is-open .lightbox__dialog { transform: scale(1); }

.lightbox__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

/* Portrait phones: a 16:9 player is tiny, so shorts get a taller box */
.lightbox--portrait .lightbox__frame { aspect-ratio: 9 / 16; max-height: 78svh; margin-inline: auto; width: auto; }

.lightbox__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

.lightbox__caption {
  margin-top: var(--space-4);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  max-width: 72ch;
}

.lightbox__close {
  position: absolute;
  top: -56px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.lightbox__close:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--wlf-teal-900); }

@media (max-width: 640px) {
  .lightbox__close { top: -52px; padding: var(--space-2) var(--space-3); }
  .lightbox__caption { font-size: 1rem; }
}

/* The facade is now a button that opens the lightbox */
.video-facade { cursor: pointer; }
.video-facade:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* =============================================================
   40. Brand lockup — one component, two sizes
   Header and footer render the identical mark: emblem, hairline
   rule, organisation name, italic tagline. Previously the header
   carried the full lockup while the footer showed a bare emblem,
   so the two read as different logos.
   ============================================================= */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-primary);
  text-decoration: none;
  min-width: 0;
}

.brand__mark {
  flex-shrink: 0;
  width: auto;
  transition: height var(--dur) var(--ease);
}

/* Hairline rule between mark and wordmark, as on the reference */
.brand__text {
  display: block;
  min-width: 0;
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-border);
  line-height: 1.2;
}

.brand__name {
  display: block;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-wrap: balance;
}

.brand__tagline {
  display: block;
  margin-top: 3px;
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  letter-spacing: 0;
}

/* ---- Small: header ---- */
.brand--sm .brand__mark    { height: 56px; }
.brand--sm .brand__name    { font-size: 1rem; }
.brand--sm .brand__tagline { font-size: 0.75rem; }

.header.is-solid .brand--sm .brand__mark { height: 46px; }

/* ---- Large: footer ---- */
.brand--lg .brand__mark    { height: 104px; }
.brand--lg .brand__text    { padding-left: var(--space-5); }
.brand--lg .brand__name    { font-size: 1.25rem; }
.brand--lg .brand__tagline { margin-top: var(--space-2); font-size: 1rem; }

@media (max-width: 599px) {
  .brand--lg .brand__mark    { height: 84px; }
  .brand--lg .brand__name    { font-size: 1.125rem; }
  .brand--lg .brand__tagline { font-size: 0.9375rem; }
}

/* ---- Over a photographic hero ---- */
body.has-hero .header:not(.is-solid):not(.is-open) .brand__name    { color: #fff; }
body.has-hero .header:not(.is-solid):not(.is-open) .brand__tagline { color: rgba(255, 255, 255, 0.85); }
body.has-hero .header:not(.is-solid):not(.is-open) .brand__text    { border-left-color: rgba(255, 255, 255, 0.4); }

body.has-hero .header:not(.is-solid):not(.is-open) .brand__mark {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

/* ---- Mobile: emblem only, centred in the bar ---- */
@media (max-width: 699px) {
  .header .brand__text { display: none; }
  .header .brand { justify-content: center; }
}

/* Tablet: name shows, tagline does not */
@media (min-width: 700px) and (max-width: 1099px) {
  .header .brand__tagline { display: none; }
  .header .brand__text { border-left: 0; padding-left: 0; }
}

/* ---- Footer body copy sits beneath the lockup ---- */
.footer__brand .brand { margin-bottom: var(--space-5); }
.footer__brand .brand__name    { color: var(--wlf-teal-900); }
.footer__brand .brand__tagline { color: var(--color-text-muted); }
.footer__brand .brand__text    { border-left-color: rgba(0, 94, 98, 0.3); }

/* The standalone footer tagline is now part of the lockup */
.footer__tagline { display: none; }

/* =============================================================
   41. Footer + drawer link sizing
   The sitemap columns and the mobile menu were set too large and
   too heavy, which made both feel cramped. Sizes drop one step on
   the reference scale (16 -> 14) while touch targets stay at the
   44px accessibility floor.
   ============================================================= */

/* ---------------- Footer sitemap ---------------- */
.footer__col-title {
  font-size: 1rem;              /* 16 — still a clear step above the links */
  letter-spacing: 0.06em;
  margin-bottom: var(--space-4);
}

.footer__col a {
  font-size: 0.875rem;          /* 14 */
  font-weight: var(--fw-semibold);
  line-height: 1.45;
}

.footer__col li + li { margin-top: var(--space-3); }
.footer__col ul + ul { margin-top: var(--space-3); }

.footer__columns {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-8) var(--space-6);
}

/* ---------------- Mobile drawer ---------------- */
.drawer__toggle {
  font-size: 1rem;              /* 18 -> 16 */
  letter-spacing: 0.04em;
  padding: var(--space-4) 0;
  min-height: 52px;             /* comfortably above the 44px floor */
}

.drawer__chev { padding-left: var(--space-4); }
.drawer__chev svg { width: 18px; height: 18px; }

.drawer__link {
  font-size: 0.875rem;          /* 16 -> 14 */
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  min-height: 44px;             /* accessibility floor, kept */
  display: flex;
  align-items: center;
  line-height: 1.4;
}

.drawer__group-title {
  font-size: 0.75rem;
  margin-top: var(--space-4);
  margin-bottom: var(--space-1);
}

.drawer__brand img { height: 42px; }
.drawer__bar { height: 64px; }

.drawer__foot { padding: var(--space-6) var(--gutter) var(--space-8); }
.drawer__foot .btn { font-size: 0.8125rem; }

/* Mega menu links come down one step too, for consistency */
.megamenu__link { font-size: 1rem; }

/* =============================================================
   42. Contact form — required markers, country selects, address
   Every field on this form is required, so the asterisk convention
   is stated once at the top and then marked per label. Selects are
   restyled from scratch because the native control ignores the
   type scale and looks foreign next to the text inputs.
   ============================================================= */

/* ---------------- Required marker + legend ---------------- */
.req {
  color: var(--color-required);
  font-weight: var(--fw-bold);
  margin-left: 2px;
}

.form-note {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-bottom: calc(var(--space-2) * -1);
}

/* ---------------- Status banners ---------------- */
.form-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  border-left: 3px solid transparent;
}

.form-alert svg { flex-shrink: 0; margin-top: 3px; }

.form-alert--ok {
  margin-top: var(--space-6);
  background: var(--color-bg-tint);
  border-left-color: var(--color-primary);
  color: var(--color-primary-deep);
}

.form-alert--bad {
  background: #FCF1EF;
  border-left-color: var(--color-required);
  color: #7C2018;
}

/* ---------------- Inline field errors ---------------- */
.field__error {
  font-size: var(--fs-small);
  color: var(--color-required);
  font-weight: var(--fw-semibold);
}

.field--error .input,
.field--error input[type="checkbox"] {
  border-color: var(--color-required);
}

/* ---------------- Select control ----------------
   `appearance: none` removes the platform arrow so the chevron below
   can sit on the type scale. The right padding reserves room for it,
   so a long country name cannot run underneath. */
.select-wrap {
  position: relative;
  display: block;
}

.select-wrap select.input,
select.input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding-right: calc(var(--space-4) + 22px);
  background-color: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  /* Flags first: regional indicator pairs only render as flags when an
     emoji face is reached before the body font. */
  font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji",
               "Noto Color Emoji", var(--font-body);
}

.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-4);
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

.select-wrap:focus-within::after { border-color: var(--color-primary); }

/* An empty subject select reads as placeholder text, not as an answer */
select.input:has(option[value=""]:checked) { color: var(--color-text-soft, #7A7879); }

/* ---------------- Phone: dial code + number ----------------
   The dial select is capped rather than free-flowing: a select sized to
   its widest option would be 250px of country name, which is not what
   the field is for once a code is chosen. */
.phone-field {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: var(--space-3);
}

.phone-field__dial select.input {
  /* Only the flag and the code need to stay legible in the closed state;
     the country name is there to make the open list searchable. */
  text-overflow: ellipsis;
  padding-left: var(--space-3);
}

.phone-field__number { min-width: 0; }

@media (max-width: 400px) {
  .phone-field { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); }
}

/* ---------------- City / region pair ---------------- */
.field-row {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

/* ---------------- Consent checkbox ----------------
   Grid rather than flex so the wrapped second line of the label aligns
   under the first, not under the box. */
.field--check {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
}

.field--check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--color-primary);
  border: var(--border);
  cursor: pointer;
}

.field--check label {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--color-text-muted);
  cursor: pointer;
}

.field--check label a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.field--check .field__error { grid-column: 1 / -1; }

/* ---------------- Touch targets ----------------
   48px is the input default; on coarse pointers the selects and the
   submit button get the same floor so nothing is a small target. */
@media (pointer: coarse) {
  select.input,
  .contact-form .btn { min-height: 48px; }
}

/* =============================================================
   43. Country flags
   Windows ships no flag glyphs, so a regional indicator pair such
   as U+1F1E8 U+1F1F2 renders there as the letters "CM" instead of
   the Cameroonian flag. Every other platform draws it correctly.
   This font supplies only the flags, self-hosted so no third party
   sees who loads it.

   `unicode-range` confines it to the regional indicator block, which
   means the 78KB file is fetched only on a page that actually shows a
   flag — the contact form — and never on the other 129 pages.
   ============================================================= */
@font-face {
  font-family: "Twemoji Country Flags";
  src: url("../fonts/TwemojiCountryFlags.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF;
  font-display: swap;
}

/* =============================================================
   44. Studio credit
   Sits last in the centred legal stack, one step quieter than the
   copyright above it. A credit that competes with the Foundation's
   own legal text is a credit that gets asked to be removed.
   ============================================================= */
.footer__credit {
  font-size: var(--fs-eyebrow);
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

.footer__credit a {
  color: var(--color-text-muted);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 94, 98, 0.28);
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.footer__credit a:hover,
.footer__credit a:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* =============================================================
   45. Sources and byline box
   Google's helpful-content guidance asks whether a page shows
   clear sourcing and whether bylines lead anywhere. Both are
   rendered plainly rather than decoratively — a citation list
   that looks like marketing defeats its own purpose.
   ============================================================= */
.sources__list {
  display: grid;
  gap: var(--space-3);
  padding-left: var(--space-6);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.sources__list li { padding-left: var(--space-2); }

.sources__list a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sources__list a:hover { color: var(--color-link-hover); }

.byline-box {
  border-left: 3px solid var(--color-primary);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.byline-box a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }

/* =============================================================
   46. Article figures
   Inline images carry intrinsic width and height from the file,
   so the browser reserves the right box before the bytes arrive.
   The aspect-ratio rule keeps that reservation correct once CSS
   overrides the width — without it, setting width:100% throws
   the reserved height away and the layout shift returns.
   ============================================================= */
.figure {
  margin: var(--space-8) 0;
}

.figure img {
  width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
  display: block;
  background: var(--color-bg-tint);
}

/* attr() for aspect-ratio is not yet universal; this is the fallback
   that covers the landscape crop every stock image here uses. */
@supports not (aspect-ratio: attr(width) / attr(height)) {
  .figure img { aspect-ratio: 3 / 2; object-fit: cover; }
}

.figure__caption {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.figure__credit {
  display: inline;
  font-size: var(--fs-eyebrow);
  color: var(--color-text-soft, #7A7879);
}

@media (min-width: 900px) {
  /* Let figures breathe past the text column without breaking the grid */
  .prose .figure { margin-inline: calc(var(--space-6) * -1); }
}

/* =============================================================
   47. Table captions
   Announced before the table by a screen reader, and readable as
   a label by everyone else. Left-aligned rather than centred so
   it reads as a heading for the table, not a title above it.
   ============================================================= */
.table__caption {
  caption-side: top;
  text-align: left;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  padding-bottom: var(--space-3);
}

/* =============================================================
   Accessibility preferences
   -------------------------------------------------------------
   Set from the panel in the header (and the drawer on small screens).
   head.php writes the stored choice onto <html> before first paint, so
   these rules apply to the very first frame rather than after a jump.
   ============================================================= */

/* ---- Text size -------------------------------------------------
   The whole type scale is rem-based and this stylesheet contains no px
   font-size at all, so moving the root size moves every heading, paragraph,
   button and form control together, in proportion. --header-h stays in px
   deliberately: the bar keeps its height while the text inside it grows. */
html[data-wlf-size="-1"] { font-size: 87.5%; }   /* 14px */
html[data-wlf-size="1"]  { font-size: 120%; }    /* ~19px */

/* ---- Reduce motion ---------------------------------------------
   Mirrors the prefers-reduced-motion block in tokens.css, for visitors
   whose operating system is not set that way but who want it here. */
html[data-wlf-motion="on"] {
  --dur-fast: 1ms;
  --dur:      1ms;
  --dur-slow: 1ms;
  scroll-behavior: auto;
}

html[data-wlf-motion="on"] *,
html[data-wlf-motion="on"] *::before,
html[data-wlf-motion="on"] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
}

/* ---- Underline links -------------------------------------------
   Colour alone is not a reliable signal for a link; some visitors need the
   underline as well. Off by default because the design distinguishes links
   in other ways, on for anyone who asks. Navigation, buttons and cards are
   excluded — they read as controls already and underlining them adds noise. */
html[data-wlf-underline="on"] main a:not(.btn):not(.card):not([class*="__link"]) {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---- Higher contrast -------------------------------------------
   Deepens text and borders and removes the soft background tints, which are
   the first thing to disappear for a visitor with low vision or on a cheap
   screen in bright sunlight — a common way this site will be read. */
html[data-wlf-contrast="on"] {
  --color-text:       #000000;
  --color-text-muted: #2B2B2B;
  --color-bg:         #FFFFFF;
  --color-bg-tint:    #FFFFFF;
  --color-bg-warm:    #FFFFFF;
  --color-border:     #565656;
  --color-link:       #00494C;
  --color-link-hover: #6B4500;
  --color-primary:    #00494C;
}

html[data-wlf-contrast="on"] main a:not(.btn) { text-decoration: underline; }
html[data-wlf-contrast="on"] .btn { border: 2px solid currentColor; }
html[data-wlf-contrast="on"] :focus-visible { outline-width: 3px; }

/* =============================================================
   The panel itself
   ============================================================= */
.a11y {
  position: relative;
  display: flex;
  align-items: center;
}

.a11y__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 264px;
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  z-index: var(--z-megamenu);
}

/* The panel is toggled with the hidden attribute so it leaves the
   accessibility tree entirely when closed. Stated explicitly because any
   display rule above would otherwise beat the attribute's default. */
.a11y__panel[hidden] { display: none; }

.a11y__title {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-3);
}

.a11y__legend {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

/* ---- Text size buttons ---- */
.a11y__sizes {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.a11y__size {
  flex: 1;
  min-height: 44px;           /* the 44px target applies to these too */
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

/* The glyph is sized in em so each button previews the size it applies. */
.a11y__size.is-sm span[aria-hidden] { font-size: 0.8em; }
.a11y__size.is-md span[aria-hidden] { font-size: 1em; }
.a11y__size.is-lg span[aria-hidden] { font-size: 1.3em; }

.a11y__size:hover { background: var(--color-bg-tint); }

.a11y__size.is-on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-invert);
}

/* ---- On/off switches ---- */
.a11y__flags {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.a11y__flag {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2);
  background: none;
  border: 0;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  text-align: left;
  cursor: pointer;
}

.a11y__flag:hover { background: var(--color-bg-tint); }

.a11y__switch {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--color-border);
  transition: background var(--dur-fast) var(--ease);
}

.a11y__switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-text-invert);
  transition: transform var(--dur-fast) var(--ease);
}

.a11y__flag.is-on .a11y__switch { background: var(--color-primary); }
.a11y__flag.is-on .a11y__switch::after { transform: translateX(16px); }

/* ---- Reset and note ---- */
.a11y__reset {
  width: 100%;
  min-height: 44px;
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  cursor: pointer;
}

.a11y__reset:hover { background: var(--color-bg-tint); }

.a11y__note {
  margin-top: var(--space-3);
  font-size: var(--fs-micro);
  color: var(--color-text-muted);
}

/* ---- Inside the drawer -----------------------------------------
   The drawer is a dark panel, so the controls invert rather than sitting in
   their own white box. */
/* The header copy is a flex row so the trigger sits inline with the search
   and language icons. Inside the drawer the same element is a full-width
   stack, and inheriting that flex row is what crushed every control onto a
   single line. */
.a11y--drawer {
  display: block;
  padding: var(--space-3) 0 var(--space-5);
}
.a11y--drawer .a11y__title { display: none; }   /* the accordion already names it */

.a11y--drawer .a11y__legend,
.a11y--drawer .a11y__note { color: rgba(255, 255, 255, 0.72); }

.a11y--drawer .a11y__size,
.a11y--drawer .a11y__reset {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--color-text-invert);
}

.a11y--drawer .a11y__flag { color: var(--color-text-invert); }

.a11y--drawer .a11y__size:hover,
.a11y--drawer .a11y__reset:hover,
.a11y--drawer .a11y__flag:hover { background: rgba(255, 255, 255, 0.1); }

.a11y--drawer .a11y__size.is-on {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--wlf-ink);
}

.a11y--drawer .a11y__switch { background: rgba(255, 255, 255, 0.35); }
.a11y--drawer .a11y__flag.is-on .a11y__switch { background: var(--color-accent); }

/* =============================================================
   Share buttons
   -------------------------------------------------------------
   Sits at the end of an article. Every button is a real link that works
   without JavaScript; the copy-link button and the system share sheet are
   revealed by script only where the browser supports them.
   ============================================================= */
.share {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: var(--border);
}

.share__label {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.share__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;          /* a comfortable target on a phone */
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

/* Each network takes its own colour on hover — recognisable at a glance,
   and neutral until then so the row does not shout over the article. */
.share__btn:hover        { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-invert); }
.share__btn--whatsapp:hover { background: #25D366; border-color: #25D366; }
.share__btn--facebook:hover { background: #1877F2; border-color: #1877F2; }
.share__btn--x:hover        { background: #000000; border-color: #000000; }
.share__btn--linkedin:hover { background: #0A66C2; border-color: #0A66C2; }

.share__btn--copy.is-done {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-invert);
}

.share__native {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.share__native[hidden] { display: none; }

.share__status {
  margin-top: var(--space-2);
  font-size: var(--fs-micro);
  color: var(--color-text-muted);
  min-height: 1.2em;     /* reserved, so announcing a message shifts nothing */
}

/* On a phone that offers a system share sheet, that one button replaces the
   row entirely: it reaches Messenger, SMS and every other installed app,
   which a fixed list of five networks cannot. */
@media (max-width: 699px) {
  .share.has-native .share__list { display: none; }
}

@media (min-width: 700px) {
  .share__native { display: none !important; }
}

/* =============================================================
   Footer — accordion on mobile and tablet
   -------------------------------------------------------------
   The reference site collapses each footer section into a labelled
   accordion below the desktop breakpoint, keeping the quick links open, and
   centres the legal row. Five stacked columns of twenty links is a very long
   scroll on a phone; four headings is a short one.
   ============================================================= */

/* Desktop keeps the plain columns: the button is not rendered and the panel
   is always open, so nothing here depends on JavaScript having run. */
.footer__col-toggle { display: none; }
.footer__col-panel  { display: block; }

@media (max-width: 1099px) {
  .footer__columns {
    display: block;          /* the grid gives way to a single stack */
  }

  .footer__col--quick { margin-bottom: var(--space-6); }

  /* One heading style, whichever element is showing */
  .footer__col--section .footer__col-title { display: none; }

  .footer__col--section {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .footer__col-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    min-height: 56px;        /* a comfortable tap target */
    padding: var(--space-4) 0;
    background: none;
    border: 0;
    color: inherit;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
  }

  /* The short rule before the chevron, as on the reference */
  .footer__chev {
    display: flex;
    align-items: center;
    padding-left: var(--space-4);
    border-left: 1px solid currentColor;
    align-self: stretch;
    opacity: 0.55;
  }

  .footer__chev svg { transition: transform var(--dur) var(--ease); }

  .footer__col-toggle[aria-expanded="true"] .footer__chev svg {
    transform: rotate(180deg);
  }

  /* Same 0fr -> 1fr technique as the navigation drawer: it animates to the
     content's real height without anyone having to measure it. */
  .footer__col-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur) var(--ease);
  }

  .footer__col-panel > div { overflow: hidden; }

  .footer__col-toggle[aria-expanded="true"] + .footer__col-panel {
    grid-template-rows: 1fr;
  }

  .footer__col-panel ul { padding-bottom: var(--space-5); }
  .footer__col-panel ul + ul { margin-top: var(--space-4); }

  /* ---- Legal row centres, as on the reference ---- */
  .footer__legal-inner { text-align: center; }

  .footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-2) var(--space-3);
  }

  /* Interpuncts between the legal links, never a trailing one */
  .footer__legal-links li + li::before {
    content: "·";
    margin-right: var(--space-3);
    opacity: 0.6;
  }
}

/* =============================================================
   WhatsApp button
   -------------------------------------------------------------
   On the sticky layer (100): above page content, below the header (200),
   the menu drawer (300), the install prompt (400) and the cookie bar (500),
   each of which covers it when open. A round icon on phones; a labelled
   pill on wide screens, where there is room to say what it does.

   The green is a darker member of WhatsApp's own family. The brand's bright
   #25D366 measures 1.98:1 against white, failing even the 3:1 required for
   an icon; #0E7C61 measures 5.15:1, enough for the label text as well.
   ============================================================= */
.wa-float {
  position: fixed;
  right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background: #0E7C61;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}

.wa-float:hover {
  background: #075E54;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
}

.wa-float:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.wa-float svg { flex: 0 0 auto; }

.wa-float__label { display: none; }

@media (min-width: 1100px) {
  .wa-float {
    width: auto;
    padding: 0 var(--space-5) 0 var(--space-4);
  }
  .wa-float__label {
    display: inline;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    white-space: nowrap;
  }
}

/* Nothing for a printed page to do with a chat button */
@media print { .wa-float { display: none !important; } }

/* Contact page — social accounts as labelled buttons, wrapping on phones */
.contact-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
.contact-social .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  white-space: normal;   /* long account names wrap inside the button on phones */
  text-align: left;
}
.contact-social svg { flex: 0 0 auto; }

/* In-brief cards now link to their stories: keep the card's own colour */
.brief__title a { color: inherit; text-decoration: none; }
.brief__title a:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Programme status — delivered vs planned, near the top of each programme */
.programme-status {
  border-left: 4px solid var(--color-accent);
  background: var(--color-bg-warm);
  padding: var(--space-6);
}
.programme-status__label { font-weight: var(--fw-bold); margin-top: var(--space-3); }
.programme-status__list { margin: var(--space-3) 0 0; padding-left: 1.2em; }
.programme-status__list li + li { margin-top: var(--space-2); }
.programme-status__list .link-more { margin-left: var(--space-2); }
.programme-status__note { margin-top: var(--space-4); color: var(--color-text-muted); }