@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;0,800;0,900;1,400&display=swap');

/* ============================================================
   AMA FOR SOCIETY — GEOMETRIC JOY SYSTEM v2
   Palette: OKLCH (perceptually uniform)
   Methodology: BEM + 4pt spacing scale
   ============================================================ */

:root {
    /* ── Core Brand Colors ────────────────────────────────── */
    /* Extracted from ama.svg: Plum #370143, Magenta #92278f  */
    --color-primary: oklch(22% 0.10 320);
    /* Deep Plum        */
    --color-primary-mid: oklch(38% 0.15 322);
    /* Lifted Plum      */
    --color-accent: oklch(50% 0.22 325);
    /* Vibrant Magenta  */
    --color-accent-soft: oklch(72% 0.12 325);
    /* Pastel Magenta   */

    /* ── Warm Tinted Surfaces ─────────────────────────────── */
    /* Never pure white/black — always carry the brand hue    */
    --color-bg-base: oklch(98% 0.008 320);
    /* Warm off-white   */
    --color-bg-surface: oklch(100% 0.004 320);
    /* Barely there     */
    --color-bg-subtle: oklch(95% 0.012 320);
    /* Tinted grey      */
    --color-bg-inverse: oklch(16% 0.06 320);
    /* Dark plum-grey   */

    /* ── Text ────────────────────────────────────────────── */
    --color-text-main: oklch(18% 0.05 320);
    /* Near-black plum  */
    --color-text-muted: oklch(35% 0.06 320);
    /* Increased readability */
    /* Accessible muted */
    --color-text-subtle: oklch(50% 0.04 320);
    /* Accessibile contrast >4.5:1 */
    /* Tertiary text    */
    --color-text-inverse: oklch(97% 0.008 320);
    /* Text on dark bg  */

    /* ── Typography ──────────────────────────────────────── */
    --font-body: 'Montserrat', sans-serif;
    --font-heading: 'Montserrat', sans-serif;

    /* Fluid scale (clamp): only headings. Body uses fixed rem. */
    --text-xs: 0.75rem;
    /*  12px — labels, captions  */
    --text-sm: 0.9375rem;
    /*  15px — UI, nav           */
    --text-base: 1.0625rem;
    /*  17px — body text         */
    --text-lg: clamp(1.2rem, 2vw, 1.375rem);
    --text-xl: clamp(1.5rem, 3vw, 2rem);
    --text-xxl: clamp(2rem, 5vw, 3.25rem);
    --text-display: clamp(2.5rem, 6vw, 4.5rem);

    /* ── 4pt Spacing Scale ───────────────────────────────── */
    --space-1: 0.25rem;
    /*  4px */
    --space-2: 0.5rem;
    /*  8px */
    --space-3: 0.75rem;
    /* 12px */
    --space-4: 1rem;
    /* 16px */
    --space-6: 1.5rem;
    /* 24px */
    --space-8: 2rem;
    /* 32px */
    --space-10: 2.5rem;
    /* 40px */
    --space-12: 3rem;
    /* 48px */
    --space-16: 4rem;
    /* 64px */
    --space-24: 6rem;
    /* 96px */
    --space-fluid: clamp(3.5rem, 7vw, 7rem);

    /* ── Radii — Geometric Joy ───────────────────────────── */
    --radius-pill: 9999px;
    --radius-xl: 2.5rem;
    /* 40px */
    --radius-lg: 2rem;
    /* 32px */
    --radius-md: 1.25rem;
    /* 20px */
    --radius-sm: 0.75rem;
    /* 12px */

    /* ── Shadows & Utility ───────────────────────────────── */
    --shadow-sm: 0 8px 16px -4px oklch(22% 0.10 320 / 0.05);
    --shadow-md: 0 16px 32px -8px oklch(22% 0.10 320 / 0.08);
    --lh-tight: 1.2;
    --lh-relaxed: 1.6;

    /* ── Z-index Scale ───────────────────────────────────── */
    --z-base: 10;
    --z-overlay: 20;
    --z-modal: 30;
    --z-toast: 50;
    --z-header: 100;

    /* ── Motion ──────────────────────────────────────────── */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 180ms;
    --t-base: 320ms;
    --t-slow: 500ms;
}



/* ============================================================
   AMBIENT BACKGROUND (Desktop Decorative Elements)
   ============================================================ */
.ambient-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    /* Safely underneath everything */
    overflow: hidden;
    background: var(--color-bg-base);
}

.ambient-bg__shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.08;
    /* Extremely soft, premium Apple-like gradient field */
    mix-blend-mode: normal;
    /* Removed multiply which makes it muddy */
    animation: floatShape 25s infinite alternate ease-in-out;
    will-change: transform;
}

