/* Self-hosted fonts (Latin and Latin Extended subsets of the Google Fonts
   variable files). Same origin, so no extra DNS/TLS round trips and no
   render-blocking third-party stylesheet. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/fraunces-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:350 650;font-display:swap;src:url(../fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:350 650;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* <picture> only supplies a WebP source; it must not add a layout box. */
picture{display:contents}

/* =========================================================
   Education of Hope Africa: Design System
   ---------------------------------------------------------
   The palette IS the logo. Every brand value below was sampled
   from the official letterhead lockup, rendered from the source
   PDF at 1200dpi and measured on the dark core of each stroke:

     EDUCATION  wordmark + strapline  #11143F  navy
     OF HOPE    wordmark              #27583B  green
     AFRICA     wordmark              #9F1C21  red
     roundel    lit side              #16457C  blue

   Each clears AA on white as-is: navy 17:1, green 8.3:1,
   red 7.9:1, so nothing has been lightened to make it work
   and the site matches printed material exactly. Note the
   lockup colours the wordmark in three parts, which is why
   green and red are co-equal brand colours here rather than
   accents borrowed from the swooshes.

   Roles: navy carries structure (dark sections, footer, text),
   blue carries interaction (links, eyebrows, focus), red is
   reserved for the single primary action (give) and green
   marks growth and proof.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* The site is light-only by design. Declaring the scheme keeps native UI
     (form fields, scrollbars, date pickers) on the light variant even when
     the visitor's OS is set to dark, so nothing renders white-on-black. */
  color-scheme: light;

  /* Brand, measured from the letterhead lockup */
  --navy:        #11143F;
  --navy-2:      #16457C;
  --blue:        #1A5490;
  --blue-deep:   #123C6B;
  --blue-mid:    #2F6FB5;
  --sky:         #8FBEEC;
  --brand-green: #27583B;
  --brand-red:   #9F1C21;

  /* Core */
  --ink:        var(--navy);
  --ink-2:      #2A3A5E;
  --ink-3:      #5B6B87;
  --rule:       #D9E1EC;
  --paper:      #FFFFFF;
  --paper-2:    #F2F6FB;
  --paper-3:    #E5ECF6;

  /* Accents.
     The --ochre / --clay / --gold names are kept as aliases so that
     page-level inline styles written against the old system keep
     working; the values are now brand colours. */
  --ochre:      var(--blue);
  --ochre-deep: var(--blue-deep);
  --ochre-soft: #E9F0F8;
  --green:      var(--brand-green);
  --green-soft: #E3EDE6;
  --clay:       var(--brand-red);
  --gold:       var(--sky);

  /* Give: the one action, in the exact AFRICA red */
  --give:       var(--brand-red);
  --give-deep:  #7A151A;
  --give-soft:  #FAEBEB;

  /* Semantic */
  --bg:          var(--paper);
  --bg-alt:      var(--paper-2);
  --surface:     #FFFFFF;
  --text:        var(--ink);
  --text-muted:  var(--ink-3);
  --border:      var(--rule);
  --accent:      var(--blue);
  --accent-ink:  #FFFFFF;

  /* Type */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;

  /* Scale (fluid) */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-lg:   clamp(1.06rem, 0.3vw + 1rem, 1.2rem);
  --t-xl:   clamp(1.3rem, 0.7vw + 1.1rem, 1.6rem);
  --t-2xl:  clamp(1.7rem, 1.4vw + 1.3rem, 2.4rem);
  --t-3xl:  clamp(2.2rem, 2.8vw + 1.4rem, 3.6rem);
  --t-4xl:  clamp(2.8rem, 5vw + 1rem, 5.4rem);

  /* Space */
  --gap: 1.5rem;
  --pad-section: clamp(4rem, 8vw, 8rem);
  --maxw: 1240px;
  --maxw-prose: 68ch;

  --radius: 4px;
  --radius-lg: 10px;
  --shadow: 0 1px 2px rgba(17,20,63,.06), 0 8px 24px -12px rgba(17,20,63,.20);
  --shadow-lg: 0 2px 4px rgba(17,20,63,.07), 0 24px 60px -24px rgba(17,20,63,.30);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* There is deliberately no `prefers-color-scheme: dark` block. The palette is
   the printed letterhead, and every brand value already clears AA on white,
   so the site presents the same light surface regardless of the visitor's OS
   setting. The dark passages that remain (the cinematic hero, `.section--ink`
   and the footer) are fixed navy panels of the brand, not a dark theme. */

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* The header is sticky (fixed on the homepage), so anchor targets have to
   clear it, otherwise every in-page jump lands with its own heading
   hidden behind the bar. 27 anchors across the site depend on this. */
