/* =========================================================================
   Mercy Showers Trust — Premium NGO theme
   ========================================================================= */

:root {
    --brand: #123b63;
    --brand-dark: #0d2b49;
    --brand-light: #1f5487;
    --accent: #c8961e;
    --accent-dark: #a97c14;
    --ink: #10233a;
    --body: #45525f;
    --muted: #6a7683;
    --line: #e4e9ef;
    --bg: #ffffff;
    --bg-soft: #f4f7fb;
    --bg-mint: #eef3f9;
    --white: #ffffff;
    --radius: 16px;
    --radius-lg: 26px;
    --shadow-sm: 0 4px 18px rgba(16, 35, 58, 0.07);
    --shadow: 0 18px 44px rgba(16, 35, 58, 0.12);
    --shadow-lg: 0 30px 70px rgba(16, 35, 58, 0.18);
    --container: 1200px;

    /* --- Spacing scale (4px base). Use these instead of ad-hoc pixel values
       so vertical rhythm and gutters stay consistent across every section. --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;
    /* Fluid section rhythm — one knob for the whole page cadence. */
    --section-y: clamp(64px, 8vw, 104px);
    --section-y-tight: clamp(44px, 5vw, 68px);

    /* --- Type scale (fluid, 1.25 ratio at the top end) --- */
    --fs-display: clamp(40px, 6vw, 68px);
    --fs-h1: clamp(32px, 5vw, 52px);
    --fs-h2: clamp(28px, 4vw, 42px);
    --fs-h3: clamp(20px, 2.2vw, 25px);
    --fs-lead: clamp(17px, 1.6vw, 20px);
    --fs-body: 17px;
    --fs-sm: 15px;
    --fs-xs: 13px;
    /* Comfortable reading measure (~68 characters). */
    --measure: 68ch;

    /* --- Semantic radii. Two sizes only: interactive/small vs. surfaces. --- */
    --radius-sm: 10px;
    --radius-pill: 999px;
    /* Single typeface across the whole site. Both variables are kept (they're
       referenced in ~30 rules) but now resolve to DM Sans, so headings and
       body share one family. */
    --font-head: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --transition: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    color: var(--body);
    background: var(--bg);
    line-height: 1.65;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--brand-light); }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.15; font-weight: 700; }
ul { list-style: none; }

.container { width: min(var(--container), 92%); margin-inline: auto; }
.narrow { width: min(820px, 92%); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 28px; border-radius: 999px; font-weight: 700; font-size: 15px;
    border: 2px solid transparent; cursor: pointer; transition: all var(--transition);
    letter-spacing: 0.2px; font-family: var(--font-body); text-align: center;
}
.btn--lg { padding: 16px 36px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); color: #fff; transform: translateY(-3px); box-shadow: var(--shadow); }
.btn--accent { background: var(--accent); color: #23180a; }
.btn--accent:hover { background: var(--accent-dark); color: #23180a; transform: translateY(-3px); box-shadow: 0 16px 34px rgba(200, 150, 30, 0.38); }
.btn--ghost { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.55); backdrop-filter: blur(4px); }
.btn--ghost:hover { background: #fff; color: var(--brand-dark); }
.btn--light { background: #fff; color: var(--brand-dark); }
.btn--light:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--brand-dark); }
.btn--outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn--outline:hover { background: var(--brand); color: #fff; }

/* ---------- Top bar ---------- */
.topbar { background: var(--brand-dark); color: #cdd9e8; font-size: 13.5px; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; flex-wrap: wrap; gap: 8px; }
.topbar a { color: #cdd9e8; }
.topbar a:hover { color: #fff; }
.topbar__contacts { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar__contacts span { color: var(--accent); margin-right: 4px; }
.topbar__socials { display: flex; gap: 18px; }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.96);
    backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
    transition: box-shadow var(--transition), padding var(--transition);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand__logo { width: auto; height: 48px; object-fit: contain; flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__text strong { font-family: var(--font-head); font-size: 20px; color: var(--ink); white-space: nowrap; }
.brand__text small { font-size: 11.5px; color: var(--muted); letter-spacing: 0.3px; white-space: nowrap; }

.main-nav { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.main-nav a { padding: 9px 9px; font-weight: 600; font-size: 15px; color: var(--ink); border-radius: 8px; white-space: nowrap; }
.main-nav a:hover { color: var(--brand); background: var(--bg-mint); }
.main-nav .nav-donate { margin-left: 8px; flex-shrink: 0; padding-left: 18px !important; padding-right: 18px !important; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 26px; height: 3px; background: var(--ink); border-radius: 3px; transition: var(--transition); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Flash ---------- */
.flash-stack { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.flash { padding: 14px 20px; border-radius: 12px; font-weight: 600; font-size: 15px; }
.flash--success { background: #e6eef7; color: #0d2b49; border: 1px solid #c3d5e8; }
.flash--error { background: #fdecec; color: #9b2226; border: 1px solid #f6c9c9; }

/* ---------- Sections ---------- */
.section { padding: var(--section-y) 0; }
.section--muted { background: var(--bg-soft); }
.section__head { text-align: center; max-width: 720px; margin: 0 auto 54px; }
.section__title { font-size: clamp(28px, 4vw, 42px); margin: 12px 0 14px; }
.section__subtitle { color: var(--muted); font-size: 18px; }
.section__cta { text-align: center; margin-top: 46px; }
.eyebrow, .hero__eyebrow { display: inline-block; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 2.5px; font-size: 12.5px; font-weight: 700; color: var(--accent-dark); }
.lead { font-size: 19px; color: var(--body); margin-bottom: 18px; }
.rich-text { font-size: 17px; color: var(--body); }
.rich-text p { margin-bottom: 18px; }
.rich-text h2, .rich-text h3 { margin: 26px 0 12px; }
.rich-text ul { list-style: none; margin: 0 0 18px; }
.rich-text ul li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.rich-text ul li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--brand); font-weight: 800; }
.rich-text__hero { border-radius: var(--radius); margin-bottom: 26px; width: 100%; box-shadow: var(--shadow); }

/* ---------- Hero ---------- */
/* isolation:isolate contains the slider chrome (arrows/dots/progress bar,
   z-index up to 20) inside the hero's own stacking context, so it can't paint
   over the .actions-strip cards (z-index 5) that overlap upward into the hero
   — the progress line now runs behind the cards. */
.hero { position: relative; min-height: 92vh; color: #fff; overflow: hidden; isolation: isolate; }
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
    position: absolute; inset: 0; display: flex; align-items: center;
    opacity: 0; visibility: hidden; z-index: 1;
    transition: opacity 1.15s ease, visibility 1.15s ease;
}
.hero__slide.is-active { opacity: 1; visibility: visible; z-index: 2; }
.hero__bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 80% 20%, rgba(31,84,135,0.55), transparent 45%),
        linear-gradient(120deg, var(--brand-dark) 0%, var(--brand) 55%, var(--brand-light) 100%);
    animation: heroPan 18s ease-in-out infinite alternate;
}
.hero__bg::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.10) 1.5px, transparent 1.6px);
    background-size: 26px 26px; opacity: 0.4;
}
@keyframes heroPan { to { transform: scale(1.08); } }
/* Slow continuous zoom on whichever slide is currently active — restarts
   each time is-active is (re)applied, since the animation is only defined
   on that combined selector. */
@keyframes heroSlideZoom { from { transform: scale(1); } to { transform: scale(1.07); } }
.hero__slide.is-active .hero__bg--photo { animation: heroSlideZoom 8s ease-out forwards; }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,43,73,0.62), transparent 60%); }
.hero__inner { position: relative; z-index: 2; padding: 100px 0; }
.hero__content { max-width: 720px; }
.hero__eyebrow { color: var(--accent); margin-bottom: 18px; }
.hero__title { font-size: clamp(38px, 6vw, 68px); color: #fff; margin-bottom: 22px; text-shadow: 0 4px 30px rgba(0,0,0,0.25); }
.hero__subtitle { font-size: clamp(17px, 2vw, 21px); color: #e8eef6; margin-bottom: 34px; max-width: 620px; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Hero slider chrome (arrows, dots, progress) ---------- */
.hero__arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
    width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.14);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 26px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background var(--transition), transform var(--transition);
}
.hero__arrow:hover { background: rgba(255,255,255,0.3); transform: translateY(-50%) scale(1.08); }
.hero__arrow--prev { left: 24px; }
.hero__arrow--next { right: 24px; }

.hero__dots { position: absolute; bottom: 36px; right: 40px; z-index: 20; display: flex; gap: 10px; }
.hero__dot {
    width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,0.4);
    border: 0; padding: 0; cursor: pointer; transition: all var(--transition);
}
.hero__dot:hover { background: rgba(255,255,255,0.7); }
.hero__dot.is-active { width: 30px; background: var(--accent); }