.ambient-bg__shape--1 {
    width: 60vw;
    height: 60vw;
    max-width: 800px;
    max-height: 800px;
    background: var(--color-accent-soft);
    top: -20vh;
    right: -10vw;
    animation-delay: 0s;
}

.ambient-bg__shape--2 {
    width: 50vw;
    height: 50vw;
    max-width: 600px;
    max-height: 600px;
    background: var(--color-primary-mid);
    bottom: -15vh;
    left: -15vw;
    opacity: 0.25;
    animation-delay: -5s;
    animation-duration: 25s;
}

.ambient-bg__shape--3 {
    width: 40vw;
    height: 40vw;
    max-width: 500px;
    max-height: 500px;
    background: var(--color-accent);
    top: 40vh;
    left: 20vw;
    opacity: 0.15;
    animation-delay: -10s;
    animation-duration: 28s;
}

@keyframes floatShape {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(5%, 10%) scale(1.05);
    }

    66% {
        transform: translate(-5%, 5%) scale(0.95);
    }

    100% {
        transform: translate(0, -5%) scale(1);
    }
}

/* Hide or drastically reduce prominence on mobile */
@media (max-width: 768px) {
    .ambient-bg__shape {
        filter: blur(80px);
        opacity: 0.2 !important;
        /* Keep it barely visible to unclutter mobile */
    }

    .ambient-bg__shape--3 {
        display: none;
    }
}

/* ============================================================ */

/* Remove existing solid body background color since ambient-bg handles base layer styling */
/* ============================================================
   MOBILE SCRIM (Dark blur overlay for navigation)
   ============================================================ */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: oklch(0% 0 0 / 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: calc(var(--z-header) - 1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
    pointer-events: none;
}

body.nav-open::after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.nav-open {
    overflow: hidden;
}

/* ============================================================   RESET & FOUNDATION
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    /* Reserve scrollbar space to prevent layout shift */
    scrollbar-gutter: stable;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--color-text-main);
    background-color: var(--color-bg-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Accessible skip link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    padding: var(--space-3) var(--space-6);
    z-index: calc(var(--z-header) + 1);
    border-radius: 0 0 var(--radius-sm) 0;
    font-weight: 700;
    transition: top var(--t-fast) ease;
}

.skip-link:focus {
    top: 0;
}

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

/* Cursor pointer on all interactive elements */
a,
button,
[role="button"],
label[for],
.program-card,
.btn,
.btn--link,
.header__link,
.footer__link {
    cursor: pointer;
}

img,
svg {
    max-width: 100%;
    display: block;
}

button {
    font-family: inherit;
    border: none;
    background: none;
}

ul {
    list-style: none;
}

/* ── Global Focus Ring ───────────────────────────────────── */
:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

/* ── Reduced Motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

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

    html {
        scroll-behavior: auto;
    }

    .js-anime-up {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── Anime.js Pre-State ──────────────────────────────────── */
.js-anime-up {
    opacity: 0;
    will-change: transform, opacity;
}


/* ============================================================
   PAGE SECTIONING & AMBIENT CONTAINMENT (UI/UX Pro)
   ============================================================ */
/* Only the Hero lets the ambient fixed background shine through */
.programs,
.articles,
.statement,
.section-padding[aria-labelledby="cta-heading"],
.section-padding[aria-labelledby="stats-heading"],
.footer {
    background-color: var(--color-bg-base);
    position: relative;
    z-index: 10;
}

/* Subtle separator between sections */
.programs {
    border-top: 1px solid oklch(22% 0.10 320 / 0.05);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(var(--space-4), 5vw, var(--space-12));
}

.section-padding {
    padding-top: var(--space-fluid);
    padding-bottom: var(--space-fluid);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* Cap line-length on body paragraphs */
p {
    max-width: 68ch;
    line-height: 1.7;
}

.t-display {
    font-size: var(--text-display);
    line-height: 0.92;
    letter-spacing: -0.05em;
}

.t-h1 {
    font-size: var(--text-xxl);
}

.t-h2 {
    font-size: var(--text-xl);
}

.t-h3 {
    font-size: var(--text-lg);
    font-weight: 700;
}

.t-caption {
    font-size: var(--text-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-accent);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.875rem var(--space-8);
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
    transition:
        background-color var(--t-fast) var(--ease-out-quart),
        color var(--t-fast) var(--ease-out-quart),
        transform var(--t-base) var(--ease-out-expo),
        box-shadow var(--t-base) var(--ease-out-expo);
    /* Minimum touch target */
    min-height: 44px;
    min-width: 44px;
}

.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

.btn--primary:hover {
    background-color: var(--color-accent);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -8px oklch(50% 0.22 325 / 0.4);
}

.btn--primary:active {
    transform: translateY(-1px);
}

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

.btn--outline:hover {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    transform: translateY(-3px);
}

/* Inline text link-button (used in program cards) */
.btn--link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 800;
    font-size: var(--text-sm);
    padding: var(--space-2) 0;
    margin-top: var(--space-6);
    border-bottom: 2px solid currentColor;
    transition: opacity var(--t-fast) ease;
    /* Accessible touch zone */
    min-height: 44px;
    align-self: flex-start;
}

