/* =========================================================
   Aashirbad Foundation - Global Styles
   Organized for readability and long-term maintenance
   ========================================================= */
:root {
    --color-primary: #0a1a3b;
    --color-primary-dark: #050f28;
    --color-secondary: #0f233f;
    --color-accent: #d4af37;
    /* The brand gold is only 2.1:1 on white, so it fails WCAG AA (4.5:1) as
       text. Use --color-accent on dark backgrounds and for fills, borders, and
       other decoration; use --color-accent-text for gold text or focus rings
       on a light background, where it measures 5.05:1 on #fff and 4.7:1 on
       the muted #f4f7fb. */
    --color-accent-text: #836d22;
    --color-error: #b3261e;
    --color-bg: #f4f7fb;
    --color-text: #0f172a;
    --color-muted: #4b5567;
    --radius-lg: 1.5rem;
    --radius-md: 1rem;
    --radius-sm: 0.65rem;
    --shadow-soft: 0 20px 60px rgba(20, 40, 60, 0.09);
    --shadow-card: 0 12px 35px rgba(15, 23, 42, 0.08);
    /* Resting and raised elevations for cards. These existed as five
       hand-written near-duplicates (0.10 vs 0.12 alpha, 16/38 vs 18/40 px). */
    --shadow-rest: 0 12px 30px rgba(10, 26, 59, 0.11);
    --shadow-raised: 0 17px 39px rgba(10, 26, 59, 0.16);
    /* Text on the dark navy surfaces. Was #f7fbff hard-coded 13 times. */
    --color-on-dark: #f7fbff;
    /* The one dark-surface gradient. Only the light origin varies per section,
       so the heroes and the two home page bands read as the same material. */
    --gradient-dark: #123169 0%, #0a1a3b 55%, #070f26 100%;
    /* Diagonal scrim laid over every dark surface. It was on the two heroes
       only (and at two different alphas, 0.60 and 0.55), which left the home
       page bands visibly lighter than everything else. */
    --scrim-dark: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(7, 17, 40, 0.55));
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family:
        'Inter',
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;
    color: var(--color-text);
    background-color: #fff;
    line-height: 1.6;
    min-height: 100vh;
    scroll-behavior: smooth;
}

h1,
h2,
h3,
h4 {
    color: var(--color-secondary);
    margin: 0 0 0.6rem;
    line-height: 1.2;
    font-weight: 700;
}

h1 {
    font-size: clamp(2.2rem, 2vw + 1.4rem, 3.4rem);
}

h2 {
    font-size: clamp(1.8rem, 1.5vw + 1rem, 2.6rem);
}

h3 {
    font-size: 1.35rem;
}

p {
    margin: 0 0 1rem;
    color: var(--color-text);
    line-height: 1.68;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--color-primary);
}

img {
    display: block;
    max-width: 100%;
    border-radius: var(--radius-md);
}

.container {
    width: min(1200px, 92vw);
    margin: 0 auto;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: #fff;
    color: var(--color-text);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--color-primary);
    font-weight: 600;
    z-index: 1100;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 1rem;
}

.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
    /* The bright gold is 2.1:1 on white, under the 3:1 WCAG 1.4.11 wants for a
       focus indicator. The dark gold carries the light backgrounds and the white
       halo keeps the ring visible on the dark heroes and footer. */
    outline: 3px solid var(--color-accent-text);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.85);
}

.section {
    padding: 4rem 0;
}

.section.muted {
    background: var(--color-bg);
}

.section-heading {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2.5rem;
}

.page-hero {
    background: linear-gradient(180deg, #eff3ff 0%, #fff 85%);
    padding: 5rem 0 3.5rem;
    text-align: center;
}

/* Page heroes are full-bleed: a 1440px viewport at 2x DPR asks for roughly
   2880px of image. The available photographs top out at 2048px, so every
   photographic hero was upscaled and looked soft no matter how it was encoded.
   These heroes now use the brand gradient instead, which is resolution
   independent and matches the home page. Photographs are kept where they are
   genuinely sharp: the card grids and the home hero image.

   To restore photographic heroes, add a background-image to .hero-brand (or a
   per-page class) with a source at least 2880px on the long edge. */
/* Photographic variant of the brand hero. The source is 2048px against the
   ~2880px a full-bleed hero wants at 1440/2x, so it sits at about 1.41x on a
   retina display. That is well short of the 3.0x the old heroes ran at, and the
   dark gradient over it hides most of what remains, but it is not as crisp as
   the plain gradient. Remove hero-photo-bg from the section to fall back. */
.page-hero.hero-brand.hero-photo-bg {
    background:
        linear-gradient(180deg, rgba(6, 12, 30, 0.62) 0%, rgba(6, 12, 30, 0.72) 55%, rgba(6, 12, 30, 0.82) 100%),
        url('../images/campaigns/classroom-study-hero.9d9a816f.webp') center/cover no-repeat;
}

.page-hero.hero-brand {
    color: #fff;
    text-align: left;
    background:
        radial-gradient(130% 130% at 15% 20%, var(--gradient-dark));
}

.page-hero.hero-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--scrim-dark);
    pointer-events: none;
}

