/* ============================================================
   The Gaitway Organisation — global styles
   "The Footprint Trail" — design language taken from the logo itself:
   a footprint built from forward-motion chevrons, and a hand-drawn
   wordmark. Sections below reuse the tokens, so a single change here
   moves the whole site.

   Brand colours are read from the vector master (see
   ../../Brand Assets/gaitway_brand-assets_v1.md):
     teal #00B6BE · blue #0074BC
   The sun accent is a PROPOSED addition to the brand pack and is
   pending board approval — it is confined to --sun* below so it can
   be removed in one place.
   ============================================================ */

:root {
  /* ---- Brand, as recorded in the pack ---- */
  --teal: #00b6be;
  --teal-deep: #00757c; /* text-safe teal on a light ground — AA on mist */
  --teal-pale: #b7e9ec;
  --teal-mist: #e7f7f8;
  --blue: #0074bc;
  --blue-deep: #005e99;

  /* ---- Proposed warm accent (board sign-off pending) ---- */
  --sun: #ffc23c;
  --sun-deep: #855b00;
  --sun-mist: #fff4dc;

  /* ---- Neutrals, biased teal rather than grey ---- */
  --ink: #0e2c37;
  --ink-soft: #476874;
  --paper: #fbfdfd;
  --surface: #ffffff;
  --surface-2: #f2fafb;
  --line: #cfe7ea;
  --line-strong: #9ccfd5;

  /* ---- Bands that are dark by design and stay dark in both themes,
          so their foreground colours are fixed rather than flipping ---- */
  --band-dark: #0e2c37;
  --band-dark-2: #00646b;
  --band-accent: #00b6be;
  --on-accent: #052a2d;
  --on-accent-soft: #0a3a3e;
  --on-band: #eaf8f9;
  --on-band-soft: #b6d6de;
  --on-band-line: #3e6b78;
  --on-blue: #ffffff;
  --status-ok: #1d6b41;
  --status-bad: #97302f;

  /* ---- Legacy aliases. Page-local <style> blocks still reference
          these names; re-pointing them here means those pages pick up
          the new palette without being touched. ---- */
  --teal-dark: var(--teal-deep);
  --navy: var(--ink);
  --navy-dark: var(--ink);
  --muted: var(--ink-soft);
  --bg: var(--paper);
  --bg-soft: var(--surface-2);
  --bg-band: var(--teal-mist);
  --white: #ffffff;

  /* ---- Form ---- */
  --radius: 20px;
  --radius-lg: 28px;
  --radius-sm: 12px;
  --shadow: 0 8px 28px rgba(14, 44, 55, 0.1);
  --shadow-sm: 0 2px 10px rgba(14, 44, 55, 0.07);
  --pop: 10px 10px 0; /* solid offset shadow — no blur */
  --blob-a: 58% 42% 47% 53% / 46% 38% 62% 54%;
  --blob-b: 44% 56% 62% 38% / 55% 45% 55% 45%;
  --maxw: 1180px;

  --font-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-hand: "Caveat", "Bradley Hand", "Segoe Script", cursive;
  --font: var(--font-body);
  --focus: 3px solid var(--sun-deep);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --teal: #2fd3db;
    --teal-deep: #7fe8ed;
    --teal-pale: #12505b;
    --teal-mist: #0f3b46;
    --blue: #5bb2ec;
    --blue-deep: #8ecdf5;
    --sun: #ffcc5c;
    --sun-deep: #ffdd92;
    --sun-mist: #3a2e12;

    --ink: #e8f7f9;
    --ink-soft: #9fc4cc;
    --paper: #07202a;
    --surface: #0d2f3a;
    --surface-2: #113844;
    --line: #1e4c58;
    --line-strong: #2c6a78;

    --band-dark: #03161d;
    --band-dark-2: #03424a;
    --band-accent: #1ba7ae;
    --on-accent: #052a2d;
    --on-accent-soft: #083034;
    --on-band: #eaf8f9;
    --on-band-soft: #a8ccd6;
    --on-band-line: #2c5d6a;
    --on-blue: #05202e;
    --status-ok: #7fd6a0;
    --status-bad: #ff9f95;

    --shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
    --focus: 3px solid var(--sun);
  }
}

:root[data-theme="dark"] {
  --teal: #2fd3db;
  --teal-deep: #7fe8ed;
  --teal-pale: #12505b;
  --teal-mist: #0f3b46;
  --blue: #5bb2ec;
  --blue-deep: #8ecdf5;
  --sun: #ffcc5c;
  --sun-deep: #ffdd92;
  --sun-mist: #3a2e12;

  --ink: #e8f7f9;
  --ink-soft: #9fc4cc;
  --paper: #07202a;
  --surface: #0d2f3a;
  --surface-2: #113844;
  --line: #1e4c58;
  --line-strong: #2c6a78;

  --band-dark: #03161d;
  --band-dark-2: #03424a;
  --band-accent: #1ba7ae;
  --on-accent: #052a2d;
  --on-accent-soft: #083034;
  --on-band: #eaf8f9;
  --on-band-soft: #a8ccd6;
  --on-band-line: #2c5d6a;
  --on-blue: #05202e;
  --status-ok: #7fd6a0;
  --status-bad: #ff9f95;

  --shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --focus: 3px solid var(--sun);
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.65;
  background: var(--paper);
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--teal-deep);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.1;
  font-weight: 800;
  text-wrap: balance;
  margin: 0 0 0.4em;
}
h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  letter-spacing: -0.015em;
}
h2 {
  font-size: clamp(1.7rem, 3.8vw, 2.6rem);
  margin-bottom: 0.45em;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.1rem;
}
p {
  margin: 0 0 1em;
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Accessibility helpers ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 2000;
  background: var(--band-dark);
  color: var(--on-band);
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  font-weight: 700;
}
.skip-link:focus {
  left: 0;
}
:focus-visible {
  outline: var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Buttons ----------
   Chunky ink outline and a solid, blur-free drop that shifts on press. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  text-decoration: none;
  cursor: pointer;
  border: 2.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}