.btn--link:hover {
    opacity: 0.7;
}

/* Arrow icon for btn--link */
.btn--link::after {
    content: '→';
    transition: transform var(--t-fast) var(--ease-out-quart);
}

.btn--link:hover::after {
    transform: translateX(4px);
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + var(--space-3));
    left: calc(env(safe-area-inset-left, 0px) + var(--space-4));
    right: calc(env(safe-area-inset-right, 0px) + var(--space-4));
    z-index: var(--z-header);
}

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: oklch(100% 0.004 320 / 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6);
    border-radius: var(--radius-pill);
    box-shadow:
        0 4px 24px -8px oklch(22% 0.10 320 / 0.15),
        0 1px 0 0 oklch(22% 0.10 320 / 0.06);
}

.header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header__logo img,
.header__logo svg {
    height: 36px;
    width: auto;
}

.header__nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.header__nav-list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.header__link {
    display: inline-block;
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--color-text-main);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    transition:
        background-color var(--t-fast) ease,
        color var(--t-fast) ease;
    /* Accessible touch target */
    min-height: 44px;
    line-height: 2;
}

.header__link:hover {
    background: var(--color-bg-subtle);
    color: var(--color-accent);
}

.header__link.is-active {
    background: var(--color-bg-subtle);
    color: var(--color-primary);
}

.header__cta {
    margin-left: var(--space-3);
}

/* ── Mobile Menu Toggle ──────────────────────────────────── */
.header__menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: var(--space-2);
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.header__menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
    transition: transform var(--t-base) var(--ease-out-quart),
        opacity var(--t-fast) ease,
        background var(--t-fast) ease;
}

/* ============================================================
   HERO — "The Embrace"
   ============================================================ */
.hero {
    min-height: max(600px, 90svh);
    display: flex;
    align-items: center;
    padding-top: clamp(11rem, 20vh, 16rem);
    padding-bottom: clamp(6rem, 10vh, 8rem);
    position: relative;
    overflow: hidden;
}

.hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
}

.hero__content {
    max-width: 55ch;
    z-index: 2;
    position: relative;
}

.hero__eyebrow {
    color: var(--color-accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
    margin-bottom: var(--space-4);
}

.hero__heading {
    margin-bottom: var(--space-6);
    line-height: 1.1;
}

.hero__body {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
    line-height: 1.6;
}

.hero__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
}

.hero__trust {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    opacity: 0.9;
}

.hero__trust-avatars {
    display: flex;
    align-items: center;
}

.hero__trust-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-pill);
    border: 3px solid var(--color-bg-base);
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.hero__trust-avatar:nth-child(1) {
    z-index: 3;
    background: var(--color-accent);
}

.hero__trust-avatar:nth-child(2) {
    z-index: 2;
    margin-left: -0.75rem;
    background: var(--color-primary-mid);
}

.hero__trust-avatar:nth-child(3) {
    z-index: 1;
    margin-left: -0.75rem;
    background: var(--color-accent-soft);
}

/* Geometric Visual Column + Photo */
.hero__visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.hero__shape-1 {
    position: absolute;
    top: 5%;
    right: -10%;
    width: 80%;
    height: 80%;
    background: var(--color-accent-soft);
    border-radius: var(--radius-xl) var(--radius-pill) var(--radius-pill) var(--radius-xl);
    transform: rotate(15deg);
    opacity: 0.6;
    z-index: -2;
}

.hero__shape-2 {
    position: absolute;
    bottom: -5%;
    left: -5%;
    width: 50%;
    aspect-ratio: 1;
    background: var(--color-primary-mid);
    border-radius: 50%;
    opacity: 0.8;
    z-index: -1;
}