.page-hero.hero-brand {
    position: relative;
    overflow: hidden;
}

.page-hero.hero-brand > * {
    position: relative;
    z-index: 1;
}

.page-hero.hero-brand .eyebrow,
.page-hero.hero-brand p,
.page-hero.hero-brand h1 {
    color: rgba(255, 255, 255, 0.95);
}

.page-hero.hero-brand .eyebrow {
    color: rgba(255, 255, 255, 0.8);
}

.page-hero.hero-brand .hero-actions {
    justify-content: flex-start;
}

.narrow {
    max-width: 760px;
    margin: 0 auto;
}

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2.5rem;
    align-items: center;
}

.hero {
    position: relative;
    padding: 5rem 0 4rem;
    min-height: 70vh;
    color: var(--color-on-dark);
    text-align: left;
    background: radial-gradient(130% 130% at 15% 20%, var(--gradient-dark));
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--scrim-dark);
    pointer-events: none;
}

.hero-subline {
    font-size: clamp(1.1rem, 0.7vw + 1rem, 1.35rem);
    color: rgba(255, 255, 255, 0.9);
    margin: 1rem 0;
    line-height: 1.4;
    max-width: 640px;
}

.home-hero .hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.4rem;
    align-items: center;
}

.home-hero h1 {
    line-height: 1.08;
    font-size: clamp(2.6rem, 3vw + 1.4rem, 4rem);
    letter-spacing: -0.02em;
}

.hero-copy h1,
.hero-copy p {
    color: var(--color-on-dark);
}

.hero-copy-panel {
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.hero-visual {
    display: grid;
    gap: 1rem;
    align-items: start;
    max-width: 720px;
    justify-self: end;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(240, 180, 41, 0.16);
    border: 1px solid rgba(240, 180, 41, 0.45);
    color: var(--color-on-dark);
    font-weight: 700;
    font-size: 0.95rem;
    width: fit-content;
}

.hero-photo {
    width: 100%;
    max-width: 680px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}

.hero-photo img {
    width: 100%;
    height: auto;
    display: block;
}

.hero-impact-card {
    background: rgba(255, 255, 255, 0.94);
    color: var(--color-text);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-top: 3px solid var(--color-accent);
}

.hero-impact-card .hero-stats {
    margin: 0.25rem 0 1rem;
}

.hero-impact-card .hero-stats dt {
    color: var(--color-primary);
    font-size: 1.9rem;
    font-weight: 800;
}

.hero-impact-card .hero-stats dd {
    color: var(--color-muted);
}

.cta-support {
    margin: 0.4rem 0 0;
    color: rgba(247, 251, 255, 0.9);
    font-weight: 600;
}

.hero-stats {
    margin: 1.2rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.hero-stats dt {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-stats dd {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.stat-icon {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    background: rgba(10, 26, 59, 0.03);
    border-radius: 9px;
    padding: 5px;
}

.stat-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.stat-icon svg rect,
.stat-icon svg polygon,
.stat-icon svg line,
.stat-icon svg circle {
    fill: none;
}

.hero-actions,
.cta .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.2rem;
}

.cta .hero-actions {
    justify-content: center;
}

.hero .hero-actions {
    justify-content: flex-start;
}

.cta-actions {
    gap: 0.75rem;
}

.cta-actions .btn {
    min-width: 160px;
}

.text-link {
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.text-link:hover,
.text-link:focus {
    color: var(--color-accent-text);
}

.cta .text-link,
.site-footer .text-link {
    color: rgba(247, 251, 255, 0.9);
}

.cta .text-link:hover,
.cta .text-link:focus,
.site-footer .text-link:hover,
.site-footer .text-link:focus {
    color: var(--color-accent);
}

.cta-actions .text-link {
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

@media (max-width: 640px) {
    .cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

.hero-secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
}

.hero-secondary:hover,
.hero-secondary:focus {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.9rem 1.8rem;
    font-weight: 600;
    border: 2px solid transparent;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}

.btn-primary {
    background: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-soft);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    color: #fff;
}

.hero .btn-primary,
.page-hero.hero-brand .btn-primary,
.origin-story .btn-primary {
    background: var(--color-accent);
    color: #0a1a3b;
    border-color: var(--color-accent);
    box-shadow: 0 8px 30px rgba(212, 175, 55, 0.35);
    font-weight: 700;
}

.hero .btn-primary:hover,
.hero .btn-primary:focus,
.page-hero.hero-brand .btn-primary:hover,
.page-hero.hero-brand .btn-primary:focus,
.origin-story .btn-primary:hover,
.origin-story .btn-primary:focus {
    background: #e6c76a;
    color: #0a1a3b;
}

.btn-primary:active {
    background: #08132e;
    color: #fff;
    transform: translateY(0);
}

.btn-outline {
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    background: transparent;
}

.btn-outline.hero-secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.65);
}

.btn-outline.hero-secondary:hover,
.btn-outline.hero-secondary:focus {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.btn-outline:hover,
.btn-outline:focus,
.btn-ghost:hover,
.btn-ghost:focus {
    background: rgba(10, 26, 59, 0.12);
    color: var(--color-primary);
}

.scroll-indicator {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-accent);
    font-size: 1.35rem;
    text-decoration: none;
    animation: bounce 2.4s infinite;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(240, 180, 41, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 25px rgba(2, 6, 23, 0.4);
}

.eyebrow {
    text-transform: uppercase;
    /* 0.12em, not the 0.2em this started at: 0.2em at 13px hurt legibility. */
    letter-spacing: 0.12em;
    font-size: 0.82rem;
    color: var(--color-accent-text);
    margin-bottom: 0.5rem;
}

.lead {
    font-size: 1.1rem;
    color: var(--color-muted);
}

.stat-grid dd,
.checklist li,
.pillars li {
    margin: 0;
    color: var(--color-muted);
}

.band-header {
    margin-bottom: 1rem;
}

.programs-snapshot {
    background: #fff;
}

.programs-container {
    max-width: 1280px;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.program-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: var(--shadow-rest);
    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

.program-card.featured {
    border-color: rgba(10, 26, 59, 0.18);
    box-shadow: var(--shadow-raised);
}

.program-card:hover,
.program-card:focus {
    box-shadow: var(--shadow-raised);
    transform: translateY(-3px);
    border-color: rgba(10, 26, 59, 0.16);
}

.program-card:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

.program-media {
    position: relative;
    width: 100%;
}

.program-photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    filter: saturate(1.02) brightness(0.98);
    display: block;
}

.program-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.2rem 1.2rem 1.4rem;
    flex: 1;
}

.program-body h3 {
    margin: 0 0 0.25rem;
}

.program-summary {
    margin: 0;
    color: var(--color-muted);
    line-height: 1.5;
}

.program-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.35rem;
    color: var(--color-text);
}

.program-bullets li {
    position: relative;
    padding-left: 1.1rem;
}

.program-bullets li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-accent-text);
    font-weight: 700;
}