.btn:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--ink);
}
.btn-primary {
  background: var(--teal);
  color: #00272a;
}
.btn-secondary {
  background: var(--sun);
  color: #3a2a00;
}
.btn-ghost {
  background: var(--surface);
  color: var(--ink);
}
/* Sits on the dark hero band, so it carries the band's fixed colours. */
.btn-outline {
  background: transparent;
  color: var(--on-band);
  border-color: var(--on-band);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
}
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.14);
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--surface);
  border-bottom: 2px solid var(--line);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
/* width:auto is load-bearing — without it the width attribute applies and the
   mark is stretched. The logo is 420x297 (1.41:1), not 3:1. */
.brand img {
  height: 54px;
  width: auto;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.1;
}
.brand-name span {
  display: block;
  color: var(--teal-deep);
  font-size: 0.78rem;
  font-weight: 600;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  padding: 9px 13px;
  border-radius: 10px;
  font-size: 1rem;
  position: relative;
}
/* The chevron underline is the mark's own motion stripe, repeated. */
.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 3px;
  height: 7px;
  background: linear-gradient(
      135deg,
      transparent 46%,
      var(--teal) 46% 62%,
      transparent 62%
    )
    0 0 / 9px 7px repeat-x;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a:not(.nav-cta):focus-visible::after,
.nav-links a.active:not(.nav-cta)::after {
  opacity: 1;
}
.nav-links a.active {
  color: var(--teal-deep);
}
.nav-links a.nav-cta {
  background: var(--sun);
  color: #3a2a00;
  margin-left: 8px;
  border: 2.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  border-radius: 999px;
  padding: 9px 20px;
}
.nav-links a.nav-cta:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}
.nav-links a.nav-client {
  border: 2px solid var(--line);
  color: var(--ink);
}
.nav-links a.nav-client:hover {
  background: var(--teal-mist);
  border-color: var(--teal);
}

.nav-links .has-sub {
  position: relative;
}
.sub-toggle {
  background: none;
  border: 0;
  color: var(--ink);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 6px;
  line-height: 1;
}
.subnav {
  list-style: none;
  margin: 0;
  padding: 8px;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: var(--surface);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--pop) var(--teal-pale);
  display: none;
  z-index: 1100;
}
.subnav li {
  margin: 0;
}
.subnav a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  white-space: nowrap;
}
.subnav a:hover {
  background: var(--teal-mist);
}
.subnav .subnav-child a {
  padding-left: 28px;
}
.has-sub:hover .subnav,
.has-sub:focus-within .subnav,
.has-sub.sub-open .subnav {
  display: block;
}

.client-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  background: var(--teal-mist);
  border: 2px solid var(--line);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.95rem;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 3.5px;
  background: var(--ink);
  border-radius: 3px;
  margin: 5px 0;
}

@media (max-width: 980px) {
  .nav-toggle {
    display: block;
  }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 16px;
    border-bottom: 2px solid var(--line);
    box-shadow: var(--shadow);
    display: none;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links a {
    padding: 14px 12px;
    border-radius: 10px;
  }
  .nav-links a:not(.nav-cta)::after {
    display: none;
  }
  .nav-links a.nav-cta {
    margin: 8px 0 0;
    text-align: center;
    justify-content: center;
  }
  .nav-links .has-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .nav-links .has-sub > a {
    flex: 1;
  }
  .subnav {
    position: static;
    display: none;
    box-shadow: none;
    border: 0;
    width: 100%;
    padding: 0 0 6px 14px;
    min-width: 0;
  }
  .has-sub:hover .subnav,
  .has-sub:focus-within .subnav {
    display: none;
  }
  .has-sub.sub-open .subnav {
    display: block;
  }
  .subnav a {
    padding: 12px;
    color: var(--ink-soft);
  }
}

/* ---------- Hero ----------
   Two variants. `split` puts the photograph in the foreground beside the
   text (homepage). The full-bleed variant is kept for interior pages, but
   the overlay is far lighter than it was — the children have to be visible. */
.hero {
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}
.hero .container {
  position: relative;
  z-index: 2;
}

/* Full-bleed variant */
.hero:not(.hero-split) {
  background: linear-gradient(
    135deg,
    var(--band-dark) 0%,
    var(--band-dark-2) 100%
  );
  color: var(--on-band);
  min-height: 430px;
  display: grid;
  align-content: center;
}
.hero:not(.hero-split) h1 {
  color: #fff;
}
.hero:not(.hero-split) p.lead {
  color: var(--on-band-soft);
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
/* Bottom-weighted, and dark enough at the top for the breadcrumb and the
   handwritten eyebrow: every hero's text measures at least 4.5:1 against the
   lightest 5% of the photograph behind it, at 1280 and 390px (npm run audit).
   Darker than the Astro build (0.34 / 0.62 / 0.78), whose small hero text fell
   to 2.4:1 over light photographs (docs/css-deltas.md, CSS 6). */
.hero.has-bg:not(.hero-split)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(14, 44, 55, 0.68) 0%,
      rgba(14, 44, 55, 0.76) 62%,
      rgba(14, 44, 55, 0.85) 100%
    ),
    linear-gradient(
      105deg,
      rgba(0, 127, 134, 0.42) 0%,
      rgba(14, 44, 55, 0.12) 70%
    );
}