.hero__media-wrap {
    width: 85%;
    height: 85%;
    border-radius: var(--radius-xl) calc(var(--radius-xl) * 2) var(--radius-xl) calc(var(--radius-xl) * 2);
    overflow: hidden;
    position: relative;
    box-shadow: 0 24px 48px rgba(55, 1, 67, 0.15);
    /* matching brand hue for shadow */
    z-index: 5;
    background-color: var(--color-bg-surface);
}

.hero__media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out-expo);
}

.hero__visual:hover .hero__media-img {
    transform: scale(1.05);
}

/* ============================================================
   PROGRAMS — Asymmetric Bento Grid
   ============================================================ */
.programs {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    /* Slight upward pull into hero whitespace */
    margin-top: calc(var(--space-12) * -1);
    position: relative;
    z-index: var(--z-base);
}

.programs__header {
    max-width: 52ch;
    margin-bottom: var(--space-12);
    /* Left-aligned — not centered. Impeccable rule. */
}

.programs__header .t-caption {
    margin-bottom: var(--space-3);
}

.programs__header .t-h1 {
    margin-top: var(--space-3);
}

.programs__bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(340px, auto);
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* ── Base Card ───────────────────────────────────────────── */
.program-card {
    border-radius: var(--radius-xl);
    padding: clamp(1.5rem, 4vw, 3rem);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid oklch(22% 0.10 320 / 0.05);
    /* very soft border */
    background: var(--color-bg-surface);
    transition: transform var(--t-base) var(--ease-out-expo),
        box-shadow var(--t-base) var(--ease-out-expo),
        border-color var(--t-base) var(--ease-out-expo);
}

.program-card:hover {
    transform: translateY(-2px);
    border-color: oklch(22% 0.10 320 / 0.12);
    box-shadow: var(--shadow-md);
}

/* ── Bento Themes & Layout ───────────────────────────────── */
/* Card 1: AMA Teens Theme (Light Plum base for youthfulness, matching Kids style) */
.program-card--main {
    grid-column: span 2;
    background: oklch(96% 0.03 320);
    /* Distinct soft plum */
    border: 1px solid oklch(80% 0.05 320 / 0.15);
    color: var(--color-text-main);
    position: relative;
    overflow: hidden;
}

.program-card--main .program-card__content {
    position: relative;
    z-index: 10;
}

.program-card--main .program-card__title {
    color: var(--color-primary);
}

.program-card--main .program-card__tag {
    color: var(--color-primary);
    background: oklch(22% 0.10 320 / 0.06);
}

.program-card--main .btn--link {
    color: var(--color-primary);
}

/* Teens geometric shape - Unique soft blob */
.program-card--main::before {
    content: '';
    position: absolute;
    top: -15%;
    right: -10%;
    width: clamp(200px, 25vw, 280px);
    aspect-ratio: 1;
    background: oklch(90% 0.08 320 / 0.3);
    border-radius: 60% 40% 50% 50% / 40% 50% 60% 60%;
    transform: rotate(20deg);
    pointer-events: none;
    z-index: 1;
}

/* Card 2: AMA Kids Theme (Warm Amber base for playfulness) */
.program-card--secondary {
    grid-column: span 1;
    background: oklch(95% 0.05 75);
    /* Distinct warm amber */
    border: 1px solid oklch(80% 0.05 80 / 0.12);
    color: var(--color-text-main);
}

.program-card--secondary .program-card__title {
    color: oklch(40% 0.15 50);
    /* Deep amber text */
}

.program-card--secondary .program-card__tag {
    color: oklch(50% 0.15 50);
    /* Deep amber tag */
    background: oklch(80% 0.15 50 / 0.15);
}

/* Kids amoeba shape */
.program-card--secondary::after {
    content: '';
    position: absolute;
    bottom: -15%;
    right: -15%;
    width: clamp(180px, 25vw, 240px);
    aspect-ratio: 1;
    background: oklch(85% 0.10 80 / 0.15);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    transform: rotate(-15deg);
    pointer-events: none;
    z-index: 1;
}

/* Card 3: Comunitate Theme (Solid brand block for inclusion) */
.program-card--tertiary {
    grid-column: span 3;
    background: var(--color-primary-mid);
    /* Deep plum */
    color: var(--color-text-inverse);
    min-height: 280px;
    align-items: flex-start;
}

.program-card--tertiary .program-card__tag {
    background: oklch(100% 0 0 / 0.15);
    color: var(--color-bg-surface);
}

/* Community giant overlapping circles */
.program-card--tertiary::before,
.program-card--tertiary::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: oklch(100% 0 0 / 0.04);
    /* faint white overlay */
    pointer-events: none;
    z-index: 1;
}