.program-impact {
    margin: 0;
    color: var(--color-primary);
    font-weight: 700;
    margin-top: 0.15rem;
}

.program-cta {
    margin-top: auto;
    display: inline-flex;
    width: fit-content;
    padding-inline: 1.3rem;
    padding-block: 0.8rem;
}

.program-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: rgba(10, 26, 59, 0.07);
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.85rem;
}

@media (max-width: 820px) {
    .program-card.featured {
        flex: 1 1 auto;
    }
}

.impact-overview {
    background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 90%);
}

.impact-cards,
.impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
}

.stat-card {
    text-align: center;
    background: #fff;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 1.8rem 1.6rem;
    box-shadow: var(--shadow-rest);
}

.stat-card h3 {
    margin: 0;
    font-size: 2.2rem;
    color: var(--color-primary);
}

.stat-card p {
    margin: 0.3rem 0 0;
    color: var(--color-muted);
}

.trust-note {
    background: #fff;
}

.origin-story {
    position: relative;
    color: var(--color-on-dark);
    background:
        radial-gradient(130% 130% at 12% 18%, var(--gradient-dark));
    overflow: hidden;
    padding: 8rem 0 7rem;
}

/* These two bands are full-bleed, so at 1440px they wanted ~2880px of image on a
   2x display. They were running on hero-students.webp at 960px: 1.5x upscale even
   at 1x and 3.0x at 2x, which is why they looked soft. Same reasoning as the page
   heroes, so they use the brand gradient. To put a photograph back, add a
   background-image here with a source at least 2880px on the long edge. */
.origin-story.origin-story-alt {
    background:
        radial-gradient(130% 130% at 88% 18%, var(--gradient-dark));
}


.origin-story::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--scrim-dark);
    pointer-events: none;
}

.origin-wrapper {
    position: relative;
    z-index: 1;
    max-width: 768px;
    padding-inline: clamp(1.75rem, 6.5vw, 3.75rem);
    text-align: left;
}

.origin-story .band-header h2,
.origin-story .band-header p,
.origin-story p {
    color: var(--color-on-dark);
}

.origin-story .section-divider {
    height: 1px;
    width: 100%;
    background: rgba(247, 251, 255, 0.3);
    margin-bottom: 1.5rem;
}

.origin-content {
    max-width: 960px;
    line-height: 1.7;
}

.origin-eyebrow {
    letter-spacing: 0.12em;
    font-size: 0.8rem;
}

.origin-title {
    font-size: clamp(2.3rem, 1.4vw + 1.6rem, 2.8rem);
    font-weight: 700;
}

.origin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.origin-actions .btn-outline {
    border-color: rgba(255, 255, 255, 0.75);
    color: var(--color-on-dark);
}

.origin-actions .btn-outline:hover,
.origin-actions .btn-outline:focus {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-on-dark);
}

.community-form .btn {
    width: fit-content;
}

.community-form .form-feedback {
    min-height: 1.1rem;
}