/* Split variant */
.hero-split {
  background: var(--paper);
  color: var(--ink);
  padding: 60px 0 72px;
}
.hero-split .hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero-split h1 {
  color: var(--ink);
}
.hero-split .hero-figure {
  position: relative;
}
.hero-split .hero-figure img:not(.fp-confetti),
.hero-split .hero-figure picture img {
  border-radius: var(--blob-a);
  box-shadow: var(--pop) var(--teal-pale);
  border: 5px solid var(--surface);
  width: 100%;
}
@media (max-width: 940px) {
  .hero-split .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.hero p.lead {
  font-size: 1.22rem;
  max-width: 36em;
  margin-bottom: 1.5em;
}
.eyebrow {
  font-family: var(--font-hand);
  font-size: 1.45rem;
  color: var(--teal-deep);
  transform: rotate(-1.5deg);
  display: inline-block;
  margin: 0 0 0.2em;
  letter-spacing: 0;
}
.hero:not(.hero-split) .eyebrow {
  color: #9be3e3;
}

/* The dictionary device that explains the charity's own name. */
.defn {
  display: block;
  width: fit-content;
  border-left: 5px solid var(--teal);
  padding: 2px 0 2px 16px;
  margin-bottom: 20px;
}
.defn .word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  color: var(--teal-deep);
  line-height: 1;
}
.defn .phon {
  font-size: 1rem;
  color: var(--ink-soft);
  margin-left: 10px;
}
.defn .pos {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.defn .mean {
  font-size: 1.02rem;
  color: var(--ink);
}

/* Scattered marks around the hero figure. Decorative only, and dropped on
   narrower screens where there is no margin for them to sit in. */
.hero-split .fp-confetti {
  position: absolute;
  width: 34px;
  height: auto;
  opacity: 0.45;
  pointer-events: none;
}
.hero-split .fp-confetti.a { left: -44px; top: 22%; transform: rotate(-24deg); }
.hero-split .fp-confetti.b { right: -28px; bottom: 6%; transform: rotate(28deg); opacity: 0.35; }
@media (max-width: 1240px) { .hero-split .fp-confetti { display: none; } }

/* Hand-written marginal note. */
.scribble {
  font-family: var(--font-hand);
  font-size: 1.3rem;
  color: var(--teal-deep);
  line-height: 1.15;
}

/* ---------- Chevron rule — the mark's motion stripe as a divider ---------- */
.chev-rule {
  height: 16px;
  width: 100%;
  background: linear-gradient(
      135deg,
      transparent 46%,
      var(--teal-pale) 46% 63%,
      transparent 63%
    )
    0 0 / 20px 16px repeat-x;
}

/* ---------- Sections ---------- */
.section {
  padding: 72px 0;
}
.section.soft {
  background: var(--surface-2);
}
.section.band {
  background: var(--teal-mist);
}
.section-head {
  max-width: 780px;
  margin-bottom: 40px;
}
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------- Cards ---------- */
.grid {
  display: grid;
  gap: 26px;
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 900px) {
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  box-shadow: var(--pop) var(--teal-pale);
}
.card h3 {
  color: var(--ink);
}
a.card {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.12s ease;
}
a.card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 13px 13px 0 var(--teal-pale);
}
.card-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--teal-deep);
  font-family: var(--font-display);
  font-weight: 700;
}
.card .icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--teal-mist);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--teal-deep);
  font-size: 1.5rem;
}
.card .step-mark {
  width: 44px;
  height: auto;
  margin-bottom: 14px;
}
@media (prefers-reduced-motion: reduce) {
  a.card {
    transition: none;
  }
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pills li {
  background: var(--surface);
  border: 2px solid var(--line);
  color: var(--ink);
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}

/* ---------- Stepping stones ----------
   The three intro cards climb left to right, with footprints walking through
   the gaps. Tone is set per card from the CMS. */
.stones {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}
@media (max-width: 900px) {
  .stones {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}
.stones .stone:nth-of-type(1) {
  transform: translateY(18px) rotate(-1deg);
}
.stones .stone:nth-of-type(2) {
  transform: rotate(0.9deg);
}
.stones .stone:nth-of-type(3) {
  transform: translateY(-26px) rotate(-0.6deg);
}
.stone {
  position: relative;
  z-index: 1;
}
.stone.tone-teal {
  box-shadow: var(--pop) var(--teal);
}
.stone.tone-sun {
  box-shadow: var(--pop) var(--sun);
}
.stone.tone-blue {
  box-shadow: var(--pop) var(--blue);
}
/* Footprints in the gaps read as a path far better than a drawn line, and
   they are the actual brand mark rather than a stand-in. */
.stones .tween {
  position: absolute;
  width: 34px;
  z-index: 0;
  opacity: 0.6;
  pointer-events: none;
}
.stones .tween.t1 {
  left: 33.33%;
  top: 58%;
  transform: translateX(-50%) rotate(26deg);
}
.stones .tween.t2 {
  left: 66.66%;
  top: 36%;
  transform: translateX(-50%) rotate(19deg);
}
@media (max-width: 900px) {
  .stones .stone,
  .stones .stone:nth-of-type(n) {
    transform: none;
  }
  .stones .tween {
    display: none;
  }
}

/* ---------- Therapies ----------
   The model leads, with its two components nested inside its own card, and the
   three further therapies alongside at smaller weight. Deliberately NOT a row
   of equal tiles: that reads as a sequence to work through, when five of these
   are alternatives and one is the model the other two sit inside. */
.therapies {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 26px;
  align-items: start;
}
@media (max-width: 980px) {
  .therapies { grid-template-columns: 1fr; }
}

.model { padding: 0; overflow: hidden; box-shadow: var(--pop) var(--teal); }
.model-main {
  display: block;
  padding: 0 0 24px;
  text-decoration: none;
  color: inherit;
}
.model-shot { display: block; margin-bottom: 22px; }
.model-shot img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* A 3:2 photograph in a 16:9 frame loses its top and bottom; keep the
     top, where the faces are. */
  object-position: 50% 15%;
  display: block;
}
.model-main > *:not(.model-shot) { margin-left: 28px; margin-right: 28px; }
.model-tag {
  display: block;
  font-family: var(--font-hand);
  font-size: 1.3rem;
  color: var(--teal-deep);
  margin-bottom: 2px;
}
.model-main h3 { font-size: 1.7rem; margin-bottom: 10px; }
.model-main p { color: var(--ink-soft); margin-bottom: 14px; }
.model:hover .card-link { text-decoration: underline; }

/* The nested components. An indented list under a rule reads as "contained
   by", where a row of tiles would read as "next to". */
.model-parts {
  margin: 0 28px 28px;
  padding-top: 18px;
  border-top: 2px dashed var(--line-strong);
}
.parts-head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.model-parts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.model-parts a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
}
.model-parts a img { width: 20px; height: auto; flex: 0 0 auto; }
.model-parts a:hover, .model-parts a:focus-visible { color: var(--teal-deep); text-decoration: underline; }