.program-card--tertiary::before {
    width: clamp(300px, 40vw, 500px);
    aspect-ratio: 1;
    right: -10%;
    bottom: -80%;
}

.program-card--tertiary::after {
    width: clamp(200px, 30vw, 300px);
    aspect-ratio: 1;
    right: 20%;
    top: -40%;
}

/* ── Common Card Typography Elements ─────────────────────── */
.program-card__tag {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
    background: oklch(22% 0.10 320 / 0.06);
    color: var(--color-text-main);
    margin-bottom: var(--space-6);
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
}

.program-card__title {
    font-size: var(--text-xl);
    color: inherit;
    margin-bottom: var(--space-4);
    position: relative;
    z-index: 2;
    line-height: var(--lh-tight);
    font-weight: 700;
}

.program-card__text {
    font-size: var(--text-base);
    color: inherit;
    opacity: 0.8;
    position: relative;
    z-index: 2;
    max-width: 48ch;
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-6);
}

.program-card--tertiary .program-card__text {
    opacity: 0.9;
}

.program-card .btn--link,
.program-card .btn--inverse {
    position: relative;
    z-index: 2;
}

/* ============================================================
   IMPACT STATS — Number Focus
   ============================================================ */
.stats {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: clamp(2rem, 5vw, 4rem) 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 4vw, 3rem);
    align-items: center;
    text-align: center;
    box-shadow: none;
}

.stat-item {
    position: relative;
    padding: var(--space-4) 0;
}

.stat-item__number {
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-3);
    font-variant-numeric: tabular-nums;
}

.stat-item__label {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
    max-width: 24ch;
    margin: 0 auto;
}

/* ============================================================
   CTA BAND — Between programs and stats
   ============================================================ */
