/* ==========================================================================
   Cistern of Hope Foundation - UX refinements
   --------------------------------------------------------------------------
   Loads last, after prototype.css, wp-adapt.css and design-system.css, so it
   can correct interaction and readability problems without editing the
   approved design layer.

   Scope, and the reason for each block, is documented inline. Nothing here
   changes the brand palette, the type family or the page composition.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Anchor landing position
   The header is sticky and html has scroll-behavior:smooth, so every in-page
   anchor previously landed underneath the header and the heading you clicked
   toward was hidden. scroll-margin-top reserves the header height.
   -------------------------------------------------------------------------- */
:root {
  --header-h: 78px;
  --focus-ring: #a34d2a;
}

section[id],
h2[id],
h3[id],
[id].anchor-target {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

@media (max-width: 600px) {
  :root { --header-h: 66px; }
}


/* --------------------------------------------------------------------------
   2. Focus visibility
   Focus styling was inconsistent between links, buttons and form controls.
   One ring, used everywhere, at 3:1 against every ground in the palette.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* On the dark grounds the terracotta ring is too low-contrast; use gold. */
.impact a:focus-visible,
.impact button:focus-visible,
.page-hero a:focus-visible,
.hero a:focus-visible,
footer a:focus-visible,
.top a:focus-visible,
.cta-band a:focus-visible {
  outline-color: #f2c969;
}

/* Never remove the ring for keyboard users, even if a component tries. */
:focus-visible { outline-style: solid; }


/* --------------------------------------------------------------------------
   3. Touch targets
   Nav, footer and utility-bar links were 13px text with no padding, giving
   tap targets well under the 44px minimum. Height is added with padding so
   the visual rhythm is unchanged on desktop.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .links a,
  .navgroup__btn,
  .navgroup__panel a,
  .foot a,
  .copyright a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .foot a { padding: 4px 0; }

  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
  }
}

.btn,
.cta,
.cta-mobile {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* --------------------------------------------------------------------------
   4. Checklist readability
   .list-check--2col used CSS multi-column, so items read top-to-bottom down
   column one and then jump back up to column two. For an unordered list of
   peers that ordering is arbitrary and hard to scan. Grid restores a natural
   left-to-right reading order and aligns the rows.
   -------------------------------------------------------------------------- */
.list-check--2col {
  columns: auto;
  column-gap: normal;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 45px;
  align-items: start;
}

@media (max-width: 700px) {
  .list-check--2col { grid-template-columns: 1fr; }
}

/* Slightly stronger than --muted: these lists are primary content on the
   Partners and Accountability pages, not secondary notes. */
.list-check li { color: #4a534e; }


/* --------------------------------------------------------------------------
   5. Data tables on small screens
   .cohf-table carried min-width:560px, which forced a horizontal scroll on
   every phone with no visible cue that content continued sideways. Below
   600px each row becomes a stacked question/answer block instead.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .table-wrap {
    overflow-x: visible;
    border: 0;
    background: transparent;
  }

  .cohf-table,
  .cohf-table tbody,
  .cohf-table tr,
  .cohf-table th,
  .cohf-table td {
    display: block;
    width: auto;
    min-width: 0;
  }

  .cohf-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .cohf-table tbody tr {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 4px 2px;
    margin-bottom: 14px;
  }

  .cohf-table tbody th {
    white-space: normal;
    border-bottom: 0;
    padding-bottom: 2px;
    font-size: 16px;
  }

  .cohf-table tbody td {
    border-bottom: 0;
    padding-top: 0;
    color: var(--muted);
  }

  .cohf-table tbody tr:last-child { margin-bottom: 0; }
}

/* Above 600px the table still scrolls if the viewport is narrow. Give it a
   visible edge fade so the overflow is discoverable rather than silent. */
@media (min-width: 601px) {
  .table-wrap {
    background-image:
      linear-gradient(to right, #fff 30%, #fff0),
      linear-gradient(to left, #fff 30%, #fff0),
      linear-gradient(to right, #123a2d1f, #123a2d00),
      linear-gradient(to left, #123a2d1f, #123a2d00);
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}


/* --------------------------------------------------------------------------
   6. In-page section navigation
   The Partners, Accountability, Strategy and Support pages are long, single
   scroll documents. A chip row under the hero gives orientation and a way to
   reach a section directly. It is a real <nav> so it is announced correctly.
   -------------------------------------------------------------------------- */
.section-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 4;
  background: #fffffff2;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.section-nav__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.section-nav__list::-webkit-scrollbar { display: none; }

.section-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 700 13px/1 var(--font-body);
  color: var(--forest, var(--g));
  background: #fff;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.section-nav a:hover {
  background: var(--sage, var(--s));
  border-color: var(--green, var(--g2));
}

.section-nav a[aria-current="true"] {
  background: var(--forest, var(--g));
  border-color: var(--forest, var(--g));
  color: #fff;
}

@media (max-width: 900px) {
  .section-nav { position: static; }
}

@media print {
  .section-nav { display: none; }
}


/* --------------------------------------------------------------------------
   7. Section heading rhythm
   .section-head used align-items:end, so a two-line heading and a one-line
   paragraph sat on mismatched baselines. Aligning to the start and giving the
   supporting paragraph a measure reads more deliberately.
   -------------------------------------------------------------------------- */
.section-head {
  align-items: start;
}

.section-head > p {
  max-width: 46ch;
  margin-top: 0;
}

/* The inline style="margin-top:55px" repeated in page templates is replaced
   by this utility so spacing stays in the stylesheet. */
.section-head--stacked {
  margin-top: clamp(40px, 5vw, 64px);
}


/* --------------------------------------------------------------------------
   8. Cards
   Cards animated on :hover only, so keyboard users got no equivalent signal,
   and the lift was suppressed for nobody who had asked for less motion.
   -------------------------------------------------------------------------- */
.card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 15px 45px #17231e18;
}

.card h3 { text-wrap: balance; }

@media (prefers-reduced-motion: reduce) {
  .card,
  .card:hover,
  .card:focus-within,
  .section-nav a {
    transition: none;
    transform: none;
  }

  html { scroll-behavior: auto; }
}


/* --------------------------------------------------------------------------
   9. Headline and measure typography
   Headings wrapped with one orphaned word on common viewport widths. Body
   copy had no cap, so on wide screens some paragraphs ran past 100 characters
   per line, which is well beyond the comfortable 50-75 range.
   -------------------------------------------------------------------------- */
h1, h2, h3,
.cta-band h2,
.section-head h2 {
  text-wrap: balance;
}

.feature p,
.story-copy p,
section > .container > p {
  max-width: 68ch;
}

p { text-wrap: pretty; }


/* --------------------------------------------------------------------------
   10. Empty states
   The Partners empty state is a genuine editorial position, not an error, so
   it should read as a considered statement rather than a dashed placeholder.
   -------------------------------------------------------------------------- */
.partner-empty {
  border-style: solid;
  border-color: var(--line);
  border-left: 4px solid var(--gold);
  font-size: 16px;
  line-height: 1.6;
  max-width: 68ch;
}


/* --------------------------------------------------------------------------
   11. Images
   Reserve space so cards and features do not shift as images decode.
   -------------------------------------------------------------------------- */
.card img,
.story img,
.feature img {
  background: var(--sage, var(--s));
}


/* --------------------------------------------------------------------------
   12. Forms
   Labels, hints and errors were visually uniform with the inputs. Give the
   label weight, mark required fields, and make the invalid state obvious.
   -------------------------------------------------------------------------- */
.field > label {
  font: 700 13px/1.4 var(--font-body);
  letter-spacing: .02em;
  color: var(--forest, var(--g));
}

.field .required {
  color: var(--terra, var(--t));
  margin-left: 2px;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  min-height: 48px;
  background: #fff;
}

input:user-invalid,
textarea:user-invalid,
select:user-invalid {
  border-color: #9c2f14;
  box-shadow: 0 0 0 1px #9c2f14;
}

::placeholder { color: #8a938e; opacity: 1; }


/* --------------------------------------------------------------------------
   13. Card affordance
   .card lifted 4px on hover regardless of whether it did anything. On the
   About values grid, the Get Involved "other ways" grid and the Impact
   cards, that lift promises a click that never arrives. Restrict the
   interactive treatment to cards that actually contain a link.
   -------------------------------------------------------------------------- */
.card:hover {
  transform: none;
  box-shadow: none;
}

.card:has(a):hover,
.card:has(a):focus-within {
  transform: translateY(-4px);
  box-shadow: 0 15px 45px #17231e18;
}

/* Make the whole linked card clickable, while leaving the link itself as the
   accessible target rather than adding a redundant tabbable wrapper. */
.card:has(.arrow) { position: relative; }

.card:has(.arrow) .arrow::after {
  content: "";
  position: absolute;
  inset: 0;
}


/* --------------------------------------------------------------------------
   14. Breadcrumbs
   cohf_breadcrumbs() was written in inc/seo.php but never called from any
   template, so inner pages offered no route back up. Now rendered in the
   page hero; this styles it for the dark hero ground.
   -------------------------------------------------------------------------- */
.breadcrumbs {
  margin-bottom: 18px;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 600 12.5px/1.4 var(--font-body);
  letter-spacing: .01em;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.breadcrumbs li + li::before {
  content: "/";
  color: #ffffff5c;
}

.page-hero .breadcrumbs a { color: #cfe0d7; }

.page-hero .breadcrumbs a:hover,
.page-hero .breadcrumbs a:focus-visible { color: #fff; }

.page-hero .breadcrumbs [aria-current="page"] { color: #ffffff9e; }

@media print {
  .breadcrumbs { display: none; }
}


/* --------------------------------------------------------------------------
   15. Filter bar (Programmes, Resources)
   The pressed state was carried only by aria-pressed, with no visual
   difference, so sighted users could not tell which filter was active.
   -------------------------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(28px, 3.5vw, 40px);
}

.filter-bar button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font: 700 13px/1 var(--font-body);
  color: var(--forest, var(--g));
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.filter-bar button:hover {
  background: var(--sage, var(--s));
  border-color: var(--green, var(--g2));
}

.filter-bar button[aria-pressed="true"] {
  background: var(--forest, var(--g));
  border-color: var(--forest, var(--g));
  color: #fff;
}

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


/* --------------------------------------------------------------------------
   16. Callout
   page-contact.php styled a safeguarding notice with .payment-placeholder,
   a class whose name and dashed treatment both say "unfinished". Raising a
   safeguarding concern is not a placeholder. This is its own component.
   -------------------------------------------------------------------------- */
.callout {
  border: 1px solid var(--line);
  border-left: 4px solid var(--terra, var(--t));
  border-radius: 14px;
  padding: 22px 24px;
  background: #fff;
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 62ch;
}

.callout b,
.callout strong {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--forest, var(--g));
}

.sage .callout,
.cream .callout { background: #fff; }


/* --------------------------------------------------------------------------
   17. Spacing utilities
   Eight templates carried inline style="margin-top:NNpx" values ranging from
   14px to 55px, set by hand and not on any scale. These replace them so
   vertical rhythm lives in the stylesheet and stays consistent.
   -------------------------------------------------------------------------- */
.stack-xs { margin-top: 14px; }
.stack-sm { margin-top: 20px; }
.stack-md { margin-top: 28px; }
.stack-lg { margin-top: clamp(30px, 3.4vw, 40px); }

/* Two-column variant of the .purpose grid, previously an inline override. */
.purpose--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .purpose--2col { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   18. Header navigation capacity
   The theme used to ignore the WordPress menu entirely because nine assigned
   items overflowed the container and broke the header onto two lines. That
   fixed a layout bug by taking the menu away from editors. The menu is back
   (see cohf_nav() in inc/theme-functions.php); this is the actual fix.

   The row tightens progressively as the viewport narrows, and the brand
   wordmark - the widest flexible element up there - is allowed to give up
   space before the links do. Below 900px the whole row collapses into the
   existing mobile toggle, which is untouched.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .nav {
    gap: 16px;
    min-width: 0;
  }

  /* The links row is the part that must not overflow. */
  .links {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: center;
  }

  .links > a,
  .navgroup {
    flex: 0 0 auto;
  }

  /* Let the wordmark shrink and, if it must, truncate - rather than pushing
     the links into an overflow. The logo mark itself never shrinks. */
  .brand {
    min-width: 0;
    flex: 0 1 auto;
  }

  .brand > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cta { flex: 0 0 auto; }
}

/* Navigation type scale.

   The header ran at 12.5px, shrinking to 11.5px, which is small for a
   primary navigation and sat noticeably below the brand and the button it
   shares a row with. That scale was set when the menu was a flat row of ten
   items and every pixel was needed; the grouped structure carries seven, so
   the space exists to read comfortably.

   Measured from the live header at 1190px: the links occupied about 470px
   between a brand ending near 295px and a button starting near 1005px, so
   roughly 710px was available. At 15px the same labels need about 595px,
   which clears the button with room to spare.

   The tiers still step the scale down as the row tightens, and below 901px
   the menu collapses to the toggle, which remains the honest answer when
   the space genuinely runs out. */
@media (min-width: 901px) {
  .links {
    gap: 0 20px;
    font-size: 15px;
  }

  /* font:inherit on the button means this has to be set alongside, or the
     dropdown parents would stay at the old size while the plain links grew. */
  .navgroup__btn { font-size: 15px; }

  header .cta { font-size: 13px; }
}

/* Tier 1: the row is tightening but the full label set still fits. */
@media (min-width: 901px) and (max-width: 1280px) {
  .links { gap: 0 16px; font-size: 14px; }
  .navgroup__btn { font-size: 14px; }
}

/* Tier 2: genuinely tight. Trim the gaps and the tagline before the type,
   because legibility is the last thing that should be sacrificed. */
@media (min-width: 901px) and (max-width: 1080px) {
  .links { gap: 0 10px; font-size: 12.5px; }
  .navgroup__btn { font-size: 12.5px; }
  .nav { gap: 10px; }
  .cta { padding: 10px 14px; font-size: 12px; }
  .brand small { display: none; }
}

/* The dropdown panels were built against the smaller parent scale, so
   raising only the top level would leave the panels looking shrunken. */
.links .navgroup__panel a {
  font-size: 14px;
  line-height: 1.35;
}

.navgroup__desc {
  font-size: 12px;
}


/* --------------------------------------------------------------------------
   19. Homepage composition

   Reviewed against a full-page capture of the live homepage. Four things
   were working against the page reading as composed, and each is a
   structural fault rather than a matter of taste.
   -------------------------------------------------------------------------- */

/* --- 19a. The hero reads from the centre -----------------------------------
   The slider copy was left-aligned in a 690px box that began around 295px -
   neither on the page's left grid line (65px) nor centred, so it floated
   with no relationship to anything above or below it.

   Centring resolves it: a hero is a title card, not a column of body copy,
   and the arrows and dots were already centre-anchored, so the copy was the
   only element off-axis. */
.hero--slider .inner {
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}

.hero--slider .eyebrow {
  display: block;
}

.hero--slider h1 {
  margin-inline: auto;
  max-width: 20ch;
}

.hero--slider p {
  margin-inline: auto;
  max-width: 58ch;
}

.hero--slider .buttons {
  justify-content: center;
}

/* The overlay was a 90deg ramp: opaque on the left, nearly clear on the
   right. That was correct for left-aligned copy and is wrong for centred
   copy, which would sit half on dark and half on bright image. A vignette
   is symmetrical, so the headline holds contrast across its whole width
   whatever the photograph is doing behind it. */
.hero--slider:before {
  background:
    linear-gradient(180deg, #0e2d2359 0%, #0e2d2326 45%, #0e2d23a6 100%),
    radial-gradient(120% 90% at 50% 50%, #0e2d2347 0%, #0e2d23c9 75%, #0e2d23e6 100%);
}

/* Keep the controls clear of the copy now that it runs to the centre. */
.hero--slider .hero__dots {
  margin-top: 26px;
}

/* --- 19b. Centred section headings ----------------------------------------
   The two-column head (heading left, supporting line right) put the
   paragraph's first line above the heading's, because the heading carries a
   ruled label above it and the paragraph does not. No alignment value fixes
   that honestly: the two columns have different numbers of elements.

   Stacking and centring them removes the mismatch instead of negotiating
   with it, and gives the full-width sections a clear central axis while the
   card grids beneath stay left-aligned and readable.

   Widened from the homepage to the whole site in 9.34.0. The reference
   centres its section introductions throughout, and having it on the
   homepage alone meant the front page and the inner pages were speaking in
   two different layouts. Every .section-head across the ten templates that
   use one sits directly inside a .container in a full-width section, so
   there is nowhere this lands inside a narrow or two-column block.

   Applied only to .section-head, so the two-column story and feature
   blocks keep their left-aligned copy, as do the cards beneath each head. */
.section-head {
  display: block;
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
}

.section-head .sec-label,
.section-head .kicker {
  justify-content: center;
}

.section-head .sec-statement,
.section-head h2 {
  max-width: 24ch;
  margin-inline: auto;
}

.section-head .sec-statement--wide {
  max-width: 30ch;
}

.section-head > p,
.section-head .sec-lede {
  max-width: 62ch;
  margin-inline: auto;
}

/* The "Explore all" link was a second flex child pinned to the right edge,
   level with the label rather than the heading. Centred beneath the head it
   reads as a deliberate next step. */
.section-head > .arrow {
  display: inline-block;
  margin-top: 18px;
}

/* --- 19c. The approach grid's broken rule ----------------------------------
   Each step draws its own 2px top border, and seven steps in a four-column
   grid leaves the second row three wide. The rule above row one spanned the
   full width; the rule above row two stopped three-quarters across, which
   read as an unfinished table.

   A single generated cell completes the row and carries the missing border.
   Seven items plus one filler divides evenly into both the four-column and
   two-column layouts; at one column there is no partial row, so the filler
   would add a stray line and is suppressed. */
@media (min-width: 601px) {
  .steps::after {
    content: "";
    border-top: 2px solid var(--g);
  }
}

/* --- 19d. Smaller alignment debts ------------------------------------------ */

/* "Formally registered in Kenya" wrapped to two lines while its neighbours
   stayed on one, breaking an otherwise even row. Balancing splits it evenly
   rather than leaving one word alone on the second line. */
.fact span {
  text-wrap: balance;
}

/* The editor-only stories notice sat alone against a full section's padding,
   leaving a large empty band. Visitors never see it, but an editor should
   not be shown a broken-looking page either. */
.home .partner-empty {
  margin-inline: auto;
  text-align: left;
}

/* --------------------------------------------------------------------------
   20. Mobile menu: fewer rules, and a permanent way to act

   The drawer drew a full-width rule under all seven top-level items, a
   coloured rule under whichever was open, and a vertical rule beside every
   child. With each child also carrying a description, opening Programmes
   produced seven stacked items and well over a dozen lines on a screen
   about 360px wide. The lines were doing work that space and weight do
   better, and they were competing with the content.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {

  /* Separation by rhythm rather than by rules. */
  .links a,
  .navgroup__btn {
    border-bottom: 0;
    padding: 14px 0;
  }

  /* The open group becomes a single tinted block. One shape replaces the
     coloured rule above the panel and the vertical rule beside it, and it
     groups parent and children far more clearly than a line ever did. */
  .navgroup.is-open {
    background: var(--cream);
    border-radius: 16px;
    padding: 0 14px;
    margin: 6px 0;
  }

  .navgroup.is-open .navgroup__btn {
    color: var(--terra);
    padding-bottom: 8px;
  }

  .links .navgroup__panel a {
    border-left: 0;
    border-radius: 10px;
    padding: 11px 0 11px 12px;
    font-size: 14.5px;
  }

  /* Descriptions earn their place on a wide dropdown, where they sit beside
     the page they describe. Stacked on a phone they double the height of
     every group and push the later items out of reach. */
  .navgroup__desc {
    display: none;
  }

  /* The drawer keeps its own Support button. The action bar is hidden while
     the menu is open, so removing this as "redundant" would leave an open
     menu with no way to give at all. It also gives the drawer a proper
     closing action instead of trailing off after the last link. */
  .links .cta-mobile {
    margin-top: 18px;
  }
}

/* --- 20b. Persistent action bar -------------------------------------------
   Below 900px the header's Support Our Work button is hidden to make room
   for the toggle, so every route to the Foundation - give, partner, call,
   message - sat behind the menu button or at the bottom of the footer. This
   keeps all four on screen without costing any content width.

   The first cut was four flat cells with the gold Give block running hard
   into the screen corner, which read as an accident rather than a decision.
   Give is now an inset pill: the same prominence, deliberately placed. The
   bar is translucent over a blur so content scrolling beneath it stays
   legible as context rather than being cut off by a solid band. */
.cohf-actionbar {
  display: none;
}

@media (max-width: 900px) {
  .cohf-actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px #17231e1a;
    /* Clears the home indicator on iOS without padding other devices. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .cohf-actionbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* 50px plus the bar's own padding keeps every target above the 44px
       minimum while the bar itself stays under 64px. */
    min-height: 50px;
    padding: 6px 2px;
    border-bottom: 0;
    border-radius: 12px;
    color: var(--forest, var(--g));
    text-align: center;
    transition: background-color 0.18s ease, transform 0.18s ease;
  }

  .cohf-actionbar__ico {
    display: block;
    line-height: 0;
  }

  .cohf-actionbar__ico svg {
    display: block;
    width: 22px;
    height: 22px;
  }

  .cohf-actionbar__label {
    font: 650 10.5px/1 var(--font-body);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Giving is the one action worth making unmistakable, so it carries the
     gold and a little more width than the three contact actions. */
  .cohf-actionbar__item--support {
    background: var(--gold);
    color: var(--ink);
    box-shadow: 0 2px 8px #d9a2274d;
  }

  .cohf-actionbar__item--support .cohf-actionbar__label {
    font-weight: 800;
  }

  .cohf-actionbar__item[aria-current] {
    color: var(--terra);
  }

  /* A visible press state. Without one a fixed bar feels inert, because
     there is no page transition to confirm the tap landed. */
  .cohf-actionbar__item:active {
    transform: scale(0.97);
  }

  .cohf-actionbar__item:not(.cohf-actionbar__item--support):active {
    background: var(--cream);
  }

  /* Keep page content, and especially the footer, clear of the bar. */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  /* The open drawer scrolls to its own Support button and footer links, so
     the bar would overlay them. Hidden while the menu is open. */
  body:has(.links.is-open) .cohf-actionbar {
    display: none;
  }
}

/* A fixed bar prints as a band across the foot of the first page and the
   body padding leaves a gap on every other page. Neither is wanted on
   paper, where a tap target means nothing. */
@media print {
  .cohf-actionbar {
    display: none;
  }

  body {
    padding-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   21. Block-built page bodies
   When a page opts into "build this page with blocks", its content renders
   inside .page-blocks. Editor output has no idea about the theme's section
   rhythm, so without this it would run edge to edge with no vertical space.
   -------------------------------------------------------------------------- */
.page-blocks {
  padding: var(--space-section, 85px) 0;
}

/* A pattern that already supplies its own .container must not be wrapped in
   a second one, so the width is applied to direct children instead. */
.page-blocks > :not(.container):not(section):not(.alignfull):not(.alignwide) {
  width: min(var(--max, 1220px), calc(100% - 40px));
  margin-inline: auto;
}

/* Sections inserted from the pattern library bring their own padding. */
.page-blocks > section { padding: 0 0 var(--space-section, 85px); }
.page-blocks > section:last-child { padding-bottom: 0; }

.page-blocks > * + * { margin-top: clamp(28px, 3.4vw, 44px); }

.page-blocks .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.page-blocks .alignwide {
  width: min(1420px, calc(100% - 40px));
  margin-inline: auto;
}

/* Core block wrappers should not fight the grid classes the patterns set. */
.page-blocks .wp-block-group.feature,
.page-blocks .wp-block-group.grid,
.page-blocks .wp-block-group.cta-band {
  display: grid;
}

.page-blocks .wp-block-image { margin: 0; }
.page-blocks .wp-block-image img { border-radius: var(--r, 22px); }

/* The core table block puts the class on the <figure>, not the <table>, so
   the existing .cohf-table rules never match seeded tables. Re-point them. */
.page-blocks .wp-block-table.cohf-table {
  margin: 25px 0 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r, 22px);
  background: #fff;
}

.page-blocks .wp-block-table.cohf-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.page-blocks .wp-block-table.cohf-table th,
.page-blocks .wp-block-table.cohf-table td {
  padding: 15px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.page-blocks .wp-block-table.cohf-table thead th {
  background: var(--cream, var(--c));
  font: 650 12px/1.3 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--forest, var(--g));
}

.page-blocks .wp-block-table.cohf-table tbody tr td:first-child {
  font-weight: 700;
  color: var(--forest, var(--g));
}

.page-blocks .wp-block-table.cohf-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Same stacked treatment on phones as the hardcoded tables get. */
@media (max-width: 600px) {
  .page-blocks .wp-block-table.cohf-table,
  .page-blocks .wp-block-table.cohf-table table,
  .page-blocks .wp-block-table.cohf-table tbody,
  .page-blocks .wp-block-table.cohf-table tr,
  .page-blocks .wp-block-table.cohf-table td {
    display: block;
    width: auto;
  }

  .page-blocks .wp-block-table.cohf-table {
    border: 0;
    background: transparent;
    overflow-x: visible;
  }

  .page-blocks .wp-block-table.cohf-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .page-blocks .wp-block-table.cohf-table tbody tr {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 4px 2px;
    margin-bottom: 14px;
  }

  .page-blocks .wp-block-table.cohf-table td { border-bottom: 0; }
}


/* --------------------------------------------------------------------------
   20. Print
   Supporters and funders do print these pages. Drop the furniture.
   -------------------------------------------------------------------------- */
@media print {
  .top,
  header,
  .cta,
  .cta-mobile,
  .nav-toggle,
  .cta-band .buttons {
    display: none !important;
  }

  .page-hero {
    background: none !important;
    color: #000;
    padding: 0 0 18px;
  }

  .page-hero h1,
  .page-hero p { color: #000; }

  section { padding: 18px 0; break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   22. Homepage: slider arrows, Our Approach, Our Impact
   -------------------------------------------------------------------------- */

/* --- 22a. Slider arrows on the centre line ---------------------------------
   The arrows and the dots shared one flex row pinned to the bottom of the
   hero, so the arrows sat in the bottom corners - far from the image they
   page through, and level with the dots that do the same job. Moving them
   to the vertical centre puts them where a carousel is reached for, and
   leaves the dots alone as the position indicator.

   Only above 700px, which is where the arrows are visible at all; below
   that they are hidden and the dots stay bottom-centred. */
@media (min-width: 701px) {
  .hero--slider .hero__controls {
    top: 0;
    bottom: 0;
    height: auto;
    margin-block: 0;
    align-items: center;
  }

  .hero--slider .hero__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 26px;
    justify-content: center;
    margin: 0;
  }
}

/* Slightly larger, so a 48px target is reachable and the glyph is not lost
   against a photograph. */
.hero__arrow {
  width: 48px;
  height: 48px;
  font-size: 24px;
}

/* --- 22b. Our Approach ------------------------------------------------------
   Seven steps in a rigid four-column grid, each drawing its own 2px top
   rule, read as a table of contents rather than a pathway: row two stopped
   three-quarters of the way across, so a filler cell had to be generated
   just to finish the line.

   Switching from grid to centred flex removes the cause instead of patching
   it. Row two now holds three cards centred under four, which looks
   deliberate, and the shared rule is gone along with the ragged edge. Each
   step becomes a white card on the sage band, matching the purpose trio and
   the programme cards elsewhere on the page, and the number becomes a badge
   rather than a stray coloured word above the heading. */
.steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

/* The filler cell from 19c completed the old grid's broken rule. With no
   shared rule and no rigid columns it would now render as an empty card. */
.steps::after {
  display: none;
}

.steps > .step {
  flex: 0 1 calc(25% - 13.5px);
  padding: 24px 22px 26px;
  border-top: 0;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 1px 2px #17231e0f;
}

.step .num {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--s);
  color: var(--g);
  font: 800 12px/1 var(--font-body);
  letter-spacing: 0.02em;
}

.step h3 {
  font-size: 19px;
  line-height: 1.25;
}

.step p {
  font-size: 14px;
}

@media (max-width: 1024px) {
  .steps > .step {
    flex-basis: calc(33.333% - 12px);
  }
}

@media (max-width: 900px) {
  .steps > .step {
    flex-basis: calc(50% - 9px);
  }
}

@media (max-width: 600px) {
  .steps > .step {
    flex-basis: 100%;
  }
}

/* --- 22c. Our Impact --------------------------------------------------------
   The figures were five cells separated by 1px seams, which is how a data
   table is drawn, not how an achievement is presented. The numerals were
   also small enough that "8" and "6" read as footnotes rather than results.

   Each figure now sits on its own softly lit panel with room around it, and
   the numerals scale up. Nothing about the data changed; it is simply given
   the weight it earned. */
.impact .numbers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  background: transparent;
}

/* Revised in 9.33.0 after studying dckabeten.org directly. That page states
   its figures on a flat dark band with nothing around them at all - no
   panels, no seams, no borders - and lets the gold numerals and a lot of
   quiet space do the work. Panels were an improvement on hairline seams,
   but they still framed each figure like a dashboard tile. Taking the frame
   away entirely is both closer to the reference and simply better. */
.impact .number {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: center;
}

.impact .number strong {
  font-size: clamp(44px, 4vw, 58px);
  line-height: 1;
  margin-bottom: 12px;
}

.impact .number span {
  font-size: 14px;
  line-height: 1.5;
  max-width: 22ch;
  color: #cfded6;
  /* These labels are full phrases and wrap to two or three lines. Balancing
     stops one word being stranded on the last line of a narrow panel. */
  text-wrap: balance;
}

/* Replaces a <br> in the template, which could not be tuned per breakpoint. */
.impact__more {
  margin-top: 34px;
}

@media (max-width: 1024px) {
  .impact .numbers {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .impact .numbers {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 460px) {
  .impact .numbers {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   23. Measured against dckabeten.org

   Both sites already share an architecture - serif display over sans body,
   a gold accent, centred section introductions, pill buttons, a dark
   figures band, a photographic hero with centred copy. These are the two
   places where the reference is doing something measurably better.
   -------------------------------------------------------------------------- */

/* --- 23a. A lighter hero wash ----------------------------------------------
   9.28.0 replaced the hero's 90deg ramp with a symmetrical vignette so that
   centred copy would not sit half on dark and half on bright image. That was
   right in principle but went too far: at 90% black in the corners the
   photograph became a texture rather than a picture, and these are
   photographs of real people the Foundation works with.

   The reference holds its hero image at roughly half strength - clearly a
   photograph, with the headline still comfortably legible on top. Matching
   that means easing every stop while keeping the shape: lightest at the
   centre where the words are, strongest at the bottom where the controls
   and the section edge need separation. */
.hero--slider:before {
  background:
    linear-gradient(180deg, #0e2d234d 0%, #0e2d2326 45%, #0e2d2394 100%),
    radial-gradient(130% 100% at 50% 50%, #0e2d231f 0%, #0e2d237a 80%, #0e2d239e 100%);
}

/* --- 23b. Buttons with presence --------------------------------------------
   At 12px by 19px the buttons were the least confident element on the page,
   noticeably smaller than the reference's calls to action and small against
   our own 46px headings. Growing the padding and the label brings them up to
   a comfortable 48px tall, which is also the touch target the action bar
   already uses. */
.btn {
  padding: 15px 30px;
  font-size: 15px;
}

/* The header button is the one exception: it has to sit inside a 78px nav
   beside the menu, so it takes the same treatment one step down. */
.cta {
  padding: 13px 24px;
  font-size: 14px;
}

@media (max-width: 600px) {
  .btn {
    padding: 14px 24px;
    font-size: 14.5px;
  }
}

/* --------------------------------------------------------------------------
   24. Our Impact, drawn in

   Five figures were set across the full 1180px container, roughly 236px
   apart. Spread that far they stopped reading as one set of results and
   became five separate statements that happened to share a band - and the
   eye had to travel the whole page width to collect them. The band then ran
   on for another 200px below the button with nothing in it.

   Everything here pulls the section inward. Nothing is removed.

   Originally scoped to the homepage, on the reasoning that the Impact page
   presents these figures as its subject rather than as a summary and so
   should keep the full measure. In practice that produced two different
   presentations of one identical set of numbers, and the wide version was
   the weaker of the two: five figures spread across 1180px stop reading as
   a set. Unscoped in 9.40.0 so both surfaces present the figures the same
   compact way.
   -------------------------------------------------------------------------- */

/* A summary should be read in one glance, not scanned end to end. At 940px
   the five figures group as a single block with the heading above them,
   which is also what makes it read as considered rather than sparse. */
.impact .numbers {
  max-width: 940px;
  margin-inline: auto;
  gap: 10px;
}

.impact .number {
  padding: 10px 8px;
}

/* 58px was sized for figures standing alone across a full page. Drawn into
   a tighter block they no longer need to shout to hold the space. */
.impact .number strong {
  font-size: clamp(34px, 3vw, 46px);
  margin-bottom: 8px;
}

.impact .number span {
  font-size: 12.5px;
  line-height: 1.45;
  max-width: 17ch;
}

/* Explore Impact was the last element in the section still sitting hard
   left while the label, heading, lede and figures were all centred. One
   stray alignment is enough to make a composition look unresolved. */
.impact__more {
  margin-top: 30px;
  text-align: center;
}

/* The band carried a full 85px of padding above and below a section that is
   now much shorter, which is where the empty green came from. */
.impact {
  padding: 66px 0;
}

.impact .section-head {
  margin-bottom: 30px;
}

/* --------------------------------------------------------------------------
   25. The closing call to action

   Three separate faults had stacked up in this band:

   1. The two buttons were sitting one above the other. .buttons is shared
      with the hero, where it carries flex-wrap:wrap so slide buttons can
      drop onto a second line on a narrow screen. In the band the button
      column is only as wide as what is left over, and once the buttons grew
      in 9.33.0 the pair no longer fitted - so they wrapped. It looked like
      a mistake because it was one.
   2. .buttons also carries margin-top:28px for the hero. In a vertically
      centred row that margin pushes the buttons below the centre line, so
      they never quite lined up with the text beside them.
   3. The panel itself was a flat two-stop gradient across a large area,
      which reads as a solid slab of brown rather than a considered surface.
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  padding: 56px 60px;
  border-radius: 28px;
  gap: 48px;
  /* A warm highlight falling from the top left over a deeper three-stop
     terracotta. Large flat areas need somewhere for the light to come
     from, or they look printed rather than lit. */
  background:
    radial-gradient(75% 120% at 12% 0%, #ffffff21 0%, #ffffff00 62%),
    linear-gradient(135deg, #c2724f 0%, #a85834 55%, #93492c 100%);
  box-shadow: 0 18px 44px #17231e21;
}

.cta-band h2 {
  max-width: 18ch;
  line-height: 1.08;
}

.cta-band p {
  margin-bottom: 0;
}

/* Hold the pair on one line and stop the column being squeezed. */
.cta-band .buttons {
  flex-wrap: nowrap;
  flex: 0 0 auto;
  margin-top: 0;
  gap: 14px;
}

.cta-band .btn {
  white-space: nowrap;
}

.cta-band .btn.gold {
  box-shadow: 0 4px 14px #17231e2e;
}

.cta-band .btn.gold:hover {
  background: #e7b352;
}

/* The outline button was a hairline at 60% white on a mid-tone panel, which
   is close to invisible. A brighter edge over a faint fill gives it enough
   presence to read as the second of two choices rather than as a caption. */
.cta-band .btn.light {
  border: 1.5px solid #ffffffc4;
  background: #ffffff17;
}

.cta-band .btn.light:hover {
  background: #ffffff2b;
  border-color: #fff;
}

/* Below 900px the band becomes a single column, so the buttons need their
   top margin back and should be free to wrap again on a narrow phone. */
@media (max-width: 900px) {
  .cta-band {
    padding: 44px 40px;
  }

  .cta-band .buttons {
    flex-wrap: wrap;
    margin-top: 26px;
  }

  .cta-band h2 {
    max-width: none;
  }
}

@media (max-width: 600px) {
  .cta-band {
    padding: 34px 26px;
    border-radius: 22px;
  }
}

/* --------------------------------------------------------------------------
   26. Partners: three kinds of information, three shapes

   Who we work with, what we invite partners to contribute, and the areas we
   seek partnerships in were all rendered identically - a centred heading
   above a two-column list of hollow circle bullets. Thirty short lines in
   one repeated pattern, spread across the full 1180px measure. The content
   was good; it had simply been given one undifferentiated shape, so the page
   read as a data dump and the sections were indistinguishable.

   .list-check is deliberately untouched. Accountability, Impact and Support
   still use it and are not part of this rework.
   -------------------------------------------------------------------------- */

/* The page is a long single scroll of eight sections. At 85px top and bottom
   that is 1360px of padding alone, which is most of why it felt airy and
   slow. 58px still separates the sections clearly. */
.partners-page section {
  padding: 58px 0;
}

.partners-page .section-head {
  margin-bottom: 28px;
}

/* The anchor row sat hard left under a centred page. */
.partners-page .section-nav__list {
  justify-content: center;
}

/* --- 26a. Chips: who we work with -----------------------------------------
   Eleven short category names. They are labels rather than statements, so
   nothing is gained by giving each a full line and a bullet. As a centred
   cluster the whole set is taken in at a glance, and it occupies about a
   third of the height the two-column list did. */
.chip-set {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 860px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.chip {
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--g);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

/* --- 26b. Numbered cards: what partners contribute -------------------------
   Nine substantive offers, and the most consequential content on the page -
   this is the section a prospective partner is actually scanning for what
   is being asked of them. Cards give each offer its own surface, and the
   numbers turn a list into a considered set. */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.offer {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
}

/* min-width:0 lets a long offer wrap inside the flex row instead of forcing
   the card wider than its grid column. */
.offer__t {
  min-width: 0;
}

.offer__n {
  flex: 0 0 auto;
  padding-top: 2px;
  color: var(--t);
  font: 800 11px/1.4 var(--font-body);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

/* --- 26c. Ruled index: priority areas --------------------------------------
   Ten thematic areas. Deliberately the plainest of the three treatments: it
   follows the cards, and two card grids in succession would flatten the
   distinction the cards are there to make. A hairline per row is enough
   structure at this density. */
.area-index {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.area-index__item {
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
}

@media (max-width: 1024px) {
  .offer-grid,
  .area-index {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .partners-page section {
    padding: 46px 0;
  }

  .offer-grid,
  .area-index {
    grid-template-columns: 1fr;
  }

  .chip-set {
    gap: 8px;
  }

  .chip {
    padding: 8px 15px;
    font-size: 13.5px;
  }
}

/* --------------------------------------------------------------------------
   27. Leadership: one card size for everybody

   Each tier set its own column count - two for executive, three for the
   board, four for management - while the card media is a fixed 4:5. So the
   fewer people a tier had, the larger its portraits became. Executive, with
   two people, produced cards around 560px wide and portraits close to 700px
   tall; management's four came out at less than half that. The board, with
   one person in a three-column grid, left a single card stranded against
   two empty columns.

   The result read as an accident of arithmetic rather than a hierarchy, and
   it is the whole reason the page looked unbalanced.

   Every tier now uses one card size and centres its rows, so a tier of one,
   two, four or seven all look deliberate. Seniority is carried by the order
   of the tiers and their headings, which is where it belongs - not by
   inflating the photographs of the most senior people.
   -------------------------------------------------------------------------- */
.leader-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.leader-grid > .leader-card {
  flex: 0 1 268px;
  max-width: 100%;
  height: auto;
}

/* The modifiers previously existed only to change the column count, which no
   longer applies. Their gaps are normalised so tiers sit on one rhythm. */
.leader-grid--feature,
.leader-grid--board {
  gap: 24px;
}

/* The executive tier also scaled its type up to match its oversized cards.
   At a common card width that just makes the names crowd their boxes. */
.leader-grid--feature .leader-card__name {
  font-size: 21px;
}

.leader-grid--feature .leader-card__bio {
  font-size: 14.5px;
  -webkit-line-clamp: 3;
}

/* Tier heads were a two-column row - heading left, count right - beneath a
   page whose section introductions are centred everywhere else since 9.34.0.
   Stacking and centring them puts the whole page on one axis. */
.leader-tier__head {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.leader-tier__heading {
  flex: 0 1 auto;
}

.leader-tier__intro {
  margin-inline: auto;
}

.leadership .container > .leader-tier + .leader-tier {
  margin-top: 58px;
}

@media (max-width: 600px) {
  .leader-grid > .leader-card {
    flex-basis: 300px;
  }
}

/* 28 ---------------------------------------------------------------
   Support Our Work. The giving card is short while the copy beside it
   is tall, so the section was reading as a block of dead cream. Tighten
   the rhythm, top-align the two columns, and stop the promise button
   from sitting hard left under a centred heading.
   ------------------------------------------------------------------ */

/* Centred introductions were wrapping into ragged stacks. */
.section-head > .sec-lede,
.section-head > p {
  text-wrap: balance;
}

.support-page > section {
  padding-block: 64px;
}

.support-page .give-layout {
  align-items: start;
  gap: 54px;
}

.support-page .give-layout__copy > .sec-lede {
  max-width: 46ch;
}

.support-page .give-assure {
  margin-top: 26px;
}

.support-page .give-assure__link {
  margin-top: 26px;
}

/* The giving card carried no weight of its own next to a tall column. */
.support-page .give-layout__form > * {
  box-shadow: 0 18px 44px rgba(18, 58, 45, 0.09);
}

/* Promise list and its button, drawn in under the centred heading. */
.support-page .impact .list-check--2col {
  max-width: 960px;
  margin-inline: auto;
  column-gap: 54px;
}

.support-page .promise-more {
  margin-top: 34px;
  text-align: center;
}

@media (max-width: 860px) {
  .support-page > section {
    padding-block: 52px;
  }

  .support-page .give-layout {
    gap: 34px;
  }
}

/* 29 ---------------------------------------------------------------
   Accountability & Safeguarding.

   Six sections at 85px of padding each, an orphaned fourth pillar, a
   section label separated from the heading it labels, and four cards
   that are links but do not behave like them.
   ------------------------------------------------------------------ */

.accountability-page > section {
  padding: 58px 0;
}

.accountability-page .section-head {
  margin-bottom: 28px;
}

/* The anchor row sat hard left beneath a centred page, as Partners did. */
.accountability-page .section-nav__list {
  justify-content: center;
}

/* --- 29a. The fourth pillar ------------------------------------------------
   .purpose is a three-column grid and there are four pillars, so the
   fourth dropped onto a row of its own and sat alone against two empty
   columns. The same arithmetic fault the leadership tiers had.

   Four equal cards on one row is the honest shape for four peers: they
   are the page's table of contents, and a table of contents should be
   taken in at once. Centred flex means the wrap at narrower widths is
   two and two, never three and a stray. */
.accountability-page .pillar-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  grid-template-columns: none;
}

.accountability-page .pillar-grid > .pillar {
  flex: 1 1 240px;
  max-width: 290px;
}

/* The pillars carried the card padding used for cards with images, so a
   three-line description left a deep well of empty white beneath it. */
.accountability-page .pillar .card-body {
  padding: 22px 22px 24px;
}

.accountability-page .pillar h3 {
  margin-top: 2px;
  font-size: 19px;
  line-height: 1.25;
}

.accountability-page .pillar p {
  margin-bottom: 0;
  font-size: 14.5px;
  line-height: 1.5;
}

/* --- 29b. Linked cards that behaved like inert ones ------------------------
   Section 13 removes the hover lift from .card and gives it back only to
   .card:has(a) - a card containing a link. These four pillars are not
   cards containing a link, they are cards that ARE a link, so the
   selector never matched and four clickable cards offered no hover or
   focus feedback at all. This is the fix, and it applies site-wide. */
a.card:hover,
a.card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 15px 45px #17231e18;
}

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

/* --- 29c. Two-column feature blocks ----------------------------------------
   Safeguarding and Data protection each pair a tall column with a short
   card. Stretching the short one to match left its content floating
   against a tall white box; top-aligning lets each be its own height. */
.accountability-page .feature {
  align-items: start;
}

/* The label for "Privacy is part of dignity." was inside the card in the
   opposite column, so the heading had no eyebrow and the card carried a
   label for something else. Moved in the template; this spaces it. */
.accountability-page .feature > div > .sec-label {
  margin-bottom: 14px;
}

/* --- 29d. The financial checklist ------------------------------------------
   Six commitments set across the full 1180px measure put roughly 90
   characters between the bullet and the end of the line. Drawn in, they
   group under their centred heading instead of drifting apart. */
.accountability-page .list-check--2col {
  max-width: 960px;
  margin-inline: auto;
  column-gap: 54px;
}

@media (max-width: 680px) {
  .accountability-page > section {
    padding: 46px 0;
  }

  .accountability-page .pillar-grid > .pillar {
    flex-basis: 260px;
    max-width: none;
  }
}

/* 30 ---------------------------------------------------------------
   The Impact page, and the one set of figures it shares with the
   homepage.

   Both surfaces state the same five figures under the same dark green
   band, but they were presented as two different things: the homepage
   compact and centred, the Impact page spread across the full 1180px
   with 58px numerals. Section 24 is now unscoped, so the figures match.
   What is left is everything around them on the Impact page.
   ------------------------------------------------------------------ */

.impact-page > section {
  padding: 62px 0;
}

/* The reported-position band sets its own rhythm in section 24, but the
   disclaimer sits below the figures and needs the room back. */
.impact-page .impact {
  padding-bottom: 58px;
}

/* --- 30a. The reported-figures note ---------------------------------------
   A 480px note pinned to the left edge under five centred figures, with
   a clear half-section of empty green to its right and below. It is the
   last element in the band and the only one off-axis.

   It is also drawn as a dashed box, which reads as an unfinished
   placeholder. This note is the opposite: it is the Foundation being
   precise about what the numbers are and are not. Solid edge, centred,
   and held to a readable measure. */
.impact-disclaimer {
  border-style: solid;
}

.impact .impact-disclaimer {
  max-width: 760px;
  margin-inline: auto;
  text-align: left;
  font-size: 14.5px;
  line-height: 1.6;
}

/* --- 30b. One label treatment ---------------------------------------------
   The page still used the bare .kicker eyebrow while the homepage band
   and every page reworked since 9.36.0 use the ruled .sec-label. Two
   labels for one identical section is exactly the inconsistency this
   rework is meant to remove. Converted in the template; this holds the
   feature blocks' labels clear of their headings. */
.impact-page .feature > div > .sec-label {
  margin-bottom: 14px;
}

/* The measurement table ran the full container width while every other
   block on the page is now drawn in. */
.impact-page .table-wrap {
  max-width: 960px;
  margin-inline: auto;
}

@media (max-width: 680px) {
  .impact-page > section {
    padding: 48px 0;
  }

  .impact .impact-disclaimer {
    font-size: 14px;
  }
}

/* 31 ---------------------------------------------------------------
   The reported-figures band, contained.

   9.40.0 gave both surfaces the same compact 940px block of figures,
   but left the green running full bleed from one edge of the window to
   the other. At 1400px and above that is a very large field of green
   holding a strip of content less than two-thirds its width, so the
   band reads as mostly empty colour and the figures look stranded in
   the middle of it.

   The fix is not to spread the figures back out - that was the fault
   corrected in 9.35.0. It is to bring the green in to meet them. The
   band becomes a contained panel, like the terracotta call to action
   already is, and the figures then run the full width of that panel
   rather than sitting in a narrow column inside a wide one.
   ------------------------------------------------------------------ */

.impact {
  background: transparent;
  color: var(--ink);
  padding: 34px 0;
}

.impact > .container {
  /* No width cap and no side padding. The 1080px cap plus 56px of inset
     on each side was removing roughly 220px of usable width from the
     band and pushing the figures back into a narrow column - the exact
     thing bringing the green in was meant to stop. The panel now takes
     the full container measure and the figures run its whole width;
     only the vertical inset remains, so the content is not flush
     against the top and bottom edges of the green. */
  padding: 46px 0;
  border-radius: 28px;
  background: var(--forest, var(--g));
  color: #fff;
  /* Lit from the top left, matching the treatment the CTA band uses, so
     a large flat area has somewhere for the light to come from. */
  background-image:
    radial-gradient(70% 110% at 12% 0%, #ffffff12 0%, #ffffff00 60%);
  box-shadow: 0 18px 44px #17231e1f;
}

/* The figures now have a panel sized to them, so they take all of it. */
.impact .numbers {
  max-width: none;
  gap: 8px;
}

/* The Impact page set its own bottom padding in section 30, which was
   measured against the full-bleed band and is too much for a panel. */
.impact-page .impact {
  padding-block: 34px;
}

@media (max-width: 900px) {
  .impact > .container {
    padding: 40px 0;
    border-radius: 24px;
  }
}

@media (max-width: 600px) {
  .impact {
    padding: 22px 0;
  }

  /* The one place a side inset is still needed: at this width the
     container itself is only 20px from the screen edge, so figures set
     flush to the panel edge would read as touching it. */
  .impact > .container {
    padding: 32px 16px;
    border-radius: 20px;
  }
}

/* 33 ---------------------------------------------------------------
   Hope Market, and the logo bug it exposed.
   ------------------------------------------------------------------ */

/* --- 33a. The oversized logo on WooCommerce pages -------------------------
   WooCommerce's stylesheet carries `.woocommerce-page img { height: auto }`.
   That selector scores 0-1-1; the theme's `.mark--logo { height: 40px }`
   scores 0-1-0, so WooCommerce won and the header mark rendered at its
   natural size - roughly 230px tall, overflowing the header and colliding
   with the wordmark and the navigation.

   It only ever happened on the shop because `woocommerce-page` is only on
   the body there, which is why the same header was correct everywhere
   else. The fix is specificity, not an override war: qualify the logo
   rules so they outrank a single class plus an element. */
.brand .mark--logo,
.brand .custom-logo,
.woocommerce-page .mark--logo,
.woocommerce-page .custom-logo {
  width: auto;
  height: 40px;
  max-width: min(320px, 42vw);
  object-fit: contain;
}

footer .brand .mark--logo,
.woocommerce-page footer .mark--logo {
  height: 44px;
}

@media (max-width: 1150px) {
  .brand .mark--logo,
  .brand .custom-logo,
  .woocommerce-page .mark--logo,
  .woocommerce-page .custom-logo {
    height: 36px;
  }
}

@media (max-width: 900px) {
  .brand .mark--logo,
  .brand .custom-logo,
  .woocommerce-page .mark--logo,
  .woocommerce-page .custom-logo {
    height: 38px;
  }
}

/* --- 33b. The storefront ---------------------------------------------------
   With the wrapper hooks now firing (see woocommerce.php), the shop gets
   the theme's hero and container. These style what sits inside it. */
.shop-main {
  padding: 58px 0 72px;
}

.shop-intro {
  max-width: 760px;
  margin: 0 auto 38px;
  text-align: center;
}

.shop-intro .sec-label {
  justify-content: center;
}

.shop-intro .sec-lede {
  margin: 0;
}

/* WooCommerce's own notices are unstyled against this theme - a pale blue
   info bar with a default icon, which is the first thing the page showed. */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 14px;
  background: #fff;
  padding: 18px 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  list-style: none;
}

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
  display: none;
}

/* An empty storefront is a real state, not an error. Centre it and give it
   room rather than leaving one grey sentence adrift on a blank page. */
.shop-empty,
.stories-empty {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  padding: 44px 32px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}

.shop-empty h2,
.stories-empty h2 {
  font-size: 27px;
  line-height: 1.2;
  margin: 0 0 12px;
}

.shop-empty p,
.stories-empty p {
  color: var(--muted);
  margin: 0 auto 22px;
  max-width: 46ch;
}

.shop-empty .buttons,
.stories-empty .buttons {
  justify-content: center;
  margin-top: 0;
}

/* --- 33c. The giving panel while online giving is being connected ---------
   The Support Our Work page carries the Foundation's only donation route.
   Until the Paystack key is entered it shows the direct-giving panel, so
   that panel has to look like a considered offer rather than an apology. */
.give-card__offline .sec-label {
  margin-bottom: 14px;
}

.give-card__offline h3 {
  font-size: 25px;
  line-height: 1.2;
  margin: 0 0 10px;
}

.give-offline__steps {
  counter-reset: give-step;
  list-style: none;
  margin: 20px 0 24px;
  padding: 0;
  text-align: left;
}

.give-offline__steps li {
  counter-increment: give-step;
  position: relative;
  padding-left: 38px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

.give-offline__steps li::before {
  content: counter(give-step);
  position: absolute;
  left: 0;
  top: -1px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sage, var(--s));
  color: var(--forest, var(--g));
  font: 800 12px/1 var(--font-body);
}

.give-offline__steps li:last-child {
  margin-bottom: 0;
}

.give-offline__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.give-card__offline .give__trust {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 600px) {
  .give-offline__actions .btn {
    flex: 1 1 100%;
  }

  .shop-main {
    padding: 44px 0 56px;
  }
}

/* 32 ---------------------------------------------------------------
   Leadership, properly presented.

   9.37.0 gave every tier one card size to stop the executive tier's
   two people rendering at 560px wide while management's four came out
   at half that. It fixed the inflation but overcorrected: at a 268px
   basis a tier of two reads as two small cards adrift in a 1180px
   field, and the board's single card is stranded in the middle of an
   otherwise empty row. Management's four look right, because four
   cards at that size genuinely fill the line.

   The mistake was treating this as a question of card WIDTH when it is
   a question of card SHAPE. A tier of one or two needs a card built
   along the horizontal axis; a tier of four needs the vertical one.
   Both can carry the same portrait scale and the same type, so nobody
   is inflated and nothing is stranded.
   ------------------------------------------------------------------ */

/* Management and any future tier of three or more: the vertical card,
   fractionally wider than 9.37.0 so a row of four fills the container. */
.leader-grid > .leader-card {
  flex: 0 1 276px;
}

/* Bodies become columns so the profile action always sits on the card
   floor. Without this it floats directly under a short biography while
   the card behind it stretches to match its taller neighbour. */
.leader-card__body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.leader-card__more {
  margin-top: auto;
  align-self: flex-start;
  padding-top: 16px;
}

/* The portraits come from six different settings - studio white, grey
   curtain, blue sky, pink wall. Nothing in CSS can reconcile those, but
   a common ground behind them stops cut-out and full-bleed photographs
   sitting on two different colours. */
.leader-card__media {
  background: var(--sage, var(--s));
}

/* --- 32a. The horizontal card, for the senior tiers ----------------------- */
.leader-grid--feature > .leader-card,
.leader-grid--board > .leader-card {
  display: grid;
  grid-template-columns: 210px 1fr;
  flex: 1 1 520px;
  max-width: 558px;
  text-align: left;
}

/* One person, so the card is allowed a little more width and simply
   centres. A single 620px card reads as a considered statement; a
   single 268px card reads as an accident. */
.leader-grid--board > .leader-card {
  flex: 0 1 620px;
  max-width: 620px;
}

.leader-grid--feature > .leader-card .leader-card__media,
.leader-grid--board > .leader-card .leader-card__media {
  height: 100%;
  min-height: 288px;
  aspect-ratio: auto;
}

.leader-grid--feature > .leader-card .leader-card__img,
.leader-grid--board > .leader-card .leader-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.leader-grid--feature > .leader-card .leader-card__body,
.leader-grid--board > .leader-card .leader-card__body {
  justify-content: center;
  padding: 28px 30px;
}

/* A horizontal card has the width for a fuller biography, which is the
   point of giving the senior tiers this shape. Three lines was sized
   for a 268px column and was clipping mid-clause. */
.leader-grid--feature > .leader-card .leader-card__bio,
.leader-grid--board > .leader-card .leader-card__bio {
  font-size: 15px;
  line-height: 1.55;
  -webkit-line-clamp: 5;
}

.leader-grid--board > .leader-card .leader-card__name,
.leader-grid--feature > .leader-card .leader-card__name {
  font-size: 22px;
}

/* --- 32b. The tier count badge -------------------------------------------
   "1 leader" set under "Governance and oversight." does not read as the
   candour it was meant to be; it reads as a thin board announcing
   itself. The tier heading and the cards beneath it already say how
   many people there are. The pending-photograph count it also carried
   is useful to an editor, not to a donor, and no portraits are pending
   now that the set is bundled. */
.leader-tier .sec-count {
  display: none;
}

/* Tiers need a touch more air now that the senior cards are taller. */
.leadership .container > .leader-tier + .leader-tier {
  margin-top: 66px;
}

/* --- 32c. Narrow screens --------------------------------------------------
   Below 720px a 210px portrait column leaves too little for the text,
   so the senior cards return to the vertical arrangement everyone else
   uses. */
@media (max-width: 720px) {
  .leader-grid--feature > .leader-card,
  .leader-grid--board > .leader-card {
    display: flex;
    flex-direction: column;
    flex-basis: 300px;
    max-width: 360px;
  }

  .leader-grid--feature > .leader-card .leader-card__media,
  .leader-grid--board > .leader-card .leader-card__media {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .leader-grid--feature > .leader-card .leader-card__body,
  .leader-grid--board > .leader-card .leader-card__body {
    padding: 22px 22px 24px;
  }

  .leader-grid--feature > .leader-card .leader-card__bio,
  .leader-grid--board > .leader-card .leader-card__bio {
    -webkit-line-clamp: 4;
  }
}


/* --------------------------------------------------------------------------
   35. Impact stories archive
   Four stories in the generic three-up grid stranded the fourth card alone
   on a second row, and every card sized to its own excerpt so the "Read"
   links finished at three different heights. Two-up pairs cleanly for an
   even count, gives the photographs room, and reads as editorial rather
   than as a directory listing.
   -------------------------------------------------------------------------- */
.story-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
  max-width: 1020px;
  margin-inline: auto;
}

.story-grid .card {
  display: flex;
  flex-direction: column;
}

/* The lead photographs come from phones in portrait and landscape alike, so
   fix one ratio here instead of letting each card set its own height. */
.story-grid .card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.story-grid .card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

/* Pin the link to the card floor so every "Read" lines up across a row
   regardless of how long the excerpt above it runs. */
.story-grid .card-body .arrow {
  margin-top: auto;
  padding-top: 8px;
}

@media (max-width: 880px) {
  .story-grid {
    grid-template-columns: 1fr;
    max-width: 540px;
    gap: 28px;
  }
}


/* --------------------------------------------------------------------------
   36. Single impact story
   Three faults, all inherited from the prototype's .story block, which was
   written for a short homepage teaser sitting beside a photograph, not for
   a full article.

   .story-copy p is var(--muted), a light grey. That is fine for two teaser
   lines and wrong for the entire body of a story, which is the longest
   continuous reading anywhere on this site. Body copy returns to --ink.

   .story sets align-items:center, so a four-paragraph story left its
   photograph floating in the middle of the column with dead space above and
   below. An article aligns to the top.

   .story img is pinned to height:500px, which hard-crops a photograph that
   was already cropped once to fit this slot.
   -------------------------------------------------------------------------- */
.single-cohf_story .story {
  align-items: start;
  gap: 48px;
}

.single-cohf_story .story img {
  height: auto;
  aspect-ratio: 4 / 3;
}

.single-cohf_story .story-copy p {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.75;
}

.single-cohf_story .story-copy p + p {
  margin-top: 18px;
}

/* --- Routes between stories ---------------------------------------------
   A nav strip does not need a full 85px section band above and below it. */
.story-nav-section {
  padding: 52px 0 60px;
}

.story-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.story-nav__item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 290px;
}

.story-nav__label {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 11px;
  font-weight: 900;
  color: var(--t);
}

.story-nav__title {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.25;
  color: var(--g);
  text-wrap: balance;
}

.story-nav__item:hover .story-nav__title,
.story-nav__item:focus-visible .story-nav__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Keeps the "all stories" button centred when only one neighbour exists. */
.story-nav__item--next {
  text-align: right;
  margin-left: auto;
}

@media (max-width: 760px) {
  .story-nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .story-nav__item--next {
    text-align: left;
    margin-left: 0;
  }

  .story-nav__item {
    max-width: none;
  }
}


/* --------------------------------------------------------------------------
   37. Homepage stories teaser
   Three story cards in the homepage's standard three-up grid, sharing the
   card treatment worked out for the archive in section 35: a fixed image
   ratio so cards do not set their own heights, and the link pushed to the
   card floor so all three "Read" links align however long the excerpts run.

   Deliberately not merged into the .story-grid rules, because those also
   impose a two-up layout and a 1020px cap that belong to the archive and
   would break the homepage's three-across rhythm with Programmes above it.
   -------------------------------------------------------------------------- */
.story-teaser-grid .card {
  display: flex;
  flex-direction: column;
}

.story-teaser-grid .card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.story-teaser-grid .card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.story-teaser-grid .card-body .arrow {
  margin-top: auto;
  padding-top: 8px;
}


/* --------------------------------------------------------------------------
   38. Page loader: ripples of hope
   A cistern holds water, and a single drop sends rings outward far beyond
   where it landed. That is the Foundation's own argument about its work, so
   the loader is concentric ripples from a centre drop rather than a generic
   rotating spinner.

   The fade-out is a delayed keyframe animation, not a transition waiting to
   be triggered. That is deliberate: if the inline script is blocked, fails
   or never runs, the overlay still removes itself and nobody is left
   staring at a green screen. The script only ever makes it leave sooner.
   -------------------------------------------------------------------------- */
.cohf-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #163f32;
  color: #fff;
  animation: cohf-loader-out 400ms ease 900ms forwards;
}

.cohf-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
  transition: opacity 420ms ease, visibility 0s linear 420ms;
}

/* Already seen this session: leave without an animation at all. */
.cohf-loader.is-instant {
  transition: none;
}

@keyframes cohf-loader-out {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

.cohf-loader__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  margin-bottom: 32px;
}

.cohf-loader__ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid var(--gold, #d9a441);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.18);
  animation: cohf-ripple 2600ms cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.cohf-loader__ripple:nth-child(2) {
  animation-delay: 650ms;
}

.cohf-loader__ripple:nth-child(3) {
  animation-delay: 1300ms;
}

@keyframes cohf-ripple {
  0% {
    transform: scale(0.18);
    opacity: 0;
  }

  14% {
    opacity: 0.85;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* A falling drop: round on three corners, pointed on the fourth. */
.cohf-loader__drop {
  position: relative;
  width: 17px;
  height: 17px;
  background: var(--gold, #d9a441);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  animation: cohf-drop 2600ms ease-in-out infinite;
}

@keyframes cohf-drop {
  0%,
  100% {
    transform: rotate(-45deg) scale(1);
  }

  10% {
    transform: rotate(-45deg) scale(0.55);
  }

  24% {
    transform: rotate(-45deg) scale(1.14);
  }
}

.cohf-loader__name {
  margin: 0;
  padding: 0 24px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 22px;
  line-height: 1.25;
  text-align: center;
}

.cohf-loader__strap {
  margin: 9px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #9dc0ae;
}

/* Motion is pure decoration here, so anyone who has asked for less of it
   gets the mark on a calm ground and a loader that leaves promptly. */
@media (prefers-reduced-motion: reduce) {
  .cohf-loader {
    animation: cohf-loader-out 200ms ease 700ms forwards;
  }

  .cohf-loader__ripple {
    animation: none;
    opacity: 0.32;
    transform: scale(1);
  }

  .cohf-loader__ripple:nth-child(2) {
    transform: scale(0.68);
  }

  .cohf-loader__ripple:nth-child(3) {
    transform: scale(0.38);
  }

  .cohf-loader__drop {
    animation: none;
  }

  .cohf-loader.is-done {
    transition: none;
  }
}


/* --------------------------------------------------------------------------
   39. Donation thank-you and the phone field
   A donor returning from Paystack gets the verified outcome of their gift in
   place of the form. Two states: confirmed, and not-yet-confirmed. The second
   is styled calmly rather than as an error, because the usual cause is a
   verification that has not caught up, not a failed payment, and alarming
   somebody who has just given money would be both wrong and unkind.
   -------------------------------------------------------------------------- */
.give-thanks {
  text-align: left;
}

.give-thanks h3 {
  font-size: 27px;
  line-height: 1.2;
  margin: 14px 0 6px;
}

.give-thanks__amount {
  margin: 0 0 14px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 40px;
  line-height: 1;
  color: var(--g, #163f32);
}

.give-thanks--pending .give-thanks__amount {
  display: none;
}

.give-thanks__ref {
  padding: 12px 14px;
  border: 1px solid var(--line, #dfe6e1);
  border-radius: 12px;
  background: var(--c, #f7f3ea);
  font-size: 14px;
  word-break: break-all;
}

.give-thanks__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

/* The phone field is genuinely optional, so the label says so rather than
   leaving a donor guessing whether the gift needs it. */
.give__optional {
  margin-left: 6px;
  font-weight: 400;
  font-size: 12px;
  color: var(--muted, #66736d);
}

.give textarea {
  min-height: 0;
  resize: vertical;
}

/* The anonymity choice is a decision, not a field, so it is given a row of
   its own with a real target area rather than a bare tick in a corner. */
.give__check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line, #dfe6e1);
  border-radius: 12px;
  cursor: pointer;
}

.give__check input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--g, #163f32);
}

.give__check:hover,
.give__check:focus-within {
  border-color: var(--g, #163f32);
}

.give__check-hint {
  margin: 8px 2px 0;
  font-size: 13px;
  color: var(--muted, #66736d);
}


/* --------------------------------------------------------------------------
   40. The donation form layout
   prototype.css sets `form { display: grid; grid-template-columns: 1fr 1fr }`
   for the contact form. The donation form inherited it, and every direct
   child became a cell in a two-column grid: the amount buttons sat beside
   the custom-amount box, "Support area" sat beside the name and email pair,
   the explanatory note sat beside the submit button, and the button itself
   stretched to fill its cell and rendered as an enormous gold ellipse.

   A donation form is a single vertical decision. It is laid out here as
   one, and the two-column pairing is applied only where two fields genuinely
   belong side by side.
   -------------------------------------------------------------------------- */
.give {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.give fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.give__legend {
  padding: 0;
  margin-bottom: 12px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 19px;
  color: var(--g, #163f32);
}

/* Amounts: a fixed three-across grid with every tile the same height,
   rather than tiles that size themselves to whether the label wraps. */
.give__amount-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.give__amount span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 10px 8px;
  white-space: nowrap;
  text-align: center;
  font-weight: 700;
}

/* Name and email pair; everything else runs full width. */
.give__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.give__details .give__field + .give__field,
.give__details .give__row + .give__field {
  margin-top: 16px;
}

.give__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.give__field label {
  font-weight: 700;
  font-size: 14px;
}

.give__field input,
.give__field select,
.give__field textarea {
  width: 100%;
}

/* The button is the whole point of the page, so it gets the full width and
   a height it chooses rather than one a grid cell imposes on it. */
.give__submit {
  width: 100%;
  min-height: 56px;
  font-size: 16px;
}

.give__note,
.give__trust {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted, #66736d);
}

.give__error[hidden] {
  display: none;
}

.give__error {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fdf1ee;
  color: #8d3a20;
  font-size: 14px;
}

@media (max-width: 620px) {
  .give__amount-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

/* --------------------------------------------------------------------------
   36. Leadership portraits - keep heads in frame
   On phones the portrait box was losing its 4:5 shape (the desktop
   height:100% rule for senior cards survived into the narrow layout, and
   the media box could shrink inside the flex card), so the photograph was
   cropped to a landscape strip and the 50% 22% focal point cut off the top
   of people's heads. The box now always holds 4:5 and never shrinks, and
   every portrait is anchored to the top so the head is the last thing to
   be cropped.
   -------------------------------------------------------------------------- */
.leader-card__media {
  flex: 0 0 auto;
  aspect-ratio: 4 / 5;
}

.leader-card__media img,
.leader-card__img,
.leader-panel__img {
  object-position: 50% 0%;
}

@media (max-width: 720px) {
  .leader-grid > .leader-card .leader-card__media,
  .leader-grid--feature > .leader-card .leader-card__media,
  .leader-grid--board > .leader-card .leader-card__media {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .leader-grid > .leader-card .leader-card__img {
    height: 100%;
    object-position: 50% 0%;
  }
}

/* The profile panel shows the portrait in a 16:10 strip on smaller
   screens; give it a taller frame so the face fits comfortably. */
@media (max-width: 820px) {
  .leader-panel__media {
    aspect-ratio: 4 / 3;
  }
}

/* --------------------------------------------------------------------------
   23. Homepage slider dots (10.2.0)
   On phones, the global touch-target rule in style.css
   (button { min-height: 44px }) stretched the 11px slide dots into tall
   ovals. Keep the dots their drawn size and give each one an invisible
   44px tap area instead, so they stay easy to tap without changing shape.
   -------------------------------------------------------------------------- */
.hero__dots { gap: 12px; }
.hero__dot {
  position: relative;
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  min-height: 0;
  min-width: 0;
  line-height: 0;
  box-sizing: border-box;
}
.hero__dot.is-active { width: 26px; }
.hero__dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.hero__dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }


/* --------------------------------------------------------------------------
   24. Footer redesign (11.3.0)
   Desktop keeps its four columns. On phones the footer was one long column
   of links ~95px apart (44px tap targets plus inherited margins), with the
   contact details as plain links and a legal line ending in a stray dot.
   Now: brand block with two calls to action, Explore and Get involved side
   by side, contact details as tappable cards with icons, social icons, and
   a tidy legal row above the copyright line.
   -------------------------------------------------------------------------- */
.foot-descriptor { max-width: 340px; }
.foot-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.foot .foot-cta a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 10px 18px; border-radius: 999px; font-weight: 800; font-size: 14px; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.foot .foot-cta__give { background: var(--gold); color: #102d24; }
.foot .foot-cta__give:hover { background: #e8b84a; color: #102d24; }
.foot .foot-cta__partner { border: 1px solid #ffffff4d; color: #fff; }
.foot .foot-cta__partner:hover { border-color: var(--gold); color: var(--gold); }

.foot-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot-contact li { margin: 0; }
.foot .foot-contact a { display: flex; align-items: center; gap: 12px; margin: 0; padding: 6px 0; color: #d6e1db; text-decoration: none; line-height: 1.35; }
.foot .foot-contact a:hover { color: #fff; }
.foot-contact__icon { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #ffffff12; color: var(--gold); }
.foot-contact__icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.foot-contact small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8fa89c; }

.copyright { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; }
.foot-legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot-legal li { margin: 0; }
.foot-legal a { color: #b9c9c1; text-decoration: none; }
.foot-legal a:hover { color: #fff; text-decoration: underline; }
.copyright__line { margin: 0; }

@media (max-width: 760px) {
  footer { padding: 48px 0 20px; }
  .foot { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .foot > div:first-child,
  .foot-col--contact { grid-column: 1 / -1; }

  footer .brand { gap: 12px; }
  .foot-descriptor { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: #c3d3cb; }
  .foot-cta { margin-top: 20px; }
  .foot .foot-cta a { flex: 1 1 0; min-width: 0; padding: 12px 10px; font-size: 14px; }

  .foot h3 { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
  .foot-col--explore,
  .foot-col--involved { padding-top: 26px; border-top: 1px solid #ffffff1a; }
  .foot .foot-col--explore a,
  .foot .foot-col--involved a { min-height: 40px; margin: 0; padding: 0; font-size: 15px; color: #d6e1db; }

  .foot-col--contact { padding-top: 26px; border-top: 1px solid #ffffff1a; }
  .foot-contact { gap: 10px; }
  .foot .foot-contact a { min-height: 0; padding: 12px 14px; border: 1px solid #ffffff14; border-radius: 14px; background: #ffffff08; font-size: 15px; word-break: break-word; }
  .foot .foot-contact a:active { background: #ffffff14; }
  .foot-social { margin-top: 18px; gap: 10px; }

  .copyright { margin-top: 32px; padding-top: 22px; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
  .foot-legal { justify-content: center; gap: 0; }
  .foot-legal li + li:before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px; border-radius: 50%; background: #6f877c; vertical-align: middle; }
  .foot-legal li { display: inline-flex; align-items: center; }
  .copyright .foot-legal a { min-height: 36px; display: inline-flex; align-items: center; font-size: 13px; }
  .copyright__line { font-size: 12.5px; color: #8fa89c; line-height: 1.5; max-width: 300px; }
}

/* --------------------------------------------------------------------------
   25. Forms and contact redesign (12.2.0)
   One look for every form: enquiry (Contact, Partners, Get Involved), giving
   and shop checkout fields. Card container, larger fields with a clear focus
   ring, inline errors, a custom consent tick, a confident submit button, and
   contact details as tappable cards.
   -------------------------------------------------------------------------- */
.cohf-form-card { background: #fff; border: 1px solid #e8e2d6; border-radius: 24px; padding: 30px; box-shadow: 0 18px 50px rgba(18, 58, 45, .08); }
.cohf-form-card__head { margin: 0 0 22px; padding: 0 0 18px; border-bottom: 1px solid #efe9de; }
.cohf-form-card__head h3 { margin: 0 0 6px; font-size: 26px; line-height: 1.15; color: var(--forest, var(--g)); }
.cohf-form-card__head p { margin: 0; font-size: 14px; color: #6b7771; }

form.cohf-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.cohf-form .field { gap: 7px; min-width: 0; }
.cohf-form .field > label { font: 700 13.5px/1.35 var(--font-body); letter-spacing: .01em; color: var(--ink, #1c1b19); }
.cohf-form .field .req { color: #b4532a; }
.cohf-form input:not([type="checkbox"]):not([type="radio"]),
.cohf-form select,
.cohf-form textarea,
.give__field input,
.give__field select,
.give__field textarea {
  width: 100%; min-height: 52px; padding: 13px 16px; border: 1.5px solid #dcd5c8; border-radius: 14px; background: #fcfbf8;
  font: 400 16px/1.4 var(--font-body); color: var(--ink, #1c1b19); box-shadow: none; transition: border-color .2s, box-shadow .2s, background .2s; -webkit-appearance: none; appearance: none;
}
.cohf-form textarea, .give__field textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.cohf-form select, .give__field select {
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123a2d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
}
.cohf-form input::placeholder, .cohf-form textarea::placeholder, .give__field input::placeholder, .give__field textarea::placeholder { color: #9aa29e; }
.cohf-form input:hover, .cohf-form select:hover, .cohf-form textarea:hover,
.give__field input:hover, .give__field select:hover, .give__field textarea:hover { border-color: #b9c4bd; }
.cohf-form input:focus, .cohf-form select:focus, .cohf-form textarea:focus,
.give__field input:focus, .give__field select:focus, .give__field textarea:focus {
  outline: none; border-color: var(--forest, var(--g)); background: #fff; box-shadow: 0 0 0 4px rgba(18, 58, 45, .12);
}
.cohf-form .field.has-error input, .cohf-form .field.has-error select, .cohf-form .field.has-error textarea,
.cohf-form [aria-invalid="true"] { border-color: #c2410c; background: #fffaf7; box-shadow: 0 0 0 4px rgba(194, 65, 12, .1); }
.field__error { display: block; font-size: 13px; font-weight: 600; color: #b23a0a; }
.field__error:empty { display: none; }
.cohf-form .field__hint { font-size: 12.5px; color: #6b7771; line-height: 1.45; }
.field__count { align-self: flex-end; margin-top: -2px; font-size: 12px; color: #8a948f; }
.field__count.is-near { color: #b23a0a; font-weight: 700; }

/* Consent tick */
.field--check { gap: 6px; }
.cohf-check { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font: 500 14.5px/1.5 var(--font-body) !important; color: var(--ink, #1c1b19) !important; letter-spacing: 0 !important; }
.cohf-check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.cohf-check__box { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; border: 1.5px solid #b9c4bd; border-radius: 7px; background: #fff; transition: background .15s, border-color .15s; }
.cohf-check input:checked + .cohf-check__box { background: var(--forest, var(--g)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--forest, var(--g)); }
.cohf-check input:focus-visible + .cohf-check__box { box-shadow: 0 0 0 4px rgba(18, 58, 45, .18); }
.field--check.has-error .cohf-check__box { border-color: #c2410c; }

/* Submit */
.cohf-submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 14px 28px; border: 0; border-radius: 999px; background: var(--forest, var(--g)); color: #fff; font: 800 16px/1.2 var(--font-body); cursor: pointer; transition: background .2s, transform .1s; }
.cohf-submit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.cohf-submit:hover { background: var(--forest2, #09261e); }
.cohf-submit:hover svg { transform: translateX(3px); }
.cohf-submit:active { transform: scale(.99); }
.cohf-submit:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.cohf-submit.is-loading { opacity: .75; pointer-events: none; }
.cohf-submit.is-loading svg { display: none; }
.cohf-form__secure { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px 0 0; font-size: 12.5px; color: #6b7771; }
.cohf-form__secure svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* Result notice */
.form-notice { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 20px; padding: 14px 16px; border-radius: 14px; font-size: 15px; font-weight: 600; line-height: 1.45; outline: none; }
.form-notice__icon { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 13px; }
.form-notice--success { background: #e9f6ee; color: #14532d; border: 1px solid #bfe3cc; }
.form-notice--success .form-notice__icon { background-color: #16a34a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); }
.form-notice--error { background: #fdf0ea; color: #8a2c08; border: 1px solid #f3cdb9; }
.form-notice--error .form-notice__icon { background-color: #c2410c; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E"); }

/* Contact details as cards */
.contact-lede { margin: 6px 0 20px; color: #5b6863; font-size: 16px; }
.contact-cards { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-cards li { margin: 0; }
.contact-cards li:nth-child(n+4) { grid-column: 1 / -1; }
.contact-card { display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px; border: 1px solid #e8e2d6; border-radius: 18px; background: #fff; color: var(--ink, #1c1b19); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
a.contact-card:hover { border-color: var(--forest, var(--g)); box-shadow: 0 10px 28px rgba(18, 58, 45, .1); transform: translateY(-2px); }
a.contact-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.contact-card__icon { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: #eef4f0; color: var(--forest, var(--g)); }
.contact-card--wa .contact-card__icon { background: #e3f8eb; color: #128c4a; }
.contact-card__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contact-card__body { display: flex; flex-direction: column; min-width: 0; }
.contact-card__body small { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a948f; }
.contact-card__body strong { font-size: 15px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.contact-concern { padding: 16px 18px; border-left: 4px solid var(--gold); border-radius: 0 14px 14px 0; background: #fbf6ea; font-size: 14.5px; }

@media (max-width: 760px) {
  .cohf-form-card { padding: 22px 18px; border-radius: 20px; }
  .cohf-form-card__head h3 { font-size: 22px; }
  form.cohf-form { grid-template-columns: 1fr; gap: 16px; }
  form.cohf-form .field { grid-column: auto; }
  .contact-cards { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   12.6.0 Hero headings: only the first slide is an H1 now (one H1 per page
   for SEO and screen readers). Slides 2+ are H2s that look identical.
   -------------------------------------------------------------------------- */
.hero--slider h2.hero__h{font-family:var(--font-display);font-size:clamp(27px,3.5vw,46px);font-weight:500;line-height:1.07;letter-spacing:-0.021em;margin:10px auto;max-width:20ch;color:inherit}
@media(max-height:620px){.hero--slider h2.hero__h{font-size:clamp(24px,3vw,34px)}}

/* --------------------------------------------------------------------------
   12.8.0 Final polish
   -------------------------------------------------------------------------- */
/* Header on laptops: the wordmark wraps onto two short lines instead of
   being cut off ("CISTERN OF HOPE FOUNDA..."), the tagline steps aside and
   the links tighten, so Explore no longer crowds the Support button. */
/* 12.8.2: applies at every desktop width. The header container caps at
   1180px, so a wide screen has the same squeeze as a laptop. */
@media (min-width: 901px) {
  .brand > span { white-space: normal; overflow: visible; text-overflow: clip; max-width: 165px; font-size: 12.5px; line-height: 1.15; }
  .brand > span small { display: none; }
  .links { gap: 0 12px; font-size: 13.5px; }
  .navgroup__btn { font-size: 13.5px; }
  header .cta { padding: 10px 14px; font-size: 12.5px; white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1080px) {
  .links { gap: 0 9px; font-size: 12.5px; }
  .navgroup__btn { font-size: 12.5px; }
}
/* Sticky header never hides the top of a section reached by a link. */
html { scroll-padding-top: 110px; }

/* "All programmes" / "All impact stories" link at the top of detail pages. */
.page-hero .back-link { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; color: #d6e3dc; font-size: 14px; font-weight: 700; text-decoration: none; }
.page-hero .back-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* About: the "12 programme areas" fact is now a link. */
.fact span a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Resources: request button sits where the empty search used to be. */
.section-head > .btn.dark { align-self: end; }

/* --------------------------------------------------------------------------
   13.21.0 Header that fits at every width
   Fewer top-level items (Home is the logo, Accountability sits under About),
   and sizes that scale smoothly with the screen instead of jumping.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  header .nav { gap: clamp(10px, 1.4vw, 24px); }
  .brand > span { max-width: clamp(130px, 13vw, 190px); font-size: clamp(11.5px, 1vw, 13.5px); }
  .brand img, .brand svg { width: clamp(34px, 3vw, 44px); height: auto; }
  .links { gap: 0 clamp(8px, 1.3vw, 22px); font-size: clamp(12.5px, 1.05vw, 15px); }
  .navgroup__btn { font-size: clamp(12.5px, 1.05vw, 15px); }
  .links > a, .navgroup__btn { white-space: nowrap; padding-block: 10px; }
  header .cta { padding: clamp(8px, .8vw, 12px) clamp(12px, 1.2vw, 20px); font-size: clamp(12px, .95vw, 14px); white-space: nowrap; }
}
@media (min-width: 1280px) {
  .brand > span small { display: block; font-size: 9px; letter-spacing: .14em; opacity: .75; }
}
/* Small phones: keep the logo, menu button and cart on one tidy row. */
@media (max-width: 380px) {
  .brand > span { font-size: 11px; max-width: 150px; }
  header .nav { gap: 8px; }
}

/* --------------------------------------------------------------------------
   13.25.0 Bigger, clearer header menu (Home restored)
   Six links: Home, About, Programmes, Impact, Our Approach, Explore.
   Larger type that still fits: on small laptops the logo shows without the
   wordmark to make room; the full name returns from 1180px.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .links { gap: 0 clamp(14px, 1.5vw, 26px); font-size: clamp(14.5px, 1.2vw, 16.5px); font-weight: 700; }
  .navgroup__btn { font-size: clamp(14.5px, 1.2vw, 16.5px); font-weight: 700; }
  header .cta { font-size: clamp(13.5px, 1.05vw, 15px); padding: clamp(10px, .9vw, 13px) clamp(16px, 1.4vw, 22px); }
  .brand > span { font-size: clamp(12.5px, 1.05vw, 14.5px); max-width: 200px; }
}
@media (min-width: 901px) and (max-width: 1179px) {
  .brand > span { display: none; }
  .links { gap: 0 clamp(10px, 1.2vw, 16px); font-size: clamp(14px, 1.45vw, 15.5px); }
  .navgroup__btn { font-size: clamp(14px, 1.45vw, 15.5px); }
  header .cta { font-size: 13.5px; padding: 10px 14px; }
}
@media (min-width: 901px) and (max-width: 999px) {
  .links { gap: 0 9px; font-size: 13.5px; }
  .navgroup__btn { font-size: 13.5px; }
  header .cta { font-size: 12.5px; padding: 9px 12px; }
}

/* --------------------------------------------------------------------------
   13.26.0 Get Involved: "Other ways to help"
   -------------------------------------------------------------------------- */
.help-ways__head { text-align: center; justify-content: center; }
.help-ways__head > div { max-width: 680px; margin-inline: auto; }
.help-ways__head p { margin: 10px auto 0; color: var(--muted, #66736d); }
.help-ways__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.help-way { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 30px 26px 26px; background: #fff; border: 1px solid var(--line, #dfe6e1); border-top: 4px solid var(--gold, #d9a441); border-radius: 18px; box-shadow: 0 1px 2px rgba(23, 35, 30, .05); transition: transform .25s ease, box-shadow .25s ease; }
.help-way:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(23, 35, 30, .10); }
.help-way__num { position: absolute; top: 22px; right: 24px; font: 600 15px/1 var(--font-display, serif); color: #c9d3cd; }
.help-way__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--s, #dce8df); color: var(--g, #163f32); }
.help-way__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.help-way h3 { margin: 8px 0 0; font-size: 21px; line-height: 1.2; }
.help-way p { margin: 0; color: var(--muted, #66736d); font-size: 15px; line-height: 1.6; flex: 1; }
.help-way__link { margin-top: 8px; font-weight: 800; font-size: 14px; color: var(--t, #b86f52); text-decoration: none; }
.help-way__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.help-ways__band { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding: 22px 28px; border-radius: 18px; background: var(--g, #163f32); color: #fff; }
.help-ways__band strong { display: block; font: 600 20px/1.3 var(--font-display, serif); }
.help-ways__band span { display: block; color: #d6e3dc; font-size: 15px; margin-top: 4px; }
.help-ways__band .btn.dark { background: var(--gold, #d9a441); color: var(--ink, #17231e); white-space: nowrap; }
@media (max-width: 1100px) { .help-ways__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .help-ways__grid { grid-template-columns: 1fr; gap: 14px; }
  .help-way { padding: 24px 20px 20px; }
  .help-ways__band { flex-direction: column; align-items: flex-start; padding: 20px; }
  .help-ways__band .btn.dark { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .help-way, .help-way:hover { transition: none; transform: none; } }

/* 13.29.0: Home replaces Partner on the mobile bar. The current page's item
   gets a clear active state (tinted pill plus a gold bar above the icon) so
   visitors always know where they are and how to get back. */
@media (max-width: 900px) {
  .cohf-actionbar { padding-left: 6px; padding-right: 6px; padding-top: 6px; gap: 4px; }
  .cohf-actionbar__item { position: relative; margin-bottom: 6px; }
  .cohf-actionbar__item[aria-current]:not(.cohf-actionbar__item--support) {
    color: var(--forest, var(--g));
    background: #163f3214;
  }
  .cohf-actionbar__item[aria-current]:not(.cohf-actionbar__item--support)::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 26px;
    height: 3px;
    margin-left: -13px;
    border-radius: 0 0 3px 3px;
    background: var(--gold);
  }
  .cohf-actionbar__item[aria-current] .cohf-actionbar__label { font-weight: 800; }
}


/* ==========================================================================
   14.8.1 - Floating WhatsApp button (.cohf-wa-float)
   The markup from inc/mobile-actions.php (14.5.0) shipped without styles, so
   the icon rendered full width under the footer. Bottom-right pill on
   desktop, round button just above the quick-actions bar on phones.
   ========================================================================== */
.cohf-wa-float {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 20px 0 16px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font: 700 15px/1 var(--font-body, system-ui, sans-serif);
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(18, 140, 70, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.cohf-wa-float svg {
  display: block;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
}

.cohf-wa-float:hover,
.cohf-wa-float:focus-visible {
  background: #1ebe5b;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(18, 140, 70, 0.42), 0 2px 6px rgba(0, 0, 0, 0.12);
}

.cohf-wa-float:focus-visible {
  outline: 3px solid var(--gold, #d9a441);
  outline-offset: 3px;
}

.cohf-wa-float__label {
  white-space: nowrap;
}

/* Phones and tablets: a round button above the quick-actions bar. */
@media (max-width: 900px) {
  .cohf-wa-float {
    right: 14px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    width: 54px;
    height: 54px;
    padding: 0;
    justify-content: center;
  }

  .cohf-wa-float svg {
    width: 28px;
    height: 28px;
  }

  .cohf-wa-float__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Out of the way while a panel, the menu or the order pop-up is open. */
html.cart-drawer-open .cohf-wa-float,
html.wao-open .cohf-wa-float,
html.wa-form-open .cohf-wa-float,
body:has(.links.is-open) .cohf-wa-float {
  display: none;
}

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

@media print {
  .cohf-wa-float { display: none; }
}