.community-card .checklist {
    margin: 0.4rem 0 0.2rem;
}

.sponsor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1rem 0 1.2rem;
}

.mini-card {
    margin: 0;
    padding: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: var(--radius-md);
    background: #f8f9fd;
}

.mini-card h4 {
    margin: 0 0 0.35rem;
    color: var(--color-primary);
}

.metrics .eyebrow.center {
    text-align: center;
}

.checklist,
.pillars {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}

.checklist li::before {
    content: '✔';
    color: var(--color-primary);
    margin-right: 0.5rem;
}

.pillars li strong {
    color: var(--color-text);
}

.story-media figcaption {
    margin-top: 0.5rem;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.cta {
    background: linear-gradient(120deg, #061733, var(--color-primary));
    color: #fff;
    text-align: center;
    padding: 3.15rem 0;
}

.cta-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
}

@media (max-width: 768px) {
    .cta-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

.cta h2,
.cta p {
    color: #fff;
}

.cta .btn.ghost {
    border-color: #fff;
    color: #fff;
}

.cta .btn.ghost:hover,
.cta .btn.ghost:focus {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.cta .btn.ghost:active {
    background: rgba(255, 255, 255, 0.28);
}

.cta .btn-outline {
    border-color: #fff;
    color: #fff;
}

.cta .btn-outline:hover,
.cta .btn-outline:focus {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.cta .btn-outline:active {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.cta .btn-primary,
.site-footer .btn-primary {
    background: var(--color-accent);
    color: #0a1a3b;
    border-color: var(--color-accent);
    box-shadow: none;
}

.cta .btn-primary:hover,
.cta .btn-primary:focus,
.site-footer .btn-primary:hover,
.site-footer .btn-primary:focus {
    background: #e6c76a;
    color: #0a1a3b;
}

.site-footer .btn-outline {
    border-color: var(--color-on-dark);
    color: var(--color-on-dark);
}

.site-footer .btn-outline:hover,
.site-footer .btn-outline:focus {
    background: rgba(247, 251, 255, 0.12);
    color: var(--color-on-dark);
}

/* Navigation */
.site-header {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(12px);
}

.nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    gap: 1rem;
}

.logo {
    font-weight: 700;
    font-size: 1.1rem;
}

.logo img {
    height: clamp(68px, 7vw, 104px);
    width: auto;
    display: block;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0;
    align-items: center;
}

.nav-links a {
    padding: 0.4rem 0.6rem;
    border-radius: 999px;
    font-weight: 500;
    color: var(--color-secondary);
    position: relative;
}

.nav-links a.active,
.nav-links a[aria-current='page'] {
    color: var(--color-primary);
    font-weight: 600;
}

.nav-links a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.2rem;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    border-radius: 999px;
    transform: translateX(-50%);
    opacity: 0;
    transition:
        width 0.2s ease,
        opacity 0.2s ease;
}

.nav-links a:hover::after,
.nav-links a:focus::after,
.nav-links a.active::after,
.nav-links a[aria-current='page']::after {
    width: 70%;
    opacity: 1;
}

.nav-donate .btn {
    padding: 0.7rem 1.4rem;
    box-shadow: none;
    background: var(--color-accent);
    color: #0a1a3b;
    border-color: var(--color-accent);
}

.nav-links .btn::after {
    display: none;
}

.nav-donate .btn:hover,
.nav-donate .btn:focus {
    background: #e6c76a;
    border-color: #e6c76a;
    color: #0a1a3b;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.nav-toggle span {
    width: 25px;
    height: 2px;
    background: var(--color-text);
}

/* Cards & grids */
.card-grid,
.program-grid,
.document-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.info-card,
.program-card,
.document-card,
.impact-card,
.trust-card,
.mission-card {
    border-radius: var(--radius-md);
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 1.8rem;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.program-media img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 0;
}

.program-body {
    padding: 1.6rem 1.8rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.story-voices {
    background: linear-gradient(120deg, rgba(10, 26, 59, 0.04), rgba(246, 212, 107, 0.08));
    border: 1px solid rgba(10, 26, 59, 0.08);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
    margin-bottom: 1.8rem;
    display: grid;
    gap: 1rem;
}

.stories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.story-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
}

.story-media {
    position: relative;
}

.story-media img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.story-media figcaption {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    background: rgba(5, 12, 28, 0.85);
    color: #fff;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.story-content {
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.story-quote {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-primary-dark);
    font-style: italic;
}

.story-tag {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: rgba(5, 12, 28, 0.85);
    color: #fff;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.story-meta {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.story-meta li {
    font-size: 0.85rem;
    color: var(--color-muted);
    padding: 0.25rem 0.6rem;
    background: rgba(10, 26, 59, 0.06);
    border-radius: 999px;
}

/* Mission & trust cards */
.mission-card,
.trust-card {
    background: #fff;
}

/* Program grid */
.program-grid {
    gap: 2rem;
}

.program-card {
    overflow: hidden;
    padding: 0;
}

.program-card picture img,
.program-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

.program-card .program-body {
    padding: 1.8rem;
}

.program-card ul {
    margin: 0 0 1rem;
}

.program-card .impact {
    font-weight: 600;
    color: var(--color-primary);
}

/* Donation and forms */
.donate-wrapper,
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.paypal-container {
    margin-top: 1.5rem;
    padding: 1.2rem;
    background: #f9fbff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--radius-md);
}

.amount-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.7rem;
    margin: 1.5rem 0;
}

.donation-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem;
    margin: 1rem 0 1.2rem;
}

.donation-choice {
    border-radius: var(--radius-sm);
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fffaf2;
    color: var(--color-secondary);
    padding: 0.8rem 1rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border 0.2s ease,
        transform 0.2s ease;
}

.donation-choice:hover,
.donation-choice:focus {
    border-color: rgba(240, 180, 41, 0.6);
}

.donation-choice.active {
    background: var(--color-accent);
    color: #0a1a3b;
    border-color: transparent;
    box-shadow: 0 12px 24px rgba(10, 26, 59, 0.15);
    transform: translateY(-1px);
}

.amount,
.toggle {
    border-radius: var(--radius-sm);
    border: 1px solid rgba(15, 23, 42, 0.12);
    padding: 0.8rem;
    background: #fff;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border 0.2s ease;
}

.amount.active,
.toggle.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.toggle-group {
    display: inline-flex;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.15);
    overflow: hidden;
}

