/* ==========================================================================
   MHFCO — Maimurna Hope Foundation for Cancer and Ostomy Care
   Single stylesheet. Colours come from the logo: navy tile, pink/green
   ribbon, amber pouch.
   ========================================================================== */

:root {
  --navy: #0B2239;
  --navy-2: #133456;
  --navy-3: #1D4670;
  --pink: #D6245A;          /* AA with white text */
  --pink-soft: #FCE7EE;
  --amber: #FDB515;
  --amber-soft: #FFF4D6;
  --green: #1E9E6A;
  --paper: #F8F5EF;
  --white: #FFFFFF;
  --ink: #1B2430;
  --muted: #5B6573;
  --line: #E6E0D6;

  /* Display serif for headlines/quotes; the sans handles everything else */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-head: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(11,34,57,.06), 0 8px 24px rgba(11,34,57,.07);
  --shadow-lg: 0 20px 50px rgba(11,34,57,.16);
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pink); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--navy); line-height: 1.15; margin: 0 0 .5em; }
h1, h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.015em; font-optical-sizing: auto; }
h1 { font-size: clamp(2.1rem, 3.6vw, 3.1rem); line-height: 1.08; text-wrap: balance; }
h2 { font-size: clamp(1.65rem, 2.4vw, 2.2rem); line-height: 1.15; text-wrap: balance; }
h1 em, h2 em { font-style: italic; }
h3 { font-size: 1.28rem; font-weight: 700; letter-spacing: -.005em; }
h4 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 10px 16px; z-index: 999; }
.skip-link:focus { left: 12px; top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: 20px; }
.section { padding-block: clamp(44px, 5.5vw, 76px); }
.section--paper { background: var(--paper); }
.section--navy { background: var(--navy); color: rgba(255,255,255,.82); }
.section--navy h2, .section--navy h3 { color: #fff; }
.center { text-align: center; }
.narrow { max-width: 720px; margin-inline: auto; }
.lead { font-size: 1.12rem; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: .92rem; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 14px;
}
.eyebrow--amber { color: var(--amber); }
.section-head { max-width: 700px; margin-bottom: 32px; }
.section-head--row { max-width: none; }
.section-head p:last-child { margin-bottom: 0; }
.section-head.center { margin-inline: auto; }

/* Placeholders the team must fill in before launch. Search for class="todo". */
.todo { background: #FFF1A8; color: #5A4500; padding: 0 .3em; border-radius: 3px; font-weight: 600; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-head); font-weight: 600; font-size: .98rem;
  padding: .85em 1.6em; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, color .15s, border-color .15s;
  line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--pink); color: #fff; }
.btn-primary:hover { background: #B81B4B; color: #fff; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-3); color: #fff; }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-light { border-color: rgba(255,255,255,.6); color: #fff; background: transparent; }
.btn-light:hover { background: #fff; color: var(--navy); }
.btn-amber { background: var(--amber); color: var(--navy); }
.btn-amber:hover { background: #F0A500; color: var(--navy); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); }
.brand img { width: 30px; height: auto; }
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; letter-spacing: .02em; line-height: 1; display: block; }
.brand-sub { font-size: .72rem; color: var(--muted); line-height: 1.25; display: block; max-width: 220px; margin-top: 3px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  font-family: var(--font-head); font-size: .93rem; font-weight: 500;
  color: var(--navy); text-decoration: none; padding: 8px 12px; border-radius: 8px;
}
.nav a:hover { background: var(--paper); color: var(--pink); }
.nav a[aria-current="page"] { color: var(--pink); }
.nav .btn { margin-left: 10px; padding: .65em 1.3em; color: #fff; }
/* Hover and current page go navy, not a darker red, so the button stays in the brand palette */
.nav .btn:hover, .nav .btn[aria-current="page"] { background: var(--navy); color: #fff; }
.nav-toggle {
  display: none; background: none; border: 0; padding: 10px; cursor: pointer; color: var(--navy);
}
.nav-toggle svg { width: 28px; height: 28px; }

@media (max-width: 1040px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg);
    padding: 10px 20px 20px; display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 8px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav .btn { margin: 14px 0 0; border-radius: 999px; border-bottom: 0; }
  .brand-sub { font-size: .66rem; max-width: 190px; }
}

/* ---------- Hero ---------- */
/* Home hero: sized to its content (not the screen) so the facts strip shows on a laptop's first screen */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background: var(--navy) center 40% / cover no-repeat;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,34,57,.95) 0%, rgba(11,34,57,.82) 42%, rgba(11,34,57,.35) 100%);
}
.hero .wrap { position: relative; padding-block: clamp(40px, 5vw, 64px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .8fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero-content { max-width: 620px; }
.hero .eyebrow { margin-bottom: 10px; }
.hero h1 { color: #fff; margin-bottom: .4em; }
.hero h1 em { font-style: italic; color: var(--amber); }
.hero p { font-size: 1.1rem; color: rgba(255,255,255,.86); max-width: 560px; margin-bottom: 0; }
.hero .btn-row { margin-top: 24px; }
.hero-note { margin-top: 24px; display: flex; align-items: center; gap: 12px; font-size: .92rem; color: rgba(255,255,255,.72); }
.hero-note img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--amber); }
.hero-note strong { color: #fff; display: block; font-weight: 600; }

/* Quick-give card in the hero */
.quick-give { background: #fff; color: var(--ink); border-radius: 20px; padding: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.quick-give h2 { font-size: 1.45rem; margin-bottom: 4px; }
.quick-give > p { color: var(--muted); font-size: .95rem; margin-bottom: 14px; }
.qg-label { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 12px 0 8px; }
.qg-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qg-amounts a {
  display: block; text-align: center; text-decoration: none; padding: 10px 4px; border-radius: 10px;
  border: 1.5px solid var(--line); font: 700 1rem var(--font-head); color: var(--navy);
  font-variant-numeric: tabular-nums; transition: border-color .15s, background .15s, color .15s;
}
.qg-amounts a:hover { border-color: var(--pink); background: var(--pink-soft); color: var(--pink); }
.quick-give .btn { margin-top: 16px; }
.qg-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: .85rem; color: var(--muted); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .quick-give { max-width: 460px; }
}
@media (max-width: 700px) {
  .hero::before { background: linear-gradient(180deg, rgba(11,34,57,.78) 0%, rgba(11,34,57,.95) 60%); }
}

/* Inner-page intro: compact band so content starts on the first screen */
.page-hero { background: var(--paper); border-bottom: 1px solid var(--line); padding-block: clamp(26px, 3.5vw, 44px); position: relative; overflow: hidden; }
.page-hero::after {
  content: ""; position: absolute; right: -60px; top: -90px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(214,36,90,.12), transparent 65%);
}
.page-hero h1 { max-width: 820px; font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: .3em; }
.page-hero p { font-size: 1.08rem; color: var(--muted); max-width: 700px; margin: 0; }
.breadcrumb { font-size: .82rem; margin-bottom: 8px; color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.page-hero + .section { padding-top: clamp(32px, 4vw, 52px); }

/* ---------- Fact strip ---------- */
.facts { background: var(--amber); color: var(--navy); }
.facts .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.fact { padding: 18px 20px; border-right: 1px solid rgba(11,34,57,.15); line-height: 1.4; }
.fact:last-child { border-right: 0; }
.fact strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.1; }
.fact span { font-size: .92rem; }
@media (max-width: 800px) {
  .facts .wrap { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(2) { border-right: 0; }
  .fact:nth-child(-n+2) { border-bottom: 1px solid rgba(11,34,57,.15); }
}

/* ---------- Layout helpers ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split--wide-text { grid-template-columns: 5fr 7fr; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
/* Card whose actions sit on one line at the bottom, level across a row of cards */
.card--action { display: flex; flex-direction: column; }
.card--action .btn-row { margin-top: auto; padding-top: 8px; gap: 12px 20px; }
.btn-row .link-arrow { margin-top: 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .split, .split--wide-text, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.photo img { width: 100%; height: 100%; object-fit: cover; }

.checklist { list-style: none; padding: 0; margin: 20px 0 28px; }
.checklist li { position: relative; padding: 7px 0 7px 34px; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 11px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--pink-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6245A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* ---------- Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow); height: 100%;
}
.card p:last-child { margin-bottom: 0; }
.card-num {
  font-family: var(--font-head); font-weight: 700; font-size: .85rem; letter-spacing: .1em;
  color: var(--pink); display: block; margin-bottom: 12px;
}
.icon-badge {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px;
  background: var(--pink-soft); color: var(--pink);
}
.icon-badge svg { width: 26px; height: 26px; }
.icon-badge--amber { background: var(--amber-soft); color: #B07800; }
.icon-badge--navy { background: #E3EBF5; color: var(--navy); }
.icon-badge--green { background: #DDF3E9; color: var(--green); }

.program-card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); display: flex; flex-direction: column; }
.program-card .program-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper); }
.program-card .program-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.program-card:hover .program-img img { transform: scale(1.04); }
.program-card .program-body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.program-card .program-body p { color: var(--muted); }
.link-arrow { font-family: var(--font-head); font-weight: 600; font-size: .92rem; text-decoration: none; margin-top: auto; }
.link-arrow::after { content: " →"; }

/* ---------- Program detail rows ---------- */

/* Portrait photo in a landscape frame: keep faces in view */

/* For flyers and graphics whose text must not be cropped */

/* ---------- Founder quote ---------- */
.founder { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 80px); align-items: center; }

.founder blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.5; color: #fff; }
.founder blockquote p { margin: 0 0 1em; }
.founder blockquote p:last-child { margin-bottom: 0; }
/* The full message is long: lead paragraph in the display size, the rest smaller and upright. */
.founder blockquote p + p { font-family: var(--font-body); font-style: normal; font-size: 1.02rem; line-height: 1.65; color: rgba(255,255,255,.86); }
.founder blockquote::before { content: "\201C"; display: block; font-size: 5rem; line-height: .6; color: var(--pink); margin-bottom: 18px; font-family: Georgia, serif; }
.founder cite { display: block; margin-top: 26px; font-style: normal; }
.founder cite strong { color: var(--amber); display: block; font-family: var(--font-head); }
@media (max-width: 760px) { .founder { grid-template-columns: 1fr; }  }

/* ---------- Stories / news ---------- */
.story-card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.story-card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.story-card .story-body { padding: 22px 24px 26px; }
.story-meta { font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: 8px; }
.story-card h3 { font-size: 1.15rem; }
.story-card p { color: var(--muted); font-size: .98rem; }

.article { padding-block: 36px; border-bottom: 1px solid var(--line); }
.article:last-child { border-bottom: 0; }
/* Jump links under a page-hero title (Gallery sections) */
.jump-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.jump-links a { font-size: .88rem; font-weight: 600; text-decoration: none; color: var(--navy); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; }
.jump-links a:hover { border-color: var(--pink); color: var(--pink); }

/* ---------- Video ---------- */
/* Self-hosted MP4s with preload="none": nothing downloads until play is pressed */
.video-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: #000; }
.video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

.video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 20px; }
.video-card { margin: 0; }
.video-card video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: #000; border-radius: var(--radius); box-shadow: var(--shadow); }
.video-card figcaption { margin-top: 12px; font-weight: 600; color: var(--navy); font-size: .95rem; line-height: 1.35; }
.video-card figcaption span { display: block; margin-top: 3px; font-weight: 400; color: var(--muted); font-size: .85rem; }
@media (max-width: 960px) { .video-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }

/* Photo with caption below, used for event photos in a grid */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.article-grid img { border-radius: 12px; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; width: 100%; }
@media (max-width: 700px) { .article-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Team ---------- */
/* Flex so an incomplete last row is centred */
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 22px; }
.team-grid > * { flex: 0 1 calc((100% - 66px) / 4); }
@media (max-width: 960px) { .team-grid > * { flex-basis: calc((100% - 44px) / 3); } }
@media (max-width: 700px) { .team-grid > * { flex-basis: calc((100% - 22px) / 2); } }
.person { text-align: center; }
.person img {
  width: 100%; max-width: 180px; aspect-ratio: 1; object-fit: cover; object-position: center 20%;
  border-radius: 50%; margin: 0 auto 16px; border: 4px solid #fff; box-shadow: 0 0 0 2px var(--line), var(--shadow);
}
.person h3 { font-size: 1.02rem; margin-bottom: 2px; }
.person p { font-size: .92rem; color: var(--muted); margin: 0; }
.leader { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center; }
.leader img { width: 220px; aspect-ratio: 1; object-fit: cover; object-position: center 25%; border-radius: var(--radius-lg); }
@media (max-width: 700px) { .leader { grid-template-columns: 1fr; } .leader img { width: 180px; } }

/* ---------- Partners ---------- */
/* Flex (not grid) so an incomplete last row is centred */
.partners { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.partners figure {
  flex: 0 1 calc((100% - 64px) / 5);
  margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 14px; min-height: 150px; text-align: center;
}
.partners img { max-height: 70px; width: auto; object-fit: contain; }
.partners figcaption { font-size: .8rem; color: var(--muted); line-height: 1.3; }
/* Partner without a logo file yet: show its name as a wordmark in the logo slot */
.partner-wordmark { min-height: 70px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.2; color: var(--navy); }
@media (max-width: 960px) { .partners figure { flex-basis: calc((100% - 32px) / 3); } }
@media (max-width: 560px) { .partners figure { flex-basis: calc((100% - 16px) / 2); } }

/* ---------- Home: signs + support ---------- */
.split--top { align-items: start; }
.signs-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px); }
.signs-card h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.signs-list { list-style: none; padding: 0; margin: 18px 0 20px; display: grid; gap: 10px; }
.signs-list li { position: relative; padding: 12px 14px 12px 44px; background: #fff; border-radius: 12px; border: 1px solid var(--line); font-weight: 600; color: var(--navy); line-height: 1.4; }
.signs-list li::before { content: "!"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--pink); color: #fff; font-size: .8rem; font-weight: 700; display: grid; place-items: center; }

/* ---------- Home: advocacy forums strip ---------- */
.section-head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }

/* Trust signals beside the donation ask */
.trust-list { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.trust-list li { font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.9); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 5px 12px; }
.trust-list a { color: var(--amber); text-decoration: none; }

/* Portrait photo in a landscape frame: keep the middle (face and hands) in view */

/* ---------- Anchors: land below the sticky header ---------- */
:root { --header-h: 66px; }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
.programme[id] { scroll-margin-top: calc(var(--header-h) + 52px); }

/* ---------- Home: founder video + message ---------- */
/* Top-aligned so opening "Read her full message" never moves the video */
.founder--video { grid-template-columns: 7fr 6fr; align-items: start; }
.founder--video > * { min-width: 0; }
.founder--video .video-frame { position: sticky; top: calc(var(--header-h) + 24px); }
.video-caption { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: .88rem; color: rgba(255,255,255,.7); }
.video-caption svg { width: 16px; height: 16px; color: var(--amber); }
.btn-icon { display: inline-flex; align-items: center; gap: 8px; }
.btn-icon svg { width: 16px; height: 16px; }
.link-arrow--light { color: var(--amber); }

@media (max-width: 900px) {
  .founder--video { grid-template-columns: 1fr; }
  .founder--video .video-frame { position: static; }
}
/* Phones: founder video runs edge to edge for a bigger picture and easier controls */
@media (max-width: 600px) {
  .founder--video .video-frame { margin-inline: -20px; border-radius: 0; box-shadow: none; }
  .video-caption { font-size: .85rem; }
}