.cta-band {
    background: var(--color-primary);
    border-radius: var(--radius-xl);
    padding: clamp(2.5rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

/* Crisp geometric circles on CTA */
.cta-band::before,
.cta-band::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.cta-band::before {
    background: var(--color-accent);
    width: clamp(250px, 35vw, 400px);
    aspect-ratio: 1;
    right: -10vw;
    top: -50%;
    opacity: 0.15;
}

.cta-band::after {
    border: 2px solid var(--color-accent-soft);
    width: clamp(150px, 20vw, 250px);
    aspect-ratio: 1;
    left: -5vw;
    bottom: -30%;
    opacity: 0.2;
}

.cta-band__text {
    position: relative;
    z-index: 2;
    max-width: 45ch;
}

.cta-band__text h2 {
    color: var(--color-text-inverse);
    font-size: clamp(2rem, 4vw, 2.5rem);
    margin-bottom: var(--space-3);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    font-weight: 800;
}

.cta-band__text p {
    color: oklch(92% 0.01 320);
    font-size: var(--text-base);
    line-height: var(--lh-relaxed);
}

.cta-band__action {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.btn--inverse {
    background: var(--color-bg-base);
    color: var(--color-text-main);
    box-shadow: none;
    transition: transform var(--t-base) var(--ease-out-expo), background var(--t-base) var(--ease-out-expo);
}

.btn--inverse:hover {
    background: var(--color-bg-surface);
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* ============================================================
   FAT FOOTER
   ============================================================ */
.footer {
    background: var(--color-bg-inverse);
    color: var(--color-text-inverse);
    padding: clamp(var(--space-12), 8vw, var(--space-24)) 0 var(--space-8);
    margin-top: var(--space-fluid);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: var(--space-12);
    margin-bottom: var(--space-12);
}

.footer__logo {
    height: 40px;
    width: auto;
    max-width: 120px;
}

.footer__brand-link {
    display: block;
    line-height: 0;
}

.footer__text--spaced {
    margin-bottom: var(--space-4);
}

.footer__tagline {
    color: oklch(72% 0.04 320);
    font-size: var(--text-sm);
    margin-top: var(--space-4);
    line-height: 1.6;
    max-width: 30ch;
}

.footer__socials {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: oklch(28% 0.06 320);
    color: var(--color-text-inverse);
    transition:
        background-color var(--t-fast) ease,
        transform var(--t-base) var(--ease-out-expo);
}

.footer__social-link svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer__social-link:hover {
    background: var(--color-accent);
    transform: translateY(-3px);
}

.footer__title {
    color: var(--color-text-inverse);
    font-size: var(--text-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-4);
}

.footer__link,
.footer__text {
    display: block;
    color: oklch(72% 0.04 320);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
    transition: color var(--t-fast) ease;
    /* No transform translateX — causes layout shift */
}

.footer__link:hover {
    color: var(--color-accent-soft);
}

/* Newsletter form */
.input-group {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.input-text {
    flex: 1;
    min-width: 0;
    padding: 0.875rem var(--space-6);
    border-radius: var(--radius-pill);
    border: 1px solid oklch(40% 0.06 320 / 0.4);
    background: oklch(22% 0.06 320);
    color: var(--color-text-inverse);
    font-family: inherit;
    font-size: var(--text-sm);
    transition: border-color var(--t-fast) ease;
    min-height: 44px;
}

.input-text::placeholder {
    color: oklch(60% 0.04 320);
}

.input-text:focus {
    outline: none;
    border-color: var(--color-accent);
}

.newsletter__feedback-message {
    display: block;
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    font-weight: 700;
    min-height: 1.5em;
    /* reserve space — prevents content jump */
}

.newsletter__form.is-error .newsletter__feedback-message {
    color: oklch(70% 0.18 25);
}

.newsletter__form.is-success .newsletter__feedback-message {
    color: oklch(70% 0.18 145);
}

/* Footer bottom bar */
.footer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding-top: var(--space-8);
    border-top: 1px solid oklch(30% 0.06 320);
}

.footer__copy {
    color: oklch(55% 0.04 320);
    font-size: var(--text-xs);
}

.footer__legal {
    display: flex;
    gap: var(--space-6);
}

.footer__list-link {
    color: oklch(55% 0.04 320);
    font-size: var(--text-xs);
    transition: color var(--t-fast) ease;
}

.footer__list-link:hover {
    color: var(--color-accent-soft);
}

/* ============================================================
   RESPONSIVE — Mobile First Overrides
   ============================================================ */

/* ── Tablet (≤ 900px) ──────────x──────────────────────────── */
@media (max-width: 900px) {

    /* Hero: single column but balanced */
    .hero {
        padding-top: clamp(10rem, 15vh, 12rem);
        padding-bottom: clamp(4rem, 8vh, 6rem);
    }

    .hero__grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: clamp(2rem, 5vw, 4rem);
    }

    .hero__content {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero__actions {
        justify-content: center;
    }

    .hero__visual {
        max-width: 500px;
        margin: 0 auto;
    }

    /* Programs bento: stack to 2 columns */
    .programs__bento {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .program-card--main,
    .program-card--secondary,
    .program-card--tertiary {
        grid-column: 1 / -1;
        margin-top: 0;
        min-height: auto;
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Mobile (≤ 640px) ────────────────────────────────────── */
@media (max-width: 640px) {

    /* Show hamburger, hide nav */
    .header__menu-toggle {
        display: flex;
        position: relative;
        z-index: calc(var(--z-overlay) + 10);
        /* Must be above the scrim */
    }

    /* Now that the dark scrim is safely below the header pill, 
       the logo and toggle stay their normal high-contrast brand colors 
       against the pill's white background */

    .header__nav.is-open .header__menu-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .header__nav.is-open .header__menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    .header__nav.is-open .header__menu-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .header__nav-list {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 80px;
        left: var(--space-4);
        right: var(--space-4);
        background: var(--color-bg-surface);
        border-radius: var(--radius-lg);
        padding: var(--space-6);
        gap: var(--space-2);
        box-shadow: 0 16px 40px -8px oklch(22% 0.10 320 / 0.2);
        z-index: var(--z-overlay);

        /* Animation setup */
        opacity: 0;
        visibility: hidden;
        transform-origin: top right;
        transform: scale(0.9) translateY(-15px);
        transition: opacity 0.25s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s;
        pointer-events: none;
    }

    .header__cta {
        display: none;
    }

    /* When menu is open (toggled by JS) */
    .header__nav.is-open .header__nav-list {
        opacity: 1;
        visibility: visible;
        transform: scale(1) translateY(0);
        pointer-events: auto;
    }

    /* Upon toggling nav */
    .header__nav.is-open .header__link {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-base);
    }

    /* Hero: single column optimized */
    .hero {
        padding-top: clamp(8rem, 12vh, 20rem);
    }

    .hero__visual {
        display: none;
    }

    .hero__body {
        font-size: var(--text-base);
    }

    .hero__trust {
        flex-direction: column;
        text-align: center;
        gap: var(--space-2);
    }

    /* Stats: single column */
    .stats {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding: clamp(2rem, 6vw, 3rem);
    }

    .stat-item:not(:last-child)::after {
        display: none;
    }

    /* CTA band: stack */
    .cta-band {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Footer: single column */
    .footer__grid {
        grid-template-columns: 1fr;
    }

    .footer__bar {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Body text minimum 16px on mobile */
    body {
        font-size: 1rem;
    }
}

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

/* Enhanced Touch Targets */
.footer__link {
    padding-block: var(--space-1);
}

.header__link {
    padding: var(--space-2) var(--space-3);
    display: inline-block;
}

/* ============================================================
   ARTICLES & BLOG SECTION
   ============================================================ */
.articles__header {
    margin-bottom: var(--space-8);
}

.articles__grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.article-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-base);
    border: 1px solid oklch(22% 0.10 320 / 0.05);
    /* Soft border instead of pure shadow */
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    /* for absolute ::before trick */
    transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

.article-card:hover,
.article-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-sm);
    border-color: oklch(22% 0.10 320 / 0.12);
}

.article-card__image-link {
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.article-card__image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-normal) ease;
}

.article-card:hover .article-card__image-link img {
    transform: scale(1.05);
}

.article-card__content {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex-grow: 1;
}

.article-card__meta {
    font-size: 0.6875rem;
    /* ~11px */
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.article-card__title {
    font-size: var(--text-base);
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
}

.article-card__title a {
    color: var(--color-text-main);
    text-decoration: none;
    transition: color var(--t-fast) ease;
}

.article-card__title a:hover {
    color: var(--color-primary);
}

/* The magical expanding link: makes the entire card clickable securely */
.article-card__title a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.article-card__excerpt {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: var(--lh-relaxed);
    margin-top: auto;
    /* Push excerpts to bottom if headers differ in height */
}

/* ============================================================
   PRESIDENT STATEMENT
   ============================================================ */
.statement {
    position: relative;
    /* Clean transparent bg as the card provides the structure */
}

.statement__card {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    background: transparent;
    /* No colored background */
    border-radius: 0;
    padding: clamp(2.5rem, 5vw, 4rem);
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-6);
    position: relative;
    overflow: visible;
    /* Let geometric shapes break out */
    z-index: 2;
}

/* Crisp top bar removed */
.statement__card::before {
    display: none;
}


/* Decorative Background Shapes */
.statement__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Wireframe geometric shapes instead of full blobs */
.statement__shape-1 {
    width: clamp(120px, 20vw, 150px);
    height: clamp(120px, 20vw, 150px);
    background: transparent;
    border: 2px dashed var(--color-accent);
    border-radius: 50%;
    top: 5%;
    left: 5%;
    opacity: 0.5;
    mix-blend-mode: normal;
}

.statement__shape-2 {
    width: clamp(80px, 15vw, 120px);
    height: clamp(80px, 15vw, 120px);
    border: 3px solid var(--color-primary-mid);
    border-radius: var(--radius-md);
    transform: rotate(15deg);
    bottom: 10%;
    right: 5%;
    opacity: 0.6;
}

.statement__card::after {
    display: none;
}

/* Large decorative quote mark */
.statement__quote-mark {
    font-size: clamp(5rem, 10vw, 8rem);
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 900;
    line-height: 0.5;
    color: var(--color-accent);
    opacity: 0.15;
    display: block;
    text-align: center;
    user-select: none;
    position: relative;
    z-index: 2;
    margin-bottom: var(--space-4);
}

.statement__icon,
.statement__quote,
.statement__author {
    position: relative;
    z-index: 2;
    /* Put content above shapes */
}

.statement__icon {
    color: var(--color-accent);
    opacity: 0.25;
    margin-bottom: calc(var(--space-2) * -1);
    /* Pull text a bit closer to quote icon */
}

.statement__quote {
    position: relative;
    margin: 0;
    padding: 0;
}

.statement__text {
    font-size: clamp(1.125rem, 3.5vw, 1.5rem);
    font-weight: 500;
    line-height: var(--lh-relaxed);
    color: var(--color-text-main);
    max-width: 48ch;
    margin: 0 auto;
    letter-spacing: -0.01em;
}

.statement__author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-2);
}

.statement__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 12px -2px oklch(22% 0.10 320 / 0.1);
}

.statement__author-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.statement__author-name {
    color: var(--color-primary);
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.3;
}

.statement__author-role {
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
    opacity: 0.9;
    line-height: 1.3;
}


/* ============================================================
   FORMS & INPUTS (Global)
   ============================================================ */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-label {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-text-main);
}