.further { display: flex; flex-direction: column; gap: 14px; }
.further-head {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  color: var(--teal-deep);
  margin: 0 0 2px;
}
.further-card {
  padding: 20px 22px;
  box-shadow: 7px 7px 0 var(--teal-pale);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.12s ease;
}
.further-card h4 { font-size: 1.15rem; margin-bottom: 6px; }
.further-card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 8px;
}
.further-card .card-link { font-size: 0.95rem; margin-top: 0; }
.further-card:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--teal-pale); }
@media (prefers-reduced-motion: reduce) { .further-card { transition: none; } }

/* ---------- Figures band ----------
   Renders only when a figure exists. The awaiting state is deliberately
   visible: a blank slot the board has to fill, not a number we invented. */
.tally {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
@media (max-width: 860px) {
  .tally {
    grid-template-columns: 1fr;
  }
}
.tile {
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
}
.tile.is-awaiting {
  border-style: dashed;
  border-color: var(--line-strong);
}
.tile .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--teal-deep);
  font-variant-numeric: tabular-nums;
}
.tile.is-awaiting .num {
  color: var(--ink-soft);
}
.tile .lab {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin-top: 8px;
}
.tile .hand {
  font-family: var(--font-hand);
  font-size: 1.15rem;
  color: var(--sun-deep);
  margin-top: 6px;
}

/* ---------- Media row ---------- */
.media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}
.media.reverse .media-img {
  order: 2;
}
.media-img img {
  border-radius: var(--blob-b);
  box-shadow: var(--pop) var(--teal-pale);
  border: 5px solid var(--surface);
  width: 100%;
  object-fit: cover;
}
@media (max-width: 900px) {
  .media {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .media.reverse .media-img {
    order: 0;
  }
}

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .steps {
    grid-template-columns: 1fr;
  }
}
.step {
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 26px 24px;
  position: relative;
  box-shadow: 8px 8px 0 var(--teal-pale);
}
.step .num {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--teal);
  color: #00272a;
  font-family: var(--font-display);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

/* ---------- Testimonials as speech bubbles ---------- */
.quote {
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  position: relative;
}
.quote p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.28rem;
  line-height: 1.35;
  color: var(--ink);
  font-style: normal;
}
.quote .who {
  font-family: var(--font-hand);
  font-size: 1.3rem;
  color: var(--teal-deep);
  font-weight: 600;
  margin: 14px 0 0;
}
/* Tail, drawn from the same border so it reads as one shape. */
.quote::after {
  content: "";
  position: absolute;
  left: 42px;
  bottom: -15px;
  width: 24px;
  height: 24px;
  background: var(--surface);
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: rotate(45deg);
  border-radius: 0 0 6px 0;
}