/* ---------- Programmes: overview tiles ---------- */
.prog-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; }
.prog-tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--muted); font-size: .9rem; line-height: 1.4; transition: border-color .2s, box-shadow .2s, transform .2s; }
.prog-tile:hover { border-color: var(--pink); box-shadow: var(--shadow); transform: translateY(-2px); }
.prog-tile strong { color: var(--navy); font-size: 1rem; line-height: 1.3; }
.prog-tile .icon-badge { width: 42px; height: 42px; margin-bottom: 6px; }
.prog-tile .icon-badge svg { width: 22px; height: 22px; }
.prog-tile-num { position: absolute; top: 16px; right: 18px; font-family: var(--font-display); font-weight: 600; color: var(--pink); }
@media (max-width: 900px) { .prog-tiles { grid-template-columns: 1fr 1fr; } }

/* ---------- Programmes: sticky sub-nav ---------- */
.subnav { position: sticky; top: var(--header-h); z-index: 40; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav a { flex: none; padding: 13px 14px 11px; font-weight: 600; font-size: .92rem; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.subnav a span { color: var(--pink); margin-right: 4px; font-family: var(--font-display); }
.subnav a:hover { color: var(--navy); }
.subnav a[aria-current] { color: var(--navy); border-bottom-color: var(--pink); }

/* ---------- Programmes: sections ---------- */
.programme { padding-block: clamp(56px, 8vw, 96px); }
.programme--alt { background: var(--paper); }
.programme-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.programme--alt .programme-media { order: 2; }
.programme-media { position: sticky; top: calc(var(--header-h) + 72px); }
.programme-photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-lg); }
.programme-photo img { width: 100%; height: 100%; object-fit: cover; }
.programme-photo--contain { background: var(--navy); display: grid; place-items: center; }
.programme-photo--contain img { object-fit: contain; }
.programme-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.programme-kicker .icon-badge { width: 44px; height: 44px; margin: 0; }
.programme-kicker .icon-badge svg { width: 22px; height: 22px; }
.programme-kicker .eyebrow { margin: 0; }
.programme-sub { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 30px 0 12px; }
.programme-sub + .checklist { margin-top: 0; }
.team-sub { font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 8px 0 18px; }
.team-sub ~ .team-sub { margin-top: 48px; }
.btn-row--center { justify-content: center; margin-top: 24px; }
.programme-ctas { margin-top: 30px; }
.evidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.evidence-card { position: relative; margin: 0; display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; }
.evidence-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; }
.evidence-cap { display: block; padding: 10px 12px 12px; font-size: .84rem; font-weight: 600; color: var(--navy); line-height: 1.35; }
a.evidence-card:hover { border-color: var(--pink); }
.play-badge { position: absolute; top: calc(37.5% - 20px); left: calc(50% - 20px); width: 40px; height: 40px; border-radius: 50%; background: rgba(214,36,90,.92); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.play-badge svg { width: 18px; height: 18px; margin-left: 2px; }
@media (max-width: 860px) {
  .programme-grid { grid-template-columns: 1fr; }
  .programme--alt .programme-media { order: 0; }
  .programme-media { position: static; }
  .programme-photo { aspect-ratio: 16 / 10; }
  .programme-photo--contain { aspect-ratio: 1; max-width: 420px; }
}
@media (max-width: 560px) { .evidence { grid-template-columns: 1fr 1fr; } }

/* ---------- Get Help ---------- */
.alert-emergency { display: flex; gap: 14px; align-items: flex-start; margin-top: 28px; padding: 16px 20px; border-radius: var(--radius); background: #FDECEF; border: 1px solid #F4B6C6; color: #6B1230; }
.alert-emergency svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--pink); margin-top: 2px; }
.alert-emergency p { margin: 0; line-height: 1.55; }
.alert-emergency strong { margin-right: 4px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: none; }
.steps li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 24px; }
.steps h3 { font-size: 1.1rem; margin: 14px 0 6px; }
.steps p { color: var(--muted); margin: 0; }
.step-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pink); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.signs-card--wide { background: #fff; }
.signs-action { font-weight: 700; color: var(--navy); font-size: 1.05rem; }

/* ---------- About: timeline ---------- */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 118px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.timeline li { display: grid; grid-template-columns: 100px 1fr; gap: 40px; padding: 14px 0; position: relative; }
.timeline li::before { content: ""; position: absolute; left: 112px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--pink); }
.tl-date { font-family: var(--font-display); font-weight: 600; color: var(--pink); text-align: right; padding-top: 2px; line-height: 1.3; }
.timeline h3 { font-size: 1.08rem; margin-bottom: 4px; }
.timeline p { color: var(--muted); margin: 0; }
@media (max-width: 600px) {
  .timeline::before { left: 7px; }
  .timeline li { grid-template-columns: 1fr; gap: 4px; padding-left: 32px; }
  .timeline li::before { left: 0; }
  .tl-date { text-align: left; }
}

/* ---------- Team: trustees + staff cards ---------- */
.trustees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trustee { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; }
.trustee img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: center 20%; flex-shrink: 0; }
.trustee h3 { font-size: 1.02rem; margin-bottom: 2px; }
.trustee p { margin: 0; color: var(--muted); font-size: .92rem; }
@media (max-width: 860px) { .trustees { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }
.person--card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 18px 22px; transition: box-shadow .2s, transform .2s; }
.person--card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.person--card img { max-width: 140px; }