.form-control {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid oklch(85% 0.02 320);
    border-radius: var(--radius-md, 12px);
    background: var(--color-bg-base);
    color: var(--color-text-main);
    font-family: var(--font-body);
    font-size: var(--text-base);
    transition: all var(--t-fast) ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px oklch(72% 0.12 325 / 0.2);
    /* Soft magenta focus ring */
}

.form-control::placeholder {
    color: var(--color-text-muted);
}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.pt-0 {
    padding-top: clamp(1.5rem, 3vw, 3rem) !important;
}

.pb-0 {
    padding-bottom: clamp(1.5rem, 3vw, 3rem) !important;
}

/* ── UI/UX Pro Max: Mobile Enhancements (<= 640px) ──────── */
@media (max-width: 640px) {

    /* 1. Touch targets (44px min) */
    .header__menu-toggle {
        width: 48px;
        height: 48px;
    }

    .header__nav.is-open .header__link {
        padding: var(--space-4);
        min-height: 48px;
        display: flex;
        align-items: center;
        border-radius: var(--radius-sm);
        background: oklch(100% 0 0 / 0.5);
        /* subtle tap area highlight base */
        width: 100%;
    }

    .header__nav.is-open .header__link:active {
        background: oklch(95% 0.01 320);
    }

    .footer__link {
        padding: var(--space-2) 0;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .footer__contact-group .footer__link {
        display: inline-flex;
    }

    /* 2. Form usability */
    .input-text,
    .form-control {
        min-height: 48px;
    }

    /* 3. Fluid layout refinements */
    .hero__actions {
        flex-direction: column;
        width: 100%;
    }

    .hero__actions .btn {
        width: 100%;
        margin-bottom: 0;
    }

    .stats {
        text-align: center;
        margin: 0 auto;
        padding-inline: 0;
    }

    .cta-band {
        padding: clamp(2.5rem, 6vw, 3rem) clamp(1.5rem, 6vw, 2rem);
        text-align: left;
        align-items: flex-start;
    }

    .cta-band__text p {
        margin: 0;
    }

    .cta-band__action {
        width: 100%;
        display: flex;
    }

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

    /* 4. Removed Modal Scrim from inside the nav (JS will inject it to body) */

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }
}