.hero__progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.15); z-index: 20; }
.hero__progress-bar { height: 100%; width: 0%; background: var(--accent); }

@media (max-width: 760px) {
    .hero__arrow { width: 38px; height: 38px; font-size: 19px; }
    .hero__arrow--prev { left: 12px; }
    .hero__arrow--next { right: 12px; }
    .hero__dots { right: 20px; bottom: 20px; }
}
/* Fixed to the viewport (not the hero box) so it stays on-screen even when
   hero content is tall enough to push the hero's own bottom edge below the
   fold; faded out via JS once the visitor actually starts scrolling. */
.hero__scroll {
    position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 40;
    color: #e8eef6; font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
    transition: opacity 0.3s ease, visibility 0.3s ease; opacity: 1; visibility: visible;
}
.hero__scroll.is-hidden { opacity: 0; visibility: hidden; }
.hero__scroll span { display: block; text-align: center; animation: bounce 1.6s infinite; font-size: 18px; }
@keyframes bounce { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(8px);} }

/* ---------- Stats ---------- */
.stats { margin-top: -60px; position: relative; z-index: 5; }
.stats__grid {
    background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    display: grid; grid-template-columns: repeat(4, 1fr); padding: 44px 20px;
}
.stat { text-align: center; padding: 10px 16px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat__number { font-family: var(--font-head); font-size: clamp(30px, 4vw, 46px); font-weight: 800; color: var(--brand); line-height: 1; }
.stat__label { color: var(--muted); font-weight: 600; margin-top: 8px; font-size: 15px; }

/* ---------- About home ---------- */
.about-home__inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: center; }
.about-home__media { position: relative; min-height: 480px; }
.about-home__image { position: absolute; border-radius: var(--radius-lg); box-shadow: var(--shadow); background-size: cover; background-position: center; }
.about-home__image--1 { inset: 0 30% 25% 0; background: linear-gradient(135deg, var(--brand), var(--brand-light)); }
.about-home__image--2 { inset: 35% 0 0 35%; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); border: 8px solid #fff; }
.about-home__badge { position: absolute; left: 10%; bottom: 6%; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 22px; max-width: 220px; z-index: 3; }
.about-home__badge strong { display: block; color: var(--brand); font-family: var(--font-head); font-size: 20px; }
.about-home__badge span { font-size: 13.5px; color: var(--muted); }
.mv-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 26px 0 30px; }
.mv-card { background: var(--bg-mint); border-radius: var(--radius); padding: 22px; border-left: 4px solid var(--brand); }
.mv-card h3 { font-size: 19px; margin-bottom: 8px; }
.mv-card p { font-size: 15px; color: var(--body); }