[id] { scroll-margin-top: 6rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Authentic programme photography */
.hero-photo,.story-photo{position:relative;overflow:hidden;background:var(--navy);border-radius:clamp(1.25rem,3vw,2.5rem);box-shadow:0 28px 70px rgba(17,20,63,.22)}
.hero-photo{min-height:clamp(28rem,58vw,42rem);transform:rotate(1.2deg)}
.hero-photo:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 52%,rgba(9,11,34,.8));pointer-events:none}
.hero-photo img,.story-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-photo img{position:absolute;inset:0}
.hero-photo figcaption{position:absolute;z-index:2;left:clamp(1.25rem,3vw,2rem);right:1.25rem;bottom:1.5rem;color:#fff;display:grid;gap:.25rem}
.hero-photo figcaption strong{font-family:var(--display);font-size:clamp(1.35rem,2.3vw,2rem);line-height:1.05}
.hero-photo figcaption span,.story-photo figcaption{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.story-photo{aspect-ratio:4/3}
.story-photo img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.story-photo:hover img{transform:scale(1.025)}
.story-photo figcaption{position:absolute;left:1rem;bottom:1rem;padding:.65rem .85rem;color:#fff;background:rgba(17,20,63,.82);border-radius:.5rem;backdrop-filter:blur(8px)}
.source-note{font-size:.78rem!important;letter-spacing:.02em;color:var(--text-muted)}

/* ---------- Photo gallery ----------
   Four fixed columns rather than auto-fit, so eight photographs always
   land as a clean 4x2 block instead of an orphaned trailing row. The
   source images are 2.2:1 and 0.45:1, so every tile crops to 4:5 and
   lets object-fit find the subject. */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.gallery figure{margin:0;display:flex;flex-direction:column;gap:.55rem}
.gallery .frame{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  aspect-ratio:4/5;background:var(--paper-3);border:1px solid var(--border)
}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{font-size:var(--t-xs);color:var(--text-muted);line-height:1.45}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr);gap:.8rem}}
.section--ink .gallery .frame{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
.section--ink .gallery figcaption{color:rgba(255,255,255,.62)}

/* ---------- Video ---------- */
.videoblock{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--navy);border:1px solid var(--border)}
.videoblock video{width:100%;height:auto;display:block;max-height:70svh;background:var(--navy)}
.videoclips{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1rem,3vw,2rem);margin-top:clamp(2rem,5vw,3.5rem)}
.videoclips figure{margin:0;flex:0 1 18rem;display:flex;flex-direction:column;gap:.55rem}
.videoclips .videoblock{border-color:rgba(255,255,255,.14)}
.videoclips figcaption{font-size:var(--t-xs);color:rgba(255,255,255,.62);line-height:1.45}
@media(max-width:760px){.hero-photo{min-height:25rem;transform:none}.hero-photo img{object-position:52% center}.story-photo{aspect-ratio:1/1}}