.voice {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 44px;
  align-items: center;
}
@media (max-width: 900px) {
  .voice {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
.voice img {
  border-radius: var(--blob-b);
  border: 5px solid var(--surface);
  box-shadow: var(--pop) var(--blue);
}

/* ---------- Fund a step band ----------
   This sits directly above the footer, and both used to be --band-dark, so the
   two ran together as one dark mass with no seam. The band is now the brand
   teal: it separates the closing ask from the standard footer, and puts the
   brand colour at the emotional high point of the page.

   Bright in BOTH themes, so its foreground colours are fixed rather than
   flipping with --ink. */
.cta-band {
  background: var(--band-accent);
  color: var(--on-accent);
  padding: 76px 0;
  position: relative;
  overflow: hidden;
}
.cta-band h2 {
  color: var(--on-accent);
  max-width: 17em;
}
/* The emphasised phrase gets a highlighter swipe rather than a colour change —
   a warm colour on teal has nowhere near the contrast, and the marker echoes
   the hand-drawn underline in the hero. */
.cta-band .big-true {
  position: relative;
  display: inline;
  background-image: linear-gradient(var(--sun), var(--sun));
  background-repeat: no-repeat;
  background-size: 100% 0.62em;
  background-position: 0 0.72em;
  padding: 0 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.cta-band p {
  color: var(--on-accent-soft);
  max-width: 36em;
  font-size: 1.12rem;
}
.cta-band .btn-row {
  margin-top: 28px;
}
/* Buttons inherit --ink for their outline and drop, which flips light in dark
   mode; on a permanently bright band they have to stay dark. */
.cta-band .btn {
  border-color: var(--on-accent);
  box-shadow: 4px 4px 0 var(--on-accent);
}
.cta-band .btn:active {
  box-shadow: 1px 1px 0 var(--on-accent);
}
.cta-band .btn-secondary {
  background: var(--sun);
  color: #3a2a00;
}
.cta-band .btn-ghost {
  background: #ffffff;
  color: var(--on-accent);
}
.cta-band .fp-ghost {
  position: absolute;
  opacity: 0.14;
  width: 230px;
  right: -40px;
  bottom: -50px;
  transform: rotate(18deg);
  filter: brightness(0) saturate(100%);
}
.fund-steps {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.fund-step {
  border: 3px solid var(--on-accent);
  border-radius: var(--radius);
  padding: 18px 24px;
  min-width: 152px;
  background: rgba(255, 255, 255, 0.22);
}
.fund-step .amt {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.85rem;
  color: var(--on-accent);
  font-variant-numeric: tabular-nums;
}
.fund-step .what {
  font-size: 0.95rem;
  color: var(--on-accent-soft);
}
.cta-band .hand {
  font-family: var(--font-hand);
  font-size: 1.25rem;
  color: var(--on-accent-soft);
  display: block;
  margin-top: 16px;
}

/* ---------- Footprint scroll trail ---------- */
.trail {
  position: fixed;
  left: 18px;
  top: 0;
  bottom: 0;
  width: 54px;
  z-index: 60;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}
@media (min-width: 1440px) {
  .trail {
    display: flex;
  }
}
.trail .fp {
  width: 28px;
  height: auto;
  filter: grayscale(1);
  opacity: 0.16;
  transition:
    filter 0.35s ease,
    opacity 0.35s ease,
    transform 0.35s ease;
}
.trail .fp:nth-child(odd) {
  margin-left: 20px;
  transform: rotate(9deg);
}
.trail .fp:nth-child(even) {
  transform: rotate(-4deg);
}
.trail .fp.on {
  filter: none;
  opacity: 1;
}
.trail .fp.on:nth-child(odd) {
  transform: rotate(9deg) scale(1.12);
}
.trail .fp.on:nth-child(even) {
  transform: rotate(-4deg) scale(1.12);
}
@media (prefers-reduced-motion: reduce) {
  .trail .fp {
    transition: none;
  }
}

/* ---------- Ticks ---------- */
.ticks {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ticks li {
  position: relative;
  padding: 8px 0 8px 36px;
}
.ticks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 9px;
  color: #00272a;
  background: var(--teal);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
@media (max-width: 900px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}
/* The contact block with its form switched off: just the ways to reach us. */
.contact-only {
  max-width: 40em;
}
label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
}
input,
textarea,
select {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  margin-bottom: 18px;
  background: var(--surface);
  color: var(--ink);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: var(--focus);
  outline-offset: 1px;
  border-color: var(--teal);
}
textarea {
  min-height: 140px;
  resize: vertical;
}
.contact-detail {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.contact-detail .ico {
  color: var(--teal-deep);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--teal-mist);
  margin-top: 2px;
}
.field-hint {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: -10px 0 16px;
}
.hidden-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
fieldset {
  min-width: 0;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin: 0 0 18px;
}
legend {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  padding: 0 6px;
}

.note {
  background: var(--sun-mist);
  border: 2px solid var(--sun);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.92rem;
  color: var(--sun-deep);
  margin: 18px 0;
}
.form-status {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 0 0 18px;
  font-weight: 700;
}
.form-status.error {
  background: #fdecea;
  border: 2px solid #f3b7af;
  color: #8a1c10;
}
.form-status.success {
  background: #e9f7ef;
  border: 2px solid #aadcc0;
  color: #0f5132;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .form-status.error {
    background: #3b1512;
    border-color: #8a3a31;
    color: #ffc9c2;
  }
  :root:not([data-theme="light"]) .form-status.success {
    background: #10301f;
    border-color: #2f6d47;
    color: #b6ecc9;
  }
}
:root[data-theme="dark"] .form-status.error {
  background: #3b1512;
  border-color: #8a3a31;
  color: #ffc9c2;
}
:root[data-theme="dark"] .form-status.success {
  background: #10301f;
  border-color: #2f6d47;
  color: #b6ecc9;
}

/* ---------- Footer ---------- */
/* The seam between the closing pane and the standard footer. The footer proper
   begins at the logo; everything above this line belongs to the page. */
.footer-seam {
  height: 14px;
  width: 100%;
  background: linear-gradient(135deg, transparent 46%, var(--teal) 46% 63%, transparent 63%) 0 0 / 18px 14px repeat-x;
  opacity: 0.85;
}
.site-footer {
  background: var(--band-dark);
  color: var(--on-band-soft);
  padding: 0 0 20px;
}
.site-footer > .container { padding-top: 46px; }
.site-footer h4 {
  color: #fff;
  font-size: 1rem;
  margin: 0 0 10px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1.6fr 1.3fr;
  gap: 32px;
}
@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.site-footer a {
  color: var(--on-band-soft);
  text-decoration: none;
}
.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.94rem;
}
.footer-links li {
  margin-bottom: 6px;
}
/* The Explore list runs to eleven items; two columns halve the height it adds
   to the footer without shrinking the tap targets. */
.footer-links.cols-2 {
  columns: 2;
  column-gap: 24px;
}
.footer-links.cols-2 li {
  break-inside: avoid;
}
@media (max-width: 480px) {
  .footer-links.cols-2 {
    columns: 1;
  }
}
.footer-bottom {
  border-top: 1px solid var(--on-band-line);
  margin-top: 24px;
  padding-top: 16px;
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
/* The white panel is required, not decorative: the brand pack supplies no
   reversed logo, and the two-colour mark needs a light background. */
.footer-brand img {
  height: 76px;
  width: auto;
  background: #fff;
  padding: 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.site-footer p {
  margin: 0 0 10px;
  font-size: 0.94rem;
}
.site-footer .reg,
.site-footer .footer-bottom {
  color: var(--on-band-soft);
}

/* ---------- Prose pages ---------- */
.breadcrumb {
  font-size: 0.9rem;
  color: #9be3e3;
  margin-bottom: 14px;
}
.breadcrumb a {
  color: #fff;
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}

.prose {
  max-width: 68ch;
}
.prose h2 {
  margin-top: 1.4em;
}
.prose h3 {
  color: var(--teal-deep);
  margin-top: 1.2em;
}
.prose ul,
.prose ol {
  padding-left: 1.3em;
}
.prose li {
  margin-bottom: 0.4em;
}
.prose img {
  border-radius: var(--radius);
  margin: 1.4em 0;
  box-shadow: var(--shadow);
}
.prose blockquote {
  margin: 1.4em 0;
  padding: 16px 22px;
  border-left: 5px solid var(--teal);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  color: var(--ink);
}

.callout {
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-left: 5px solid var(--teal);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin: 24px 0;
}
.callout h3 {
  margin-top: 0;
  color: var(--ink);
}

.img-placeholder {
  background: repeating-linear-gradient(
    45deg,
    var(--teal-mist),
    var(--teal-mist) 14px,
    var(--surface-2) 14px,
    var(--surface-2) 28px
  );
  border: 3px dashed var(--teal);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--teal-deep);
  font-weight: 700;
  min-height: 260px;
  padding: 24px;
}
.img-placeholder span {
  max-width: 320px;
}

.references {
  counter-reset: ref;
  list-style: none;
  padding: 0;
  margin: 0;
}
.references li {
  position: relative;
  padding: 14px 0 14px 40px;
  border-bottom: 1px solid var(--line);
  font-size: 0.96rem;
}
.references li::before {
  counter-increment: ref;
  content: counter(ref);
  position: absolute;
  left: 0;
  top: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--teal);
  color: #00272a;
  font-weight: 800;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.references a {
  word-break: break-word;
}

/* ---------- News ---------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) {
  .post-grid {
    grid-template-columns: 1fr;
  }
}
.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.post-card .thumb {
  aspect-ratio: 16 / 9;
  background: var(--teal-mist);
  object-fit: cover;
  width: 100%;
}
.post-card .body {
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.post-card time {
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 700;
}
.post-card h3 {
  margin: 6px 0 10px;
}
.post-meta {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 1.2em;
}

/* ---------- Sponsors ---------- */
.marquee {
  overflow: hidden;
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 24px;
}
.marquee-track {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
}
.marquee.is-scrolling {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 10%,
    #000 90%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 10%,
    #000 90%,
    transparent
  );
}
.marquee.is-scrolling .marquee-track {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee.is-scrolling:hover .marquee-track,
.marquee.is-scrolling:focus-within .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.sponsor {
  flex: 0 0 auto;
  /* Wide logos (LFT's is 8:1) get a wider tile rather than shrinking to a
     line; square ones keep the original size. */
  width: auto;
  min-width: 152px;
  max-width: 236px;
  height: 86px;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 10px, not 14: funders set on-screen minimums for their logos (The
     National Lottery Community Fund's is 125 x 40px), and 14px padding left
     only 124px of tile to draw one in. */
  padding: 10px;
  text-decoration: none;
  color: var(--ink);
}
/* Logos are reproduced as supplied. The strip used to grey them out until
   hover, which breaches most funders' brand rules: Dormant Assets NI's
   guidance forbids changing its colours. */
.sponsor img {
  max-height: 56px;
  max-width: 100%;
  object-fit: contain;
}
/* Funders' rules forbid knocking a logo's background out, so each logo
   carries its own white panel. Invisible on the light surface; a deliberate
   panel in dark mode, as the footer mark is. */
.sponsor img,
.partner img {
  background: #fff;
  border-radius: 3px;
}
.sponsor-name {
  font-family: var(--font-display);
  font-weight: 700;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
@media (prefers-reduced-motion: reduce) {
  .marquee.is-scrolling .marquee-track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }
  .marquee.is-scrolling {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- Download list ---------- */
.download-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.download-list li {
  margin-bottom: 12px;
}
.download-list a {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.12s,
    box-shadow 0.2s;
}
.download-list a:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.dl-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--teal-deep);
}
.dl-text {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.dl-date {
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.dl-action {
  color: var(--teal-deep);
  font-family: var(--font-display);
  font-weight: 700;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .download-list a {
    transition: none;
  }
}

/* ---------- Social card ---------- */
.social-card {
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--pop) var(--teal-pale);
  padding: 30px;
  text-align: center;
}
.social-card h3 {
  color: var(--ink);
  margin-bottom: 0.4em;
}
.social-card p {
  color: var(--ink-soft);
  margin-bottom: 1.2em;
}
.social-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: #fff;
  background: #0a66c2;
}

/* ---------- Team profiles ----------
   A card each, three across. Everyone carries the same weight: a charity this
   size does not need a hierarchy of layouts, and the order already says who
   leads. The fuller story sits behind a disclosure so nine profiles do not turn
   the page into an essay — <details> works without JavaScript. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}
@media (max-width: 980px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .team-grid { grid-template-columns: 1fr; } }

.person-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 28px 24px 24px;
  box-shadow: var(--pop) var(--teal-pale);
}
.person-card:nth-child(3n + 2) { box-shadow: var(--pop) var(--sun); }
.person-card:nth-child(3n) { box-shadow: var(--pop) var(--blue); }

.person-figure { width: 132px; margin: 0 auto 16px; }
.person-figure img {
  width: 132px;
  height: 132px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--surface);
  box-shadow: 6px 6px 0 var(--teal-pale);
}
.person-card h3 { font-size: 1.4rem; margin-bottom: 2px; }
.profile-role {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--teal-deep);
  margin: 0 0 2px;
}
.profile-tenure {
  font-family: var(--font-hand);
  font-size: 1.2rem;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.person-summary {
  color: var(--ink-soft);
  font-size: 0.97rem;
  margin: 8px 0 0;
}

/* Disclosure. The marker is replaced with a chevron built from the same
   gradient as the section rules. */
.person-more { margin-top: auto; padding-top: 14px; }
.person-more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--teal-deep);
  padding: 4px 2px;
}
.person-more > summary::-webkit-details-marker { display: none; }
.person-more > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s ease;
}
.person-more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.person-more .prose {
  text-align: left;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px dashed var(--line-strong);
  font-size: 0.97rem;
}
.person-more .prose p:last-child { margin-bottom: 0; }
.person-more .prose blockquote {
  margin: 1em 0;
  padding: 12px 16px;
  font-size: 0.97rem;
}
@media (prefers-reduced-motion: reduce) {
  .person-more > summary::after { transition: none; }
}

/* ---------- Board ----------
   Deliberately not person-cards. The board list is a governance disclosure, not
   a "meet the person" feature: names and offices, no photographs, no bios. It
   also keeps Alan and Rachel from reading as duplicates of their staff cards
   further up the page — they hold both roles, and this says which is which. */
.board-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 900px) { .board-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .board-grid { grid-template-columns: 1fr; } }

