/*
 * Styles for the multi-page site: shared page furniture (sections, page
 * heroes, breadcrumbs, filters, CTA band), blog and project detail pages,
 * donate/thank-you/404, and accessibility utilities.
 *
 * Loaded after style.css and reuses its tokens (--forest, --ivory, --ocean,
 * --line, --serif, --sans…). style.css holds the home-page "slides" and the
 * shared components (cards, forms, footer); this file only adds what the
 * individual pages need.
 */

/* ------------------------------------------------------------------ *
 * Accessibility utilities
 * ------------------------------------------------------------------ */
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:16px; top:-60px; z-index:1000; background:var(--forest); color:var(--ivory); padding:12px 20px; border-radius:0 0 8px 8px; font-size:14px; font-weight:600; transition:top .2s; }
.skip-link:focus { top:0; color:var(--ivory); }
:focus-visible { outline:2px solid var(--ocean); outline-offset:3px; }
.hp { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ------------------------------------------------------------------ *
 * Header extras
 * ------------------------------------------------------------------ */
.logo { flex-direction:row; align-items:center; gap:12px; }
.logo-words { display:flex; flex-direction:column; gap:3px; }
.nav-actions { display:flex; align-items:center; gap:12px; }
.nav-cta { gap:10px; }
.nav-mobile-cta { display:none; }
/* The Donate button stays visible at every width (it is the top-right button);
   the duplicate link inside the menu is only for very small phones. */
@media (max-width:420px) {
  .nav nav.open .nav-mobile-cta { display:block; font-weight:600; color:var(--ocean); }
  .nav-cta { display:none !important; }
}

/* ------------------------------------------------------------------ *
 * Generic page sections
 * ------------------------------------------------------------------ */
.section { padding:clamp(64px,9vw,112px) 0; position:relative; }
.section.tint { background:var(--ivory-2); }
.section h2 { font-size:clamp(32px,4vw,50px); line-height:1.08; }
.section h2 em, .page-hero h1 em, .not-found h1 em, .thank-you h1 em, .cta-band h2 em { font-style:italic; color:#C99A32; }
.wrap.narrow { max-width:760px; }
.lead { font-size:clamp(16px,1.3vw,18px); line-height:1.65; color:var(--ink-2); max-width:56ch; }

.sec-head { display:grid; grid-template-columns:1fr 1fr; gap:24px 48px; align-items:end; padding-bottom:28px; margin-bottom:40px; border-bottom:1px solid var(--line); }
.sec-head > :last-child:not(:first-child) { justify-self:start; }
.sec-link { margin-top:18px; }
.split-h { font-size:clamp(28px,3vw,40px) !important; line-height:1.12; margin-top:.4vh; }

.link-row { display:flex; flex-wrap:wrap; align-items:center; gap:16px 32px; margin-top:28px; }
.link-row.center { justify-content:center; }
.empty-state { padding:48px 0; text-align:center; color:var(--ink-3); font-size:16px; }

/* Values ("What guides our work") use h3 inside .pr */
.lm-principles .pr h3 { font-size:28px; }
@media (max-width:900px) { .lm-principles { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .lm-principles { grid-template-columns:1fr; } }

/* Home page "Who we are" sits in normal flow, not a full-screen slide */
.home-about .ab-left h2, .about-page .ab-left h2, .section .ab-left h2 { font-size:clamp(34px,4.4vw,56px); }
.section .ab-p { font-size:clamp(15px,1.2vw,17px); }
.section .ab-photo { height:auto; min-height:clamp(300px,42vw,520px); }
.section .ab-stats .n { font-size:clamp(30px,3.4vw,44px); }
.section .ab-stats .l { font-size:12px; }
.section .ab-mv { margin-top:40px; }
.section .mvc2 { padding:28px 30px; }
.section .mvc2 .num { width:52px; height:52px; } .section .mvc2 .num svg { width:24px; height:24px; }
.section .mvc2 .acard-eye { font-size:12px; }
.section .mvc2 p { font-size:clamp(18px,1.6vw,21px); }
.section .ab-quote { margin-top:40px; padding-top:28px; border-top:1px solid var(--line); }
.section .ab-quote blockquote { font-size:clamp(20px,2vw,26px); }
.section .ab-quote cite, .section .ab-quote .motto { font-size:12px; }
.section .btn.big { min-height:54px; padding:0 30px; font-size:15px; }
.section .def .w { font-size:clamp(22px,2vw,28px); } .section .def .m { font-size:14px; }
.section.home-about { padding-top:clamp(72px,10vw,120px); }

/* Project grids outside the full-screen home slide */
.proj-grid.cols-3 { grid-template-columns:repeat(3,1fr); gap:32px; }
/* style.css sizes card photos in vh for the one-screen home slide; elsewhere use a fixed ratio. */
.section .proj-grid .pcard .ph { max-height:none; height:auto; aspect-ratio:4/3; }
.section .proj-grid .pcard .h { font-size:clamp(20px,1.8vw,26px); }
.section .proj-grid .pcard .d { font-size:15px; }
.section .proj-head .eyebrow { font-size:12px; }
.section .proj-head h2 { font-size:clamp(32px,4vw,50px); }
.section .proj-lead { font-size:16px; }
.pcard .ph { position:relative; display:block; overflow:hidden; }
.pcard .ph img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.pcard:hover .ph img { transform:scale(1.04); }
@media (max-width:1000px) { .proj-grid, .proj-grid.cols-3 { grid-template-columns:1fr 1fr; } }
@media (max-width:600px)  { .proj-grid, .proj-grid.cols-3 { grid-template-columns:1fr; } }

/* Reports */
.reports-more { margin-top:48px; }
.reports-more > .eyebrow { margin-bottom:8px; }
.rl-type { display:inline-flex; align-items:center; gap:6px; margin-left:14px; color:var(--ocean); font-weight:600; }
@media (max-width:700px) {
  .lm-report { grid-template-columns:1fr; }
  .rl-row { grid-template-columns:1fr; row-gap:4px; }
  .rl-d { white-space:normal; }
}

/* Partners grid on inner pages */
.section.partners .logos .slot { min-height:110px; }
.logos .slot img { max-height:64px; width:auto; object-fit:contain; }
@media (max-width:900px) { .partners-grid { grid-template-columns:1fr; } }
@media (max-width:560px) { .logos { grid-template-columns:1fr 1fr; } }

/* ------------------------------------------------------------------ *
 * Page hero (inner pages)
 * ------------------------------------------------------------------ */
.page-hero { position:relative; min-height:clamp(340px,46vh,520px); display:flex; align-items:flex-end; background-color:#12362B; background-size:cover; background-position:center; color:var(--ivory); padding:clamp(56px,8vh,96px) 0 clamp(40px,6vh,64px); isolation:isolate; }
/* The nav is fixed: inner pages start below it (the home hero sits under it). */
body.inner { padding-top:84px; }
.page-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(14,36,30,.7) 0%, rgba(14,36,30,.35) 55%, rgba(14,36,30,0) 80%), linear-gradient(180deg, rgba(14,36,30,.45) 0%, rgba(14,36,30,.25) 40%, rgba(14,36,30,.8) 100%); }
.page-hero-inner { width:min(1312px, 100% - 48px); margin-inline:auto; }
.page-hero-eye { display:inline-flex; align-items:center; gap:14px; font-size:12px; letter-spacing:.24em; text-transform:uppercase; font-weight:600; color:#E3C77A; }
.page-hero-eye i { display:inline-block; width:28px; height:1px; background:currentColor; }
.page-hero h1 { color:var(--ivory); font-size:clamp(42px,6vw,84px); line-height:1; margin-top:18px; max-width:16ch; }
.page-hero h1 em { color:#E3C77A; }
.page-hero p { margin-top:20px; max-width:56ch; font-size:clamp(16px,1.3vw,19px); line-height:1.6; color:rgba(244,240,231,.9); }

/* ------------------------------------------------------------------ *
 * Breadcrumbs
 * ------------------------------------------------------------------ */
.crumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:24px 0 0; padding:0; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.crumbs li { display:inline-flex; align-items:center; gap:6px; color:rgba(244,240,231,.75); }
.crumbs li + li::before { content:"/"; opacity:.5; }
.crumbs a { color:rgba(244,240,231,.9); } .crumbs a:hover { color:#E3C77A; }
.crumbs [aria-current] { color:#E3C77A; }
.crumbs-dark ol { margin:0 0 32px; }
.crumbs-dark li { color:var(--ink-3); }
.crumbs-dark a { color:var(--ink-2); } .crumbs-dark a:hover { color:var(--ocean); }
.crumbs-dark [aria-current] { color:var(--forest); max-width:40ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ------------------------------------------------------------------ *
 * Category filter
 * ------------------------------------------------------------------ */
.filter-pills { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 36px; }
.filter-pills a { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 18px; border:1px solid var(--line); border-radius:999px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--forest); background:#fff; transition:background .2s, color .2s, border-color .2s; }
.filter-pills a span { font-size:11px; color:var(--ink-3); letter-spacing:0; }
.filter-pills a:hover { border-color:var(--forest); color:var(--forest); }
.filter-pills a.on { background:var(--forest); border-color:var(--forest); color:var(--ivory); }
.filter-pills a.on span { color:#E3C77A; }

/* Projects listing page: normal flow, not a full-screen slide */
.projects-page { background:linear-gradient(180deg, #F4F0E7 0%, #F7F4EC 100%); }

/* ------------------------------------------------------------------ *
 * Blog cards
 * ------------------------------------------------------------------ */
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.post-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; color:var(--ink); transition:transform .3s, box-shadow .3s; }
.post-card:hover { color:var(--ink); transform:translateY(-3px); box-shadow:0 20px 50px rgba(24,53,43,.12); }
.post-card img { width:100%; aspect-ratio:3/2; object-fit:cover; display:block; }
.post-card .txt { display:flex; flex-direction:column; gap:10px; padding:24px 24px 26px; flex:1; }
.post-card .num { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#C99A32; font-weight:600; }
.post-card .h { font-size:clamp(20px,1.7vw,24px); line-height:1.18; transition:color .2s; }
.post-card:hover .h { color:var(--ocean); }
.post-card .d { font-size:14px; line-height:1.6; color:var(--ink-2); }
.post-card .date { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:12px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.post-card .date i { display:inline-flex; color:var(--forest); }
@media (max-width:1000px) { .post-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:600px)  { .post-grid { grid-template-columns:1fr; } }

/* ------------------------------------------------------------------ *
 * Article + project detail
 * ------------------------------------------------------------------ */
.article { padding-top:clamp(40px,5vw,64px); }

/* Reading experience: a slightly wider measure, a serif "lede" opening
   paragraph with a drop cap, then settled body text. Shared by every
   article and project story, so the improvement applies everywhere at once. */
.entry { max-width:720px; margin:0 auto; font-size:17.5px; line-height:1.8; color:var(--ink-2); }
.entry > * + * { margin-top:1.3em; }
.entry h2 { font-size:clamp(28px,3vw,38px); line-height:1.15; margin-top:1.8em; color:var(--forest); }
.entry h3 { font-size:clamp(22px,2.2vw,28px); line-height:1.2; margin-top:1.6em; color:var(--forest); }
.entry p { margin:0; }
.entry p + p { margin-top:1.15em; }
.entry a { color:var(--ocean); text-decoration:underline; text-underline-offset:3px; }
.entry a:hover { color:var(--forest); }
.entry ul, .entry ol { padding-left:1.3em; }
.entry li + li { margin-top:.4em; }
.entry img { display:block; width:100%; height:auto; border-radius:8px; }
.entry figure { margin:2em 0; }

/* Opening paragraph of a plain-text article or project write-up: a serif
   drop cap sets the tone, like the opening page of a printed feature.
   :first-of-type finds the first <p> even when a pull-quote or heading
   comes before it. */
.post-entry > p:first-of-type, .pj-entry > p:first-of-type { font-size:1.14em; line-height:1.7; color:var(--ink); }
.post-entry > p:first-of-type::first-letter, .pj-entry > p:first-of-type::first-letter {
  float:left; font-family:var(--serif); font-size:4.4em; line-height:.78; font-weight:600;
  color:#C99A32; padding:.03em .09em 0 0; margin-top:.02em;
}
@media (max-width:640px) { .post-entry > p:first-of-type::first-letter, .pj-entry > p:first-of-type::first-letter { font-size:3.2em; } }
.entry figcaption { margin-top:10px; font-size:13px; line-height:1.5; color:var(--ink-3); text-align:center; }
.entry blockquote { margin:2em 0; padding-left:22px; border-left:2px solid #C99A32; font-family:var(--serif); font-size:clamp(21px,2vw,26px); font-style:italic; line-height:1.4; color:var(--forest); }
.entry blockquote cite { display:block; margin-top:8px; font-family:var(--sans); font-style:normal; font-size:13px; color:var(--ink-3); }
.entry table { width:100%; border-collapse:collapse; font-size:15px; }
.entry th, .entry td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; }
.entry iframe, .entry video { width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:8px; }
.entry .gallery, .entry .wp-block-gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
.entry .gallery figure, .entry .wp-block-gallery figure { margin:0; }

.post-nav { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:760px; margin:clamp(48px,6vw,72px) auto 0; padding-top:32px; border-top:1px solid var(--line); }
.post-nav a { display:flex; flex-direction:column; gap:8px; color:var(--forest); }
.post-nav a:hover { color:var(--ocean); }
.post-nav .next { text-align:right; align-items:flex-end; grid-column:2; }
.post-nav .lbl { display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.post-nav .t { font-family:var(--serif); font-size:clamp(18px,1.6vw,22px); line-height:1.25; }
.article + .section, .pj-detail + .section { margin-top:clamp(64px,8vw,96px); }
.article { padding-bottom:0; }

/* Project detail */
.pj-detail { padding:clamp(40px,5vw,64px) 0 0; }
.pj-back { display:inline-flex; align-items:center; gap:10px; margin-bottom:28px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--forest); }
.pj-back:hover { color:var(--ocean); }
/* Same 720px reading measure as .entry (some projects' stories are plain
   prose, not the two-column lm-story/lm-mission blocks below, and need the
   same comfortable line length as an article). */
.pj-entry { margin-top:clamp(16px,3vw,32px); display:flex; flex-direction:column; gap:clamp(40px,6vw,64px); counter-reset:pj-chapter; }
.pj-entry > * + * { margin-top:0; }
.pj-entry .lm-story, .pj-entry .lm-mission { grid-template-columns:220px 1fr; gap:32px; }
.pj-entry .lm-story h3, .pj-entry .lm-mission h3 { font-size:clamp(24px,2.6vw,32px); }
/* Each numbered chapter of a project's story, echoing the timeline on Who We Are.
   The numeral is generated content inside the label column's first child (not the
   grid container itself), so it can't add an extra implicit grid item. */
.pj-entry .lm-story, .pj-entry .lm-mission { counter-increment:pj-chapter; }
.pj-entry .lm-story > div:first-child::before, .pj-entry .lm-mission > div:first-child::before {
  content:counter(pj-chapter, decimal-leading-zero); display:block; margin-bottom:10px;
  font-family:var(--serif); font-size:15px; color:#C99A32; letter-spacing:.06em;
}
@media (max-width:900px) {
  .lm-story, .lm-mission { grid-template-columns:1fr !important; }
}

/* ------------------------------------------------------------------ *
 * Our purpose (home + Our Purpose page) — real field photography,
 * each pillar tied to a project we've actually funded.
 * ------------------------------------------------------------------ */
.pv { background:var(--ivory); }
.pv-top { display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(32px,5vw,80px); align-items:center; padding:clamp(56px,8vw,104px) 0; }
.pv-text h1, .pv-text h2 { font-size:clamp(34px,4.2vw,56px); line-height:1.06; max-width:18ch; }
.pv-text p { margin-top:22px; max-width:46ch; font-size:17px; line-height:1.7; color:var(--ink-2); }
.pv-text .link-row { margin-top:32px; }
.pv-text .btn { gap:10px; }
.pv-photo { margin:0; }
.pv-photo img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:4px; }
.pv-photo figcaption { margin-top:10px; font-size:13px; color:var(--ink-3); }

.pv-band { background:#12362B; color:var(--ivory); padding:clamp(56px,7vw,88px) 0; }
.pv-band-h { color:var(--ivory); font-size:clamp(28px,2.8vw,38px); padding-bottom:20px; margin-bottom:36px; border-bottom:1px solid rgba(244,240,231,.18); }
.pv-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.pv-list li { display:flex; flex-direction:column; }
.pv-list img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px; display:block; margin-bottom:20px; }
.pv-list .n { font-size:13px; font-variant-numeric:tabular-nums; color:#E3C77A; }
.pv-list h3 { color:var(--ivory); font-size:28px; margin-top:4px; }
.pv-list p { margin-top:8px; font-size:15px; line-height:1.6; color:rgba(244,240,231,.8); }
.pv-list .ex { margin-top:auto; padding-top:18px; display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:14px; color:var(--ivory); text-decoration:underline; text-decoration-color:rgba(227,199,122,.5); text-underline-offset:4px; }
.pv-list .ex span { display:block; width:100%; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,240,231,.55); text-decoration:none; }
.pv-list .ex:hover { color:#E3C77A; }
.pv-list .ex svg { transition:transform .25s; } .pv-list .ex:hover svg { transform:translateX(3px); }
@media (max-width:1000px) { .pv-top { grid-template-columns:1fr; } .pv-list { grid-template-columns:1fr 1fr; } }
@media (max-width:560px)  { .pv-list { grid-template-columns:1fr; } }

/* Field-photo galleries inside articles: a mosaic with real captions.
   main.js wraps each <img alt="…"> in a <figure><figcaption> on load; the
   image and its alt text still work with JS off, just without the caption. */
.entry .post-gallery { margin:2.4em 0 0; padding-top:2em; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-flow:dense; gap:16px; }
.entry .post-gallery::before { content:"In photos"; grid-column:1 / -1; display:block; margin:0 0 -.6em; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#C99A32; }
.entry .post-gallery img { display:block; width:100%; height:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; transition:transform .5s ease; }
.entry .post-gallery figure { margin:0; display:flex; flex-direction:column; overflow:hidden; border-radius:8px; }
.entry .post-gallery figure:hover img { transform:scale(1.05); }
.entry .post-gallery figcaption { margin-top:9px; font-size:12.5px; line-height:1.45; color:var(--ink-3); }
.entry .post-gallery figure:nth-child(5n+1) { grid-column:span 2; grid-row:span 2; }
@media (max-width:760px) {
  .entry .post-gallery { grid-template-columns:repeat(2, 1fr); }
  .entry .post-gallery figure:nth-child(5n+1) { grid-column:span 2; grid-row:span 1; }
  .entry .post-gallery figure:nth-child(5n+1) img { aspect-ratio:16/10; }
}

/* ------------------------------------------------------------------ *
 * Team (who-are-we)
 * ------------------------------------------------------------------ */
.team-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:32px; }
.team-card img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:8px; display:block; margin-bottom:16px; }
.team-card h3 { font-size:24px; }
.team-card .role { display:block; margin-top:4px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ocean); font-weight:600; }
.team-card p { margin-top:10px; font-size:15px; line-height:1.6; color:var(--ink-2); }

/* ------------------------------------------------------------------ *
 * Footer navigation
 * ------------------------------------------------------------------ */
.ft-top { grid-template-columns:1.6fr 1fr 1fr 1fr; }
.ft-links { display:flex; flex-direction:column; gap:10px; font-size:15px; }
.ft-links a { color:rgba(244,240,231,.85); } .ft-links a:hover { color:#E3C77A; }
@media (max-width:1000px) { .ft-top { grid-template-columns:1fr 1fr; } .ft-brand { grid-column:1 / -1; } }
@media (max-width:560px)  { .ft-top { grid-template-columns:1fr; } }

/* ------------------------------------------------------------------ *
 * Get involved / donate banner — these pages use an h1 where the
 * original one-page layout used an h2.
 * ------------------------------------------------------------------ */
.gi2-bt h1 { color:var(--ivory); font-size:clamp(36px,min(4.6vw,6.4vh),76px); line-height:1.02; letter-spacing:-.01em; }
.gi2-bt h1 em { font-style:italic; color:#E3C77A; }
@media (max-width:900px) { .gi2-bt h1 { padding:0 24px; } }
.gi2.donate-page { height:auto !important; }

/* Eyebrows on inner pages: fixed size rather than the slide's vh sizing */
.section .ab-left .eyebrow { font-size:12px; letter-spacing:.18em; margin-bottom:18px; }

/* ------------------------------------------------------------------ *
 * Donate, notices, thank-you and 404
 * ------------------------------------------------------------------ */
.donate-form { display:flex; flex-direction:column; gap:16px; }
.donate-form .row2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.donate-form .gi2-btn { margin-top:8px; }
.donate-note { font-size:14px; line-height:1.6; color:var(--ink-3); max-width:60ch; }
@media (max-width:640px) { .donate-form .row2 { grid-template-columns:1fr; } }

.notice { padding:18px 22px; margin-bottom:24px; border-radius:10px; border:1px solid var(--line); border-left:4px solid var(--ocean); background:#fff; font-size:15px; line-height:1.6; color:var(--ink-2); }
.notice.error { border-left-color:#b3413c; background:#fbf2f1; }
.notice.error p { font-weight:600; color:#8a2f2b; }
.notice ul { margin:8px 0 0; padding-left:1.2em; }

.thank-you { text-align:center; min-height:60vh; display:flex; align-items:center; }
.thank-you h1 { font-size:clamp(40px,5.6vw,72px); line-height:1.04; }
.thank-you p { margin:20px auto 0; max-width:52ch; font-size:17px; line-height:1.65; color:var(--ink-2); }

/* ------------------------------------------------------------------ *
 * 404 — a branded photo band, then a card for every section of the site
 * ------------------------------------------------------------------ */
.not-found-hero { min-height:56vh; display:flex; align-items:center; }
.not-found-hero .image-band-inner { max-width:640px; }
.not-found-code { display:block; font-family:var(--serif); font-size:14px; letter-spacing:.28em; color:#E3C77A; margin-bottom:18px; }
.not-found-hero h1 { font-size:clamp(40px,5.6vw,68px); line-height:1.06; }
.not-found-hero p { margin-top:18px; max-width:48ch; }

.nf-links { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; }
.nf-links a { display:flex; flex-direction:column; gap:6px; padding:22px 24px; height:100%; background:#fff; border:1px solid var(--line); border-radius:12px; color:var(--ink); transition:border-color .2s, transform .2s; }
.nf-links a:hover { color:var(--ink); border-color:#C99A32; transform:translateY(-2px); }
.nf-links .nf-label { font-family:var(--serif); font-size:22px; color:var(--forest); }
.nf-links svg { margin-top:auto; color:#C99A32; }

@media (max-width:900px) {
  .sec-head { grid-template-columns:1fr; }
}

/* ------------------------------------------------------------------ *
 * Home page sections reached from the nav (#blog, #partners, …):
 * land below the fixed header.
 * ------------------------------------------------------------------ */
#about, #purpose, #blog, #projects, #partners, #get-involved, #donate { scroll-margin-top:84px; }
.donate-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(32px,5vw,80px); align-items:start; }
.donate-grid h2 { margin-top:4px; }
@media (max-width:900px) { .donate-grid { grid-template-columns:1fr; } }

/* Home: breathing room between the hero and "About us" (style.css locks the
   section to one screen with only 3vh above the content). */
body.home .slide.about { height:auto !important; min-height:calc(100vh - 84px) !important; }
body.home .slide.about .wrap { height:auto; padding:clamp(96px, 14vh, 168px) 0 clamp(48px, 7vh, 88px); gap:clamp(20px, 3vh, 32px); }
@media (max-width:1000px) { body.home .slide.about .wrap { padding:48px 0 0; } }

/* Home "Our purpose": keep the heading and text clear of the photo panel. */
body.home .sec2 .s2-text h2 { font-size:min(4.6vh, 2.5vw); max-width:30vw; }
body.home .sec2 .s2-text p { max-width:29vw; }
body.home .sec2 .s2-eye { font-size:min(3.6vh, 2.1vw); letter-spacing:.14em; }
@media (max-width:1100px) { body.home .sec2 .s2-text h2 { font-size:clamp(28px, 5vw, 40px); max-width:none; } body.home .sec2 .s2-text p { max-width:none; } body.home .sec2 .s2-eye { font-size:20px; } body.home .sec2 .s2-text { width:auto; max-width:none; } }
/* Phones/tablets: stack photo → text → columns, fixed sizes (style.css's
   later desktop rules otherwise override its own mobile ones). */
@media (max-width:900px) {
  body.home .sec2 { display:block; height:auto !important; min-height:0 !important; }
  body.home .sec2 .s2-top { padding:40px 24px 36px; }
  body.home .sec2 .s2-img { position:relative; top:auto; right:auto; bottom:auto; width:100% !important; height:62vw; min-height:220px; margin:0 0 28px; -webkit-mask-image:none !important; mask-image:none !important; background-position:center !important; border-radius:6px; }
  body.home .sec2 .s2-text { position:static; top:auto; bottom:auto; left:auto; transform:none; }
  body.home .sec2 .s2-eye { font-size:17px; gap:12px; } body.home .sec2 .s2-eye .mk { width:24px; height:28px; }
  body.home .sec2 .s2-text h2 { font-size:clamp(28px, 7vw, 40px); line-height:1.12; margin-top:18px; }
  body.home .sec2 .s2-text p { font-size:16px; line-height:1.6; margin-top:16px; }
  body.home .sec2 .s2-btn { height:52px; padding:0 26px; font-size:15px; margin-top:24px; gap:12px; } body.home .sec2 .s2-btn svg { width:16px; }
  body.home .sec2 .s2-wave, body.home .sec2 .s2-leafart { display:none; }
  body.home .sec2 .s2-band { min-height:0; }
  body.home .sec2 .s2-cols { position:static; padding:40px 24px 88px; grid-template-columns:1fr 1fr; gap:36px 24px; }
  body.home .sec2 .s2-col { padding-right:0; } body.home .sec2 .s2-col + .s2-col::before { display:none; }
  body.home .sec2 .s2-col .ic { width:60px; height:60px; } body.home .sec2 .s2-col .ic svg { width:28px; height:28px; }
  body.home .sec2 .s2-col b { font-size:26px; margin-top:18px; } body.home .sec2 .s2-col b.stmt { font-size:21px; max-width:none; }
  body.home .sec2 .s2-col .d { font-size:15px; margin-top:8px; }
  body.home .sec2 .s2-waves { height:60px; }
}
@media (max-width:560px) { body.home .sec2 .s2-cols { grid-template-columns:1fr; } }

/* ------------------------------------------------------------------ *
 * Inner-page photography (real photos from the organisation's work)
 * ------------------------------------------------------------------ */
.page-hero { position:relative; }
.page-hero-cap { position:absolute; right:clamp(16px, 3vw, 40px); bottom:16px; z-index:1; margin:0; max-width:40ch; font-size:12px; letter-spacing:.04em; color:rgba(244,240,231,.8); text-align:right; }

/* A photo with a caption beneath it */
.photo-card { margin:0; }
.ab-right.photo-card { display:block; }
.photo-card img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:10px; box-shadow:0 24px 60px rgba(24,53,43,.16); }
.photo-card figcaption, .split-photo figcaption { margin-top:12px; font-size:13px; color:var(--ink-3); }

/* Who Are We — Dindi's journey */
.journey { margin-top:clamp(56px, 7vw, 96px); padding-top:clamp(40px, 5vw, 56px); border-top:1px solid var(--line); }
.journey-head { display:grid; grid-template-columns:1fr auto; align-items:end; gap:12px 32px; margin-bottom:32px; }
.journey-head .eyebrow { grid-column:1 / -1; margin-bottom:0; }
.journey-head h3 { font-size:clamp(26px, 2.6vw, 38px); line-height:1.15; }
.journey-strip { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, 1fr); gap:18px; align-items:start; }
.journey-strip li:nth-child(even) { margin-top:48px; }
.journey-strip figure { margin:0; }
.journey-strip img { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:8px; }
.journey-strip figcaption { margin-top:12px; font-size:14px; line-height:1.5; color:var(--ink-2); }
.journey-strip figcaption span { display:block; font-family:var(--serif); font-size:18px; color:#C99A32; margin-bottom:2px; }

/* Who Are We — values with a photo each */
.value-cards { display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(20px, 2.4vw, 32px); }
.value-card figure { position:relative; margin:0 0 18px; }
.value-card img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:8px; }
.value-card .n { position:absolute; left:14px; top:12px; font-family:var(--serif); font-size:22px; color:var(--ivory); text-shadow:0 1px 8px rgba(0,0,0,.45); }
.value-card h3 { font-size:28px; }
.value-card p { margin-top:8px; font-size:15px; line-height:1.6; color:var(--ink-2); }

/* Full-width photo band with text over it */
.image-band { position:relative; isolation:isolate; padding:clamp(96px, 13vw, 176px) 0; background-color:#12362B; background-size:cover; background-position:center; color:var(--ivory); }
.image-band::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(14,36,30,.88) 0%, rgba(14,36,30,.6) 55%, rgba(14,36,30,.35) 100%); }
.image-band-inner { max-width:760px; margin-left:max(24px, calc((100% - 1312px) / 2)); }
.image-band h1, .image-band h2 { color:var(--ivory); font-size:clamp(38px, 5vw, 72px); line-height:1.02; }
.image-band p { margin-top:22px; max-width:56ch; font-size:clamp(16px, 1.3vw, 19px); line-height:1.7; color:rgba(244,240,231,.88); }
.image-band .tlink { margin-top:28px; }

/* About / Our Purpose — text beside a photo, alternating sides */
.split-rows { display:flex; flex-direction:column; gap:clamp(56px, 7vw, 104px); }
.split-row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px, 5vw, 80px); align-items:center; }
.split-row.flip .split-photo { order:2; }
.split-photo { margin:0; }
.split-photo img { display:block; width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:10px; }
.split-text h3 { font-size:clamp(30px, 3.2vw, 46px); line-height:1.1; }
.split-text p { margin-top:18px; font-family:var(--serif); font-size:clamp(20px, 1.9vw, 26px); line-height:1.45; color:var(--forest); max-width:34ch; }

/* Our Purpose — two photos, offset */
.duo-photos { position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:18px; align-items:end; }
.duo-photos figure { margin:0; }
.duo-photos img { display:block; width:100%; object-fit:cover; border-radius:10px; }
.duo-photos figure:first-child img { aspect-ratio:4/5; }
.duo-photos figure:last-child { margin-bottom:-48px; }
.duo-photos figure:last-child img { aspect-ratio:3/4; }
.duo-photos figcaption { margin-top:10px; font-size:13px; line-height:1.45; color:var(--ink-3); }
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px, 6vw, 96px); align-items:center; }

@media (max-width:1000px) {
  .journey-strip { grid-template-columns:repeat(3, 1fr); } .journey-strip li:nth-child(even) { margin-top:0; }
  .value-cards { grid-template-columns:1fr 1fr; }
  .split-row, .why-grid { grid-template-columns:1fr; } .split-row.flip .split-photo { order:0; }
  .duo-photos figure:last-child { margin-bottom:0; }
}
@media (max-width:600px) {
  .journey-head { grid-template-columns:1fr; }
  .journey-strip { grid-template-columns:1fr 1fr; }
  .value-cards { grid-template-columns:1fr; }
  .page-hero-cap { left:16px; text-align:left; }
  /* keep the photo caption clear of the breadcrumb trail */
  .page-hero:has(.page-hero-cap) { padding-bottom:calc(clamp(40px,6vh,64px) + 44px); }
}

/* Header menu: labels never wrap; below 1180px (where 8 links + Donate no
   longer fit comfortably) switch to the hamburger menu. Same open-menu look
   as style.css uses below 980px. */
.nav nav a { white-space:nowrap; }
@media (max-width:1180px) {
  .nav nav { display:none; }
  .nav nav.open { display:flex; position:absolute; top:84px; left:0; right:0; flex-direction:column; gap:0; background:var(--ivory); border-bottom:1px solid var(--line); padding:8px 24px 16px; }
  .nav nav.open a { padding:14px 0; border-top:1px solid var(--line); border-bottom:0; color:var(--forest); }
  .menu-btn { display:inline-flex; }
}

/* ------------------------------------------------------------------ *
 * Founder (home page after the hero, and Who Are We)
 * ------------------------------------------------------------------ */
.founder { padding:clamp(88px, 11vw, 150px) 0; background:var(--ivory); }
.founder.tint { background:var(--ivory-2); }
.founder-grid { display:grid; grid-template-columns:minmax(260px, 420px) 1fr; gap:clamp(40px, 7vw, 120px); align-items:center; }
.founder-photo { position:relative; margin:0; }
.founder-photo::before { content:""; position:absolute; inset:18px -18px -18px 18px; border:1px solid #C99A32; border-radius:10px; z-index:0; }
.founder-photo img { position:relative; z-index:1; display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:10px; box-shadow:0 24px 60px rgba(24,53,43,.18); }
.founder-text h2 { font-size:clamp(40px, 5vw, 68px); line-height:1.02; }
.founder-role { display:block; margin-top:12px; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#C99A32; }
.founder-body { margin-top:28px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:16px; max-width:62ch; }
.founder-body p { font-size:17px; line-height:1.75; color:var(--ink-2); }
.founder-body p:first-child { font-family:var(--serif); font-size:clamp(20px, 1.8vw, 25px); line-height:1.5; color:var(--forest); }
.founder-text .tlink { margin-top:28px; }
@media (max-width:800px) {
  .founder-grid { grid-template-columns:1fr; }
  .founder-photo { max-width:340px; }
}

/* In-page section links (Who We Are & Our Purpose) */
.page-sections { position:sticky; top:84px; z-index:5; background:rgba(244,240,231,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.page-sections .wrap { display:flex; gap:8px 32px; overflow-x:auto; scrollbar-width:none; padding:14px 0; }
.page-sections .wrap::-webkit-scrollbar { display:none; }
.page-sections a { flex:0 0 auto; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); padding:4px 0; border-bottom:1px solid transparent; }
.page-sections a:hover { color:var(--forest); border-bottom-color:#C99A32; }
#who-we-are, #founder, #our-story, #why, #values, body.inner #purpose, #approach { scroll-margin-top:140px; }

/* ------------------------------------------------------------------ *
 * Donate page (donate/index.php) and the home page campaign preview
 * ------------------------------------------------------------------ */
.donate-layout { display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:clamp(32px, 5vw, 72px); align-items:start; }
.donate-page-body .donate-form { gap:36px; }
.dstep { border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; min-width:0; }
.dstep legend { display:flex; align-items:center; gap:14px; margin-bottom:16px; padding:0; font-family:var(--serif); font-size:clamp(24px, 2.2vw, 30px); color:var(--forest); }
.dstep legend .n { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:1px solid #C99A32; font-size:17px; color:#C99A32; }
.campaign-picker { display:grid; gap:12px; }
.campaign-option { display:block; cursor:pointer; }
.campaign-option input { position:absolute; opacity:0; pointer-events:none; }
.co-body { display:flex; gap:16px; align-items:center; padding:16px; background:#fff; border:1px solid var(--line); border-radius:12px; transition:border-color .2s, box-shadow .2s; }
.co-body img { width:92px; height:92px; object-fit:cover; border-radius:8px; flex:0 0 auto; }
.co-text { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.co-title { font-family:var(--serif); font-size:22px; color:var(--forest); }
.co-desc { font-size:14px; line-height:1.5; color:var(--ink-2); }
.co-raised { font-size:12px; color:var(--ink-3); }
.co-progress { display:block; height:6px; margin-top:6px; background:var(--ivory-2); border-radius:999px; overflow:hidden; }
.co-progress > i { display:block; height:100%; background:#C99A32; border-radius:999px; }
.campaign-option input:checked + .co-body { border-color:var(--forest); box-shadow:0 0 0 2px var(--forest); }
.campaign-option input:focus-visible + .co-body { outline:2px solid var(--ocean); outline-offset:2px; }
.amount-row { display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; }
.currency-select select { height:56px; padding:0 14px; border:1px solid rgba(24,53,43,.35); border-radius:12px; background:#fff; font:15px var(--sans); color:var(--ink); }
.amount-presets { display:flex; flex-wrap:wrap; gap:10px; }
.preset-set { display:contents; }
.preset-set[hidden] { display:none; }
.preset input { position:absolute; opacity:0; pointer-events:none; }
.preset span { display:inline-flex; align-items:center; justify-content:center; min-width:84px; height:56px; padding:0 18px; border:1px solid rgba(24,53,43,.35); border-radius:12px; background:#fff; font-weight:600; font-size:16px; color:var(--forest); cursor:pointer; transition:background .2s, color .2s; }
.preset input:checked + span { background:var(--forest); color:var(--ivory); border-color:var(--forest); }
.preset input:focus-visible + span { outline:2px solid var(--ocean); outline-offset:2px; }
.amount-custom { flex:1 1 180px; }
.donate-page-body .fld input, .donate-page-body .fld textarea { min-height:56px; padding:15px 18px 15px 50px; font-size:16px; border-radius:12px; }
.donate-page-body .fld .ic { top:17px; transform:none; width:20px; height:20px; }
.donate-page-body .fld textarea { min-height:110px; }
.amount-custom .ic.cur { width:auto; font-weight:600; color:var(--forest); font-size:15px; top:18px; }
.check { display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink-2); cursor:pointer; }
.check input { margin-top:3px; }
.donate-submit { display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.donate-submit .gi2-btn { width:auto; gap:18px; min-height:56px; font-size:15px; }
.notice.test-mode { border-left-color:#b45309; background:#fef8ec; }
.donate-aside { position:sticky; top:110px; display:flex; flex-direction:column; gap:20px; }
.aside-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:26px; font-size:15px; line-height:1.6; color:var(--ink-2); }
.aside-list { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:14px; }
.aside-list b { display:block; font-family:var(--serif); font-size:20px; font-weight:500; color:var(--forest); }
.aside-list span { font-size:14px; }
.receipt-box { display:inline-grid; grid-template-columns:auto auto; gap:8px 28px; margin:28px auto; padding:22px 28px; background:#fff; border:1px solid var(--line); border-radius:12px; text-align:left; }
.receipt-box > div { display:contents; }
.receipt-box dt { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); align-self:center; }
.receipt-box dd { margin:0; font-weight:600; color:var(--forest); }
.thank-you .small { font-size:14px; color:var(--ink-3); }
.home-campaigns { list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:12px; }
.home-campaigns a { display:flex; flex-direction:column; gap:4px; padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:12px; color:var(--ink); transition:border-color .2s; }
.home-campaigns a:hover { border-color:var(--forest); color:var(--ink); }
.home-campaigns b { font-family:var(--serif); font-size:22px; font-weight:500; color:var(--forest); }
.home-campaigns span { font-size:14px; line-height:1.5; color:var(--ink-2); }
.home-campaigns small { font-size:12px; color:var(--ink-3); }
.donate-home .gi2-btn { width:auto; gap:18px; }
@media (max-width:900px) { .donate-layout { grid-template-columns:1fr; } .donate-aside { position:static; } }
@media (max-width:560px) { .co-body img { width:64px; height:64px; } .receipt-box { grid-template-columns:1fr; } .receipt-box dd { margin-bottom:8px; } }

/* ------------------------------------------------------------------ *
 * Who We Are - chapters and the "what we have done" timeline
 * ------------------------------------------------------------------ */
.founder .founder-text h1 { font-size:clamp(44px, 5.6vw, 76px); line-height:1.02; }
body.inner > main > .founder:first-child { padding-top:clamp(64px, 8vw, 110px); }
.chapter-head { display:flex; align-items:flex-start; gap:clamp(20px, 3vw, 40px); margin-bottom:clamp(40px, 5vw, 64px); padding-bottom:28px; border-bottom:1px solid var(--line); }
.chapter-no { font-family:var(--serif); font-size:clamp(56px, 6vw, 88px); line-height:.8; color:#C99A32; font-weight:500; }
.chapter-no.light { font-size:inherit; line-height:inherit; color:#E3C77A; margin-right:8px; }
.chapter-head .eyebrow { margin-bottom:10px; }
.chapter-head h2 { font-size:clamp(32px, 4vw, 54px); line-height:1.06; max-width:22ch; }
.chapter-lead { font-family:var(--serif); font-size:clamp(22px, 2.1vw, 28px); line-height:1.45; color:var(--forest); }
.values-head { margin-top:clamp(64px, 8vw, 104px); }
#how-we-started, #purpose, #what-we-did, #where-next, #about-us { scroll-margin-top:84px; }

.timeline { list-style:none; margin:0; padding:0; position:relative; }
.timeline::before { content:""; position:absolute; left:170px; top:8px; bottom:8px; width:1px; background:linear-gradient(180deg, #C99A32, rgba(201,154,50,.2)); }
.tl-item { display:grid; grid-template-columns:140px 60px 1fr; align-items:start; padding:0 0 clamp(28px, 3.5vw, 44px); }
.tl-when { padding-top:10px; text-align:right; font-family:var(--serif); font-size:22px; line-height:1.2; color:var(--forest); }
.tl-dot { justify-self:center; margin-top:16px; width:13px; height:13px; border-radius:50%; background:var(--ivory-2); border:2px solid #C99A32; position:relative; z-index:1; }
.tl-card { display:grid; grid-template-columns:220px 1fr; gap:24px; align-items:center; padding:18px; background:#fff; border:1px solid var(--line); border-radius:12px; transition:box-shadow .3s, transform .3s; }
.tl-card:hover { box-shadow:0 18px 44px rgba(24,53,43,.1); transform:translateY(-2px); }
.tl-item.no-img .tl-card { grid-template-columns:1fr; }
.tl-card img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; display:block; }
.tl-body h3 { font-size:clamp(22px, 2vw, 28px); line-height:1.15; }
.tl-body p { margin-top:8px; font-size:15px; line-height:1.65; color:var(--ink-2); }
.tl-body .tlink { margin-top:14px; font-size:12px; }
@media (max-width:800px) {
  .timeline::before { left:6px; }
  .tl-item { grid-template-columns:14px 1fr; column-gap:18px; }
  .tl-when { grid-column:2; text-align:left; padding:0 0 8px; font-size:18px; }
  .tl-dot { grid-column:1; grid-row:1; margin-top:6px; }
  .tl-card { grid-column:2; grid-template-columns:1fr; }
  .chapter-head { flex-direction:column; gap:8px; }
}

/* ------------------------------------------------------------------ *
 * Blog page - masthead, all stories, then each story showcased
 * ------------------------------------------------------------------ */
.journal-mast { padding:clamp(72px, 9vw, 128px) 0 clamp(40px, 5vw, 64px); background:var(--ivory); }
.journal-mast h1 { font-size:clamp(52px, 8vw, 120px); line-height:.95; letter-spacing:-.02em; margin-top:8px; }
.journal-mast h1 em { font-style:italic; color:#C99A32; }
.journal-mast-foot { display:grid; grid-template-columns:1.2fr 1fr; gap:24px 64px; align-items:end; margin-top:clamp(32px, 4vw, 56px); padding-top:28px; border-top:1px solid var(--forest); }
.journal-mast-foot p { font-family:var(--serif); font-size:clamp(20px, 1.8vw, 25px); line-height:1.45; color:var(--forest); max-width:40ch; }
.journal-mast-foot dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 24px; font-size:14px; }
.journal-mast-foot dl > div { display:contents; }
.journal-mast-foot dt { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); align-self:center; }
.journal-mast-foot dd { margin:0; color:var(--forest); font-weight:600; }

.journal-index { padding:0 0 clamp(72px, 9vw, 120px); background:var(--ivory); scroll-margin-top:84px; }
.journal-cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(16px, 2vw, 28px); }
.journal-card { display:flex; flex-direction:column; gap:8px; color:var(--ink); height:100%; }
.journal-card:hover { color:var(--ink); }
.jc-img { position:relative; display:block; overflow:hidden; border-radius:10px; margin-bottom:8px; }
.jc-img img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .7s cubic-bezier(.22,1,.36,1); }
.journal-card:hover .jc-img img { transform:scale(1.05); }
.jc-no { position:absolute; left:14px; top:12px; font-family:var(--serif); font-size:26px; color:var(--ivory); text-shadow:0 2px 10px rgba(0,0,0,.45); }
.jc-meta { font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#C99A32; }
.jc-title { font-family:var(--serif); font-size:clamp(21px, 1.7vw, 26px); line-height:1.18; color:var(--forest); transition:color .2s; }
.journal-card:hover .jc-title { color:var(--ocean); }
.jc-more { margin-top:auto; padding-top:6px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }

.story-show { padding:clamp(72px, 9vw, 128px) 0; background:var(--ivory); scroll-margin-top:84px; }
.story-show.tint { background:var(--ivory-2); }
.story-show-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(40px, 6vw, 96px); align-items:center; }
.story-show.flip .ss-media { order:2; }
.ss-cover { margin:0; }
.ss-cover img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; box-shadow:0 30px 70px rgba(24,53,43,.16); }
.ss-thumbs { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.ss-thumbs figure { margin:0; }
.ss-thumbs img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:8px; }
.ss-no { display:inline-flex; align-items:center; gap:12px; font-family:var(--serif); font-size:18px; color:#C99A32; }
.ss-no i { display:inline-block; width:40px; height:1px; background:currentColor; }
.ss-meta { display:block; margin-top:18px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.ss-text h2 { margin-top:12px; font-size:clamp(36px, 4.2vw, 60px); line-height:1.04; }
.ss-lead { margin-top:22px; font-family:var(--serif); font-size:clamp(21px, 1.9vw, 26px); line-height:1.45; color:var(--forest); }
.ss-body { margin-top:18px; font-size:16px; line-height:1.75; color:var(--ink-2); }
.ss-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:32px; }
.ss-btn { gap:12px; }
@media (max-width:1000px) { .journal-cards { grid-template-columns:1fr 1fr; } }
@media (max-width:900px) {
  .journal-mast-foot, .story-show-grid { grid-template-columns:1fr; }
  .story-show.flip .ss-media { order:0; }
}
@media (max-width:520px) { .journal-cards { grid-template-columns:1fr; } }
.section .def .pos { font-size:11px; letter-spacing:.14em; }
.journal-cards.cols-3 { grid-template-columns:repeat(3, 1fr); }
.journal-cards.cols-3 .jc-img img { aspect-ratio:4/3; }
@media (max-width:1000px) { .journal-cards.cols-3 { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .journal-cards.cols-3 { grid-template-columns:1fr; } }

/* ===== Home hero on phones =====
   style.css fixes .hero3-inner at 460-520px wide in rules that come after its
   own mobile rules, so on narrow screens the text and buttons were cut off. */
@media (max-width:767px) {
  .hero3-inner { left:20px; right:20px; top:auto; bottom:168px; transform:none; width:auto; max-width:none; }
  .hero3 .stmt, .hero3 .sub { max-width:none; }
  .hero3-cta { gap:10px; }
  .ibar { left:20px; right:20px; bottom:22px; }
  .ibar .items { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; width:100%; }
  .ibar .items i { display:none; }
  .ibar .items span { font-size:11px; }
}
@media (max-width:767px) and (max-height:700px) {
  .hero3-inner { top:100px; bottom:auto; }
}

/* Project page: heading above the other projects' sections */
.pj-more-head { padding:clamp(64px, 8vw, 104px) 0 clamp(8px, 2vw, 24px); border-top:1px solid var(--line); background:var(--ivory); }
.pj-more-head .sec-head { margin-bottom:0; }
.pj-more-head + .story-show { margin-top:clamp(24px, 3vw, 40px); }
.pj-more-head h2 { margin-top:6px; font-size:clamp(36px, 4.4vw, 60px); line-height:1.04; }
.pj-more-head h2 em { font-style:italic; color:#C99A32; }
.pj-more-head .lead { font-size:17px; line-height:1.7; color:var(--ink-2); max-width:46ch; }
.pj-more-head .sec-link { margin-top:14px; }

/* ===== Report summaries (report.php) and the report list (About Us) ===== */
.rp-wrap { max-width:820px; }
.rp-head { padding:clamp(48px,7vw,88px) 0 clamp(36px,5vw,56px); background:#12362B; color:var(--ivory); }
.rp-crumbs a { display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,240,231,.75); }
.rp-crumbs a:hover { color:#E3C77A; }
.rp-type { display:block; margin-top:28px; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#E3C77A; }
.rp-head h1 { margin-top:12px; font-size:clamp(34px,4.4vw,56px); line-height:1.08; color:var(--ivory); }
.rp-summary { margin-top:18px; font-family:var(--serif); font-size:clamp(20px,1.8vw,24px); line-height:1.45; color:rgba(244,240,231,.92); }
.rp-facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:0; margin:32px 0 0; border-top:1px solid rgba(244,240,231,.2); }
.rp-facts div { padding:16px 16px 0 0; }
.rp-facts dt { font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,240,231,.6); }
.rp-facts dd { margin:6px 0 0; font-size:15px; line-height:1.45; color:var(--ivory); }

.rp-body { padding:clamp(48px,6vw,80px) 0 clamp(56px,7vw,96px); }
.rp-body section + section { margin-top:clamp(40px,5vw,56px); }
.rp-body h2 { margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid var(--line); font-size:clamp(24px,2.2vw,30px); line-height:1.2; color:var(--forest); }
.rp-points { margin:0; padding:0; list-style:none; counter-reset:pt; display:flex; flex-direction:column; gap:16px; }
.rp-points li { position:relative; padding-left:44px; font-size:17px; line-height:1.65; color:var(--ink-2); counter-increment:pt; }
.rp-points li::before { content:counter(pt); position:absolute; left:0; top:1px; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#12362B; color:var(--ivory); font-size:13px; font-weight:600; }
.rp-next { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.rp-next li { position:relative; padding-left:28px; font-size:17px; line-height:1.65; color:var(--ink-2); }
.rp-next li::before { content:"→"; position:absolute; left:0; color:#C99A32; }

.rp-bars { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:16px; }
.rp-bars li { display:grid; grid-template-columns:1fr auto; gap:6px 20px; align-items:baseline; }
.rp-bar-label { font-size:15px; color:var(--ink-2); }
.rp-bar-value { font-family:var(--serif); font-size:21px; color:var(--forest); white-space:nowrap; font-variant-numeric:lining-nums; }
.rp-bar-value small { margin-left:6px; font-family:var(--sans); font-size:12px; font-weight:600; color:#C99A32; }
.rp-bar { grid-column:1 / -1; height:8px; border-radius:8px; background:#E6DFD0; overflow:hidden; }
.rp-bar i { display:block; height:100%; border-radius:8px; background:#12362B; }
.rp-total { margin-top:16px; padding-top:12px; border-top:1px solid var(--line); font-size:15px; color:var(--forest); }

.rp-pager { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:clamp(48px,6vw,72px); padding-top:28px; border-top:1px solid var(--line); }
.rp-pager a { display:flex; flex-direction:column; gap:6px; color:var(--forest); }
.rp-pager a:hover { color:var(--ocean); }
.rp-pager .next { text-align:right; align-items:flex-end; }
.rp-pager span { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.rp-pager b { font-family:var(--serif); font-size:clamp(18px,1.6vw,21px); font-weight:500; line-height:1.25; }

/* Report list on About Us — text only */
.rp-list-rows { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.rp-list-rows a { display:grid; grid-template-columns:150px 1fr auto; gap:8px 32px; align-items:center; padding:22px 0; border-bottom:1px solid var(--line); color:var(--ink); }
.rp-list-rows a:hover { color:var(--ink); }
.rp-row-meta { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ocean); }
.rp-row-main b { display:block; font-family:var(--serif); font-size:clamp(20px,1.7vw,23px); font-weight:500; line-height:1.25; color:var(--forest); transition:color .2s; }
.rp-row-main span { display:block; margin-top:4px; font-size:15px; line-height:1.55; color:var(--ink-2); }
.rp-list-rows a:hover b { color:var(--ocean); }
.rp-row-go { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--forest); white-space:nowrap; }
.rp-list-rows a:hover .rp-row-go svg { transform:translateX(4px); }
.rp-row-go svg { transition:transform .25s; }

@media (max-width:700px) {
  .rp-list-rows a { grid-template-columns:1fr; }
  .rp-pager { grid-template-columns:1fr; }
  .rp-pager .next { text-align:left; align-items:flex-start; }
}

/* ===== Reports page (reports.php) ===== */
.rp-wrap--wide { max-width:1120px; }
.rp-crumbs { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.rp-print { display:inline-flex; align-items:center; min-height:38px; padding:0 16px; border:1px solid rgba(244,240,231,.4); border-radius:999px; background:transparent; color:var(--ivory); font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.08em; cursor:pointer; transition:background .2s, color .2s; }
.rp-print:hover { background:var(--ivory); color:#12362B; }
.rp-index { padding:clamp(40px,5vw,64px) 0 clamp(56px,7vw,96px); }

.rp-feature { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; padding:clamp(28px,4vw,48px); border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 14px 40px rgba(24,53,43,.07); }
.rp-badge { display:inline-flex; align-items:center; margin-bottom:14px; padding:5px 12px; border-radius:999px; background:#C99A32; color:#12362B; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.rp-feature .rp-tile-meta { display:block; }
.rp-feature h2 { margin:10px 0 12px; font-size:clamp(28px,3vw,40px); line-height:1.1; color:var(--forest); }
.rp-feature p { margin:0 0 24px; font-size:16px; line-height:1.65; color:var(--ink-2); }
.rp-feature-points { margin:0; padding:0; list-style:none; counter-reset:fp; display:flex; flex-direction:column; gap:14px; }
.rp-feature-points li { position:relative; padding:16px 18px 16px 58px; border-radius:12px; background:#F4F0E7; font-size:15px; line-height:1.55; color:var(--ink-2); counter-increment:fp; }
.rp-feature-points li::before { content:counter(fp); position:absolute; left:16px; top:15px; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#12362B; color:var(--ivory); font-size:13px; font-weight:600; }

.rp-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-top:clamp(48px,6vw,72px); }
.rp-toolbar h2 { font-size:clamp(26px,2.4vw,34px); color:var(--forest); }
.rp-search { position:relative; display:block; width:min(340px, 100%); }
.rp-search svg { position:absolute; left:16px; top:50%; width:18px; height:18px; transform:translateY(-50%); color:var(--ink-3); }
.rp-search input { width:100%; min-height:48px; padding:0 18px 0 44px; border:1px solid rgba(24,53,43,.25); border-radius:999px; background:#fff; font-family:var(--sans); font-size:15px; color:var(--ink); }
.rp-search input:focus { outline:none; border-color:var(--forest); box-shadow:0 0 0 3px rgba(24,53,43,.12); }
.rp-filters { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 28px; }
.rp-filters button { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 16px; border:1px solid rgba(24,53,43,.22); border-radius:999px; background:transparent; font-family:var(--sans); font-size:14px; font-weight:600; color:var(--forest); cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.rp-filters button span { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:#EFEAE0; font-size:12px; }
.rp-filters button:hover { border-color:var(--forest); }
.rp-filters button.on { background:#12362B; border-color:#12362B; color:var(--ivory); }
.rp-filters button.on span { background:rgba(244,240,231,.2); color:var(--ivory); }

.rp-tiles { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; margin:0; padding:0; list-style:none; }
.rp-tiles li[hidden] { display:none; }
.rp-tile { display:flex; flex-direction:column; gap:10px; height:100%; padding:24px 26px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); transition:border-color .25s, transform .25s, box-shadow .25s; }
.rp-tile:hover { color:var(--ink); border-color:var(--ocean); transform:translateY(-3px); box-shadow:0 18px 40px rgba(24,53,43,.10); }
.rp-tile-meta { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ocean); }
.rp-tile h3 { font-size:clamp(21px,1.8vw,25px); line-height:1.2; color:var(--forest); transition:color .2s; }
.rp-tile:hover h3 { color:var(--ocean); }
.rp-tile p { margin:0; font-size:15px; line-height:1.6; color:var(--ink-2); }
.rp-tile-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); }
.rp-tile-foot > span { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--forest); }
.rp-tile-foot small { font-size:12px; color:var(--ink-3); }
.rp-tile-foot svg { transition:transform .25s; }
.rp-tile:hover .rp-tile-foot svg { transform:translateX(4px); }
.rp-empty { padding:32px; border:1px dashed var(--line); border-radius:14px; text-align:center; color:var(--ink-3); }

/* "About this report" box on compiled programme reports */
.rp-source { margin-top:clamp(40px,5vw,56px); padding:24px 28px; border-left:3px solid #C99A32; border-radius:0 12px 12px 0; background:#fff; }
.rp-body .rp-source h2 { margin-bottom:10px; padding-bottom:0; border:0; font-size:22px; }
.rp-source p { margin:0 0 14px; font-size:15px; line-height:1.6; color:var(--ink-2); }
.rp-source ul { margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.rp-source a { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--line); border-radius:999px; font-size:13px; font-weight:600; color:var(--forest); }
.rp-source a:hover { border-color:var(--ocean); color:var(--ocean); }

@media (max-width:860px) {
  .rp-feature, .rp-tiles { grid-template-columns:1fr; }
}

/* Printing a report: just the report, in black on white */
@media print {
  .nav, .ft, .preload, .rp-crumbs, .rp-pager, .skip-link { display:none !important; }
  body, body.inner { padding-top:0 !important; background:#fff !important; }
  .rp-head { padding:0 0 16px !important; background:#fff !important; color:#000 !important; }
  .rp-head h1, .rp-summary, .rp-facts dd { color:#000 !important; }
  .rp-type, .rp-facts dt { color:#555 !important; }
  .rp-facts { border-color:#ccc !important; }
  .rp-body { padding-top:16px !important; }
  .rp-points li::before { background:#000 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .rp-bar i { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .rv { opacity:1 !important; transform:none !important; }
  a { color:#000 !important; }
}
.rp-feature .btn { gap:12px; }

/* ===== Reports page: one-view list ===== */
.rp-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:20px 0 24px; }
.rp-controls .rp-filters { margin:0; }
.rp-toggle { min-height:40px; padding:0 18px; border:1px solid #12362B; border-radius:999px; background:#12362B; color:var(--ivory); font-family:var(--sans); font-size:13px; font-weight:600; cursor:pointer; transition:background .2s; }
.rp-toggle:hover { background:#1F5243; }

.rp-acc-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.rp-acc-list > li[hidden] { display:none; }
.rp-acc { border-bottom:1px solid var(--line); }
.rp-acc summary { position:relative; display:grid; grid-template-columns:170px minmax(0,1fr) 36px; grid-template-rows:auto auto; column-gap:28px; row-gap:4px; align-items:center; padding:20px 0; list-style:none; cursor:pointer; }
.rp-acc summary::-webkit-details-marker { display:none; }
.rp-acc summary:focus-visible { outline:2px solid var(--ocean); outline-offset:4px; border-radius:6px; }
.rp-acc-meta { grid-row:1 / span 2; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ocean); line-height:1.6; }
.rp-acc-meta .rp-badge { display:table; margin:8px 0 0; padding:3px 10px; font-size:10px; }
.rp-acc-title { font-family:var(--serif); font-size:clamp(20px,1.8vw,24px); line-height:1.25; color:var(--forest); transition:color .2s; }
.rp-acc-sum { grid-column:2; font-size:15px; line-height:1.55; color:var(--ink-2); }
.rp-acc summary:hover .rp-acc-title { color:var(--ocean); }
.rp-acc-icon { grid-column:3; grid-row:1 / span 2; justify-self:end; position:relative; width:32px; height:32px; border:1px solid rgba(24,53,43,.25); border-radius:50%; transition:background .2s, border-color .2s; }
.rp-acc-icon::before, .rp-acc-icon::after { content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; background:var(--forest); transform:translate(-50%,-50%); transition:transform .25s; }
.rp-acc-icon::after { transform:translate(-50%,-50%) rotate(90deg); }
.rp-acc[open] .rp-acc-icon { background:#12362B; border-color:#12362B; }
.rp-acc[open] .rp-acc-icon::before, .rp-acc[open] .rp-acc-icon::after { background:var(--ivory); }
.rp-acc[open] .rp-acc-icon::after { transform:translate(-50%,-50%) rotate(0deg); }

.rp-acc-body { margin:0 64px 24px 198px; padding:22px 26px; border-radius:12px; background:#fff; }
.rp-acc-points { margin:0; padding:0; list-style:none; counter-reset:ap; display:flex; flex-direction:column; gap:10px; }
.rp-acc-points li { position:relative; padding-left:36px; font-size:15.5px; line-height:1.6; color:var(--ink-2); counter-increment:ap; }
.rp-acc-points li::before { content:counter(ap); position:absolute; left:0; top:1px; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:#EFEAE0; color:#12362B; font-size:12px; font-weight:700; }
.rp-acc-next { margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line); font-size:15px; line-height:1.6; color:var(--ink-2); }
.rp-acc-next b { color:var(--forest); }
.rp-acc-body .tlink { margin-top:16px; font-size:12px; }

@media (max-width:760px) {
  .rp-acc summary { grid-template-columns:minmax(0,1fr) 32px; column-gap:14px; }
  .rp-acc-meta { grid-row:auto; grid-column:1; }
  .rp-acc-meta .rp-badge { display:inline-block; margin:0 0 0 8px; }
  .rp-acc-title, .rp-acc-sum { grid-column:1; }
  .rp-acc-icon { grid-column:2; grid-row:1 / span 3; }
  .rp-acc-body { margin:0 0 20px; padding:18px; }
}
@media print {
  .rp-search, .rp-controls, .rp-acc-icon { display:none !important; }
}
.rp-index > section:first-child .rp-toolbar { margin-top:0; }

/* Home hero (sea turtle photo): keep the turtle in view on phones, and keep
   the menu readable over the bright surface of the water. */
@media (max-width:767px) {
  .hero3 .hbg { background-position:61% center !important; }
  .hero3::before { background:linear-gradient(90deg, rgba(6,24,30,.82) 0%, rgba(6,24,30,.55) 60%, rgba(6,24,30,.25) 100%) !important; }
}
.home .nav.over { background:linear-gradient(180deg, rgba(6,24,30,.6) 0%, rgba(6,24,30,0) 100%); }

/* ===== Report page: infographic layout (report.php) ===== */
.ri { --ri-green:#16473A; --ri-gold:#A8722F; --ri-red:#D2464F; --ri-blue:#1F5A7A; background:#FBF8F2; }
.ri-wrap { max-width:1280px; }

/* Banner: green on the left fading into the coastal photo on the right */
.ri-hero { position:relative; overflow:hidden; background:#0F3D32; color:var(--ivory); }
.ri-hero::before { content:""; position:absolute; top:0; right:0; bottom:0; width:62%; background:var(--ri-banner) center right / cover no-repeat; }
.ri-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, #0F3D32 0%, #0F3D32 38%, rgba(15,61,50,.9) 48%, rgba(15,61,50,.35) 68%, rgba(15,61,50,0) 85%); }
.ri-hero .ri-wrap { position:relative; z-index:1; padding:clamp(28px,3.5vw,44px) 0 clamp(32px,4vw,48px); }
.ri-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:clamp(24px,3vw,36px); }
.ri-top a { display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,240,231,.8); }
.ri-top a:hover { color:#E3C77A; }
.ri-print { min-height:38px; padding:0 16px; border:1px solid rgba(244,240,231,.45); border-radius:999px; background:rgba(15,61,50,.5); color:var(--ivory); font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.06em; cursor:pointer; backdrop-filter:blur(4px); transition:background .2s, color .2s; }
.ri-print:hover { background:var(--ivory); color:#0F3D32; }
.ri-eye { display:block; font-size:12px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:rgba(244,240,231,.85); }
.ri-eye::after { content:""; display:block; width:56px; height:2px; margin-top:12px; background:#C99A32; }
.ri-hero h1 { max-width:14ch; margin-top:18px; font-size:clamp(38px,5vw,70px); font-weight:600; line-height:1.02; color:var(--ivory); }
.ri-summary { max-width:44ch; margin-top:16px; font-family:var(--serif); font-size:clamp(18px,1.6vw,22px); line-height:1.45; color:rgba(244,240,231,.92); }
.ri-stats { display:flex; flex-wrap:wrap; gap:18px clamp(24px,4vw,56px); margin:clamp(24px,3vw,34px) 0 0; padding:0; list-style:none; }
.ri-stats li { display:flex; align-items:center; gap:14px; max-width:260px; }
.ri-stat-icon { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px; border:1.5px solid #C99A32; border-radius:50%; }
.ri-stat-icon svg { width:23px; height:23px; fill:none; stroke:#E3C77A; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ri-stat-text { display:flex; flex-direction:column; line-height:1.25; }
.ri-stat-text b { font-family:var(--serif); font-size:clamp(19px,1.7vw,23px); font-weight:600; color:var(--ivory); }
.ri-stat-text span { font-size:14px; color:rgba(244,240,231,.85); }
.ri-stat-text small { font-size:12px; color:rgba(244,240,231,.7); }

.ri-body { padding:clamp(28px,3vw,40px) 0 clamp(48px,6vw,80px); }

/* Theme cards */
.ri-themes { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.ri-card { --c:var(--ri-green); --bg:#E9F0EA; display:flex; flex-direction:column; padding:20px; border-radius:14px; background:var(--bg); box-shadow:0 6px 20px rgba(24,53,43,.05); }
.ri-card--gold { --c:var(--ri-gold); --bg:#F7EEE0; }
.ri-card--red  { --c:var(--ri-red);  --bg:#FCE9E7; }
.ri-card--blue { --c:var(--ri-blue); --bg:#E5EEF6; }
.ri-card-head { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.ri-card-num { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--c); color:#fff; font-family:var(--serif); font-size:22px; font-weight:600; }
.ri-card-num svg { width:22px; height:22px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.ri-card-head h2, .ri-card-head h3 { font-size:clamp(22px,1.8vw,26px); font-weight:600; line-height:1.1; color:var(--c); }
.ri-card-head span { display:block; margin-top:3px; font-size:13px; color:var(--ink-3); }
.ri-card img { width:100%; aspect-ratio:2.85 / 1; object-fit:cover; border-radius:10px; margin-bottom:16px; }
.ri-checks { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.ri-checks li { display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start; font-size:14.5px; line-height:1.45; color:var(--ink); }
.ri-checks li > span { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-top:1px; border-radius:50%; background:var(--c); }
.ri-checks li > span svg { width:13px; height:13px; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.ri-card--wide { padding:clamp(22px,3vw,34px); }
.ri-checks--cols { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 40px; }
.ri-checks--cols li { font-size:15.5px; }

/* Spending chart + next steps */
.ri-bottom { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:18px; margin-top:18px; }
.ri-bottom--single { grid-template-columns:1fr; }
.ri-panel { padding:clamp(22px,2.6vw,30px); border-radius:14px; }
.ri-panel h2 { font-size:clamp(22px,2vw,28px); font-weight:600; line-height:1.15; color:var(--forest); }
.ri-spend { background:#fff; box-shadow:0 6px 20px rgba(24,53,43,.05); }
.ri-spend-grid { display:grid; grid-template-columns:200px 1fr; gap:clamp(20px,3vw,36px); align-items:center; margin-top:18px; }
.ri-donut { position:relative; width:200px; height:200px; border-radius:50%; }
.ri-donut::before { content:""; position:absolute; inset:36px; border-radius:50%; background:#fff; }
.ri-donut span { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:14px; color:var(--ink-3); }
.ri-donut b { font-family:var(--serif); font-size:24px; font-weight:600; color:var(--forest); }
.ri-spend-table { width:100%; border-collapse:collapse; font-size:15px; }
.ri-spend-table th, .ri-spend-table td { padding:11px 6px; border-bottom:1px solid var(--line); text-align:left; }
.ri-spend-table tr:last-child th, .ri-spend-table tr:last-child td { border-bottom:0; }
.ri-spend-table th { font-weight:500; color:var(--ink); }
.ri-spend-icon { width:30px; }
.ri-spend-icon svg { display:block; width:20px; height:20px; fill:currentColor; stroke:currentColor; stroke-width:1; stroke-linejoin:round; }
.ri-amount { font-family:var(--serif); font-size:18px; font-weight:600; color:var(--forest); text-align:right !important; font-variant-numeric:lining-nums; white-space:nowrap; }
.ri-pct { color:var(--ink-3); text-align:right !important; white-space:nowrap; }
.ri-next { background:#E9F0EA; }
.ri-next-head { display:flex; align-items:center; gap:16px; }
.ri-next-badge { display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px; border:1.5px solid var(--forest); border-radius:50%; }
.ri-next-badge svg, .ri-next-icon svg { width:24px; height:24px; fill:none; stroke:var(--forest); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ri-next ul { margin:18px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.ri-next li { display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:center; padding:12px 16px; border-radius:12px; background:#fff; font-size:15px; line-height:1.45; color:var(--ink); }
.ri-next-icon { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#E9F0EA; }

.ri-source { margin-top:18px; padding:22px 26px; border-left:3px solid #C99A32; border-radius:0 12px 12px 0; background:#fff; }
.ri-source h2 { font-size:20px; font-weight:600; color:var(--forest); }
.ri-source p { margin:8px 0 12px; font-size:14.5px; line-height:1.6; color:var(--ink-2); }
.ri-source ul { margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.ri-source a { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border:1px solid var(--line); border-radius:999px; font-size:13px; font-weight:600; color:var(--forest); }
.ri-source a:hover { border-color:var(--ocean); color:var(--ocean); }
.ri .rp-pager { margin-top:clamp(36px,4vw,56px); }

@media (max-width:1100px) {
  .ri-themes { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ri-bottom { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .ri-hero::before { width:100%; opacity:.55; }
  .ri-hero::after { background:linear-gradient(180deg, rgba(15,61,50,.55) 0%, rgba(15,61,50,.92) 45%, #0F3D32 100%); }
  .ri-stats { display:grid; grid-template-columns:1fr 1fr; }
  .ri-stat-icon { width:42px; height:42px; }
  .ri-themes, .ri-checks--cols { grid-template-columns:1fr; }
  .ri-spend-grid { grid-template-columns:1fr; justify-items:center; }
  .ri-donut { width:180px; height:180px; }
}
@media print {
  .ri-top, .rp-pager { display:none !important; }
  .ri-hero, .ri-hero::after, .ri-card, .ri-card-num, .ri-checks li > span, .ri-donut, .ri-next, .ri-next-icon { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .ri-themes { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ri-card, .ri-panel { break-inside:avoid; }
}
/* infographic fixes: numbers in the card circles, one-line title, shorter banner */
.ri-card-head span.ri-card-num { display:inline-flex; margin-top:0; font-size:22px; color:#fff; }
.ri-card-head div > span { display:block; margin-top:3px; font-size:13px; color:var(--ink-3); }
.ri-hero h1 { max-width:22ch; }
.ri-summary { max-width:52ch; }
.ri-hero::before { width:58%; background-position:center 60%; }
.ri-hero::after { background:linear-gradient(90deg, #0F3D32 0%, #0F3D32 42%, rgba(15,61,50,.85) 52%, rgba(15,61,50,.3) 70%, rgba(15,61,50,0) 86%); }
@media (max-width:760px) { .ri-hero::before { width:100%; } }
.ri-card-num, .ri-stat-text b, .ri-donut b, .ri-amount { font-variant-numeric:lining-nums; }
.ri-hero h1 { max-width:none; font-size:clamp(36px,4.4vw,62px); }

/* Report theme cards: three-card reports fill the row evenly */
.ri-themes--3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:1100px) { .ri-themes--3 { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:760px) { .ri-themes--3 { grid-template-columns:1fr; } }

/* ===== Report page: match the infographic layout exactly ===== */
.ri { background:#FAF7F1; }
/* Banner: compact, photo on the right, wavy bottom edge */
.ri-hero { background:#0F3D32; }
.ri-hero::before { width:60%; background:var(--ri-banner) right center / cover no-repeat; }
.ri-hero::after { background:linear-gradient(90deg, #0F3D32 0%, #0F3D32 40%, rgba(15,61,50,.88) 48%, rgba(16,70,62,.45) 62%, rgba(16,70,62,0) 78%); }
.ri-hero .ri-wrap { padding:30px 0 64px; }
.ri-eye { font-size:13px; letter-spacing:.32em; color:rgba(244,240,231,.8); }
.ri-eye::after { width:70px; margin-top:10px; }
.ri-hero h1 { margin-top:14px; font-size:clamp(34px,4.3vw,64px); font-weight:700; line-height:1.05; letter-spacing:0; font-variant-numeric:lining-nums; }
.ri-summary { max-width:48ch; margin-top:14px; font-size:clamp(17px,1.45vw,21px); line-height:1.4; }
.ri-stats { margin-top:26px; gap:16px clamp(28px,4.2vw,64px); }
.ri-stat-text b { font-weight:700; font-size:clamp(18px,1.55vw,22px); }
.ri-wave { position:absolute; left:0; right:0; bottom:-1px; z-index:2; display:block; width:100%; height:clamp(28px,4vw,58px); fill:#FAF7F1; }

/* Cards */
.ri-body { padding-top:18px; }
.ri-card { padding:20px 20px 24px; border-radius:12px; box-shadow:0 1px 0 rgba(24,53,43,.06); }
.ri-card--green { --bg:#EAF1EC; }
.ri-card--gold  { --bg:#F8EFE3; }
.ri-card--red   { --bg:#FDEBEA; }
.ri-card--blue  { --bg:#E8F0F8; }
.ri-card-head { gap:20px; }
.ri-card-num { width:46px; height:46px; font-size:24px; font-weight:700; font-variant-numeric:lining-nums; }
.ri-card-head h2, .ri-card-head h3 { font-weight:700; font-size:clamp(22px,1.75vw,26px); }
.ri-card-head div > span { font-size:14px; letter-spacing:.02em; }
.ri-card--green .ri-card-head h3 { color:#18352B; }
.ri-card--gold .ri-card-head h3 { color:#6E4B1F; }
.ri-card--red .ri-card-head h3 { color:#8E2A31; }
.ri-card--blue .ri-card-head h3 { color:#1B4F6E; }
.ri-card img { aspect-ratio:2.6 / 1; border-radius:8px; margin-bottom:20px; }
.ri-checks { gap:14px; }
.ri-checks li { grid-template-columns:24px 1fr; gap:14px; font-size:15px; }
.ri-checks li > span { width:20px; height:20px; margin-top:2px; }

/* Spending */
.ri-panel { border-radius:12px; }
.ri-panel h2 { font-weight:700; font-size:clamp(22px,2vw,28px); }
.ri-spend { box-shadow:0 1px 0 rgba(24,53,43,.06); }
.ri-spend-grid { grid-template-columns:240px 1fr; margin-top:8px; }
.ri-donut { width:186px; height:186px; margin:26px; }
.ri-donut::before { inset:40px; }
.ri-donut b { font-weight:700; font-size:22px; }
.ri-donut i { position:absolute; transform:translate(-50%,-50%); font-family:var(--serif); font-style:normal; font-size:17px; font-weight:700; font-variant-numeric:lining-nums; white-space:nowrap; }
.ri-spend-table th, .ri-spend-table td { padding:12px 8px; border-bottom-color:#E6E3DC; }
.ri-spend-table th { font-size:16px; font-weight:500; }
.ri-amount { font-weight:700; font-size:18px; }
.ri-pct { font-size:16px; color:var(--ink-2); }

/* What happens next: icons on a connecting line, text in white rows */
.ri-next { background:#E8EFE9; }
.ri-next-head { gap:26px; }
.ri-next-badge { width:52px; height:52px; border-width:2px; }
.ri-next ul { position:relative; margin:14px 0 0; gap:12px; }
.ri-next ul::before { content:""; position:absolute; left:25px; top:26px; bottom:26px; width:2px; background:#CFDCD2; }
.ri-next li { position:relative; grid-template-columns:52px 1fr; gap:22px; padding:0; background:none; }
.ri-next-icon { position:relative; z-index:1; width:52px; height:52px; background:#DCE7DE; }
.ri-next-icon svg { width:26px; height:26px; fill:var(--forest); stroke:var(--forest); stroke-width:1; }
.ri-next li > span:last-child { display:flex; align-items:center; min-height:58px; padding:12px 20px; border-radius:10px; background:#fff; font-size:15.5px; line-height:1.4; }

/* Links under the report (kept out of the banner) */
.ri-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-top:28px; padding-top:22px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3); }
.ri-foot a { display:inline-flex; align-items:center; gap:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--forest); }
.ri-foot a:hover { color:var(--ocean); }
.ri-foot .ri-print { background:none; border-color:var(--line); color:var(--forest); backdrop-filter:none; }
.ri-foot .ri-print:hover { background:var(--forest); color:var(--ivory); }

@media (max-width:760px) {
  .ri-hero .ri-wrap { padding:26px 0 48px; }
  .ri-hero::before { width:100%; }
  .ri-spend-grid { grid-template-columns:1fr; }
  .ri-foot { justify-content:flex-start; }
}
@media print { .ri-foot, .ri-wave { display:none !important; } }
.ri-summary { max-width:44em; font-variant-numeric:lining-nums; }
.ri-hero::before { width:66%; background-position:center 30%; }
.ri-hero .ri-wrap { padding-bottom:58px; }
.ri-next-icon svg { fill:none; stroke-width:1.7; }
.ri-donut i { font-size:18px; }
@media (max-width:760px) { .ri-hero::before { width:100%; } }
.ri-summary { max-width:660px; }
@media (max-width:760px) {
  .ri-hero::before { width:100%; height:46%; bottom:auto; opacity:1; background-position:center 40%; }
  .ri-hero::after { background:linear-gradient(180deg, rgba(15,61,50,.35) 0%, rgba(15,61,50,.8) 28%, #0F3D32 46%, #0F3D32 100%); }
  .ri-hero h1 { font-size:34px; }
  .ri-stats { gap:18px 14px; }
  .ri-stats li { align-items:flex-start; gap:10px; }
}

/* Reports page: the latest report is shown first, then the list */
.ri + .rp-index { padding-top:clamp(24px,3vw,40px); border-top:1px solid var(--line); }
.ri:has(+ .rp-index) .ri-body { padding-bottom:clamp(32px,4vw,48px); }

/* ===== Projects: one clean card per project (projects.php, project.php) ===== */
.pj-index { padding-top:clamp(8px, 2vw, 24px); }
.pj-index-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; margin-bottom:clamp(24px, 3vw, 36px); padding-bottom:18px; border-bottom:1px solid var(--line); }
.pj-index-head h2 { font-size:clamp(26px, 2.6vw, 36px); }
.pj-index-head .filter-pills { margin:0; }
.pj-tile { padding-bottom:6px; }
.pj-tile .jc-img img { aspect-ratio:3/2; }
.pj-tile .jc-title { font-size:clamp(22px, 1.8vw, 27px); }
.pj-tile-sum { font-size:15px; line-height:1.55; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pj-tile .jc-more { display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:10px; font-weight:600; color:var(--forest); }
.pj-tile .jc-more svg { width:14px; height:14px; transition:transform .2s; }
.pj-tile:hover .jc-more svg { transform:translateX(4px); }
.journal-cards.cols-3 { row-gap:clamp(32px, 3.5vw, 48px); }
.pj-others { padding:clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 110px); background:#EFE9DD; }

/* Projects and Blog headers: compact, so the cards come into view sooner */
.mast-compact { padding:clamp(36px, 4.5vw, 60px) 0 clamp(20px, 2.5vw, 32px); }
.mast-compact h1 { font-size:clamp(36px, 4.4vw, 60px); line-height:1.05; letter-spacing:-.01em; }
.mast-compact .journal-mast-foot { margin-top:clamp(18px, 2vw, 26px); padding-top:18px; align-items:center; }
.mast-compact .journal-mast-foot p { font-size:clamp(16px, 1.3vw, 19px); line-height:1.5; max-width:52ch; }
.mast-compact .journal-mast-foot dl { gap:6px 20px; font-size:13px; }

/* Reports page: the list grouped by year */
.rp-year { margin-top:clamp(22px, 3vw, 34px); }
.rp-year:first-child { margin-top:8px; }
.rp-year[hidden] { display:none; }
.rp-year-head { display:flex; align-items:baseline; gap:12px; margin:0 0 10px; font-family:var(--serif); font-size:clamp(26px, 2.4vw, 32px); font-weight:600; color:var(--forest); font-variant-numeric:lining-nums; }
.rp-year-head span { font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.rp-year.is-empty .rp-acc-list { display:none; }
.rp-year.is-empty .rp-year-head { color:#8A8A86; }
.rp-year-none { margin:0; padding:14px 0 4px; border-top:1px solid var(--line); font-size:14px; font-style:italic; color:var(--ink-3); }

/* ===== Shorter pages: tighter spacing (same design) ===== */
.section { padding:clamp(48px, 6.5vw, 88px) 0; }
.chapter-head { margin-bottom:clamp(28px, 3.5vw, 44px); padding-bottom:20px; }
.values-head { margin-top:clamp(44px, 5.5vw, 72px); }
body.inner > main > .founder:first-child { padding-top:clamp(48px, 6vw, 84px); }

/* Who We Are timeline: small photo beside the text instead of a large card */
.tl-item { padding-bottom:14px; grid-template-columns:120px 48px 1fr; }
.timeline::before { left:144px; }
.tl-when { padding-top:6px; font-size:19px; }
.tl-dot { margin-top:12px; }
.tl-card { grid-template-columns:96px 1fr; gap:18px; padding:12px 16px 12px 12px; }
.tl-card img { aspect-ratio:1; border-radius:6px; }
.tl-body h3 { font-size:clamp(19px, 1.6vw, 22px); }
.tl-body p { margin-top:4px; font-size:14px; line-height:1.55; }
.tl-body .tlink { margin-top:8px; }
@media (max-width:800px) {
  .timeline::before { left:6px; }
  .tl-item { grid-template-columns:14px 1fr; }
  .tl-card { grid-template-columns:64px 1fr; gap:12px; padding:10px; }
  .tl-item.no-img .tl-card { grid-template-columns:1fr; }
  .tl-body h3 { font-size:18px; }
  .tl-body p { font-size:13.5px; }
}

/* Phones: compact cards — small photo beside the text, two-up values and photos */
@media (max-width:640px) {
  .journal-cards .pj-tile { display:grid; grid-template-columns:112px 1fr; column-gap:14px; row-gap:4px; align-items:start; }
  .journal-cards .pj-tile .jc-img { grid-row:1 / span 4; margin:0; }
  .journal-cards .pj-tile .jc-img img { aspect-ratio:1; }
  .journal-cards .pj-tile .jc-meta { font-size:10px; letter-spacing:.12em; }
  .journal-cards .pj-tile .jc-title { font-size:19px; }
  .journal-cards .pj-tile .pj-tile-sum { font-size:13.5px; -webkit-line-clamp:2; }
  .journal-cards .pj-tile .jc-more { padding-top:2px; font-size:11px; }
  .journal-cards.cols-3, .journal-cards { row-gap:22px; }
  .value-cards { grid-template-columns:1fr 1fr; gap:18px 14px; }
  .value-card img { aspect-ratio:1; }
  .value-card h3 { font-size:22px; }
  .value-card p { font-size:13.5px; }
  .journey-strip { grid-template-columns:repeat(2, 1fr) !important; }
}
/* Report theme cards: the photo is decoration — skip it on phones */
@media (max-width:640px) { .ri-card img { display:none; } }

/* Stories and project pages: easier reading, compact photo gallery */
.post-entry, .pj-entry { color:#34403B; }
.entry .post-gallery { gap:12px; }
.entry .post-gallery figure:nth-child(5n+1) { grid-column:auto; grid-row:auto; }
.entry .post-gallery figure:nth-child(5n+1) img { aspect-ratio:1; }
.entry .post-gallery figcaption { margin-top:6px; font-size:11.5px; line-height:1.4; }
@media (max-width:640px) { .entry .post-gallery { grid-template-columns:repeat(3, 1fr); gap:8px; } .entry .post-gallery figcaption { display:none; } }
/* Photos inside a story: never taller than 460px (portrait shots shrink, nothing is cropped) */
.post-entry > figure img, .post-entry > p > img, .pj-entry > figure img { width:auto; max-width:100%; max-height:460px; margin:0 auto; }
.post-entry > figure, .pj-entry > figure { margin:1.6em 0; }
.entry .post-gallery + * { margin-top:1.5em; }

/* ===== Impact Report sections (report-infographic.php) ===== */
.ri-download { display:inline-flex; align-items:center; gap:10px; margin-top:22px; min-height:46px; padding:0 22px; border-radius:999px; background:#E3C77A; color:#12362B; font-weight:600; font-size:14px; transition:background .2s; }
.ri-download:hover { background:#fff; color:#12362B; }
.ri-download svg { width:16px; height:16px; }
.ri-download small { font-weight:500; opacity:.75; }
.ri-print--solid { display:inline-flex; align-items:center; background:var(--forest) !important; border-color:var(--forest) !important; color:var(--ivory) !important; }
.ri-print--solid:hover { background:var(--ocean) !important; border-color:var(--ocean) !important; }
.ri-why { margin:16px 0 0; padding:14px 20px; border-left:3px solid #C99A32; border-radius:0 10px 10px 0; background:#fff; font-size:15px; color:var(--ink-2); }
.ri-why b { margin-right:6px; font-family:var(--serif); font-size:19px; font-weight:700; color:var(--forest); }
.ri-places { background:#fff; box-shadow:0 1px 0 rgba(24,53,43,.06); }
.ri-places > p { margin:10px 0 0; font-size:14.5px; line-height:1.6; color:var(--ink-2); }
.ri-places dl { margin:16px 0 0; display:flex; flex-direction:column; gap:10px; }
.ri-places dl > div { display:grid; grid-template-columns:44px 1fr; column-gap:14px; align-items:center; padding:10px 14px; border-radius:10px; background:#F4F0E7; }
.ri-places .ri-next-icon { grid-row:span 2; background:#E9F0EA; }
.ri-places dt { font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.ri-places dd { margin:0; font-family:var(--serif); font-size:19px; font-weight:600; color:var(--forest); }
.ri-decade { margin-top:18px; background:#fff; box-shadow:0 1px 0 rgba(24,53,43,.06); }
.ri-decade ol { list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; }
.ri-decade li { padding:14px; border-radius:10px; background:#F4F0E7; border-top:3px solid var(--forest); }
.ri-decade li:nth-child(even) { border-top-color:#C99A32; }
.ri-decade b { font-family:var(--serif); font-size:24px; font-weight:700; color:var(--forest); font-variant-numeric:lining-nums; }
.ri-tag { display:inline-block; margin-left:8px; padding:2px 9px; border-radius:999px; background:#E9F0EA; font-size:11px; font-weight:600; color:var(--forest); vertical-align:4px; }
.ri-decade p { margin:6px 0 0; font-size:13.5px; line-height:1.45; color:var(--ink); }
.ri-highlights ul { list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
.ri-highlights li { display:flex; flex-direction:column; gap:4px; padding:16px 18px; border-radius:12px; background:#EAF1EC; }
.ri-highlights li:nth-child(4n+2) { background:#F8EFE3; } .ri-highlights li:nth-child(4n+3) { background:#E8F0F8; } .ri-highlights li:nth-child(4n) { background:#FDEBEA; }
.ri-highlights b { font-family:var(--serif); font-size:clamp(28px, 2.6vw, 36px); font-weight:700; line-height:1; color:var(--forest); font-variant-numeric:lining-nums; }
.ri-highlights span { font-size:13.5px; line-height:1.4; color:var(--ink-2); }
.ri-spend-table th small { display:block; margin-top:2px; font-size:12px; font-weight:400; color:var(--ink-3); }
.ri-donations { display:flex; align-items:center; gap:10px; margin:14px 0 0; padding:12px 14px; border-radius:10px; background:#F8EFE3; font-size:14px; color:var(--ink); }
.ri-donations svg { flex:0 0 auto; width:22px; height:22px; fill:none; stroke:#A8722F; stroke-width:1.6; }
.ri-yearly { background:#fff; box-shadow:0 1px 0 rgba(24,53,43,.06); }
.ri-yearly > p { margin:8px 0 0; font-size:14px; color:var(--ink-2); }
.ri-bars { list-style:none; margin:18px 0 0; padding:0; height:190px; display:grid; grid-template-columns:repeat(10, 1fr); gap:8px; align-items:end; }
.ri-bars li { position:relative; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; }
.ri-bars i { display:block; width:100%; max-width:34px; min-height:4px; border-radius:5px 5px 0 0; background:#7F9A73; }
.ri-bars li.is-peak i { background:#B7863A; }
.ri-bar-val { margin-bottom:4px; font-size:10.5px; font-weight:600; color:var(--ink-2); white-space:nowrap; }
.ri-bar-year { margin-top:6px; font-size:11px; color:var(--ink-3); font-variant-numeric:lining-nums; }
.ri-yearly-facts { margin:16px 0 0; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.ri-yearly-facts div { padding:10px 12px; border-radius:10px; background:#F4F0E7; }
.ri-yearly-facts dt { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.ri-yearly-facts dd { margin:2px 0 0; font-family:var(--serif); font-size:20px; font-weight:700; color:var(--forest); font-variant-numeric:lining-nums; }
.ri-yearly-facts small { font-family:var(--sans); font-size:12px; font-weight:500; color:var(--ink-3); }
.ri-thanks { margin-top:18px; padding:22px 26px; border-radius:14px; background:#12362B; color:var(--ivory); display:grid; grid-template-columns:auto 1fr; gap:6px 24px; align-items:center; }
.ri-thanks h2 { font-size:clamp(26px, 2.6vw, 34px); font-weight:700; color:#E3C77A; }
.ri-thanks p { margin:0; font-size:15px; line-height:1.6; color:rgba(244,240,231,.9); }
@media (max-width:1100px) { .ri-decade ol { grid-template-columns:repeat(3, minmax(0, 1fr)); } .ri-highlights ul { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:640px) {
  .ri-decade ol { grid-template-columns:1fr 1fr; }
  .ri-bars { gap:4px; height:160px; } .ri-bar-val { font-size:9px; } .ri-bar-year { font-size:9.5px; }
  .ri-yearly-facts { grid-template-columns:1fr; }
  .ri-thanks { grid-template-columns:1fr; }
}
@media print { .ri-download { display:none; } .ri-decade li, .ri-highlights li, .ri-bars i, .ri-thanks { -webkit-print-color-adjust:exact; print-color-adjust:exact; } }
.partners .pt-key { margin-top:14px; padding:12px 16px; border-left:3px solid #C99A32; border-radius:0 8px 8px 0; background:rgba(255,255,255,.6); font-size:15px; color:var(--ink); }
.partners .pt-key b { color:var(--forest); }

/* ===== Original documents: view / download ===== */
.ri-doc { margin-top:18px; display:grid; grid-template-columns:auto 1fr auto; gap:14px 20px; align-items:center; padding:18px 22px; border-radius:14px; background:#fff; border:1px solid var(--line); }
.ri-doc-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:12px; background:#EAF1EC; }
.ri-doc-icon svg { width:24px; height:24px; fill:none; stroke:var(--forest); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ri-doc h2 { font-size:20px; font-weight:700; color:var(--forest); }
.ri-doc p { margin:4px 0 0; font-size:14px; color:var(--ink-2); }
.ri-doc p b { color:var(--ink); font-weight:600; }
.ri-doc-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.ri-doc-btn { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 18px; border:1px solid var(--forest); border-radius:999px; font-size:13px; font-weight:600; color:var(--forest); }
.ri-doc-btn:hover { background:#EAF1EC; color:var(--forest); }
.ri-doc-btn--solid { background:var(--forest); color:var(--ivory); }
.ri-doc-btn--solid:hover { background:var(--ocean); border-color:var(--ocean); color:var(--ivory); }
.ri-doc-btn svg { width:15px; height:15px; }
.ri-doc-link { font-size:13px; color:var(--ink-3); }
.rp-acc-links { display:flex; flex-wrap:wrap; gap:10px 24px; }
.rp-docs { margin-top:clamp(40px, 5vw, 64px); }
.rp-docs h2 { font-size:clamp(26px, 2.4vw, 32px); }
.rp-docs-intro { margin:6px 0 16px; font-size:15px; color:var(--ink-2); }
.rp-docs-table { overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:#fff; }
.rp-docs-table table { width:100%; border-collapse:collapse; font-size:14px; }
.rp-docs-table th, .rp-docs-table td { padding:13px 16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
.rp-docs-table tr:last-child > * { border-bottom:0; }
.rp-docs-table thead th { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); background:#FAF7F1; }
.rp-docs-table tbody th { font-weight:600; }
.rp-docs-table tbody th a { color:var(--forest); }
.rp-docs-table tbody th small { display:block; font-weight:400; font-size:12px; color:var(--ink-3); }
.rp-docs-table td { color:var(--ink-2); white-space:nowrap; }
.rp-docs-act { text-align:right !important; }
.rp-docs-act a { display:inline-flex; align-items:center; gap:6px; margin-left:8px; min-height:34px; padding:0 14px; border:1px solid var(--line); border-radius:999px; font-size:12.5px; font-weight:600; color:var(--forest); }
.rp-docs-act a.solid { background:var(--forest); border-color:var(--forest); color:var(--ivory); }
.rp-docs-act a svg { width:13px; height:13px; }
@media (max-width:760px) {
  .ri-doc { grid-template-columns:auto 1fr; }
  .ri-doc-actions { grid-column:1 / -1; }
  .rp-docs-table thead { display:none; }
  .rp-docs-table tr { display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:12px 14px; border-bottom:1px solid var(--line); }
  .rp-docs-table th, .rp-docs-table td { padding:0; border:0; }
  .rp-docs-table tbody th { grid-column:1 / -1; white-space:normal; }
  .rp-docs-act { grid-column:1 / -1; text-align:left !important; margin-top:6px; }
  .rp-docs-act a { margin:0 8px 0 0; }
}
@media print { .ri-doc-actions { display:none; } }

/* ===== Reports page: quick links ===== */
.rp-jump { position:sticky; top:84px; z-index:20; background:rgba(250,247,241,.96); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.rp-jump-in { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:10px 0; }
.rp-jump-title { margin-right:auto; font-family:var(--serif); font-size:20px; font-weight:600; color:var(--forest); }
.rp-jump a { display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 16px; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:13px; font-weight:600; color:var(--forest); }
.rp-jump a:hover { border-color:var(--forest); }
.rp-jump a svg { width:14px; height:14px; }
.rp-jump a b { display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:#EAF1EC; font-size:11.5px; }
.rp-jump a[href="#documents"] { background:var(--forest); border-color:var(--forest); color:var(--ivory); }
.rp-jump a[href="#documents"] b { background:rgba(255,255,255,.18); color:var(--ivory); }
.rp-anchor, #documents, #all-reports { scroll-margin-top:150px; }
.rp-index > .rp-docs { margin-top:0; margin-bottom:clamp(40px, 5vw, 64px); }
@media (max-width:640px) { .rp-jump { top:64px; } .rp-jump-title { width:100%; font-size:17px; } .rp-jump a { min-height:34px; padding:0 12px; font-size:12px; } }

/* Report banner: view + download */
.ri-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.ri-hero-actions .ri-download { margin-top:0; }
.ri-download svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; }
.ri-download--ghost { background:transparent; border:1px solid rgba(244,240,231,.55); color:var(--ivory); }
.ri-download--ghost:hover { background:var(--ivory); color:#12362B; }

/* ===== Document viewer ===== */
.pdfv { width:min(1100px, 96vw); height:min(92vh, 1000px); max-width:none; max-height:none; padding:0; border:0; border-radius:14px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.pdfv[open] { display:flex; flex-direction:column; }
.pdfv::backdrop { background:rgba(10,24,19,.7); }
.pdfv-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 14px 10px 20px; background:#12362B; color:var(--ivory); }
.pdfv-bar b { font-family:var(--serif); font-size:19px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pdfv-actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.pdfv-actions a { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 14px; border:1px solid rgba(244,240,231,.4); border-radius:999px; font-size:13px; font-weight:600; color:var(--ivory); }
.pdfv-actions a:hover { background:var(--ivory); color:#12362B; }
.pdfv-actions a svg { width:14px; height:14px; }
#pdfvClose { width:38px; height:38px; border:0; border-radius:50%; background:rgba(244,240,231,.12); color:var(--ivory); font-size:24px; line-height:1; cursor:pointer; }
#pdfvClose:hover { background:rgba(244,240,231,.25); }
.pdfv iframe { flex:1; width:100%; border:0; background:#525659; }
@media (max-width:640px) { #pdfvOpen { display:none; } }
.rp-docs-top { padding-top:clamp(24px, 3vw, 36px); padding-bottom:clamp(28px, 3.5vw, 44px); }
.rp-docs-top .rp-docs { margin:0; }
/* The page wrappers hide overflow, so a sticky bar can't work here: keep it in the flow */
.rp-jump, .rp-jump[class] { position:relative; top:auto; }
@media (max-width:640px) { .rp-jump { top:auto; } }
.rp-anchor, #documents, #all-reports { scroll-margin-top:100px; }
.ri-print--solid svg { width:14px; height:14px; margin-right:6px; }
/* Banner buttons: clear of the wavy edge, side by side */
.ri-hero:has(.ri-hero-actions) .ri-wrap { padding-bottom:clamp(64px, 6vw, 92px); }
.ri-hero-actions { position:relative; z-index:3; align-items:center; }
.ri-hero-actions .ri-download { white-space:nowrap; }
@media (max-width:640px) {
  .ri-hero-actions { flex-wrap:nowrap; gap:8px; }
  .ri-hero-actions .ri-download { flex:1 1 0; justify-content:center; min-height:44px; padding:0 12px; font-size:13px; }
  .ri-hero-actions .ri-download small { display:none; }
}

/* ===== Gallery (gallery.php) ===== */
.gal { padding:clamp(8px, 2vw, 20px) 0 clamp(56px, 7vw, 96px); }
.gal-filters { position:relative; margin-bottom:clamp(20px, 3vw, 32px); }
.gal-filters button { display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 16px; border:1px solid var(--line); border-radius:999px; background:#fff; font:600 12px var(--sans); letter-spacing:.06em; color:var(--forest); cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.gal-filters button span { font-size:11px; color:var(--ink-3); }
.gal-filters button:hover { border-color:var(--forest); }
.gal-filters button.on { background:var(--forest); border-color:var(--forest); color:var(--ivory); }
.gal-filters button.on span { color:rgba(244,240,231,.75); }
.gal-album { margin-top:clamp(28px, 3.5vw, 44px); }
.gal-album[hidden] { display:none; }
.gal-album-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 20px; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.gal-album-head h2 { font-size:clamp(22px, 2.2vw, 30px); }
.gal-album-head small { margin-left:8px; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.gal-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; }
.gal-item { position:relative; display:block; overflow:hidden; border-radius:10px; background:#E9E4D8; }
.gal-item img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s ease; }
.gal-item:hover img { transform:scale(1.04); }
.gal-cap { position:absolute; left:0; right:0; bottom:0; padding:22px 12px 10px; background:linear-gradient(transparent, rgba(10,24,19,.78)); color:#fff; font-size:12.5px; line-height:1.35; opacity:0; transform:translateY(6px); transition:opacity .25s, transform .25s; }
.gal-item:hover .gal-cap, .gal-item:focus-visible .gal-cap { opacity:1; transform:none; }
.gal-box { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:56px 64px; background:rgba(8,18,14,.94); }
.gal-box[hidden] { display:none; }
.gal-box figure { margin:0; display:flex; flex-direction:column; align-items:center; max-width:100%; max-height:100%; }
.gal-box img { max-width:100%; max-height:calc(100vh - 160px); object-fit:contain; border-radius:6px; }
.gal-box figcaption { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; margin-top:12px; color:#F4F0E7; font-size:14px; text-align:center; }
.gal-box figcaption span { color:#E3C77A; }
.gal-box figcaption i { font-style:normal; color:rgba(244,240,231,.6); }
.gal-close, .gal-prev, .gal-next { position:absolute; display:grid; place-items:center; width:48px; height:48px; border:0; border-radius:50%; background:rgba(244,240,231,.12); color:#fff; font-size:30px; line-height:1; cursor:pointer; }
.gal-close:hover, .gal-prev:hover, .gal-next:hover { background:rgba(244,240,231,.25); }
.gal-close { top:14px; right:14px; }
.gal-prev { left:12px; top:50%; transform:translateY(-50%); }
.gal-next { right:12px; top:50%; transform:translateY(-50%); }
@media (max-width:640px) {
  .gal-filters { flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
  .gal-filters button { flex:0 0 auto; }
  .gal-grid { grid-template-columns:repeat(2, 1fr); gap:6px; }
  .gal-cap { display:none; }
  .gal-box { padding:56px 8px 24px; }
  .gal-prev, .gal-next { top:auto; bottom:16px; transform:none; }
}

/* Get-involved form: hidden spam trap, result message */
.gi-hp { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.gi2-note { padding:12px 16px; border-radius:8px; background:#E4EFE7; color:#1D5A3A; font-weight:600; }
.gi2-note.is-error { background:#FBF2F1; color:#8A2F2B; }
.gi2-btn.is-busy { opacity:.6; pointer-events:none; }

/* ===== Home page on phones and tablets: readable sizes, stacked layouts =====
   Several home sections are sized in vw/vh for a wide desktop; below 1000px
   these give them fixed, readable sizes instead. */
@media (max-width:1000px) {
  /* About */
  .ab-p { font-size:16px !important; line-height:1.65; margin-top:16px !important; }
  .def .w { font-size:26px !important; } .def .pos { font-size:13px !important; } .def .m { font-size:14.5px !important; margin-top:6px !important; }
  .ab-stats { padding:16px 0 !important; } .ab-stats .n { font-size:34px !important; } .ab-stats .l { font-size:12px !important; }
  .mvc2 { padding:18px !important; } .mvc2 .num { width:44px !important; height:44px !important; } .mvc2 .num svg { width:22px !important; height:22px !important; }
  .mvc2 .acard-eye, .rep-bar .acard-eye { font-size:11px !important; }
  .mvc2 p, .mvc2 .t { font-size:15px !important; line-height:1.55; }
  .ab-quote blockquote { font-size:22px !important; } .ab-quote cite, .ab-quote .motto { font-size:12px !important; }
  .rep-bar { padding:12px !important; } .rep-bar .ri { width:64px !important; height:48px !important; } .rep-bar .t { font-size:18px !important; } .rep-bar .d { font-size:13.5px !important; }

  /* Featured stories: photo panel on top, then the three stories as a list */
  .b3-grid { height:auto !important; grid-template-columns:1fr !important; }
  .b3-hero { display:flex !important; flex-direction:column; justify-content:flex-end; min-height:520px; padding:32px 20px 24px !important; }
  .b3-hero::before { background:linear-gradient(180deg, rgba(14,36,30,.9) 0%, rgba(14,36,30,.55) 45%, rgba(14,36,30,.92) 100%) !important; }
  .b3-intro, .b3-feat { position:static !important; max-width:none !important; width:auto !important; }
  .b3-feat { margin-top:auto !important; padding-top:28px; }
  .b3-eye { font-size:11px !important; gap:12px !important; } .b3-eye i { width:36px !important; }
  .b3-intro h2 { font-size:34px !important; margin-top:12px !important; white-space:normal !important; }
  .b3-intro p { font-size:15px !important; max-width:none !important; margin:12px 0 0 !important; }
  .b3-feat .lab { font-size:10.5px !important; } .b3-feat .h { font-size:24px !important; line-height:1.15 !important; }
  .b3-feat .d { font-size:14px !important; max-width:none !important; }
  .b3-feat .m { padding:12px 0 8px !important; } .b3-feat .m .tlink, .b3-feat .date { font-size:11px !important; }
  .b3-leaf { display:none !important; }
  .b3-side { padding:20px !important; }
  .b3-card { grid-template-columns:92px 1fr !important; gap:14px !important; padding:16px 0 !important; }
  .b3-card .img { border-radius:8px !important; }
  .b3-card .num, .b3-card .date { font-size:10.5px !important; }
  .b3-card .h { font-size:19px !important; } .b3-card .d { font-size:13.5px !important; }
  .b3-icons { flex-wrap:wrap !important; gap:18px 0 !important; padding:22px 12px !important; height:auto !important; }
  .b3-icons span { font-size:10.5px !important; letter-spacing:.14em !important; padding:0 14px !important; gap:8px !important; }
  .b3-icons svg { width:30px !important; height:30px !important; }

  /* Projects */
  .proj-lead { font-size:15.5px !important; line-height:1.6; }
  .proj-grid .pcard .h, .pcard .h { font-size:22px !important; }
  .proj-grid .pcard .d, .pcard .d { font-size:14.5px !important; }

  /* Get involved */
  .gi2-banner { height:auto !important; min-height:220px !important; flex:none !important; }
  .gi2-bt { position:absolute; left:0 !important; right:0; padding:0 20px; }
  .gi2-bt h2 { font-size:32px !important; }
  .gi2-bt p { font-size:15px !important; margin-top:10px !important; }
  .gi2-bt p br { display:none; }
  .gi2-lead { font-size:15.5px !important; margin:0 0 18px !important; }
  .fld input, .fld select, .fld textarea { min-height:52px !important; padding:14px 16px 14px 50px !important; font-size:16px !important; }
  .fld .ic { width:20px !important; height:20px !important; }
  .fld.ta .ic { top:16px !important; } .fld textarea { min-height:130px !important; }
  .gi2-way { padding:16px 0 !important; } .gi2-way b { font-size:21px !important; margin-bottom:4px !important; } .gi2-way span { font-size:14px !important; }
  .gi2-eye { font-size:12px !important; }
}
@media (max-width:1000px) {
  .proj-head h2, #partners-heading, #about-heading { font-size:32px !important; line-height:1.1 !important; }
  .proj-head .eyebrow { font-size:12px !important; }
}

/* Home "Our purpose" band on phones: compact rows, icon beside the text */
@media (max-width:760px) {
  .s2-band { min-height:0 !important; }
  .s2-cols { position:static !important; display:flex !important; flex-direction:column; gap:0 !important; padding:8px 20px 48px !important; }
  .s2-col { display:grid !important; grid-template-columns:48px 1fr; column-gap:16px; align-items:center; height:auto !important; padding:16px 0 !important; border-bottom:1px solid rgba(244,240,231,.16); }
  .s2-col:last-child { border-bottom:0; }
  .s2-col + .s2-col::before { display:none !important; }
  .s2-col .ic { grid-row:1 / span 2; width:48px !important; height:48px !important; }
  .s2-col .ic svg { width:22px !important; height:22px !important; }
  .s2-col b { margin:0 !important; font-size:22px !important; min-height:0 !important; }
  .s2-col b.stmt { grid-row:1 / span 2; font-size:18px !important; line-height:1.35 !important; }
  .s2-col .d { margin:4px 0 0 !important; font-size:14px !important; min-height:0 !important; }
  .s2-col .lm { grid-column:2; margin-top:8px !important; font-size:13px !important; }
}

/* Home hero on phones: text, buttons and the three areas flow one after
   another (no fixed positions), so nothing overlaps on short screens. */
@media (max-width:767px) {
  .hero3 { height:auto !important; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding:104px 20px 22px; box-sizing:border-box; }
  .hero3-inner { position:relative !important; inset:auto !important; transform:none !important; width:auto !important; max-width:none !important; z-index:2; }
  .hero3 h1 { font-size:40px !important; line-height:1 !important; }
  .hero3 .stmt { font-size:21px !important; margin-top:18px !important; }
  .hero3 .sub { font-size:14.5px !important; line-height:1.6 !important; margin-top:14px !important; }
  .hero3-cta { margin-top:20px !important; gap:10px !important; }
  .hero3-cta .gbtn, .hero3-ghost { min-height:46px !important; }
  .ibar { position:relative !important; inset:auto !important; z-index:2; margin-top:26px; padding-top:18px; border-top:1px solid rgba(244,240,231,.22); }
  .ibar .items { display:flex !important; justify-content:space-between; gap:8px !important; overflow:visible !important; }
  .ibar .items span { flex-direction:column; align-items:flex-start; gap:8px !important; font-size:10.5px !important; letter-spacing:.14em; }
  .ibar svg { width:22px !important; height:22px !important; }
  .scrollind { display:none !important; }
}
/* Phone hero: heading starts near the top; the three areas stay at the bottom */
@media (max-width:767px) {
  .hero3 { justify-content:flex-start !important; padding-top:120px !important; }
  .ibar { margin-top:auto !important; }
  .hero3-cta { margin-bottom:26px; }
}
/* Phone hero: as tall as its content, evenly spaced — no empty band */
@media (max-width:767px) {
  .hero3 { min-height:0 !important; justify-content:flex-start !important; padding:112px 20px 22px !important; }
  .hero3-cta { margin-bottom:0 !important; }
  .ibar { margin-top:30px !important; }
}
/* Phone hero (final): full screen height, text block centred between the
   logo and the three areas, with even space between each line. */
@media (max-width:767px) {
  .hero3 { min-height:100svh !important; justify-content:flex-start !important; padding:96px 20px 22px !important; }
  .hero3-inner { margin:auto 0 !important; }
  .hero3 h1 { font-size:42px !important; line-height:1.02 !important; }
  .hero3 .stmt { margin-top:24px !important; }
  .hero3 .sub { margin-top:16px !important; }
  .hero3-cta { margin-top:32px !important; margin-bottom:0 !important; gap:12px !important; }
  .ibar { margin-top:32px !important; }
}
@media (max-width:360px) { .hero3 { padding-top:118px !important; } .hero3 h1 { font-size:36px !important; } }