.toggle {
    border: none;
    min-width: 120px;
}

.donate-form,
.contact-form {
    display: grid;
    gap: 1rem;
    /* Pack rows at the natural height. Without this, a form that is stretched
       by its parent grid distributes the surplus height across every row, which
       inflates each label and input instead of leaving space at the bottom. */
    align-content: start;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-card);
    background: #fff;
}

/* The donate form sits next to a much longer column, so let it keep its own
   height rather than stretching into several hundred pixels of empty card.
   The contact grid is two comparable cards, so those still stretch to match. */
.donate-wrapper .donate-form {
    align-self: start;
}

label {
    font-weight: 600;
}

input,
textarea {
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(15, 23, 42, 0.2);
    padding: 0.9rem;
    font: inherit;
}

/* Weight comes from an inset shadow rather than a thicker border, so flagging a
   field does not nudge the rest of the form down by a pixel or two. */
input.invalid,
textarea.invalid {
    border-color: var(--color-error);
    box-shadow: inset 0 0 0 1px var(--color-error);
}

textarea {
    resize: vertical;
}

.form-feedback {
    min-height: 1.2rem;
    font-weight: 600;
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
}

.form-feedback.visible {
    padding: 0.85rem 1rem;
    background: var(--color-bg);
    border-color: rgba(15, 23, 42, 0.12);
}

.form-feedback.success {
    background: #eaf8f0;
    border-color: #2f855a;
    color: #0f233f;
}

.form-feedback.error {
    background: #fff4f4;
    border-color: #c53030;
    color: #8b1f1f;
}

.form-feedback.info {
    background: var(--color-bg);
    border-color: rgba(15, 23, 42, 0.12);
}

.form-feedback:empty {
    display: block;
    padding: 0;
    border-color: transparent;
    background: transparent;
}

.email-obfuscated {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-weight: 700;
}

.copy-email {
    border: 1px solid rgba(15, 23, 42, 0.18);
    background: var(--color-bg);
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--color-primary);
    line-height: 1.4;
}

.reveal-email {
    background: rgba(10, 26, 59, 0.06);
}

.copy-email:hover,
.copy-email:focus {
    background: rgba(10, 26, 59, 0.08);
}

.email-display {
    min-width: 0;
    font-weight: 700;
}

.email-display.visible {
    display: inline-block;
}

.copy-status.visible {
    display: inline-block;
}

.privacy-note {
    color: var(--color-muted);
}

.mini-map {
    background: linear-gradient(135deg, #0b264a, #103a75);
    color: #f6fbff;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: grid;
    gap: 1rem;
}

.mini-map svg {
    width: 100%;
    height: auto;
}

.mini-map svg rect {
    fill: rgba(255, 255, 255, 0.08);
}

.mini-map__path path {
    fill: none;
    stroke: #83b7ff;
    stroke-width: 2;
    stroke-dasharray: 6;
}

.mini-map__path circle {
    fill: #fff;
    stroke: #64c5ff;
    stroke-width: 3;
}

.mini-map__label {
    font-size: 0.88rem;
    font-weight: 600;
    fill: #d7e7ff;
    text-anchor: middle;
}

.mini-map__items {
    display: grid;
    gap: 1rem;
}

.mini-map__items article {
    margin: 0;
}

.mini-map__items h4 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    color: var(--color-on-dark);
}

.mini-map__items p {
    margin: 0;
    color: rgba(247, 251, 255, 0.9);
}

.impact-callout {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.impact-callout ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.5rem;
    display: grid;
    gap: 0.5rem;
}

.impact-callout li {
    font-weight: 500;
}