.board-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 18px 22px;
  box-shadow: 7px 7px 0 var(--teal-pale);
}
/* The office holder is the one fact on this list that carries weight. */
.board-tile.is-chair { box-shadow: 7px 7px 0 var(--sun); }
.board-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--ink);
}
.board-role {
  font-family: var(--font-hand);
  font-size: 1.2rem;
  color: var(--teal-deep);
}

/* Said once above the grid rather than repeated on every card. */
.photo-note {
  font-family: var(--font-hand);
  font-size: 1.2rem;
  color: var(--ink-soft);
  margin: 6px 0 0;
}

/* Monogram placeholder — a designed blank, not a stock silhouette. */
.monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  aspect-ratio: 1;
  margin: 0;
  background: var(--teal-mist);
  border: 3px dashed var(--line-strong);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--teal-deep);
}

/* Ways to give that live off-site — JustGiving, Facebook. Marked as external
   so nobody expects to stay on the charity's own site. */
.ways { margin-top: 22px; }
.ways-head {
  font-family: var(--font-hand);
  font-size: 1.3rem;
  color: var(--teal-deep);
  margin: 0 0 8px;
}
.ways ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ways a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--surface);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 9px 18px;
  color: var(--ink);
  text-decoration: none;
}
.ways a::after { content: "\2197"; font-size: 0.95em; }
.ways a:hover, .ways a:focus-visible { background: var(--teal); color: #00272a; }

/* Give-now block on /donate/, above the pledge form. */
.give-now { margin-bottom: 40px; }
.give-now-lead { color: var(--ink-soft); max-width: 46em; margin: 18px auto 0; }

/* ---------- Sponsors and grant funders ---------- */
.partner-groups { display: grid; gap: 44px; }
.partner-groups h3 { font-size: 1.5rem; margin-bottom: 18px; }

.partner-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.partner {
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 7px 7px 0 var(--teal-pale);
  width: auto;
  min-width: 172px;
  max-width: 260px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  text-align: center;
}
.partner a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-decoration: none; }
.partner img { max-height: 60px; max-width: 100%; object-fit: contain; }
.partner span { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1rem; }
.partner.has-note { height: auto; min-height: 96px; flex-direction: column; gap: 8px; }
.partner .grant-note { font-family: inherit; font-weight: 400; color: var(--ink-soft); font-size: 0.85rem; }