/* ---------- Cinematic homepage opening ---------- */
.homepage .header{position:fixed;inset:0 0 auto;background:linear-gradient(180deg,rgba(9,11,34,.78),transparent);border:0;color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
.homepage .header.is-stuck{background:rgba(11,13,40,.94);border-bottom:1px solid rgba(255,255,255,.12);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.homepage .header .logo__sub,.homepage .header .nav a{color:rgba(255,255,255,.68)}
.homepage .header .nav a:hover,.homepage .header .nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.08)}
.homepage .header .btn--ghost{border-color:rgba(255,255,255,.3);color:#fff}
.homepage .header .burger{border-color:rgba(255,255,255,.3)}
.homepage .header .burger span,.homepage .header .burger span:before,.homepage .header .burger span:after{background:#fff}
.homepage .header .burger[aria-expanded="true"] span{background:transparent}

.hero--cinematic{min-height:100svh;padding:0;color:#fff;background:#090B22;isolation:isolate;display:grid;align-items:end}
.hero--cinematic:before{display:none}
.hero__image,.hero__veil,.hero__grain{position:absolute;inset:0}
.hero__image{z-index:-3;overflow:hidden}
/* Mobile first: the portrait crop is already framed on the medal, so it is
   centred and left alone. The landscape frame and its off-centre focal
   point are layered on at 621px, where there is room for them. */
.hero__image picture{display:contents}
.hero__image img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:saturate(.9) contrast(1.03);animation:cinema-drift 18s cubic-bezier(.2,.55,.3,1) both}
/* Mobile first. On a phone the hero is roughly 1:2.8, so even the portrait crop
   is cut to under half its width and the copy unavoidably sits on top of the
   subject. The veil is therefore shaped to the copy, not to the photograph:
   a clear window at the top where the faces read, then a hard ramp to near
   opaque from the headline down, so every line has a solid ground. */
.hero__veil{z-index:-2;background:
  linear-gradient(180deg,
    rgba(9,11,34,.60) 0%,
    rgba(9,11,34,.34) 12%,
    rgba(9,11,34,.50) 22%,
    rgba(9,11,34,.68) 30%,
    rgba(9,11,34,.88) 44%,
    rgba(9,11,34,.94) 60%,
    rgba(9,11,34,.96) 100%),
  linear-gradient(90deg,rgba(9,11,34,.46) 0%,rgba(9,11,34,.14) 55%,rgba(9,11,34,.28) 100%)}
.hero__grain{z-index:-1;opacity:.15;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");pointer-events:none}
.hero__stage{width:100%;padding-top:clamp(8rem,15vh,11rem);padding-bottom:clamp(8rem,16vh,11rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(18rem,.48fr);gap:clamp(3rem,8vw,8rem);align-items:end}
.hero__copy{max-width:58rem}
.hero--cinematic .hero__kicker{color:#B7D6F7;background:rgba(20,73,143,.24);border-color:rgba(183,214,247,.36);margin:0 0 1.6rem;backdrop-filter:blur(8px);animation:cinema-rise .6s .05s both}
.hero--cinematic h1{font-size:clamp(4rem,8.7vw,9rem);line-height:.78;letter-spacing:-.055em;margin:0 0 clamp(1.6rem,3vw,2.6rem);max-width:10ch;text-wrap:balance}
.hero__line{display:block;animation:cinema-rise .7s both}
.hero__line:nth-child(1){animation-delay:.08s}.hero__line:nth-child(2){animation-delay:.14s}.hero__line:nth-child(3){animation-delay:.2s}
.hero__line--accent{font-style:italic;color:#8FBEEC;font-size:.69em;line-height:1.08;margin-top:.22em;letter-spacing:-.035em}
.hero__intro{max-width:42rem;font-size:clamp(1.05rem,1.55vw,1.38rem);line-height:1.55;color:rgba(255,255,255,.78);margin:0;animation:cinema-rise .6s .28s both}
.hero__actions{margin-top:2rem;animation:cinema-rise .6s .34s both}
.hero__text-link{display:inline-flex;align-items:center;padding:.95rem .5rem;color:#fff;text-underline-offset:.35rem;text-decoration-color:rgba(255,255,255,.4);font-weight:600}
.hero__text-link:hover{text-decoration-color:#fff}
.hero__proof{border-left:1px solid rgba(255,255,255,.24);animation:cinema-rise .7s .38s both}
.hero__proof div{position:relative;display:grid;grid-template-columns:2rem 1fr;padding:1rem 0 1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.16)}
.hero__proof span{grid-row:1/3;font-family:var(--mono);font-size:.65rem;color:#8FBEEC;padding-top:.25rem}
.hero__proof strong{font-family:var(--display);font-size:1.25rem;line-height:1.15}
.hero__proof small{color:rgba(255,255,255,.58);font-size:.72rem;margin-top:.3rem;letter-spacing:.02em}
.hero__scroll{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);display:flex;align-items:center;gap:.65rem;color:rgba(255,255,255,.6);text-decoration:none;text-transform:uppercase;letter-spacing:.15em;font-size:.61rem;font-weight:650}
.hero__scroll span{width:1px;height:2rem;background:linear-gradient(#8FBEEC,transparent);animation:scroll-cue 1.8s ease-in-out infinite}
/* ---- Hero background, 621px and up ---- */
@media(min-width:621px){
  .hero__image img{object-position:60% 18%;filter:saturate(.86) contrast(1.04);animation-name:cinema-drift-wide}
  .hero__veil{background:linear-gradient(90deg,rgba(9,11,34,.93) 0%,rgba(9,11,34,.72) 37%,rgba(9,11,34,.2) 68%,rgba(9,11,34,.34) 100%),linear-gradient(0deg,rgba(9,11,34,.9) 0%,transparent 48%,rgba(9,11,34,.38) 100%)}
}

@keyframes cinema-drift{from{transform:scale(1.07)}to{transform:scale(1.01)}}
@keyframes cinema-drift-wide{from{transform:scale(1.08) translate3d(1.5%,0,0)}to{transform:scale(1.02) translate3d(0,0,0)}}
@keyframes cinema-rise{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes scroll-cue{0%,100%{transform:scaleY(.45);transform-origin:top;opacity:.35}50%{transform:scaleY(1);opacity:1}}

@media(max-width:1040px){
  .homepage .nav{background:#0C0F30;color:#fff}
}
@media(max-width:900px){
  .hero__stage{grid-template-columns:1fr;padding-bottom:7.5rem;gap:2.5rem}
  .hero__proof{display:grid;grid-template-columns:repeat(3,1fr);border-left:0;border-top:1px solid rgba(255,255,255,.24)}
  .hero__proof div{grid-template-columns:1fr;padding:1rem .7rem;border-right:1px solid rgba(255,255,255,.16);border-bottom:0}
  .hero__proof span{grid-row:auto;margin-bottom:.5rem}.hero__proof small{display:none}
}
@media(max-width:620px){
  /* Sizing is handled by the shared header ladder; the homepage only needs
     its hero adjustments here. Donate stays visible on every page. */
  .hero__stage{padding-top:8.5rem;padding-bottom:7rem}
  .hero--cinematic h1{font-size:clamp(3.55rem,17vw,5.8rem);line-height:.82;text-shadow:0 2px 18px rgba(9,11,34,.55)}
  .hero--cinematic .hero__intro{text-shadow:0 1px 10px rgba(9,11,34,.5)}
  .hero__line--accent{font-size:.63em;line-height:1.12}
  .hero__intro{font-size:1rem;max-width:34ch}
  .hero__proof{gap:0}.hero__proof strong{font-size:1rem}
  .hero__actions{align-items:flex-start}.hero__actions .btn{width:100%}.hero__text-link{padding-left:0}
  .hero__scroll{display:none}
}
@media(prefers-reduced-motion:reduce){.hero__image img,.hero__line,.hero--cinematic .hero__kicker,.hero__intro,.hero__actions,.hero__proof,.hero__scroll span{animation:none!important}}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "liga";
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
/* Components that set their own display (.give__fields, .give__toggle) would
   otherwise ignore the hidden attribute that main.js uses to switch them off. */
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); letter-spacing: -0.012em; }
h4 { font-size: var(--t-lg); letter-spacing: -0.005em; }
p  { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--ochre); color: #fff; }

:focus-visible {
  outline: 2.5px solid var(--ochre);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- 3. Layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 820px); margin-inline: auto; }
/* Legal pages (privacy): heading and body share one reading width, and section
   headings are sized for a document rather than a landing page. */
.wrap-narrow.legal { width: min(100% - 2.5rem, 46rem); }
.legal h2 { font-size: var(--t-2xl); margin-top: 2.8rem; }
.legal > h2:first-child { margin-top: 0; }
.section { padding-block: var(--pad-section); }
.section--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }
.section--alt { background: var(--bg-alt); }
.section--ink { background: var(--ink); color: #E4EBF8; }
.section--ink h2, .section--ink h3 { color: #FFFFFF; }
.section--green { background: var(--green); color: #E3F1E3; }
.section--green h2 { color: #fff; }

.grid { display: grid; gap: var(--gap); }
/* Each track is at least the card minimum and at least 1/n of the row, so a
   cols-3 grid never shows a fourth column on a wide screen. The 4.6rem allows
   for the largest inline gap used on the site (4.5rem). */
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(300px, (100% - 4.6rem) / 2)), 1fr)); }
/* A two-column section whose photo is still pending keeps a readable measure. */
.cols-2 > :only-child { max-width: 46rem; }
/* cols-3 goes 3 -> 1 and cols-4 goes 4 -> 2 -> 1, so no row ever ends with a
   single orphaned card. The (Npx - 100%) * 999 term is huge below N and
   negative above it, which switches the layout at that container width. */
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(190px, (100% - 2 * 4.6rem) / 3, (640px - 100%) * 999)), 1fr)); }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(210px, (100% - 3 * 4.6rem) / 4, min((100% - 4.6rem) / 2, (920px - 100%) * 999))), 1fr)); }
.prose { max-width: var(--maxw-prose); }
.stack > * + * { margin-top: 1rem; }