/* Footer */
.site-footer {
    background: #0a121f;
    color: #e6ecf8;
    padding: 2.8rem 0 1.6rem;
}

.site-footer p {
    color: rgba(230, 236, 248, 0.9);
}

.site-footer .form-feedback {
    color: var(--color-on-dark);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.5rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.footer-links a {
    color: #c3d7ff;
}

.site-footer .logo + p {
    color: rgba(230, 236, 248, 0.8);
}

.footer-newsletter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.footer-newsletter input {
    width: 100%;
    max-width: 280px;
}

.footer-newsletter .btn {
    padding: 0.78rem 1.2rem;
    height: 100%;
}

@media (max-width: 640px) {
}

.site-footer .form-feedback {
    background: rgba(247, 251, 255, 0.06);
    border-color: rgba(247, 251, 255, 0.12);
    color: var(--color-on-dark);
}

.site-footer .form-feedback.success {
    background: rgba(48, 198, 135, 0.15);
    border-color: rgba(48, 198, 135, 0.5);
    color: #e9fff3;
}

.site-footer .form-feedback.error {
    background: rgba(197, 48, 48, 0.15);
    border-color: rgba(197, 48, 48, 0.5);
    color: #ffeaea;
}

.small {
    font-size: 0.85rem;
    color: rgba(28, 31, 39, 0.72);
}

.site-footer .small {
    color: rgba(230, 236, 248, 0.7);
}

.site-footer > p.small {
    text-align: center;
    margin-top: 2rem;
}

/* Utility classes */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.fade-in {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.85s ease,
        transform 0.85s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive navigation */
@media (max-width: 960px) {
    .nav-toggle {
        display: flex;
    }

    .nav-links {
        position: absolute;
        top: 70px;
        right: 1.5rem;
        flex-direction: column;
        background: #fff;
        border-radius: var(--radius-md);
        border: 1px solid rgba(15, 23, 42, 0.1);
        box-shadow: var(--shadow-soft);
        padding: 1rem;
        display: none;
        width: min(320px, 86vw);
        gap: 0.75rem;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-donate .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-panel {
        padding: 1.6rem;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 4rem 0 3.5rem;
        min-height: auto;
    }

    .hero-panel {
        padding: 1.4rem;
    }

    .hero-stats {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    .metric-card {
        padding: 1.5rem;
    }

    .hero-shortcuts {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 720px) {
    .hero,
    .section {
        padding: 3.5rem 0;
    }

    .story-media img {
        height: 200px;
    }

    .hero-actions,
    .cta .hero-actions {
        flex-direction: column;
    }

    .origin-content {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .fade-in {
        opacity: 1 !important;
        transform: none !important;
    }
}
/* =========================================================
   Frontend polish layer
   Touch targets, mobile typography, and hero density.
   Appended last so it wins over earlier rules without
   restructuring the existing cascade.
   ========================================================= */

:root {
    /* consistent spacing scale */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    /* minimum accessible tap target (WCAG 2.2 AA target size) */
    --tap-min: 44px;
}

/* --- Touch targets ------------------------------------- */

/* Hamburger was 25x14px. Give it a real 44x44 hit area while
   keeping the bars visually the same size. */
.nav-toggle {
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.amount,
.toggle,
.donation-choice {
    min-height: var(--tap-min);
}

.btn {
    min-height: var(--tap-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Inline text links get a comfortable vertical hit area on
   touch devices without changing desktop layout. */
@media (pointer: coarse) {
    .nav-links a,
    .footer-links a,
    .text-link {
        display: inline-block;
        min-height: var(--tap-min);
        line-height: var(--tap-min);
    }

    .footer-links li + li {
        margin-top: var(--space-2xs);
    }
}

/* --- Mobile typography --------------------------------- */

@media (max-width: 640px) {
    /* Nothing below ~13.5px on small screens. */
    .eyebrow {
        font-size: 0.85rem;
        letter-spacing: 0.14em;
    }

    .small {
        font-size: 0.9rem;
    }

    .story-tag {
        font-size: 0.82rem;
    }

    body {
        line-height: 1.65;
    }
}

/* --- Hero density on mobile ----------------------------- */

/* The stacked home hero ran ~2 viewports tall on a 320px
   screen, pushing the primary CTA well below the fold. */
@media (max-width: 820px) {
    .home-hero {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
    }

    .home-hero .hero-grid {
        gap: var(--space-lg);
    }

    .hero-impact-card {
        padding: var(--space-md);
    }

    .hero-impact-card .hero-stats {
        gap: var(--space-sm);
    }

    .page-hero {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }

    .scroll-indicator {
        display: none;
    }
}

/* --- Donation choice grouping --------------------------- */

.donate-group {
    margin: 0 0 var(--space-lg);
    padding: 0;
    border: 0;
}

.donate-group + .donate-group {
    margin-top: var(--space-lg);
}

.donate-group-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: var(--space-xs);
    padding: 0;
}

.donate-group-hint {
    margin: 0 0 var(--space-sm);
    font-size: 0.9rem;
    color: var(--color-muted);
}

/* --- Form polish ---------------------------------------- */

.form-feedback:not(.visible) {
    display: none;
}

/* :user-invalid only matches after the visitor has actually edited or blurred
   the field. The previous :invalid:not(:placeholder-shown) guard relied on the
   field having a placeholder, so every required input without one (Full Name,
   Email) rendered with a red error border on page load, before anyone typed. */
input:user-invalid,
textarea:user-invalid {
    border-color: var(--color-error);
}

.required-hint {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-bottom: var(--space-sm);
}

/* Six cards in the default auto-fit grid land 4 + 2 at desktop width, which
   reads as an unfinished row. Cap at three so they balance 3 + 3. */
.card-grid--thirds {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    max-width: 960px;
    margin-inline: auto;
}

/* Temporary campaign banner. Deliberately a light band rather than another
   navy slab: it sits directly above a dark hero on both pages it appears on,
   so it needs to read as a notice rather than compete with the hero. Remove
   the markup from index.html and donate.html when the campaign closes. */
.campaign-banner {
    /* A warm tint rather than --color-bg. The cool grey is what every muted
       section on the site already uses, so the banner read as page furniture
       and got skipped. This is still the brand palette, just the warm side of
       it, and it separates the banner from the white header above and the navy
       hero below. The button stays navy on purpose: gold here would put two
       gold pills in a vertical stack with Get Involved in the header. */
    background: #fdf6e6;
    border-bottom: 1px solid rgba(212, 175, 55, 0.35);
    border-top: 3px solid var(--color-accent);
    padding: 1rem 0;
}

.campaign-banner__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.campaign-banner__label {
    margin: 0;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-secondary);
}

.campaign-banner__copy {
    margin: 0.15rem 0 0;
    color: var(--color-muted);
}

@media (max-width: 640px) {
    .campaign-banner__inner {
        align-items: flex-start;
    }

    .campaign-banner .btn {
        width: 100%;
        text-align: center;
    }
}

/* Leadership list. Replaces the team cards, which carried employer, degree,
   and birthplace detail that a public page does not need. Name and foundation
   role only. */
.leadership-list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.leadership-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.leadership-list li:last-child {
    border-bottom: 0;
}

.leadership-name {
    font-weight: 700;
    color: var(--color-secondary);
}

.leadership-role {
    color: var(--color-muted);
}

.leadership-note {
    margin: 0;
    color: var(--color-muted);
}

/* --- Campaign pages -------------------------------------- */

/* A quiet caveat under a section, for the things we are deliberately not
   claiming. Reads as a footnote rather than body copy. */
.small-note {
    margin-top: var(--space-md, 1.5rem);
    font-size: 0.92rem;
    color: var(--color-muted);
    max-width: var(--w-reading);
}

/* Dated campaign updates, newest first. Built to have entries added above the
   existing ones without touching the styling. */
.update-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}

.update-entry {
    border-left: 3px solid var(--color-accent);
    padding-left: 1.1rem;
}

.update-entry p:last-child {
    margin-bottom: 0;
}

.update-date {
    margin-bottom: 0.2rem;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent-text);
}

/* --- Image stability ------------------------------------ */

img {
    max-width: 100%;
    height: auto;
}

.program-photo,
.story-media img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    height: auto;
}

/* Standalone email reveal/copy control needs a real tap target.
   (Inline links inside sentences are exempt from WCAG 2.5.8.) */
.copy-email {
    min-height: var(--tap-min);
    padding: 0.5rem 0.9rem;
}

/* =========================================================
   Visual refinement pass
   Vertical rhythm, container system, card hierarchy, tablet.
   Desktop/tablet weighted; mobile spacing is left as-is
   except where a section was clearly over-long.
   ========================================================= */

:root {
    /* vertical rhythm scale, applied by content density */
    --band-compact: 48px;
    --band-standard: 64px;
    --band-feature: 92px;
    /* container system */
    --w-page: 1200px;
    --w-reading: 760px;
    --w-narrow: 640px;
}

/* --- Container system ----------------------------------- */

.container {
    width: min(var(--w-page), 92vw);
}

.narrow {
    max-width: var(--w-reading);
}

/* Reading-width block for long body copy: caps the measure
   around 68-72 characters instead of the previous ~86. */
.reading {
    max-width: var(--w-reading);
}

.section-heading {
    max-width: var(--w-reading);
}

/* --- Vertical rhythm (tablet and up) -------------------- */

@media (min-width: 768px) {
    .section {
        padding-top: var(--band-standard);
        padding-bottom: var(--band-standard);
    }

    .section-compact {
        padding-top: var(--band-compact);
        padding-bottom: var(--band-compact);
    }

    /* The two dark photo bands were 128/112 regardless of content. */
    .origin-story {
        padding-top: var(--band-feature);
        padding-bottom: var(--band-feature);
    }

    /* Journey strip: was 174px for a single line. */
    .journey-band {
        padding-top: var(--band-compact);
        padding-bottom: var(--band-compact);
    }
}

/* --- Journey strip -------------------------------------- */

.journey-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.25rem;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-secondary);
    text-align: center;
}

.journey-steps .journey-arrow {
    color: var(--color-accent-text);
    font-weight: 700;
}

@media (max-width: 560px) {
    .journey-steps {
        flex-direction: column;
        gap: 0.4rem;
        font-size: 1.05rem;
    }

    .journey-steps .journey-arrow {
        display: none;
    }
}

/* --- About: mission as two-column editorial ------------- */

.mission-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem 2.5rem;
    align-items: start;
}

.mission-label {
    margin: 0;
}

.mission-statement {
    margin: 0;
    max-width: 22ch;
    font-size: clamp(1.6rem, 1.4vw + 1.1rem, 2.3rem);
    line-height: 1.25;
}

@media (min-width: 768px) {
    .mission-grid {
        grid-template-columns: minmax(120px, 180px) 1fr;
    }

    .mission-label {
        padding-top: 0.6rem;
    }

    .mission-statement {
        max-width: 26ch;
    }
}

/* --- About: operating model as four numbered steps ------ */

.process-steps {
    list-style: none;
    margin: 2rem 0 1.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    counter-reset: step;
}

.process-step {
    padding-top: 1rem;
    border-top: 2px solid rgba(15, 23, 42, 0.12);
}

.process-num {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-accent-text);
    margin-bottom: 0.35rem;
}