/* Shown until the charity confirms who to name — a funder list is a claim about
   other organisations, so it stays empty rather than plausible. */
.awaiting {
  border-style: dashed;
  border-color: var(--line-strong);
  box-shadow: none;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 44em;
}
.awaiting p { color: var(--ink-soft); margin: 0; }

/* ---------- Icons ----------
   Mark = the footprint, decorative only. Icon = line glyphs for the places
   where the symbol carries meaning (email, phone, address, locked area), where
   a footprint would say nothing. */
.mark {
  height: auto;
  flex: 0 0 auto;
}
.icon-svg {
  display: block;
  flex: 0 0 auto;
}

/* ---------- Utilities ---------- */
.center {
  text-align: center;
}
.mt-0 {
  margin-top: 0;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.measure {
  max-width: 68ch;
}
.lead {
  font-size: 1.2rem;
  color: var(--ink-soft);
}
.reg {
  font-size: 0.85rem;
  color: var(--ink-soft);
}
code {
  background: var(--teal-mist);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.9em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
@media (forced-colors: active) {
  /* Solid offset shadows and blob masks carry no meaning of their own; drop
     them so the forced palette is not fighting decoration. Borders and text
     already come from the system colours. */
  .card,
  .stone,
  .tile,
  .quote,
  .step,
  .model,
  .further-card,
  .social-card,
  .subnav {
    box-shadow: none;
  }
  .hero-split .hero-figure img:not(.fp-confetti),
  .hero-split .hero-figure picture img,
  .media-img img,
  .voice img {
    border-radius: 0;
  }
  /* Decorative marks add nothing once colour is forced. */
  .trail,
  .stones .tween,
  .hero-split .fp-confetti,
  .cta-band .fp-ghost,
  .chev-rule {
    display: none;
  }
}

/* Wide content must scroll inside its own container, never the page body. */
.scroll-x {
  overflow-x: auto;
}

/* ============================================================
   Ported component styles
   These were <style> blocks scoped to single Astro components.
   Astro added an attribute selector to each; here they rely on
   their own class chain, which already out-ranks the global rule
   they refine. Record any specificity fix in docs/css-deltas.md.
   ============================================================ */

/* Header.astro — the two components sit visibly inside the model they belong to. */
.subnav .subnav-child a { position: relative; padding-left: 28px; }
.subnav .subnav-child a::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}


/* VideoPlayer.astro — the film player and its HD toggle. */
  .video { margin: 0; }
  .video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0d1b26;
    border-radius: 8px;
    overflow: hidden;
  }
  .video-frame video { width: 100%; height: 100%; display: block; object-fit: contain; }
  .video-tools {
    display: flex; align-items: center; gap: 12px;
    margin-top: 10px; flex-wrap: wrap;
  }
  .quality {
    font: inherit; font-size: 0.9rem; font-weight: 600;
    padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--ink); cursor: pointer;
  }
  .quality:hover { border-color: var(--teal); }
  .quality:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
  .quality[aria-pressed='true'] { background: var(--teal); color: #00272a; border-color: var(--teal); }
  .video-note { font-size: 0.85rem; color: var(--ink-soft); }

/* Wake.astro — footprints behind the pointer. Its elements are created by assets/js/wake.js. */
  /* The elements below are created by the script above, so they never carry
     Astro's scoping attribute — these rules have to be global. */
  .gw-wake {
    position: absolute;
    inset: 0;
    z-index: 1; /* over the hero background, under .hero .container */
    overflow: hidden;
    pointer-events: none;
  }
  /* Page scope has to clear the content, because every band on this site
     paints an opaque ground. Still below the sticky header (1000), the mobile
     nav (1100) and the skip link (2000). */
  .gw-wake-page {
    position: fixed;
    z-index: 40;
  }
  .gw-print {
    position: absolute;
    left: 0;
    top: 0;
    height: auto;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
  }
  /* Landed on a dark or photographic ground — burn the mark out to white. */
  .gw-print.on-dark {
    filter: brightness(0) invert(1);
  }
  /* The literal reading of "the opposite colour". Blend sits on the layer, not
     the prints: a stacking context would otherwise confine the blend to the
     layer's own contents and it would have nothing to invert against. */
  .gw-wake-invert {
    mix-blend-mode: difference;
  }
  .gw-wake-invert .gw-print,
  .gw-wake-invert .gw-print.on-dark {
    filter: brightness(0) invert(1);
  }
  /* High-contrast mode replaces the palette wholesale; decorative teal
     footprints have nothing to say there. */
  @media (forced-colors: active) {
    .gw-wake {
      display: none;
    }
  }

/* donate.astro — the appeal film. */
  .appeal { max-width: 820px; margin: 0 auto; }
  .appeal-caption { font-size: 0.92rem; color: var(--ink-soft); margin-top: 12px; text-align: center; }

/* faq.astro — questions and answers. */
  .faq-list {
    max-width: 800px;
  }
  .faq-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 14px;
    padding: 4px 8px;
  }
  .faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 44px 18px 20px;
    font-weight: 700;
    color: var(--navy);
    font-size: 1.1rem;
    position: relative;
  }
  .faq-item summary::-webkit-details-marker {
    display: none;
  }
  .faq-item summary::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--teal-dark);
    line-height: 1;
  }
  .faq-item[open] summary::after {
    content: '\2013';
  }
  .faq-item summary:focus-visible {
    outline: var(--focus);
    outline-offset: 2px;
    border-radius: 8px;
  }
  .faq-item p {
    margin: 0;
    padding: 0 20px 20px;
    color: var(--muted);
  }