/* ---------- 4. Type utilities ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ochre);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::before {
  content: "";
  width: 1.9rem; height: 2px;
  background: var(--ochre);
  flex: none;
}
.section--ink .eyebrow, .section--green .eyebrow { color: var(--gold); }
.section--ink .eyebrow::before, .section--green .eyebrow::before { background: var(--gold); }

.lede { font-size: var(--t-xl); line-height: 1.45; color: var(--text-muted); font-weight: 350; }
.small { font-size: var(--t-sm); color: var(--text-muted); }
.tiny  { font-size: var(--t-xs); color: var(--text-muted); }
.mark  { background: linear-gradient(transparent 62%, var(--ochre-soft) 62%); }
.num   { font-family: var(--display); font-variant-numeric: tabular-nums; }

/* Content that the organisation must verify before publishing. */
.tk {
  border-bottom: 1.5px dotted var(--clay);
  cursor: help;
}
body.hide-tk .tk { border-bottom: none; }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: 100px;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), border-color .18s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Red is reserved for the give action, wherever the button appears. */
.btn--primary { background: var(--give); color: #fff; box-shadow: 0 6px 18px -8px rgba(159,28,33,.65); }
.btn--primary:hover { background: var(--give-deep); box-shadow: 0 12px 26px -10px rgba(159,28,33,.7); }

.btn--ghost { border-color: var(--border); background: transparent; color: var(--text); }
.btn--ghost:hover { border-color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }

.btn--light { background: #fff; color: var(--ink); }
.btn--outline-light { border-color: rgba(255,255,255,.35); color: inherit; }
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.btn--lg { padding: 1.05rem 2rem; font-size: var(--t-base); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: var(--t-sm);
  text-decoration: none;
  color: var(--ochre);
  border-bottom: 1.5px solid transparent;
  transition: border-color .2s, gap .2s var(--ease);
}
.link-arrow::after { content: "→"; transition: transform .2s var(--ease); }
.link-arrow:hover { border-color: currentColor; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- 6. Header ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; }

.header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.header.is-stuck { border-bottom-color: var(--border); }
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 74px;
}

.logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.logo__mark {
  width: 42px; height: 42px; border-radius: 50%;
  flex: none; display: block; object-fit: contain;
}
.logo__text { display: flex; flex-direction: column; line-height: 1.15; }
.logo__name { font-family: var(--display); font-weight: 600; font-size: 1.02rem; letter-spacing: -.02em; white-space: nowrap; }
.logo__sub  { font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; white-space: nowrap; }

/* --- Header size ladder ---------------------------------------------
   Measured budget: the horizontal nav is ~650px and the wordmark plus
   both CTAs need ~480px more, which does not fit until the wrapper is
   ~1180px. The strapline alone is 287px, so it is the first thing to go.
   Going down in width the header sheds, in order: the strapline (above
   1040 and again below 700), the Volunteer button, the nav itself, then
   the strapline again, then the logo shrinks and finally wraps.
   The strapline still appears in the footer on every page.
   Verified with no overflow at 1440/1280/1160/1045/1024/768/480/375. */
@media (min-width: 1041px) { .header .logo__sub { display: none; } }
@media (max-width: 700px)  { .logo__sub { display: none; } }
@media (max-width: 560px) {
  .header__inner { gap: .6rem; min-height: 66px; }
  .header__cta { gap: .4rem; }
  .header__cta .btn { padding: .7rem 1.05rem; font-size: .8rem; }
  .logo { gap: .5rem; }
  .logo__mark { width: 36px; height: 36px; }
  .logo__name { font-size: .94rem; }
}
@media (max-width: 430px) {
  /* Let the wordmark take two lines rather than push the button off-screen. */
  .logo__name { font-size: .86rem; white-space: normal; line-height: 1.08; }
  .logo__text { max-width: 12ch; }
}

.nav { display: flex; align-items: center; gap: .3rem; }
.nav a {
  padding: .5rem .7rem; border-radius: 100px;
  font-size: var(--t-sm); font-weight: 550; text-decoration: none;
  color: var(--text-muted); white-space: nowrap;
  transition: color .18s, background .18s;
}
/* Compact band: nav tightens and Volunteer drops out, so the six links and
   Donate still fit without the row wrapping or spilling past the wrapper. */
@media (min-width: 1041px) and (max-width: 1240px) {
  .header__inner { gap: 1rem; }
  .nav { gap: .1rem; }
  .nav a { padding: .5rem .45rem; font-size: .82rem; }
  .header__cta .btn--ghost { display: none; }
}
.nav a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.nav a[aria-current="page"] { color: var(--text); font-weight: 650; }

.header__cta { display: flex; align-items: center; gap: .6rem; flex: none; }

.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1.5px solid var(--border); border-radius: 10px;
  background: transparent; cursor: pointer;
  align-items: center; justify-content: center;
}
.burger span { display: block; width: 18px; height: 1.8px; background: var(--text); position: relative; transition: .25s var(--ease); }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.8px; background: var(--text); transition: .25s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1040px) {
  .burger { display: inline-flex; }
  .nav {
    position: fixed; inset: 74px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.25rem 1.5rem;
    transform: translateY(-120%);
    transition: transform .35s var(--ease);
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - 74px);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); }
  .nav a { padding: .85rem .5rem; font-size: 1.05rem; border-bottom: 1px solid var(--border); border-radius: 0; }
  .header__cta .btn--ghost { display: none; }
}
/* The header shortens below 560px, so the drop-down panel has to follow it. */
@media (max-width: 560px) {
  .nav { inset: 66px 0 auto 0; max-height: calc(100dvh - 66px); }
}

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 92% -8%, color-mix(in srgb, var(--ochre) 16%, transparent), transparent 62%),
    radial-gradient(700px 420px at 4% 105%, color-mix(in srgb, var(--green) 12%, transparent), transparent 60%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; } }