/* ---------- News: story index + viewer ---------- */
.story-index-wrap { padding-block: 36px; }
.story-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.story-index-item { display: flex; gap: 14px; align-items: center; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--navy); }
.story-index-item:hover { border-color: var(--pink); }
.story-index-item img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.story-index-item .story-meta { font-size: .7rem; margin-bottom: 2px; }
.story-index-item strong { display: block; font-size: .92rem; line-height: 1.3; }
.article-grid figure { margin: 0; }
.article-grid button { all: unset; display: block; cursor: zoom-in; border-radius: 12px; }
.article-grid button:focus-visible { outline: 3px solid var(--amber); }

/* ---------- About: founder letter ---------- */
.pull-quote { margin: 6px 0 26px; padding: 0 0 0 26px; border-left: 4px solid var(--pink); }
.pull-quote p { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.25; color: var(--navy); }
.pull-quote em { color: var(--pink); }
.letter p { line-height: 1.75; }
.letter p:first-child::first-letter { float: left; font-family: var(--font-display); font-weight: 600; font-size: 3.4rem; line-height: .9; padding: 6px 10px 0 0; color: var(--pink); }
.signature { margin: 26px 0 24px; display: flex; flex-direction: column; gap: 2px; }
.signature-name { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--navy); }
.signature-role { font-size: .9rem; color: var(--muted); letter-spacing: .04em; }
.bank-card dd a { color: var(--amber); }

/* ---------- Gallery: filters + uniform tile grid ---------- */

.tile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 20px; }
.tile { margin: 0; }
.tile[hidden] { display: none; }
.tile button { all: unset; display: block; width: 100%; cursor: zoom-in; border-radius: var(--radius); overflow: hidden; background: var(--paper); box-shadow: var(--shadow); }
.tile button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.tile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 35%; transition: transform .4s; }
.tile button:hover img { transform: scale(1.04); }
.tile figcaption { padding: 12px 2px 0; line-height: 1.35; }
.tile figcaption strong { display: block; font-size: .95rem; color: var(--navy); }
.tile figcaption span { display: block; margin-top: 3px; font-size: .8rem; color: var(--muted); }
@media (max-width: 1000px) { .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } }

/* ---------- Donate: payment tabs + bank details ---------- */
.pay-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--paper); border-radius: 14px; margin-bottom: 26px; }
.pay-tabs button { font: inherit; font-weight: 700; font-size: .98rem; color: var(--muted); background: transparent; border: 0; border-radius: 10px; padding: 12px 10px; cursor: pointer; }
.pay-tabs button[aria-selected="true"] { background: #fff; color: var(--navy); box-shadow: 0 2px 8px rgba(11,34,57,.1); }
.pay-title { font-size: 1.5rem; margin-bottom: 16px; }
.pay-panel + .pay-panel { margin-top: 36px; }
.pay-tabs:not([hidden]) ~ .pay-panel + .pay-panel { margin-top: 0; }
.bank-note { font-size: .9rem; color: rgba(255,255,255,.7); margin: -4px 0 4px; }
.bank-sub { color: var(--amber); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin: 20px 0 0; }
.bank-card .mono { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.donate-box .bank-card dl { grid-template-columns: 116px minmax(0, 1fr); }
.bank-card dl + .bank-note { margin: 16px 0 0; }
.bank-card .copy-btn--wide { margin-top: 18px; font-size: .92rem; font-weight: 600; padding: .75em 1em; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.35); }
.donate-side { display: grid; gap: 18px; }
.after-give h3 { margin-bottom: 6px; }
.after-give p { margin: 0; }

/* ---------- News: collapsible story cards ---------- */
.stories { display: grid; gap: 14px; }
.story { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.story[open] { border-color: rgba(214,36,90,.35); }
.story summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; padding: 14px; align-items: center; }
.story summary::-webkit-details-marker { display: none; }
.story summary:hover .story-title { color: var(--pink); }
.story summary img { width: 160px; height: 120px; object-fit: cover; border-radius: 12px; }
.story-sum { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.story-title { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.3; color: var(--navy); }
.story-teaser { color: var(--muted); font-size: .95rem; line-height: 1.5; }
.story-more { margin-top: 4px; font-weight: 700; font-size: .9rem; color: var(--pink); }
.story-more .more::after { content: " +"; }
.story-more .less::after { content: " \2212"; }
.story-more .less, .story[open] .story-more .more, .story[open] .story-teaser { display: none; }
.story[open] .story-more .less { display: inline; }
.story-full { padding: 4px 22px 24px; }
.story-full > p:first-child { margin-top: 0; }
@media (max-width: 600px) {
  .story summary { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 12px; align-items: start; }
  .story summary img { width: 96px; height: 96px; }
  .story-title { font-size: 1.05rem; }
  .story-teaser { display: none; }
  .story-full { padding: 0 16px 20px; }
}

/* News & Gallery: list or cards view (the toggle appears when JavaScript runs) */
.stories-wrap:not(.is-cards) > * { max-width: 680px; margin-inline: auto; }
.view-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.view-count { margin: 0; font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.view-toggle { display: inline-flex; padding: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; }
.view-toggle[hidden] { display: none; }
.view-toggle button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 .9rem var(--font-body); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.view-toggle button svg { width: 17px; height: 17px; }
.view-toggle button:hover { color: var(--navy); }
.view-toggle button[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(11,34,57,.14); }
.is-cards .stories { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; grid-auto-flow: row dense; }
.is-cards .story:not([open]) { display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.is-cards .story:not([open]):hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(11,34,57,.12); }
.is-cards .story:not([open]) summary { flex: 1; display: flex; flex-direction: column; gap: 0; padding: 0; align-items: stretch; }
.is-cards .story:not([open]) summary img { flex-shrink: 0; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0; }
.is-cards .story:not([open]) .story-sum { flex: 1; padding: 18px 20px 20px; }
.is-cards .story:not([open]) .story-teaser { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.is-cards .story:not([open]) .story-more { margin-top: auto; padding-top: 10px; }
.is-cards .story[open] { grid-column: 1 / -1; }
.is-cards .story[open] .story-full { max-width: 900px; }
@media (max-width: 960px) { .is-cards .stories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 560px) {
  .is-cards .stories { gap: 12px; }
  .is-cards .story:not([open]) .story-sum { padding: 12px 12px 14px; }
  .is-cards .story:not([open]) .story-meta { font-size: .68rem; }
  .is-cards .story:not([open]) .story-title { font-size: .98rem; }
  .is-cards .story:not([open]) .story-teaser { display: none; }
  .view-toggle button { padding: 7px 12px; }
}

/* Gallery albums reuse the News story cards */
.tile-grid--album { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; }
.tile-grid--album .tile figcaption strong { font-size: .88rem; font-weight: 600; }
@media (max-width: 640px) { .tile-grid--album { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.story-index-item--videos { background: var(--navy); border-color: var(--navy); }
.story-index-item--videos strong { color: #fff; }
.story-index-item--videos .story-meta { color: var(--amber); }
.play-dot { flex-shrink: 0; width: 72px; height: 54px; border-radius: 8px; background: var(--pink); position: relative; }
.play-dot::after { content: ""; position: absolute; left: 30px; top: 17px; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }

/* ---------- Home quick-give: bank details while card giving is off ---------- */
.qg-bank { list-style: none; padding: 0; margin: 4px 0 16px; display: grid; gap: 8px; }
.qg-bank li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; }
.qg-bank span { font-size: .85rem; color: var(--muted); }
.qg-bank strong { font-size: 1.1rem; letter-spacing: .04em; color: var(--navy); font-variant-numeric: tabular-nums; }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 60%, #3A1F4A 100%); color: rgba(255,255,255,.85); border-radius: 28px; padding: clamp(36px, 6vw, 64px); display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; }
.cta-band h2 { color: #fff; }
.cta-band .btn-row { justify-content: flex-end; }
@media (max-width: 800px) { .cta-band { grid-template-columns: 1fr; } .cta-band .btn-row { justify-content: flex-start; } }

/* ---------- Gallery ---------- */

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(6,16,28,.94); display: flex; align-items: center; justify-content: center; padding: 24px; }
.lightbox[hidden] { display: none; }
.lightbox-figure { margin: 0; text-align: center; max-width: min(1100px, 100%); }
.lightbox img { max-height: 80vh; max-width: 100%; margin: 0 auto; border-radius: 10px; }
.lightbox figcaption { color: rgba(255,255,255,.88); margin-top: 14px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.lightbox-count { font-size: .8rem; color: rgba(255,255,255,.55); letter-spacing: .06em; }
.lightbox-nav { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; margin: 0 12px; }
.lightbox-nav:hover { background: rgba(255,255,255,.25); }
@media (max-width: 700px) {
  .lightbox { padding: 16px 8px 80px; }
  .lightbox-nav { position: absolute; bottom: 18px; margin: 0; }
  .lightbox-prev { left: calc(50% - 64px); }
  .lightbox-next { right: calc(50% - 64px); }
}
.lightbox-close { position: absolute; top: 16px; right: 20px; background: none; border: 0; color: #fff; font-size: 2.4rem; cursor: pointer; line-height: 1; }

/* ---------- Forms ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
label { font-weight: 600; font-size: .94rem; display: block; margin-bottom: 6px; color: var(--navy); }
input, select, textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  padding: 12px 14px; border: 1.5px solid #D3CCBF; border-radius: 10px; background: #fff;
}
input:focus, select:focus, textarea:focus { border-color: var(--navy); outline: none; box-shadow: 0 0 0 3px rgba(11,34,57,.12); }
textarea { min-height: 140px; resize: vertical; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }
.form-status { padding: 12px 14px; border-radius: 10px; font-size: .95rem; }
.form-status.ok { background: #DDF3E9; color: #0F5B3C; }
.form-status.err { background: #FDE2E8; color: #8A1235; }

/* ---------- Donate ---------- */
.donate-section { padding-top: clamp(24px, 3vw, 36px); }
.donate-intro { margin-bottom: 22px; }
.donate-intro h1 { font-size: clamp(1.8rem, 2.8vw, 2.4rem); margin-bottom: .25em; }
.donate-intro p { margin: 0; max-width: 720px; }
.donate-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: start; }
@media (max-width: 900px) { .donate-layout { grid-template-columns: 1fr; } }
.donate-box { background: #fff; border-radius: 24px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); padding: clamp(22px, 4vw, 36px); }
.segmented { display: inline-flex; background: var(--paper); border-radius: 999px; padding: 4px; gap: 4px; }
.segmented button {
  border: 0; background: transparent; font: 600 .95rem var(--font-head); color: var(--navy);
  padding: 9px 20px; border-radius: 999px; cursor: pointer;
}
.segmented button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 12px; }
.amounts button {
  border: 1.5px solid #D3CCBF; background: #fff; border-radius: 12px; padding: 14px 8px;
  font: 700 1.08rem var(--font-head); color: var(--navy); cursor: pointer;
}
.amounts button[aria-pressed="true"] { border-color: var(--pink); background: var(--pink-soft); color: var(--pink); }
.amount-other { position: relative; }
.amount-other span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--muted); }
.amount-other input { padding-left: 34px; }
.donate-trust { display: flex; gap: 10px; align-items: center; font-size: .85rem; color: var(--muted); justify-content: center; margin-top: 12px; }
.donate-trust svg { width: 16px; height: 16px; flex-shrink: 0; }
.notice { background: var(--amber-soft); border: 1px solid #F5D98A; color: #5A4500; border-radius: 12px; padding: 14px 16px; font-size: .95rem; }

.bank-card { background: var(--navy); color: rgba(255,255,255,.85); border-radius: var(--radius-lg); padding: 26px; margin-bottom: 18px; }
.bank-card h3 { color: #fff; display: flex; align-items: center; gap: 10px; }
.bank-card .tag { font-size: .72rem; background: var(--amber); color: var(--navy); border-radius: 999px; padding: 3px 10px; font-weight: 700; letter-spacing: .05em; }
.bank-card dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 16px 0 0; font-size: .96rem; }
.bank-card dt { color: rgba(255,255,255,.55); }
.bank-card dd { margin: 0; color: #fff; font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; word-break: break-word; }
.copy-btn { background: rgba(255,255,255,.12); border: 0; color: #fff; font-size: .75rem; padding: 3px 9px; border-radius: 6px; cursor: pointer; }
.copy-btn:hover { background: rgba(255,255,255,.25); }

.impact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.impact-list li { display: flex; gap: 14px; align-items: flex-start; }
.impact-list .icon-badge { margin: 0; flex-shrink: 0; width: 44px; height: 44px; }

.success-panel { text-align: center; padding: 20px 0; }
.success-panel .icon-badge { margin: 0 auto 16px; width: 64px; height: 64px; border-radius: 50%; }

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-family: var(--font-head); font-weight: 600; color: var(--navy); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--pink); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 12px 0 0; color: var(--muted); }

/* ---------- Info list (contact, registration) ---------- */
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.info-list li { display: flex; gap: 14px; }
.info-list .icon-badge { margin: 0; width: 44px; height: 44px; flex-shrink: 0; }
.info-list strong { display: block; color: var(--navy); font-family: var(--font-head); font-size: .95rem; }

.fact-table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.fact-table th, .fact-table td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.fact-table th { width: 38%; color: var(--muted); font-weight: 600; padding-right: 16px; }

.map { border: 0; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,.7); font-size: .95rem; padding-top: 72px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 36px; }
.newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px 48px; align-items: center; padding: 30px 34px; margin-bottom: 56px; border-radius: var(--radius-lg); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.newsletter h3 { color: #fff; font-size: 1.6rem; margin: 0 0 6px; }
.newsletter p { margin: 0; }
.newsletter-row { display: flex; gap: 10px; }
.newsletter-row input[type=email] { flex: 1; min-width: 0; border-color: transparent; }
.newsletter-row input[type=email]:focus { box-shadow: 0 0 0 3px rgba(253,181,21,.5); }
.newsletter-row .btn { flex-shrink: 0; }
.newsletter-note { margin-top: 10px !important; font-size: .85rem; color: rgba(255,255,255,.6); }
.newsletter-note a { color: rgba(255,255,255,.85); }
.newsletter .form-status { margin-top: 12px; }
.turnstile-slot:empty { display: none; }
.newsletter .turnstile-slot { margin-top: 10px; }
@media (max-width: 860px) { .newsletter { grid-template-columns: 1fr; padding: 24px 22px; } }
@media (max-width: 420px) { .newsletter-row { flex-direction: column; } }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-size: .95rem; margin-bottom: 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.site-footer a { color: rgba(255,255,255,.75); text-decoration: none; }
.site-footer a:hover { color: var(--amber); }
.footer-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.footer-brand img { width: 34px; height: auto; }
.footer-brand-name { display: block; font-family: var(--font-head); color: #fff; font-weight: 700; font-size: 1.25rem; line-height: 1.1; }
.footer-brand-sub { display: block; font-size: .82rem; color: rgba(255,255,255,.75); line-height: 1.3; margin-top: 3px; max-width: 240px; }
.footer-handle { margin: 10px 0 0; color: rgba(255,255,255,.6); }
.social { display: flex; gap: 10px; margin-top: 18px; }
.social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; }
.social a:hover { background: var(--pink); color: #fff; }
.social svg { width: 18px; height: 18px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 56px; padding-block: 22px; font-size: .85rem; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- WhatsApp float ---------- */
.wa-float {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff;
  display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.wa-float:hover { color: #fff; transform: scale(1.05); }
.wa-float svg { width: 30px; height: 30px; }

/* ---------- Reveal on scroll (progressive: only when JS adds .js) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { transition: none !important; }
}

@media print {
  .topbar, .site-header, .site-footer, .wa-float, .btn { display: none !important; }
}

/* Tall portrait beside long text (About founder message) */
.split--wide-text > .photo { aspect-ratio: 4 / 5; max-height: 560px; align-self: start; position: sticky; top: 84px; }
@media (max-width: 760px) { .split--wide-text > .photo { position: static; max-height: 420px; } }

/* ---------- Photo focal points (keep faces in view in any crop shape) ---------- */
html img[src$="/asokoro-audience.jpg"] { object-position: 50% 45%; }
html img[src$="/asokoro-guest-1.jpg"] { object-position: 50% 36%; }
html img[src$="/asokoro-team.jpg"] { object-position: 50% 40%; }
html img[src$="/asokoro-volunteers.jpg"] { object-position: 50% 40%; }
html img[src$="/beyond-the-bag-instagram-live.jpg"] { object-position: 40% 50%; }
html img[src$="/amce-visit.jpg"] { object-position: 50% 55%; }
html img[src$="/cancer-medicines-study.jpg"] { object-position: 50% 36%; }
html img[src$="/founder-portrait.jpg"] { object-position: 50% 20%; }
html img[src$="/gombe-crowd.jpg"] { object-position: 50% 50%; }
html img[src$="/gombe-guest.jpg"] { object-position: 50% 25%; }
html img[src$="/gombe-stage.jpg"] { object-position: 50% 50%; }
html img[src$="/gwarinpa-outreach-1.jpg"] { object-position: 50% 45%; }
html img[src$="/gwarinpa-outreach-2.jpg"] { object-position: 35% 32%; }
html img[src$="/hero-asokoro.jpg"] { object-position: 50% 45%; }
html img[src$="/hpv-awareness-day-2026.jpg"] { object-position: 45% 34%; }
html img[src$="/icw2025-panel.jpg"] { object-position: 68% 72%; }
html img[src$="/integrated-campaign-flagoff.jpg"] { object-position: 55% 28%; }
html img[src$="/kpaduma-awareness-outreach.jpg"] { object-position: 65% 34%; }
html img[src$="/legislative-summit-health.jpg"] { object-position: 50% 12%; }
html img[src$="/lugbe-awareness-banner.jpg"] { object-position: 55% 42%; }
html img[src$="/lugbe-awareness-group.jpg"] { object-position: 50% 40%; }
html img[src$="/lugbe-awareness-talk.jpg"] { object-position: 50% 44%; }
html img[src$="/market-awareness-placards.jpg"] { object-position: 50% 14%; }
html img[src$="/market-awareness-talk.jpg"] { object-position: 50% 14%; }
html img[src$="/medicaid-choose-hope.jpg"] { object-position: 60% 35%; }
html img[src$="/medicaid-disbursement.jpg"] { object-position: 60% 34%; }
html img[src$="/ncd-patients-advocacy-orientation.jpg"] { object-position: 40% 40%; }
html img[src$="/ncd-storylab-1.jpg"] { object-position: 50% 55%; }
html img[src$="/ncd-storylab-2.jpg"] { object-position: 50% 55%; }
html img[src$="/ncs-hall-of-fame.jpg"] { object-position: 55% 50%; }
html img[src$="/oppan-conference-2026.jpg"] { object-position: 55% 38%; }
html img[src$="/radioactive-dialogue-group.jpg"] { object-position: 50% 45%; }
html img[src$="/rally-abuja.jpg"] { object-position: 50% 35%; }
html img[src$="/ribbon-cutting.jpg"] { object-position: 50% 40%; }
html img[src$="/supplies-fow-usa.jpg"] { object-position: 50% 40%; }
html img[src$="/supplies-hospital-handover.jpg"] { object-position: 50% 5%; }
html img[src$="/survivors-walk-2026.jpg"] { object-position: 50% 40%; }
html img[src$="/survivors-walk-group.jpg"] { object-position: 50% 35%; }
html img[src$="/walkawaycancer-interview.jpg"] { object-position: 45% 25%; }
html img[src$="/world-cancer-day-symposium-2026.jpg"] { object-position: 50% 12%; }
/* Tall frames only: less ceiling above the speaker */
.programme-photo img[src$="/lugbe-awareness-talk.jpg"], .tile img[src$="/lugbe-awareness-talk.jpg"] { object-position: 50% 90%; }

/* ---------- Large screens: wider layout and slightly larger type ---------- */
@media (min-width: 1600px) {
  :root { --wrap: 1400px; }
  html { font-size: 106.25%; }
}
@media (min-width: 2200px) {
  :root { --wrap: 1640px; }
  html { font-size: 118.75%; }
}

/* Big, tall monitors: stretch the home hero so the yellow facts strip sits at the bottom of the
   first screen, as it does on laptops. Only applies where the screen is taller than the content. */
@media (min-width: 1280px) and (min-height: 820px) {
  .hero { display: flex; align-items: center; min-height: calc(100svh - var(--header-h) - var(--facts-h, 88px)); }
  .hero > .wrap { flex: 1; }
}
@media (min-width: 1600px) and (min-height: 820px) { .hero { --facts-h: 120px; } }
@media (min-width: 2200px) and (min-height: 820px) { .hero { --facts-h: 104px; } }