.process-step h3 {
    font-size: 1.15rem;
    margin: 0 0 0.35rem;
}

.process-step p {
    margin: 0;
    font-size: 0.97rem;
    color: var(--color-muted);
}

.process-note {
    margin-top: 0.5rem;
}

@media (min-width: 560px) {
    .process-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem 2rem;
    }
}

@media (min-width: 1024px) {
    .process-steps {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- Team cards ----------------------------------------- */

/* Structure is portrait -> name -> role -> bio so a real
   photo can replace the initials block later without any
   layout change. */






/* --- Card and shadow hierarchy -------------------------- */

/* Flat: metrics read as data, not objects. */
.stat-card,
.impact-card {
    box-shadow: none;
    border: 1px solid rgba(15, 23, 42, 0.09);
}

/* Subtle border: supporting reference panels. */
.info-card,
.mini-card,
.document-card {
    box-shadow: none;
    border: 1px solid rgba(15, 23, 42, 0.1);
}

/* Light elevation retained: stories are the emotional anchor. */
.story-card {
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07);
}

/* Program cards sit between: border plus a whisper of lift. */
.program-card {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

/* Hero impact card keeps full elevation by design. */

/* --- Typography ----------------------------------------- */

/* Cap the measure on long-form body copy. */
.origin-content p,
.trust-note article > p,
.impact-callout > p {
    max-width: var(--w-reading);
}

/* --- Pre-footer CTA band -------------------------------- */

/* Should read as a band, not a second footer. */
.cta {
    padding-top: var(--band-standard);
    padding-bottom: var(--band-standard);
}

.cta-grid {
    align-items: center;
}

@media (min-width: 768px) {
    .cta {
        padding-top: var(--band-compact);
        padding-bottom: var(--band-compact);
    }
}

/* --- Tablet (768-1024) ---------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {
    /* Team was 2 columns of tall cards; even out the block. */
    .card-grid.team {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    /* Keep two-column sections from becoming cramped columns. */
    .split {
        gap: 2rem;
    }

    .donate-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

/* --- Footer / journey corrections ----------------------- */

/* The added "More" column wrapped to a second row with
   auto-fit(220px), making the footer taller than before.
   Pin it to a single row from tablet up. */
@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 1.3fr 1.2fr 1.2fr;
        gap: 2rem;
    }

    /* Two link columns inside one footer block: keeps the link list useful
       without adding a fourth stacked block on mobile.

       This was a two-column grid, which lays items out row by row and makes
       both cells in a row share the tallest height. "Impact & Transparency"
       wraps onto two lines, so the single-line "About" next to it was
       stretched to 51px and left a visible hole in the column. CSS columns
       flow each column independently, so nothing shares a row height. It also
       reads better: the main pages end up in the first column and the deeper
       links in the second. */
    .footer-links-split {
        display: block;
        columns: 2;
        column-gap: 1.5rem;
    }

    .footer-links-split li {
        break-inside: avoid;
        margin-bottom: 0.4rem;
    }
}

@media (min-width: 1024px) {
    .site-footer {
        padding-top: 2.4rem;
        padding-bottom: 1.4rem;
    }
}

/* Journey strip: land it in the 88-96px target on desktop. */
@media (min-width: 768px) {
    .journey-band {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* Mobile: the stacked strip does not need standard band padding. */
@media (max-width: 767px) {
    .journey-band {
        padding-top: 1.75rem;
        padding-bottom: 1.75rem;
    }
}

/* Mobile pre-footer: two stacked buttons need less room than four. */
@media (max-width: 767px) {
    .cta {
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }

    .cta-grid {
        gap: 1.25rem;
    }
}