.hero h1 { margin-bottom: .5em; }
.hero__kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--ochre-soft); color: var(--ochre-deep);
  border: 1px solid color-mix(in srgb, var(--ochre) 30%, transparent);
  padding: .4rem .9rem .4rem .55rem;
  border-radius: 100px;
  font-size: var(--t-xs); font-weight: 650; letter-spacing: .01em;
  margin-bottom: 1.5rem;
}
.hero__kicker .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ochre);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ochre) 60%, transparent); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  margin-top: 2.2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.hero__meta div { min-width: 110px; }
.hero__meta strong { display: block; font-family: var(--display); font-size: var(--t-2xl); line-height: 1; }
.hero__meta span { font-size: var(--t-xs); color: var(--text-muted); letter-spacing: .03em; }

/* ---------- 8. Media placeholders ---------- */
.media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-3);
  box-shadow: var(--shadow-lg);
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--tall  { aspect-ratio: 4/5; }
.media--wide  { aspect-ratio: 16/10; }
.media--square{ aspect-ratio: 1/1; }

/* Visible, honest placeholder: replace with real photography */
.media--empty {
  display: grid; place-items: center; text-align: center;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--ochre) 8%, transparent) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, var(--paper-3), var(--paper-2));
  border: 1px dashed color-mix(in srgb, var(--ochre) 45%, transparent);
  box-shadow: none;
}
.media--empty p { font-size: var(--t-xs); color: var(--text-muted); max-width: 26ch; margin: 0; padding: 1rem; }
.media--empty .icon { font-size: 1.6rem; opacity: .5; margin-bottom: .4rem; }