/* gallery.astro — the photograph grid and the enlarged view. */
  .gallery {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
  }
  .shot {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--line);
    cursor: zoom-in;
    line-height: 0;
  }
  .shot img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
  }
  .shot.tall img { object-position: 50% 25%; }
  .shot:hover img,
  .shot:focus-visible img { transform: scale(1.04); }
  .shot:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

  /* The gallery in sections: each age group under its own heading. */
  .gallery-section + .gallery-section { padding-top: 0; }
  .gallery.clips { margin-top: 14px; }
  .clip { margin: 0; }
  /* Phone clips are portrait, so the tile is too. */
  .clip video {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: contain;
    background: #0a1b26;
    border-radius: 8px;
  }

  .credit {
    margin-top: 26px;
    text-align: center;
    font-size: 0.88rem;
    color: var(--ink-soft);
  }

  #lightbox {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: min(1200px, 94vw);
    max-height: 92vh;
  }
  #lightbox::backdrop { background: rgba(10, 27, 38, 0.88); }
  #lightbox img {
    display: block;
    max-width: 100%;
    max-height: 88vh;
    width: auto;
    border-radius: 6px;
  }
  #lightbox .close {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #0a2436;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
  }
  #lightbox .close:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

  @media (prefers-reduced-motion: reduce) {
    .shot img { transition: none; }
    .shot:hover img, .shot:focus-visible img { transform: none; }
  }

/* services/index.astro — the model card with its parts. */
  .card-model { display: flex; flex-direction: column; }
  .card-main { display: block; color: inherit; text-decoration: none; }
  .card-parts { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
  .parts-label {
    font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-soft); margin: 0 0 8px;
  }
  .card-parts ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
  .card-parts a { font-weight: 600; }

/* ============================================================
   WordPress
   Only what WordPress itself adds to the page. Nothing here
   changes the design.
   ============================================================ */

/* Logged-in users get the admin bar; keep the sticky header clear of it.
   Below 600px WordPress stops fixing the bar, so the header sticks to the top. */
body.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) {
  body.admin-bar .site-header { top: 0; }
}

/* Ordinary lists given the "Ticks" style in the editor use the design's ticked
   list. The element in the selector matches the specificity of `.prose ul`, and
   this rule comes later, so it wins inside a prose column too. */
ul.is-style-ticks {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.is-style-ticks li {
  position: relative;
  padding: 8px 0 8px 36px;
}
ul.is-style-ticks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 9px;
  color: #00272a;
  background: var(--teal);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}