/* ---------- Programme cards ---------- */
.program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.program-grid--full { grid-template-columns: repeat(3, 1fr); }
.program-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 34px 30px; transition: all var(--transition); display: block; color: var(--body);
    position: relative; overflow: hidden;
}
.program-card::before { content:""; position:absolute; left:0; top:0; height:4px; width:0; background: var(--accent); transition: width var(--transition); }
.program-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.program-card:hover::before { width: 100%; }
.program-card__icon { width: 64px; height: 64px; border-radius: 18px; background: var(--bg-mint); color: var(--brand); display: grid; place-items: center; margin-bottom: 20px; transition: var(--transition); }
.program-card__icon svg { width: 32px; height: 32px; }
.program-card:hover .program-card__icon { background: var(--brand); color: #fff; }
.program-card h3 { font-size: 21px; margin-bottom: 10px; }
.program-card p { font-size: 15px; color: var(--muted); }
.program-card__link { display: inline-block; margin-top: 16px; font-weight: 700; color: var(--brand); font-size: 14px; }

/* ---------- Programme carousel (home page) ---------- */
.program-carousel { position: relative; display: flex; align-items: center; gap: 14px; }
.program-carousel__track {
    display: flex; gap: 26px; flex: 1 1 auto; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; padding: 6px 2px 18px; scrollbar-width: none; -ms-overflow-style: none;
}
.program-carousel__track::-webkit-scrollbar { display: none; }
.program-carousel__card { flex: 0 0 300px; scroll-snap-align: start; }
.program-carousel__nav {
    flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
    background: #fff; color: var(--brand); font-size: 24px; line-height: 1; cursor: pointer;
    display: grid; place-items: center; transition: var(--transition);
}
.program-carousel__nav:hover { background: var(--brand); color: #fff; border-color: transparent; }
.program-carousel__nav:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
@media (max-width: 480px) {
    .program-carousel { gap: 6px; }
    .program-carousel__nav { width: 38px; height: 38px; font-size: 20px; }
    .program-carousel__card { flex-basis: 82vw; }
}

/* ---------- Values ---------- */
.values-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.value-chip { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 18px; text-align: center; transition: var(--transition); }
.value-chip:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--accent); }
.value-chip strong { display: block; color: var(--ink); font-family: var(--font-head); font-size: 17px; margin-bottom: 6px; }
.value-chip span { font-size: 13px; color: var(--muted); }

/* ---------- Project cards ---------- */
.project-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.project-card { 
    background: #fff; 
    border-radius: var(--radius-lg); 
    overflow: hidden; 
    box-shadow: var(--shadow-sm); 
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease; 
    color: var(--body); 
    display: block; 
    border: 1px solid rgba(16, 35, 58, 0.04);
}
.project-card:hover { 
    transform: translateY(-8px); 
    box-shadow: var(--shadow-lg); 
    border-color: rgba(16, 35, 58, 0.08);
}
.project-card__img { 
    height: 200px; 
    background-size: cover; 
    background-position: center; 
    position: relative; 
    background-color: var(--bg-mint); 
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card:hover .project-card__img {
    transform: scale(1.08);
}
.project-card__cat { 
    position: absolute; 
    top: 14px; 
    left: 14px; 
    background: rgba(255, 255, 255, 0.9); 
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    color: var(--brand); 
    font-size: 11px; 
    font-weight: 800; 
    padding: 5px 12px; 
    border-radius: 999px; 
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 2;
    transition: background 0.3s, color 0.3s;
}
.project-card:hover .project-card__cat {
    background: var(--accent);
    color: #23180a;
}
.project-card__body { padding: 24px; }
.project-card__body h3 { font-size: 19px; margin-bottom: 8px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.project-card__body p { font-size: 14px; color: var(--muted); line-height: 1.6; }
.project-card__meta { margin-top: 14px; font-size: 12.5px; color: var(--brand); font-weight: 700; letter-spacing: 0.02em; }

/* ---------- Filter bar ---------- */
.filter-bar { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.filter-btn { 
    padding: 9px 22px; 
    border-radius: 999px; 
    border: 1px solid var(--line); 
    background: #fff; 
    font-weight: 700; 
    cursor: pointer; 
    transition: all var(--transition); 
    color: var(--muted); 
    font-family: var(--font-body); 
    font-size: 14px;
}
.filter-btn.is-active, .filter-btn:hover { 
    background: var(--brand); 
    color: #fff; 
    border-color: var(--brand); 
    box-shadow: 0 4px 12px rgba(18, 59, 99, 0.15);
    transform: translateY(-1px);
}

/* ---------- CTA banner ---------- */
.cta-banner { 
    position: relative; 
    padding: 100px 0; 
    color: #fff; 
    text-align: center; 
    overflow: hidden; 
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-light)); 
}
.cta-banner__overlay { 
    position: absolute; 
    inset: 0; 
    background-image: radial-gradient(rgba(255,255,255,0.06) 1.5px, transparent 1.6px); 
    background-size: 24px 24px; 
    z-index: 1;
}
.cta-banner__inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.cta-banner h2 { color: #fff; font-size: clamp(30px, 4.5vw, 46px); margin-bottom: 18px; font-weight: 800; text-shadow: 0 2px 10px rgba(0,0,0,0.15); }
.cta-banner p { color: #e2ecf7; font-size: 17px; margin-bottom: 34px; line-height: 1.7; text-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.cta-banner__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- Blog cards ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-card { 
    background: #fff; 
    border-radius: var(--radius-lg); 
    overflow: hidden; 
    box-shadow: var(--shadow-sm); 
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease; 
    border: 1px solid rgba(16, 35, 58, 0.04);
}
.blog-card:hover { 
    transform: translateY(-6px); 
    box-shadow: var(--shadow-lg); 
    border-color: rgba(16, 35, 58, 0.08);
}
.blog-card__img { 
    display: block; 
    height: 210px; 
    background-size: cover; 
    background-position: center; 
    position: relative; 
    background-color: var(--bg-mint); 
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.blog-card:hover .blog-card__img {
    transform: scale(1.08);
}
.blog-card__cat { 
    position: absolute; 
    top: 14px; 
    left: 14px; 
    background: rgba(255, 255, 255, 0.9); 
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    color: var(--brand); 
    font-size: 11px; 
    font-weight: 800; 
    padding: 5px 12px; 
    border-radius: 999px; 
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 2;
    transition: background 0.3s, color 0.3s;
}
.blog-card:hover .blog-card__cat {
    background: var(--brand);
    color: #fff;
}
.blog-card__body { padding: 26px; }
.blog-card__date { font-size: 12px; color: var(--accent-dark); font-weight: 800; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.blog-card__body h3 { font-size: 19px; margin-bottom: 10px; line-height: 1.35; font-weight: 700; }
.blog-card__body h3 a { color: var(--ink); transition: color var(--transition); }
.blog-card__body h3 a:hover { color: var(--brand); }
.blog-card__body p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.link-arrow { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font-weight: 700; color: var(--brand); font-size: 14px; transition: gap 0.2s; }
.link-arrow:hover { gap: 8px; }

.feature-post { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 46px; color: var(--body); }
.feature-post__img { min-height: 360px; background-size: cover; background-position: center; background-color: var(--bg-mint); }
.feature-post__body { padding: 44px; display: flex; flex-direction: column; justify-content: center; }
.feature-post__body h2 { font-size: 30px; margin: 12px 0 14px; }

/* ---------- Partners ---------- */
.partners-carousel {
    overflow: hidden;
    padding: 10px 0;
    width: 100%;
    position: relative;
}
.partners-carousel::before,
.partners-carousel::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}
.partners-carousel::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-soft), transparent);
}
.partners-carousel::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-soft), transparent);
}
.partners-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: scroll-partners 25s linear infinite;
}
.partners-track:hover {
    animation-play-state: paused;
}
@keyframes scroll-partners {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.partner-logo { padding: 18px 34px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); font-weight: 700; color: var(--muted); font-family: var(--font-head); white-space: nowrap; }