.media__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.1rem .9rem;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  color: #fff; font-size: var(--t-xs); line-height: 1.4;
}

/* ---------- 9. Cost strip (psychological specificity) ---------- */
.costs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.cost { background: var(--surface); padding: 1.6rem 1.4rem; transition: background .2s; }
.cost:hover { background: var(--paper-2); }
.cost__amt { font-family: var(--display); font-size: var(--t-2xl); line-height: 1; color: var(--give); margin-bottom: .4rem; display: block; }
.cost__what { font-weight: 600; font-size: var(--t-base); margin-bottom: .2rem; }
.cost__note { font-size: var(--t-xs); color: var(--text-muted); }

/* ---------- 10. Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--ochre) 40%, var(--border)); }
.card__tag {
  align-self: flex-start;
  font-size: var(--t-xs); font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  padding: .28rem .65rem; border-radius: 100px;
  background: var(--green-soft); color: var(--green);
  margin-bottom: .9rem;
}
.card__tag--ochre { background: var(--ochre-soft); color: var(--ochre-deep); }
.card h3 { margin-bottom: .5rem; }
.card p { font-size: var(--t-sm); color: var(--text-muted); }
.card .link-arrow { margin-top: auto; padding-top: 1.1rem; }
/* A link inside a sentence stays on the text line. */
.card p .link-arrow { margin-top: 0; padding-top: 0; }
.card p:has(> br + .link-arrow) { line-height: 2.2; }

.card__num {
  font-family: var(--display); font-size: 2.6rem; line-height: 1;
  color: color-mix(in srgb, var(--ochre) 35%, transparent);
  margin-bottom: .8rem;
}

/* ---------- 11. Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2.5rem 1.5rem; }
.stat__value {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.6rem, 4.5vw, 4rem); line-height: .95;
  letter-spacing: -.03em;
  display: block; margin-bottom: .4rem;
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: var(--t-sm); line-height: 1.4; opacity: .85; }
.stat__src { font-size: var(--t-xs); opacity: .55; margin-top: .35rem; }

/* ---------- 12. Money transparency bar ---------- */
.allocation { display: flex; height: 46px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.allocation__seg { display: grid; place-items: center; font-size: var(--t-xs); font-weight: 650; color: #fff; position: relative; }
.allocation__seg:nth-child(1) { background: var(--brand-green); }
.allocation__seg:nth-child(2) { background: var(--blue); }
.allocation__seg:nth-child(3) { background: var(--blue-mid); }
.allocation__seg:nth-child(4) { background: var(--ink-3); }
.allocation__key { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1rem; padding-left: 0; }
.allocation__key li { display: flex; align-items: center; gap: .45rem; font-size: var(--t-sm); list-style: none; }
.allocation__key .swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* ---------- 13. Donation widget ---------- */
/* The widget is a light card that sits inside the green section on the homepage, so it
   sets its own text colour rather than inheriting the section's pale green. */
.give {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-lg);
}
.give__toggle {
  display: inline-flex; padding: 4px; gap: 4px;
  background: var(--paper-2); border-radius: 100px; margin-bottom: 1.4rem;
  border: 1px solid var(--border);
}
.give__toggle button {
  border: 0; background: transparent; cursor: pointer;
  padding: .5rem 1.1rem; border-radius: 100px;
  font-size: var(--t-sm); font-weight: 600; color: var(--text-muted);
  transition: background .2s, color .2s;
}
.give__toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.give__amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1rem; }
.amt {
  border: 1.5px solid var(--border); background: transparent;
  border-radius: 10px; padding: .85rem .4rem; cursor: pointer;
  font-family: var(--display); font-size: 1.1rem; font-weight: 600;
  transition: .18s var(--ease);
}
.amt:hover { border-color: var(--give); }
.amt[aria-pressed="true"] { border-color: var(--give); background: var(--give); color: #fff; }
.give__custom {
  display: flex; align-items: center; gap: .5rem;
  border: 1.5px solid var(--border); border-radius: 10px; padding: .1rem .9rem;
  margin-bottom: 1.1rem;
}
.give__custom span { color: var(--text-muted); font-weight: 600; }
.give__custom input {
  flex: 1; border: 0; background: transparent; padding: .8rem 0;
  font-family: var(--display); font-size: 1.1rem; font-weight: 600; color: inherit;
  min-width: 0;
}
.give__custom input:focus { outline: none; }
.give__impact {
  background: var(--ochre-soft); border-radius: 10px;
  padding: .9rem 1rem; font-size: var(--t-sm); line-height: 1.45;
  margin-bottom: 1.2rem; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ochre) 25%, transparent);
}
.give__impact strong { color: var(--ochre-deep); }
.give .btn { width: 100%; }
.give__foot { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1rem; justify-content: center; }
.give__foot span { font-size: var(--t-xs); color: var(--text-muted); display: flex; align-items: center; gap: .3rem; }