/* Secure 44px targets globally for important icons/logos */
.header__logo,
.footer__brand a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}



.program-card:focus-within {
    transform: translateY(-2px);
    border-color: oklch(22% 0.10 320 / 0.12);
    box-shadow: var(--shadow-md);
}

/* Btn SVG subtle interaction */
.btn svg {
    transition: transform var(--t-fast) var(--ease-out-quart);
}

.btn:not(.btn--inverse):hover svg {
    transform: translateX(3px);
}

/* Inline text link SVG interaction */
.btn--link svg {
    transition: transform var(--t-fast) var(--ease-out-quart);
    margin-left: 2px;
}

.program-card:hover .btn--link svg {
    transform: translateX(4px);
}

/* Subtle scale feedback on tap for cards (UI/UX Pro Max) */
.program-card:active,
.article-card:active,
.btn:active {
    transform: scale(0.97);
    transition: transform var(--t-fast) var(--ease-out-expo);
}

/* Update to make img avatars work flawlessly */
img.hero__trust-avatar {
    object-fit: cover;
    background: var(--color-bg-subtle);
    /* fallback color */
}

/* Article Card Stagger (replaced inline styles) */
.article-card:nth-child(1) {
    transition-delay: 0ms;
}

.article-card:nth-child(2) {
    transition-delay: 100ms;
}

.article-card:nth-child(3) {
    transition-delay: 200ms;
}

/* Subtle Grid Pattern for the entire page */
body {
    background-color: var(--color-bg-base);
    background-image: radial-gradient(rgba(147, 51, 234, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: 0 0;
}

[data-theme="dark"] body {
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* ============================================================
   DELIMITER / DIVIDER
   ============================================================ */
.section-divider {
    border: none;
    border-top: 1px solid oklch(22% 0.10 320 / 0.08);
    margin: var(--space-fluid) 0;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    position: relative;
    padding-bottom: var(--space-12);
}

@media (min-width: 992px) {
    .about-hero {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: var(--space-12);
    }
}

.about-hero__visual {
    position: relative;
    aspect-ratio: 4/3;
    width: 100%;
}

.about-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    position: relative;
    z-index: 2;
    background: var(--color-bg-subtle);
}

.about-hero__shape {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 80%;
    aspect-ratio: 1;
    background: oklch(72% 0.12 325 / 0.1);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

.about-values {
    background: oklch(98% 0.005 320);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    height: 100%;
    border: 1px solid oklch(22% 0.10 320 / 0.05);
}

.about-values__list {
    list-style: none;
    padding: 0;
    margin: var(--space-6) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.about-values__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 500;
    color: var(--color-text-main);
}

.about-values__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: oklch(22% 0.10 320 / 0.08);
    color: var(--color-primary);
}