/* ---------- Page hero ---------- */
.page-hero { position: relative; padding: 130px 0 80px; color: #fff; text-align: center; overflow: hidden; background: linear-gradient(120deg, var(--brand-dark), var(--brand)); }
.page-hero__overlay { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.08) 1.5px, transparent 1.6px); background-size: 24px 24px; }
.page-hero--about { background: linear-gradient(120deg, #0d2b49, #1f5487); }
.page-hero--programs { background: linear-gradient(120deg, #123b63, #0d2b49); }
.page-hero--gallery { background: linear-gradient(120deg, #0d2b49, #123b63); }
.page-hero--portfolio { background: linear-gradient(120deg, #1f5487, #0d2b49); }
.page-hero--blog { background: linear-gradient(120deg, #123b63, #1f5487); }
.page-hero--contact { background: linear-gradient(120deg, #0d2b49, #123b63); }
.page-hero--donate { background: linear-gradient(120deg, var(--accent-dark), #123b63); }
.page-hero__inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
.page-hero h1 { color: #fff; font-size: clamp(32px, 5vw, 52px); margin-bottom: 14px; }
.page-hero p { color: #e8eef6; font-size: 18px; }
.page-hero__icon { width: 76px; height: 76px; margin: 0 auto 18px; background: rgba(255,255,255,0.15); border-radius: 20px; display: grid; place-items: center; }
.page-hero__icon svg { width: 40px; height: 40px; color: #fff; }
.page-hero__tag { display: inline-block; background: var(--accent); color: #23180a; font-weight: 700; font-size: 13px; padding: 6px 16px; border-radius: 999px; margin-bottom: 16px; }
.page-hero__meta { opacity: 0.9; }
.breadcrumb { font-size: 14px; color: #cdd9e8; margin-bottom: 18px; }
.breadcrumb a { color: #fff; font-weight: 600; }
.breadcrumb span { margin: 0 8px; opacity: 0.6; }

/* ---------- Mission/Vision blocks ---------- */
.mv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.mv-block { background: #fff; border-radius: var(--radius-lg); padding: 40px 32px; box-shadow: var(--shadow-sm); text-align: center; transition: var(--transition); border-top: 4px solid var(--brand); }
.mv-block:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.mv-block--accent { border-top-color: var(--accent); }
.mv-block__icon { font-size: 40px; margin-bottom: 14px; }
.mv-block h3 { font-size: 23px; margin-bottom: 12px; }
.mv-block p { color: var(--muted); }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--wide { grid-template-columns: 1.7fr 1fr; align-items: flex-start; }
.split__media { min-height: 400px; border-radius: var(--radius-lg); box-shadow: var(--shadow); background: linear-gradient(135deg, var(--brand), var(--brand-light)); }
.split__media--story { background: linear-gradient(135deg, var(--accent), var(--brand)); }

/* ---------- Objective / check lists ---------- */
.objective-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; }
.objective-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; }
.objective-list__check { flex: none; width: 26px; height: 26px; background: var(--bg-mint); color: var(--brand); border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.check-list li { position: relative; padding-left: 28px; margin-bottom: 12px; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--brand); font-weight: 800; }

/* ---------- Approach ---------- */
.approach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.approach-card { background: #fff; border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); transition: var(--transition); }
.approach-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.approach-card h3 { font-size: 18px; margin-bottom: 8px; color: var(--brand); }
.approach-card p { font-size: 14.5px; color: var(--muted); }

/* ---------- Tag cloud ---------- */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.tag { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 10px 22px; font-weight: 600; color: var(--body); transition: var(--transition); }
.tag:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------- Gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.gallery-album { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); color: var(--body); display: block; }
.gallery-album:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.gallery-album__img { height: 240px; background-size: cover; background-position: center; background-color: var(--bg-mint); }
.gallery-album__body { padding: 22px; }
.gallery-album__body h3 { font-size: 20px; margin-bottom: 6px; }
.gallery-album__body p { font-size: 14.5px; color: var(--muted); }
.gallery-album__count { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--brand); }

.masonry { columns: 3; column-gap: 18px; }
.masonry__item { display: block; break-inside: avoid; margin-bottom: 18px; border-radius: var(--radius); overflow: hidden; position: relative; box-shadow: var(--shadow-sm); }
.masonry__item img { transition: transform 0.6s ease; width: 100%; }
.masonry__item:hover img { transform: scale(1.06); }
.masonry__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent); color: #fff; font-size: 14px; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; background: rgba(8,16,28,0.94); display: none; align-items: center; justify-content: center; z-index: 1000; }
.lightbox.is-open { display: flex; }
.lightbox__img { max-width: 86vw; max-height: 82vh; border-radius: 10px; box-shadow: var(--shadow-lg); }
.lightbox__close { position: absolute; top: 22px; right: 30px; background: none; border: 0; color: #fff; font-size: 42px; cursor: pointer; line-height: 1; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.14); border: 0; color: #fff; font-size: 26px; width: 54px; height: 54px; border-radius: 50%; cursor: pointer; transition: var(--transition); }
.lightbox__nav:hover { background: var(--accent); color: #23180a; }
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }
.lightbox__caption { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: #fff; font-size: 15px; }

/* ---------- Sidebar ---------- */
.sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 100px; }
.sidebar__card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.sidebar__card h3 { font-size: 19px; margin-bottom: 14px; }
.sidebar__card p { font-size: 14.5px; color: var(--muted); margin-bottom: 16px; }
.sidebar__card .btn { margin-bottom: 10px; }
.sidebar__list li { border-bottom: 1px solid var(--line); }
.sidebar__list li:last-child { border-bottom: 0; }
.sidebar__list a { display: block; padding: 11px 0; font-weight: 600; color: var(--ink); font-size: 15px; }
.sidebar__list a:hover { color: var(--brand); padding-left: 6px; }
.detail-list { margin-bottom: 18px; }
.detail-list li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.detail-list strong { color: var(--ink); }
.detail-list span { color: var(--muted); }

.share-row { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.share-row span { font-weight: 700; color: var(--ink); }
.share-row a { padding: 8px 18px; border-radius: 999px; background: var(--bg-mint); font-weight: 600; font-size: 14px; }
.share-row a:hover { background: var(--brand); color: #fff; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: flex-start; }
.contact-list { margin: 26px 0; display: flex; flex-direction: column; gap: 18px; }
.contact-list li { display: flex; gap: 16px; align-items: flex-start; }
.contact-list__icon { flex: none; width: 46px; height: 46px; background: var(--bg-mint); border-radius: 12px; display: grid; place-items: center; font-size: 20px; }
.contact-list strong { color: var(--ink); }
.contact-list p { color: var(--muted); font-size: 15px; }
.contact-form-wrap { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 40px; }
.contact-form h3 { font-size: 24px; margin-bottom: 22px; }
.brand-statement { background: var(--bg-mint); border-left: 5px solid var(--accent); border-radius: var(--radius); padding: 34px 38px; font-family: var(--font-head); font-size: 21px; line-height: 1.6; color: var(--ink); }
.brand-statement cite { display: block; margin-top: 16px; font-family: var(--font-body); font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-dark); }

.contact-map { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.contact-map iframe { display: block; width: 100%; height: 440px; border: 0; }
.contact-map__directions { text-align: center; margin-top: 26px; }
@media (max-width: 760px) { .contact-map iframe { height: 320px; } }

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 7px; }
.field input, .field textarea, .field select {
    width: 100%; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px;
    font-family: var(--font-body); font-size: 15px; color: var(--ink); background: var(--bg-soft); transition: var(--transition);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(18,59,99,0.12); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ---------- Donate ---------- */
.donate-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 30px; }
.donate-tier { background: #fff; border: 2px solid var(--line); border-radius: var(--radius); padding: 24px; cursor: pointer; text-align: center; transition: var(--transition); font-family: var(--font-body); }
.donate-tier:hover, .donate-tier.is-active { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-4px); }
.donate-tier strong { display: block; font-family: var(--font-head); font-size: 30px; color: var(--brand); margin-bottom: 6px; }
.donate-tier span { font-size: 13.5px; color: var(--muted); }
.donate-form { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 34px; max-width: 720px; margin: 0 auto 40px; }
.donate-note { font-size: 13.5px; color: var(--muted); margin-top: 14px; text-align: center; }
.donate-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.donate-method { background: #fff; border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); }
.donate-method h3 { font-size: 19px; margin-bottom: 10px; }
.donate-method p { font-size: 14.5px; color: var(--muted); }

/* ---------- Pre-footer ---------- */
.pre-footer { background: var(--accent); color: #23180a; padding: 46px 0; }
.pre-footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.pre-footer h3 { font-size: 26px; color: #23180a; }
.pre-footer p { color: #4a3a12; }
.subscribe-form { display: flex; gap: 12px; flex-wrap: wrap; }
.subscribe-form input { padding: 14px 18px; border: 0; border-radius: 999px; min-width: 280px; font-family: var(--font-body); font-size: 15px; }
.subscribe-form .btn--accent { background: #23180a; color: #fff; }
.subscribe-form .btn--accent:hover { background: #000; color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: #0b2138; color: #aebccc; padding-top: 70px; }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 50px; }
.brand--footer .brand__text strong { color: #fff; }
.footer-col p { font-size: 14.5px; margin-bottom: 14px; }
.footer-col h4 { color: #fff; font-family: var(--font-body); font-size: 16px; margin-bottom: 18px; letter-spacing: 0.4px; }
.footer-col ul li { margin-bottom: 11px; }
.footer-col ul a { color: #aebccc; font-size: 14.5px; }
.footer-col ul a:hover { color: var(--accent); }
.footer-contact li { display: flex; gap: 10px; margin-bottom: 12px; font-size: 14.5px; }
.footer-contact a { color: #aebccc; }
.footer-contact a:hover { color: var(--accent); }
.footer-legal { font-size: 13px; color: #7c8b9c; }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 22px 0; }
.site-footer__bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13.5px; }
.footer-motto { font-family: var(--font-head); font-style: italic; color: var(--accent); }
.site-footer__bottom a { color: #7c8b9c; }
.site-footer__bottom a:hover { color: #fff; }

/* ---------- Floating donate ---------- */
/* Left side, not right: Tawk.to's chat bubble docks bottom-right and would
   otherwise sit directly on top of this button. Hidden until the visitor
   scrolls past the hero (which has its own prominent donate CTA) so it
   doesn't collide with the hero's "Sponsor a Child" button either. */
.floating-donate {
    position: fixed; bottom: 24px; left: 24px; z-index: 90; background: var(--accent); color: #23180a;
    font-weight: 800; padding: 14px 22px; border-radius: 999px; box-shadow: var(--shadow-lg); font-size: 15px;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
.floating-donate.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.floating-donate:hover { background: var(--accent-dark); color: #23180a; transform: translateY(-3px); }

/* ---------- Empty / error ---------- */
.empty-state { text-align: center; color: var(--muted); font-size: 18px; padding: 40px 0; }
.error-page { text-align: center; padding: 120px 0; }
.error-code { font-family: var(--font-head); font-size: 120px; font-weight: 800; color: var(--brand); line-height: 1; }
.error-page h1 { font-size: 34px; margin: 10px 0 14px; }
.error-page p { color: var(--muted); margin-bottom: 26px; }

/* ---------- Reveal animation ---------- */
[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .program-grid, .program-grid--full, .project-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .values-grid { grid-template-columns: repeat(3, 1fr); }
    .approach-grid { grid-template-columns: repeat(2, 1fr); }
    .about-home__inner, .split, .split--wide, .contact-grid { grid-template-columns: 1fr; }
    .about-home__media { min-height: 360px; margin-bottom: 20px; }
    .mv-grid { grid-template-columns: 1fr; }
    .feature-post { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .masonry { columns: 2; }
}
/* Nav collapses to the off-canvas menu well above the general mobile
   breakpoint below: with 9 links plus a Donate button, the inline nav has
   nowhere near enough room past ~760px and instead of wrapping it overflows
   the header, squeezing the brand text into multiple lines and pushing the
   Donate button off the visible viewport. */
@media (max-width: 1320px) {
    .nav-toggle { display: flex; }
    .main-nav {
        position: fixed; inset: 0 0 0 auto; width: min(320px, 84%);
        /* Glassmorphism: translucent + blurred so the page content behind
           genuinely shows through frosted, rather than a flat white panel. */
        background: rgba(255,255,255,0.62);
        backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
        border-left: 1px solid rgba(255,255,255,0.5);
        flex-direction: column; align-items: stretch; padding: 90px 24px 30px; gap: 4px;
        transform: translateX(100%); transition: transform var(--transition); box-shadow: var(--shadow-lg); z-index: 105;
    }
    .main-nav.is-open { transform: translateX(0); }
    .main-nav a { padding: 13px 14px; border-bottom: 1px solid rgba(18,59,99,0.12); }
    .main-nav .nav-donate { margin-top: 14px; text-align: center; }
}
@media (max-width: 760px) {
    .section { padding: 60px 0; }
    .stats__grid { grid-template-columns: 1fr 1fr; gap: 20px 0; }
    .stat:nth-child(2n) { border-right: 0; }
    .program-grid, .program-grid--full, .project-grid, .blog-grid, .gallery-grid, .values-grid, .approach-grid, .donate-tiers, .donate-methods, .mv-cards, .objective-list, .form-row { grid-template-columns: 1fr; }
    .masonry { columns: 1; }
    .topbar__contacts { font-size: 12px; gap: 12px; }
    .topbar__socials { display: none; }
    .hero { min-height: 78vh; }
    .pre-footer__inner { flex-direction: column; align-items: flex-start; }
    .subscribe-form input { min-width: 0; flex: 1; }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .site-footer__grid { grid-template-columns: 1fr; }
    .brand__text small { display: none; }
    .btn { width: 100%; }
    .hero__actions .btn, .cta-banner__actions .btn { width: auto; flex: 1; min-width: 150px; }
}

html, body { overflow-x: clip; }

.btn--sm { padding: 9px 18px; font-size: 13.5px; }

/* ---------- Action boxes (overlapping hero) ---------- */
.actions-strip { position: relative; z-index: 5; margin-top: -70px; }
.actions-strip__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg, 0 20px 50px rgba(13,43,73,0.18)); }
.action-box { background: #fff; padding: 36px 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.action-box--accent { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; }
.action-box__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(18,59,99,0.08); color: var(--brand); }
.action-box--accent .action-box__icon { background: rgba(255,255,255,0.18); color: #fff; }
.action-box__icon svg { width: 26px; height: 26px; }
.action-box h3 { font-size: 20px; }
.action-box p { font-size: 14.5px; opacity: 0.85; flex: 1; }
.action-box--accent p { color: rgba(255,255,255,0.92); }

/* ---------- Featured cause ---------- */
.featured-cause__inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.featured-cause__media { display: block; min-height: 400px; border-radius: 18px; background-size: cover; background-position: center; position: relative; box-shadow: var(--shadow); }
.featured-cause__tag { position: absolute; top: 18px; left: 18px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; }
.featured-cause__meta { color: var(--muted-ink, #5a6b7d); font-weight: 600; font-size: 14px; margin: 14px 0 22px; }
.featured-cause__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Gallery strip ---------- */
.gallery-strip { padding: 80px 0 0; }
.gallery-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.gallery-strip__item { display: block; aspect-ratio: 4 / 3; background-size: cover; background-position: center; transition: transform 0.35s, filter 0.35s; }
.gallery-strip__item:hover { transform: scale(1.03); filter: brightness(1.08); z-index: 2; }

/* ---------- Volunteer band ---------- */
.volunteer-band { background: linear-gradient(120deg, var(--accent), var(--accent-dark)); color: #fff; padding: 56px 0; }
.volunteer-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.volunteer-band h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 8px; }
.volunteer-band p { color: rgba(255,255,255,0.92); max-width: 640px; }

/* ---------- Stats band ---------- */
.stats-band {
    background: var(--brand-dark); color: #fff; padding: 64px 0;
    background-image: radial-gradient(circle at 15% 20%, rgba(255,255,255,0.06), transparent 40%),
                       radial-gradient(circle at 85% 80%, rgba(200,150,30,0.10), transparent 45%);
}
.stats-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; text-align: center; }
.stats-band .stat {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 168px; padding: 26px 20px; border-right: 0;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius-lg, 18px); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    transition: transform var(--transition), background var(--transition);
}
.stats-band .stat:hover { transform: translateY(-4px); background: rgba(255,255,255,0.1); }
.stats-band .stat__number {
    font-family: var(--font-display, inherit); font-size: clamp(19px, 2.3vw, 26px); font-weight: 800;
    color: var(--accent); line-height: 1.25;
}
.stats-band .stat__label { color: rgba(255,255,255,0.8); font-weight: 600; margin-top: 8px; font-size: 13.5px; line-height: 1.4; }

/* ---------- Testimonials ---------- */
.testimonials { background: var(--brand-dark); color: #fff; }
.testimonials .section__title { color: #fff; }
.testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.testimonial-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 34px 28px 28px; position: relative; }

/* Testimonials carousel */
.testimonials-carousel { position: relative; display: flex; align-items: stretch; gap: 12px; }
.testimonials-carousel__track {
    display: flex; gap: 26px; flex: 1 1 auto; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; padding: 28px 2px 6px; scrollbar-width: none; -ms-overflow-style: none;
}
.testimonials-carousel__track::-webkit-scrollbar { display: none; }
.testimonials-carousel__slide { flex: 0 0 calc((100% - 52px) / 3); scroll-snap-align: start; margin: 0; }
.testimonials-carousel__arrow {
    flex-shrink: 0; align-self: center; width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); color: #fff;
    font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: var(--transition);
}
.testimonials-carousel__arrow:hover { background: var(--accent); border-color: transparent; color: #23180a; }
.testimonials-carousel__arrow:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.testimonials-carousel__dots { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }
.testimonials-carousel__dot { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,0.35); border: 0; padding: 0; cursor: pointer; transition: var(--transition); }
.testimonials-carousel__dot:hover { background: rgba(255,255,255,0.6); }
.testimonials-carousel__dot.is-active { width: 26px; background: var(--accent); }
@media (max-width: 900px) {
    .testimonials-carousel__slide { flex-basis: calc((100% - 26px) / 2); }
}
@media (max-width: 620px) {
    .testimonials-carousel__slide { flex-basis: 84%; }
    .testimonials-carousel__arrow { display: none; }
}
.testimonial-card__quote { position: absolute; top: -22px; left: 26px; width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 30px; font-weight: 800; line-height: 1; padding-top: 10px; }
.testimonial-card blockquote { font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,0.92); margin-bottom: 18px; }
.testimonial-card figcaption strong { display: block; color: var(--accent); }
.testimonial-card figcaption span { font-size: 13.5px; color: rgba(255,255,255,0.7); }

@media (max-width: 900px) {
    .actions-strip__grid { grid-template-columns: 1fr; }
    .featured-cause__inner { grid-template-columns: 1fr; gap: 30px; }
    .featured-cause__media { min-height: 280px; }
    .gallery-strip__grid { grid-template-columns: repeat(2, 1fr); }
    .stats-band__grid { grid-template-columns: repeat(2, 1fr); }
    .testimonials__grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- Icons ---------- */
.topbar__icon svg { width: 14px; height: 14px; vertical-align: -2px; }
.footer-contact__icon { flex: none; margin-top: 3px; }
.footer-contact__icon svg { width: 16px; height: 16px; color: var(--accent); }
.contact-list__icon svg { width: 22px; height: 22px; color: var(--brand); }
.mv-block__icon { width: 66px; height: 66px; margin: 0 auto 16px; background: var(--bg-mint); color: var(--brand); border-radius: 18px; display: grid; place-items: center; font-size: 0; }
.mv-block__icon svg { width: 32px; height: 32px; }
.mv-block--accent .mv-block__icon { color: var(--accent-dark); }
.floating-donate { display: inline-flex; align-items: center; gap: 8px; }
.floating-donate__icon svg { width: 17px; height: 17px; }

/* ---------- Editable imagery ---------- */
.hero__bg--photo { background-size: cover; background-position: center; animation: none; }
.hero__bg--photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(13,43,73,0.85), rgba(18,59,99,0.55)); }

.page-hero--photo { background-size: cover; background-position: center; }
.page-hero--photo .page-hero__overlay { background: linear-gradient(120deg, rgba(13,43,73,0.85), rgba(18,59,99,0.6)); }

/* ---------- Accessibility & motion ---------- */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, .filter-btn:focus-visible { outline-offset: 3px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--brand-dark); color: #fff; padding: 12px 20px; z-index: 999; border-radius: 0 0 10px 0; font-weight: 700; }
.skip-link:focus { left: 0; color: #fff; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Selection & scrollbar polish ---------- */
::selection { background: var(--brand); color: #fff; }

/* =========================================================================
   PREMIUM REFINEMENT LAYER
   Appended last so it refines the base theme without rewriting it.
   Covers: typography & readability, grid/whitespace consistency, design-system
   consistency, micro-interactions, accessibility and performance.
   ========================================================================= */

/* ---------- 1. Typography & readability ---------- */

/* Tabular figures for stats/dates, and proper kerning/ligatures throughout. */
body { font-feature-settings: "kern" 1, "liga" 1; text-rendering: optimizeLegibility; }
.stat__number, .stat-card__num, .blog-card__date, .project-card__meta,
.featured-cause__meta { font-variant-numeric: tabular-nums; }

/* Optical sizing: large display text needs tighter tracking and leading;
   small text needs the opposite to stay legible. */
.hero__title, .page-hero h1, .cta-banner h2, .error-code {
    letter-spacing: -0.022em; line-height: 1.08;
}
.section__title, .volunteer-band h2, .featured-cause__content h2 {
    letter-spacing: -0.015em; line-height: 1.15; text-wrap: balance;
}
h3, .program-card h3, .project-card__body h3, .blog-card__body h3 {
    letter-spacing: -0.008em; text-wrap: balance;
}
.eyebrow, .hero__eyebrow { font-variant-numeric: tabular-nums; }

/* Cap reading measure so long paragraphs stay comfortable. */
.rich-text p, .rich-text li, .section__subtitle, .lead { max-width: var(--measure); }
.section__subtitle, .section__head .section__subtitle { margin-inline: auto; }
.rich-text { line-height: 1.72; }
.rich-text p + p { margin-top: 1em; }
/* Avoid orphaned single words on headings/leads. */
.lead, .hero__subtitle, .section__subtitle { text-wrap: pretty; }

/* ---------- 2. Design-system consistency ---------- */

/* Buttons: consistent pill, optical padding, and a real pressed state. */
.btn { will-change: transform; }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--primary:hover, .btn--accent:hover { box-shadow: var(--shadow); }

/* Cards share one elevation language: rest → hover lift → shadow bloom. */
.program-card, .project-card, .blog-card, .approach-card, .value-chip,
.gallery-album, .mv-block, .sidebar__card, .donate-method, .action-box {
    transition: transform var(--transition), box-shadow var(--transition),
                border-color var(--transition);
}
.program-card:hover, .project-card:hover, .blog-card:hover,
.approach-card:hover, .gallery-album:hover, .mv-block:hover {
    transform: translateY(-6px);
}

/* Icon tiles: unified sizing + a subtle brand wash on hover. */
.program-card__icon, .action-box__icon, .mv-block__icon, .quick-action span {
    transition: transform var(--transition), background var(--transition), color var(--transition);
}
.program-card:hover .program-card__icon,
.action-box:hover .action-box__icon,
.mv-block:hover .mv-block__icon { transform: scale(1.08) rotate(-3deg); }

/* ---------- 3. Motion & micro-interactions ---------- */

/* Images inside cards gently scale on hover — the container clips the overflow
   so the card edge stays crisp. */
.project-card__img, .blog-card__img, .gallery-album__img, .featured-cause__media,
.masonry__item img, .gallery-strip__item {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card:hover .project-card__img,
.blog-card:hover .blog-card__img,
.gallery-album:hover .gallery-album__img,
.masonry__item:hover img,
.gallery-strip__item:hover { transform: scale(1.06); }
.project-card, .blog-card, .gallery-album, .masonry__item { overflow: hidden; }

/* Animated underline for inline prose links — purposeful, not decorative. */
.rich-text a:not(.btn) {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
    transition: background-size var(--transition), color var(--transition);
    padding-bottom: 1px;
}
.rich-text a:not(.btn):hover { background-size: 100% 1.5px; }

/* "Read more" arrows nudge forward to signal direction. */
.link-arrow, .program-card__link { display: inline-block; transition: transform var(--transition), color var(--transition); }
.blog-card:hover .link-arrow, .program-card:hover .program-card__link { transform: translateX(4px); }

/* Nav links get an underline that grows from the centre. */
.main-nav a:not(.nav-donate) { position: relative; }
.main-nav a:not(.nav-donate)::after {
    content: ""; position: absolute; left: 50%; bottom: 4px; height: 2px; width: 0;
    background: var(--accent); border-radius: 2px;
    transition: width var(--transition), left var(--transition);
}
.main-nav a:not(.nav-donate):hover::after { width: 60%; left: 20%; }

/* ---------- 4. Accessibility & trust ---------- */

/* Never remove the focus ring — make it unmistakable and on-brand. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.site-footer :focus-visible, .cta-banner :focus-visible,
.stats-band :focus-visible, .hero :focus-visible { outline-color: #fff; }

/* Larger touch targets on coarse pointers (WCAG 2.5.5). */
@media (pointer: coarse) {
    .main-nav a, .footer-col a, .sidebar__list a, .btn { min-height: 44px; }
    .btn { padding-block: 14px; }
}

/* Respect users who ask for less motion — extends the base rule to the
   transforms and hover effects introduced above. */
@media (prefers-reduced-motion: reduce) {
    .program-card:hover, .project-card:hover, .blog-card:hover,
    .approach-card:hover, .gallery-album:hover, .mv-block:hover,
    .btn:active { transform: none !important; }
    .project-card:hover .project-card__img,
    .blog-card:hover .blog-card__img,
    .gallery-album:hover .gallery-album__img,
    .masonry__item:hover img,
    .gallery-strip__item:hover { transform: none !important; }
    .main-nav a:not(.nav-donate)::after { transition: none; }
}

/* ---------- 5. Performance ---------- */

/* Skip layout/paint work for long below-the-fold sections until they are
   near the viewport. contain-intrinsic-size prevents scrollbar jumping. */
.testimonials, .partners, .gallery-strip, .impact-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* Hint the compositor only while an element is actually animating. */
.hero__slide.is-active .hero__bg--photo { will-change: transform; }

/* ---------- 6. Print ---------- */
@media print {
    .topbar, .site-header, .site-footer, .pre-footer, .floating-donate,
    .hero__arrow, .hero__dots, .hero__scroll, .ms-edit-topbar, .ms-sidebar { display: none !important; }
    body { font-size: 12pt; color: #000; }
    .section { padding: 12pt 0; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}