/* Paystack needs an email address, and Section 18A needs a name. */
.give__fields { display: grid; gap: .6rem; margin-bottom: 1.1rem; }
.give__fields input {
  font: inherit; font-size: var(--t-sm);
  padding: .8rem .9rem; color: inherit;
  border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--bg); min-width: 0;
}
.give__fields input:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent); }
.give__note {
  margin: 0 0 1rem; padding: .85rem 1rem; border-radius: 10px;
  font-size: var(--t-sm); line-height: 1.5;
  border: 1px solid var(--border); background: var(--paper-2);
}
.give__note[data-state="error"]   { border-color: color-mix(in srgb, var(--give) 45%, transparent); background: var(--give-soft); }
.give__note[data-state="success"] { border-color: color-mix(in srgb, var(--brand-green) 45%, transparent); background: var(--green-soft); }
.give__note strong { display: block; margin-bottom: .15rem; }
.give__note code { font-family: var(--mono); font-size: .85em; overflow-wrap: anywhere; }

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

/* ---------- 14. Progress ---------- */
.progress { margin-top: 1.4rem; }
.progress__track { height: 9px; background: var(--paper-3); border-radius: 100px; overflow: hidden; }
.progress__fill {
  height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--blue-mid), var(--give));
  width: 0; transition: width 1.4s var(--ease);
}
.progress__meta { display: flex; justify-content: space-between; font-size: var(--t-xs); margin-top: .5rem; color: var(--text-muted); }

/* ---------- 15. Story / quote ---------- */
.quote {
  border-left: 3px solid var(--ochre);
  padding-left: clamp(1.2rem, 3vw, 2rem);
  font-family: var(--display);
  font-size: var(--t-2xl);
  line-height: 1.32;
  letter-spacing: -.015em;
  font-weight: 400;
}
.quote footer { font-family: var(--sans); font-size: var(--t-sm); color: var(--text-muted); margin-top: 1.2rem; font-weight: 500; letter-spacing: 0; }
.quote footer strong { color: var(--text); display: block; font-weight: 650; }
/* On a phone the default blockquote indent plus display size left two words a line. */
@media (max-width: 620px) { .quote { margin-inline: 0; font-size: var(--t-xl); } }

/* ---------- 16. Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }
.timeline li { position: relative; padding: 0 0 2.2rem 1.8rem; }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: .45rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2.5px solid var(--ochre);
}
.timeline h4 { margin-bottom: .25rem; }
.timeline time { font-family: var(--mono); font-size: var(--t-xs); color: var(--ochre); font-weight: 600; letter-spacing: .04em; display: block; margin-bottom: .3rem; }

/* ---------- 17. Accordion ---------- */
.acc { border-top: 1px solid var(--border); }
.acc details { border-bottom: 1px solid var(--border); }
.acc summary {
  cursor: pointer; list-style: none;
  padding: 1.25rem 2.5rem 1.25rem 0;
  font-family: var(--display); font-size: var(--t-lg); font-weight: 600;
  position: relative;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: 1.4rem; font-weight: 300; color: var(--ochre);
  transition: transform .25s var(--ease);
}
.acc details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.acc .acc__body { padding-bottom: 1.5rem; max-width: var(--maxw-prose); color: var(--text-muted); font-size: var(--t-sm); }

/* ---------- 18. Partners ---------- */
/* Two labelled bands under one "Trusted by" heading. Mobile first: they stack,
   and widen into columns weighted by how many marks each band holds. */
.support-groups { display: grid; gap: 1.8rem; margin-top: 1.4rem; }
.support-groups__title {
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: .04em; color: var(--text-muted);
  margin: 0 0 .7rem;
}
@media (min-width: 780px) { .support-groups { grid-template-columns: 2fr 1fr; gap: 2.2rem; } }

.partners { display: flex; flex-wrap: wrap; gap: .8rem; }
.partner {
  display: grid; place-items: center;
  min-height: 104px; min-width: 150px; flex: 1 1 150px;  /* matches the logo cells, so every cell in the strip is one height */
  padding: 1rem 1.4rem;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface);
  font-size: var(--t-sm); font-weight: 600; text-align: center;
  color: var(--text-muted);
  transition: .2s var(--ease);
}
.partner:hover { color: var(--text); border-color: var(--ochre); }

/* A partner cell carrying a supplied logo file rather than a wordmark. The
   mark is held well inside the cell so it never crowds the border. Supplied
   logos are shown in their own colours - there is only one, and greying it
   out would lose the halo that carries the brand. */
.partner--logo { padding: 1rem 1.6rem; min-height: 104px; }
/* A definite height plus the mark's own ratio means the cell reserves the right
   width before the lazy-loaded file arrives, so the row does not shift. */
.partner--logo img {
  display: block; height: 68px; width: auto; max-width: 100%;
  aspect-ratio: 1600 / 819; object-fit: contain;
}
@media (max-width: 560px) {
  .partner, .partner--logo { min-height: 88px; }
  .partner--logo img { height: 56px; }
}

/* ---------- 19. Forms ---------- */
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.field label { font-size: var(--t-sm); font-weight: 600; }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--t-sm);
  padding: .8rem .9rem;
  border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
  transition: border-color .18s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ochre); outline: none; }
.field textarea { min-height: 130px; resize: vertical; }
.field__hint { font-size: var(--t-xs); color: var(--text-muted); }

.newsletter { display: flex; gap: .6rem; flex-wrap: wrap; max-width: 480px; }
.newsletter input { flex: 1 1 220px; }

/* ---------- 20. Sticky mobile give bar ---------- */
.givebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  transform: translateY(110%);
  transition: transform .35s var(--ease);
}
.givebar.is-visible { transform: translateY(0); }
.givebar p { margin: 0; font-size: var(--t-xs); line-height: 1.3; }
@media (max-width: 720px) { .givebar { display: flex; } body { padding-bottom: 4.5rem; } }

/* ---------- 21. Footer ---------- */
.footer { position: relative; background: var(--navy); color: #B9C6DF; padding-block: clamp(3.5rem, 6vw, 5rem) 2rem; }
/* The three swooshes from the logo, flattened into a rule. */
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg,
    var(--blue-mid) 0 34%, var(--brand-green) 34% 67%, var(--brand-red) 67% 100%);
}
.footer a { color: #DCE6F6; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer h4 { color: #FFFFFF; font-size: var(--t-sm); font-family: var(--sans); font-weight: 650; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
/* The last column carries the email address, which is 36 characters and
   must not break mid-word, so it gets the extra room. */
.footer__grid { display: grid; grid-template-columns: 1.25fr repeat(2, minmax(0, .9fr)) minmax(0, 1.35fr); gap: 2.5rem 2rem; }
.footer__grid > * { min-width: 0; }
@media (max-width: 820px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }
/* Single-column grid tracks default to max-content, which lets a long
   address push the whole column past the wrapper. minmax(0,1fr) stops it. */
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; font-size: var(--t-sm); overflow-wrap: break-word; }
.footer .logo__name { color: #fff; }
.footer .logo__sub { color: #8C9CBC; }
.footer__legal {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; justify-content: space-between;
  font-size: var(--t-xs); color: #8C9CBC;
}
.regbadges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.regbadge {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .02em;
  padding: .35rem .7rem; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.2); color: #C4D2E9;
}
.socials { display: flex; gap: .55rem; margin-top: 1.2rem; }
.socials a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  transition: .2s var(--ease);
}
.socials a:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-2px); }
.socials svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- 22. Page header ---------- */
.pagehead { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--border); }
.breadcrumb { font-size: var(--t-xs); color: var(--text-muted); margin-bottom: 1.2rem; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ---------- 23. Reveal on scroll ----------
   Scoped to .js so content is never hidden when scripting is off.
   The .js class is set by an inline snippet in <head>, before first paint. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- 24. Misc ---------- */
.divider { height: 1px; background: var(--border); border: 0; margin: 0; }
.badge-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.badge {
  font-size: var(--t-xs); font-weight: 600;
  padding: .35rem .75rem; border-radius: 100px;
  background: var(--paper-2); border: 1px solid var(--border); color: var(--text-muted);
}
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); min-width: 520px; }
/* Only tables with three or more columns need to scroll on a phone; a two-column
   table (board, programme facts, volunteer roles) fits the screen as it is. */
table:not(:has(th:nth-child(3), td:nth-child(3))) { min-width: 0; }
th, td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--border); }
th { font-weight: 650; background: var(--paper-2); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; }
tr:last-child td { border-bottom: 0; }

.callout {
  border: 1px solid color-mix(in srgb, var(--ochre) 35%, var(--border));
  background: color-mix(in srgb, var(--ochre) 6%, transparent);
  border-radius: 10px; padding: 1.2rem 1.4rem;
  font-size: var(--t-sm);
}
.callout strong { color: var(--ochre-deep); }

.eft {
  font-family: var(--mono); font-size: var(--t-sm);
  background: var(--paper-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 1.2rem 1.4rem;
  display: grid; gap: .5rem;
}
.eft div { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.eft dt, .eft b { color: var(--text-muted); font-weight: 500; }
/* On a phone the longer values wrapped under their labels and the short ones did
   not, so the rows zig-zagged. Stack every row the same way instead. */
@media (max-width: 560px) {
  .eft div { flex-direction: column; gap: .1rem; }
  .eft div + div { margin-top: .55rem; }
  .eft span { overflow-wrap: anywhere; }
}

@media (max-width:1040px){
  .homepage .header .burger{display:inline-flex!important;border-color:rgba(255,255,255,.32)}
  .homepage .header .burger span,.homepage .header .burger span::before,.homepage .header .burger span::after{background:#fff}
  .homepage .header .burger[aria-expanded="true"] span{background:transparent}
}