@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800&family=Nunito:wght@600;700;800;900&display=swap");

/* ===== BYTES FOR BETTER LIVES DESIGN SYSTEM ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --font-body: "Mulish", "Segoe UI", sans-serif;
    /* Rounded geometric display + clean geometric body — the closest free match to DECA's
       Gotham Rounded / Gotham pairing (Gotham is licensed and can't be embedded). */
    --font-display: "Nunito", "Segoe UI", sans-serif;
    --font-label: "Nunito", "Segoe UI", sans-serif;

    /* Warm off-white paper + surfaces (was a cold blue-white). */
    --paper: oklch(98.6% 0.008 92);
    --surface: oklch(96.4% 0.014 92);
    --surface-strong: oklch(92.6% 0.022 90);
    --ink: oklch(23% 0.028 196);
    --ink-soft: oklch(34% 0.03 198);
    --muted: oklch(40% 0.03 200);
    --line: oklch(89% 0.014 100);
    --blue: oklch(49% 0.16 250);
    --blue-dark: oklch(36% 0.13 252);
    --blue-soft: oklch(93% 0.04 244);
    /* Brand (signature) color — SY Glacier Mint + confident shades. */
    --green: #B4D3AD;
    --green-dark: #4F7A46;
    --green-deep: oklch(41% 0.105 152);
    --green-soft: #E8F1E4;
    /* Vivid, warm accent set for program tiles (DECA-style colour blocks). */
    --gold: oklch(78% 0.13 75);
    --gold-soft: oklch(93% 0.06 82);
    --gold-dark: oklch(50% 0.12 70);
    --coral: oklch(68% 0.16 38);
    --coral-soft: oklch(93% 0.05 40);
    --coral-dark: oklch(50% 0.16 35);
    --teal: oklch(60% 0.12 215);
    --teal-soft: oklch(93% 0.05 210);
    --teal-dark: oklch(45% 0.115 216);
    --danger-soft: oklch(93% 0.046 25);
    --danger: oklch(50% 0.15 25);
    --footer-bg: oklch(24% 0.045 200);

    /* Neutral, warmer, deeper shadows (was blue-tinted). */
    --shadow-sm: 0 1px 2px color-mix(in oklch, var(--ink) 14%, transparent);
    --shadow-md: 0 16px 34px color-mix(in oklch, var(--ink) 13%, transparent);
    --shadow-lg: 0 32px 72px color-mix(in oklch, var(--ink) 18%, transparent);

    --radius-sm: 6px;
    --radius-md: 12px;
    /* Generous, friendly rounding (Ustart warmth). */
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --nav-height: 76px;
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;
    --section-block: clamp(4.5rem, 9vw, 7.5rem);

    /* Compatibility variables for existing pages. */
    --primary-color: var(--green);
    --primary-dark: var(--green-dark);
    --primary-light: var(--green-soft);
    --brand-green-50: var(--green-soft);
    --secondary-color: var(--blue);
    --accent-color: var(--green);
    --dark: var(--ink);
    --dark-light: var(--ink-soft);
    --gray: var(--muted);
    --light-gray: var(--line);
    --white: var(--paper);
    --bg-light: var(--surface);
    --light: var(--surface);
    --gradient-1: linear-gradient(135deg, var(--green-dark), var(--green));
    --gradient-2: linear-gradient(135deg, var(--green), var(--gold));
    --gradient-3: linear-gradient(135deg, var(--green-deep), var(--green));

    /* Per-page accent — mint/green-led by default; overridden by body.page-* below. */
    --accent: var(--green-dark);
    --accent-soft: var(--green-soft);
    --accent-dark: var(--green-deep);
}

/* Per-page accent role so each page reads distinct yet on-brand. Green leads; warm gold,
   teal and coral give the other pages their own identity (no more blue leaking everywhere). */
body.page-home, body.page-impact, body.page-chapters, body.page-chapter {
    --accent: var(--green-dark); --accent-soft: var(--green-soft); --accent-dark: var(--green-deep);
}
body.page-initiatives, body.page-gallery, body.page-pastevents {
    --accent: var(--gold-dark); --accent-soft: var(--gold-soft); --accent-dark: var(--gold-dark);
}
body.page-about, body.page-contact {
    --accent: var(--teal-dark); --accent-soft: var(--teal-soft); --accent-dark: var(--teal-dark);
}
body.page-team {
    --accent: var(--coral-dark); --accent-soft: var(--coral-soft); --accent-dark: var(--coral-dark);
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    background:
        linear-gradient(180deg, color-mix(in oklch, var(--accent-soft) 52%, var(--paper)), var(--paper) 34rem),
        var(--paper);
    overflow-x: hidden;
}

body.modal-open,
body.nav-open {
    overflow: hidden;
}

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

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

a,
button,
input,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

:focus-visible {
    outline: 3px solid color-mix(in oklch, var(--green) 65%, var(--paper));
    outline-offset: 3px;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--ink);
}

h1 {
    font-size: clamp(3rem, 8vw, 6.5rem);
}

h2 {
    font-size: clamp(2.15rem, 5vw, 4.35rem);
}

h3 {
    font-size: clamp(1.35rem, 2.3vw, 1.75rem);
}

p {
    margin: 0;
    color: var(--muted);
}

main {
    min-height: 70vh;
}

.container {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

.wide-container {
    width: min(1320px, calc(100% - 40px));
    margin-inline: auto;
}

.section {
    padding-block: var(--section-block);
}

.section.compact {
    padding-block: clamp(3rem, 6vw, 4.5rem);
}

.section.bg-light {
    background: var(--surface);
}
/* Banded sections carry a gentle wash of the page accent (green/blue/gold) for per-page identity. */
.surface-band {
    background: color-mix(in oklch, var(--accent-soft) 62%, var(--paper));
}
/* Optional stronger / inverted bands for a single high-contrast CTA or quote per page. */
.band--tint {
    background: color-mix(in oklch, var(--accent-soft) 70%, var(--paper));
}
.band--ink {
    background: var(--footer-bg);
    color: var(--paper);
}
.band--ink .section-title,
.band--ink .section-description,
.band--ink p,
.band--ink h2,
.band--ink h3 {
    color: var(--paper);
}
.band--ink .section-kicker {
    color: var(--accent-soft);
}

.section-header {
    display: grid;
    gap: var(--space-md);
    max-width: 760px;
    margin-bottom: var(--space-2xl);
}

.section-header.centered {
    text-align: center;
    margin-inline: auto;
    justify-items: center;
}

.section-kicker,
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.7rem;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 800;
    font-size: 0.8rem;
}
.section-kicker { color: var(--accent-dark); }      /* on light section backgrounds */
.eyebrow { color: var(--accent-soft); }             /* on dark hero overlays — pale tint reads well */
.section-kicker::before,
.eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 24px;
    height: 2px;
}
.section-kicker::before { background: var(--accent); }
.eyebrow::before { background: var(--accent-soft); }

.section-title {
    color: var(--ink);
}
.section-header .section-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 0.65rem;
    border-radius: 999px;
    background: var(--accent);
}

.section-description,
.lead-text {
    max-width: 68ch;
    font-size: clamp(1.08rem, 1.6vw, 1.28rem);
    color: var(--ink-soft);
}

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

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.spacer-lg { height: var(--space-xl); }

/* ===== NAVIGATION ===== */
.navbar {
    position: sticky;
    top: 0;
    z-index: 3000;
    background: color-mix(in oklch, var(--paper) 92%, transparent);
    border-bottom: 1px solid color-mix(in oklch, var(--line) 85%, transparent);
    backdrop-filter: blur(16px);
}

.nav-container {
    width: min(1400px, calc(100% - 32px));
    min-height: var(--nav-height);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: max-content;
}

.logo img {
    width: auto;
    height: 58px;
    object-fit: contain;
}

.logo::after {
    content: "Bytes for Better Lives";
    max-width: 150px;
    font-family: var(--font-label);
    font-weight: 800;
    font-size: 0.96rem;
    line-height: 1.05;
    color: var(--green-dark);
}

.nav-menu {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(0.2rem, 0.5vw, 0.8rem);
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 clamp(0.2rem, 0.4vw, 0.5rem);
    color: var(--ink-soft);
    font-family: var(--font-label);
    font-weight: 700;
    font-size: clamp(0.88rem, 0.95vw, 1.02rem);
    border-radius: 999px;
    transition: color 150ms ease, background-color 150ms ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--green-dark);
    background: var(--green-soft);
}

.nav-item.dropdown {
    position: relative;
}

.dropdown-toggle {
    gap: 0.35rem;
}

.dropdown-caret {
    font-size: 0.85em;
    opacity: 0.8;
    transform: translateY(-1px);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    min-width: 240px;
    padding: var(--space-xs);
    margin: 0;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--paper);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.nav-item.dropdown:hover .dropdown-menu,
.nav-item.dropdown:focus-within .dropdown-menu,
.nav-item.dropdown.dropdown-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.dropdown-link {
    display: flex;
    align-items: center;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-lg);
    color: var(--ink-soft);
    font-weight: 750;
    text-decoration: none;
    transition: background-color 140ms ease, color 140ms ease;
}

.dropdown-link:hover,
.dropdown-link.active {
    background: var(--green-soft);
    color: var(--blue-dark);
}

.btn-donate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.62rem 1.5rem;
    border-radius: 999px;
    background: var(--green-dark);
    color: var(--paper);
    font-family: var(--font-label);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.02em;
    border: 2px solid transparent;
    box-shadow: 0 6px 16px color-mix(in oklch, var(--green-dark) 30%, transparent);
    transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease, background-color 250ms ease;
}

.btn-donate:hover {
    transform: translateY(-2px) scale(1.02);
    background: color-mix(in oklch, var(--green-dark) 88%, black);
    box-shadow: 0 10px 24px color-mix(in oklch, var(--green-dark) 42%, transparent);
}

.hamburger {
    display: none;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.hamburger span {
    width: 22px;
    height: 2px;
    border-radius: 99px;
    background: var(--ink);
    transition: transform 180ms ease, opacity 180ms ease;
}

.hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ===== HEROES ===== */
.hero {
    position: relative;
    isolation: isolate;
    /* Fixed height (not min-height) so every banner is EXACTLY the same size regardless of how
       much text its hero holds; content is vertically centred within it. Mobile relaxes to auto
       (see the max-width:680px block) so long wrapped copy never clips. Sized to comfortably fit
       the tallest hero (home: two-line headline + 3 lines of copy + 3 action buttons) without the
       overflow:hidden clipping it. */
    height: clamp(560px, 62vh, 700px);
    display: flex;
    align-items: center;
    padding-block: clamp(2rem, 5vw, 3.5rem);
    /* Branded photo treatment: an accent-tinted directional wash + bottom scrim turns the shared
       photo into a per-page colour field (green/teal/gold/coral), keeps the people visible, makes
       white text legible anywhere, and dissolves the wordmark baked into the right of the photo. */
    --hero-img: url("images/hero-bg.avif");
    --hero-pos: center 34%;
    background:
        /* accent colour identity on top — left-heavy, gone by the right edge */
        linear-gradient(95deg,
            color-mix(in oklch, var(--accent-dark) 90%, transparent) 0%,
            color-mix(in oklch, var(--accent-dark) 48%, transparent) 50%,
            transparent 100%),
        /* consistent ink darkening underneath — accent-independent, so the wordmark baked into
           the right of the photo is muted (the home hero is now the ONLY photo hero, so this layer
           is pushed darker to fully dissolve the "BYTES for Better Lives" text printed on the banner) */
        linear-gradient(95deg,
            color-mix(in oklch, var(--ink) 80%, transparent) 0%,
            color-mix(in oklch, var(--ink) 68%, transparent) 55%,
            color-mix(in oklch, var(--ink) 64%, transparent) 100%),
        /* bottom scrim for depth */
        linear-gradient(180deg, transparent 52%, color-mix(in oklch, var(--ink) 72%, transparent) 100%),
        var(--hero-img) var(--hero-pos) / cover no-repeat;
    color: var(--paper);
    overflow: hidden;
}

.hero-content {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
    display: grid;
    gap: var(--space-md);
    position: relative;
    z-index: 1;
}

.hero h1,
.hero-fancy-title {
    max-width: 920px;
    color: var(--paper);
    font-size: clamp(2.75rem, 5vw, 4.8rem);
    text-transform: none;
    text-wrap: balance;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.5);
}

.hero p,
.hero-subtitle {
    max-width: 760px;
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    color: color-mix(in oklch, var(--paper) 88%, var(--blue-soft));
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.6);
}

.home-hero {
    --hero-img: url("images/hero-banner.jpg");
    --hero-pos: center 34%;
}

.chapter-hero {
    --hero-img: url("images/hero-banner.jpg");
    --hero-pos: center 34%;
}

.hero-home-banner {
    --hero-img: url("images/hero-banner.jpg");
    --hero-pos: center 34%;
}

/* Editorial color-field hero — interior pages (about/impact/team/chapters/contact/initiatives/
   past-events/gallery) drop the shared banner photo, which repeated identically on every page with
   the wordmark bleeding through the wash (the loudest "template" tell). Instead each page commits to
   its own ACCENT as the hero identity (green/gold/coral/teal): a directional accent gradient, a faint
   light dot-grid for texture, and a soft top-left glow — confident and distinct per page, no photo.
   Overrides the .hero background entirely. Unlike the photo hero (fixed height + overflow:hidden to
   keep the banner image a constant size), the editorial hero has no image to clip, so it uses
   min-height + height:auto + overflow:visible: the banner GROWS to fit its content (eyebrow + headline
   + subtitle + any CTAs) and never clips elements — the photo hero's fixed height was cropping the
   taller heroes (e.g. Impact's 2-line headline + 3-line copy + 2 buttons). */
.hero-editorial {
    height: auto;
    min-height: clamp(420px, 48vh, 560px);
    overflow: visible;
    background:
        /* soft top-left glow for depth */
        radial-gradient(80% 120% at 8% 0%,
            color-mix(in oklch, var(--accent) 36%, transparent) 0%, transparent 60%),
        /* faint light dot-grid texture so the field never reads as a flat block */
        radial-gradient(circle at 1px 1px,
            color-mix(in oklch, var(--paper) 15%, transparent) 1px, transparent 1.6px) 0 0 / 24px 24px,
        /* the accent colour field itself, deepened toward ink on the right */
        linear-gradient(115deg,
            var(--accent-dark) 0%,
            color-mix(in oklch, var(--accent-dark) 72%, var(--ink)) 100%);
    color: var(--paper);
}

/* On a solid accent field the heavy photo-legibility shadows are unnecessary — soften them so the
   type reads as crisp editorial, not white-on-busy-photo. */
.hero-editorial h1,
.hero-editorial .hero-fancy-title {
    text-shadow: 0 1px 3px color-mix(in oklch, var(--ink) 35%, transparent);
}

.hero-editorial p,
.hero-editorial .hero-subtitle {
    color: color-mix(in oklch, var(--paper) 90%, var(--accent));
    text-shadow: none;
}

.home-hero h1 {
    max-width: 1040px;
    font-size: clamp(2.85rem, 4.85vw, 4.85rem);
}

.home-hero .hero-content {
    padding-top: clamp(0rem, 2vw, 1.5rem);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.proof-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 40px;
    padding: 0.45rem 0.8rem;
    border: 1px solid color-mix(in oklch, var(--paper) 28%, transparent);
    border-radius: var(--radius-md);
    color: var(--paper);
    background: color-mix(in oklch, var(--blue-dark) 42%, transparent);
    backdrop-filter: blur(12px);
    font-weight: 700;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0.85rem 1.85rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--font-label);
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--green-dark);
    color: var(--paper);
    box-shadow: 0 10px 24px color-mix(in oklch, var(--green-dark) 34%, transparent);
}

.btn-primary:hover {
    background: color-mix(in oklch, var(--green-dark) 88%, black);
    box-shadow: 0 14px 30px color-mix(in oklch, var(--green-dark) 42%, transparent);
}

.btn-secondary {
    background: var(--paper);
    color: var(--accent-dark);
    border-color: color-mix(in oklch, var(--accent) 45%, var(--paper));
}

.btn-secondary:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.btn-quiet {
    color: var(--accent-dark);
    background: var(--accent-soft);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* ===== CARDS AND GRIDS ===== */
.cards-grid,
.stats-grid,
.team-grid,
.service-grid,
.chapter-grid,
.leaders-grid,
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-lg);
}

/* Wider tiles so a 5-program set reads as a balanced 3 + 2 instead of a stranded 4 + 1. */
.service-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--space-md);
}

.card,
.stat-card,
.team-member,
.feature-box,
.service-card,
.officer-card,
.chapter-card,
.leader-card,
.impact-card,
.chapter-summary-card,
.person-card {
    background: color-mix(in oklch, var(--paper) 96%, var(--blue-soft));
    border: 1px solid color-mix(in oklch, var(--line) 92%, transparent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.card,
.team-member {
    overflow: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

/* Hover lift is for CLICKABLE cards only (story/fundraiser cards, chapter directory links).
   People/member cards (officer/legacy, leader, team-member) are informational — no hover highlight. */
.card:hover,
.service-card:hover,
.chapter-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in oklch, var(--accent) 28%, var(--line));
}

/* Story cards use 3D transforms for flipping. On iOS Safari, :hover can "stick" after a tap,
   and any hover rule that sets `transform` on the faces will override the 3D flip transforms,
   resulting in a blank/white card. Keep hover effects to shadow/border only. */
@media (hover: hover) and (pointer: fine) {
    .story-card:hover .story-face {
        box-shadow: var(--shadow-md);
        border-color: color-mix(in oklch, var(--accent) 28%, var(--line));
    }
}

.story-card:focus-within .story-face {
    box-shadow: var(--shadow-md);
    border-color: color-mix(in oklch, var(--accent) 28%, var(--line));
}

.card-media {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    background: var(--surface);
}

.card-media img,
.card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-content,
.team-info {
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-lg);
}

.card-title,
.team-name {
    color: var(--ink);
    font-size: 1.45rem;
}

.card-description,
.team-bio {
    color: var(--muted);
}

.feature-box {
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-xl);
}

.feature-box h3 {
    color: var(--accent-dark);
}

/* ===== IMPACT ===== */
.impact-band {
    position: relative;
    margin-top: -1px;
    padding-block: var(--space-2xl);
    background: color-mix(in oklch, var(--accent-soft) 48%, var(--paper));
    border-bottom: 1px solid var(--line);
}

/* Editorial stat row: drop the card chrome, let big Fraunces numerals carry it, hairline dividers. */
.impact-band .stat-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 0;
    padding: var(--space-xs) var(--space-lg);
    border-left: 2px solid color-mix(in oklch, var(--accent) 36%, var(--line));
}
.impact-band .stats-grid > .stat-card:first-child {
    border-left: 0;
    padding-left: 0;
}

.impact-band .stats-grid {
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: var(--space-sm);
}

.stat-card {
    display: grid;
    gap: var(--space-xs);
    padding: clamp(1.25rem, 3vw, 2rem);
    min-height: 150px;
    min-width: 0;
    container-type: inline-size;
}

.stat-number {
    color: var(--accent-dark);
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 5vw, 4rem);
    line-height: 0.9;
    font-weight: 900;
    letter-spacing: -0.02em;
}

@supports (font-size: 1cqi) {
    .stat-card .stat-number {
        font-size: clamp(2.1rem, min(5vw, 22cqi), 4rem);
    }
}

.stat-label {
    color: var(--ink);
    font-weight: 800;
}

.stat-note {
    color: var(--muted);
    font-size: 0.95rem;
}

/* ===== HOMEPAGE MODULES ===== */
.service-card {
    position: relative;
    display: grid;
    gap: var(--space-md);
    min-height: 250px;
    padding: var(--space-xl);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

/* DECA-style colour tiles: each program gets its own accent (green / gold / coral / teal). */
.service-grid > .service-card { --tile: var(--green-dark); --tile-soft: var(--green-soft); }
.service-grid > .service-card:nth-child(4n+2) { --tile: var(--gold-dark); --tile-soft: var(--gold-soft); }
.service-grid > .service-card:nth-child(4n+3) { --tile: var(--coral-dark); --tile-soft: var(--coral-soft); }
.service-grid > .service-card:nth-child(4n+4) { --tile: var(--teal-dark); --tile-soft: var(--teal-soft); }

.service-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: var(--tile);
}

.service-number {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    line-height: 1;
    color: var(--tile);
}

.service-card h3 {
    color: var(--ink);
}

/* Tile hover: lift + glow in the tile's own colour (overrides the generic accent hover). */
.service-grid > .service-card:hover {
    border-color: color-mix(in oklch, var(--tile) 32%, var(--line));
    box-shadow: 0 18px 40px color-mix(in oklch, var(--tile) 22%, transparent);
}

.split-section {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 6vw, 4.5rem);
    align-items: start;
}

.officer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-lg);
}

.officer-grid-dense {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-md);
}

.officer-card,
.leader-card {
    display: grid;
    align-content: start;
    gap: var(--space-md);
    padding: var(--space-xl);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.officer-detail {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.95rem;
}

.officer-bio {
    margin: 0;
}

.officer-bio-compact {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.leadership-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(1.5rem, 5vw, 3.25rem);
    align-items: start;
    margin-top: var(--space-xl);
}

.subsection-header {
    display: grid;
    gap: 6px;
    margin-bottom: var(--space-lg);
}

.subsection-title {
    font-size: 1.35rem;
}

.subsection-description {
    margin: 0;
    color: var(--muted);
}

.chapter-summary-card {
    padding: var(--space-xl);
    display: grid;
    gap: var(--space-sm);
}

.kicker-small {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 900;
    font-size: 0.78rem;
    color: var(--accent-dark);
}

.chapter-location {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
}

.chapter-lead-note {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.95rem;
}

.people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.people-grid > * {
    min-width: 0;
}

.person-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.person-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface);
    border: 1px solid var(--line);
    flex: 0 0 auto;
}

.person-meta {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 6px;
}

.person-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: baseline;
}

.person-header h3 {
    min-width: 0;
    overflow-wrap: anywhere;
}

.person-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0.18rem 0.52rem;
    border-radius: var(--radius-md);
    background: color-mix(in oklch, var(--blue-soft) 70%, var(--paper));
    color: var(--blue-dark);
    border: 1px solid color-mix(in oklch, var(--blue) 18%, var(--line));
    font-weight: 900;
    font-size: 0.82rem;
}

.person-role {
    margin: 0;
    color: var(--accent-dark);
    font-weight: 900;
}

.person-bio {
    margin: 0;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.portrait-frame {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    padding: 4px;
    background: linear-gradient(135deg, var(--green-soft), var(--accent-soft));
    border: 1px solid var(--line);
}

.portrait-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: var(--surface);
}

.officer-title,
.team-role,
.leader-role {
    color: var(--green-dark);
    font-weight: 800;
}

.contact-placeholder {
    color: var(--blue-dark);
    font-size: 0.95rem;
    font-weight: 700;
}

.preview-actions {
    margin-top: var(--space-xl);
}

/* ===== CHAPTERS ===== */
.chapter-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.impact-card {
    padding: var(--space-xl);
    display: grid;
    gap: var(--space-xs);
}

.chapter-model {
    grid-column: span 1;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 30px;
    padding: 0.24rem 0.62rem;
    border-radius: var(--radius-md);
    font-size: 0.84rem;
    font-weight: 900;
}

.status-active,
.status-executive {
    background: var(--green-soft);
    color: var(--green-dark);
}

.status-launching {
    background: var(--gold-soft);
    color: oklch(42% 0.1 78);
}

.status-prospective {
    background: var(--blue-soft);
    color: var(--blue-dark);
}

.map-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
    gap: var(--space-lg);
    align-items: stretch;
}

.world-map {
    position: relative;
    min-height: 440px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background:
        linear-gradient(color-mix(in oklch, var(--blue) 14%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklch, var(--blue) 14%, transparent) 1px, transparent 1px),
        linear-gradient(135deg, color-mix(in oklch, var(--blue-soft) 80%, var(--paper)), var(--paper));
    background-size: 48px 48px, 48px 48px, auto;
    box-shadow: var(--shadow-sm);
}

.map-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.74;
}

.map-pin {
    --pin: var(--blue);
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    transform: translate(-50%, -100%);
    z-index: 2;
}

.map-pin::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    border: 4px solid var(--paper);
    border-radius: 50% 50% 50% 0;
    background: var(--pin);
    box-shadow: 0 8px 20px color-mix(in oklch, var(--blue-dark) 30%, transparent);
    transform: translate(-50%, -50%) rotate(-45deg);
}

.map-pin.status-active { --pin: var(--green-dark); }
.map-pin.status-launching { --pin: var(--gold); }
.map-pin.status-prospective { --pin: var(--blue); }

.map-pin span {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 3px);
    width: max-content;
    max-width: 170px;
    padding: 0.28rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: var(--paper);
    font-size: 0.82rem;
    font-weight: 800;
    opacity: 0;
    transform: translate(-50%, 5px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}

.map-pin:hover span,
.map-pin:focus-visible span {
    opacity: 1;
    transform: translate(-50%, 0);
}

.map-index,
.chapter-detail {
    display: grid;
    gap: var(--space-md);
    padding: var(--space-xl);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

.map-index-list {
    display: grid;
    gap: var(--space-sm);
}

.map-index-button {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: var(--space-sm);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    text-align: left;
}

.map-index-button:hover,
.map-index-button.active {
    background: var(--blue-soft);
    border-color: color-mix(in oklch, var(--blue) 38%, var(--line));
}

.chapter-grid {
    margin-top: var(--space-xl);
}

#chapters-preview-grid .chapter-card {
    padding: var(--space-lg);
}

#chapters-preview-grid .chapter-card h3 {
    font-size: 1rem;
    line-height: 1.2;
}

#chapters-preview-grid .chapter-card-header p,
#chapters-preview-grid .chapter-card p,
#chapters-preview-grid .chapter-card strong {
    font-size: 0.86rem;
    line-height: 1.35;
}

#chapters-preview-grid .chapter-lead-avatars .chapter-lead-photo {
    width: 42px;
    height: 42px;
}

#chapters-preview-grid .status-badge {
    font-size: 0.72rem;
    padding: 0.18rem 0.48rem;
    white-space: nowrap;
}

.chapter-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: var(--space-xl);
    text-align: left;
    color: var(--ink);
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    overflow-wrap: anywhere;
}

.chapter-card h3,
.chapter-card p,
.chapter-card strong {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.chapter-card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    min-width: 0;
}

.chapter-card-header > div:first-child {
    min-width: 0;
    flex: 1;
}

/* Only the text block flexes to fill the row — NOT the avatars container (which is also a
   direct <div> child). Matching it too gave avatars flex:1, splitting the row 50/50 and pushing
   the "Led by" text to the horizontal midpoint (big gap on the wide feature card). */
.chapter-lead > div:not(.chapter-lead-avatars) {
    min-width: 0;
    flex: 1;
}

.chapter-lead {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.chapter-lead img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--surface);
}

/* Team page "Chapter leadership" — one info block per chapter (informational, no hover lift). */
.chapter-leadership-card {
    background: color-mix(in oklch, var(--paper) 96%, var(--blue-soft));
    border: 1px solid color-mix(in oklch, var(--line) 92%, transparent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
    overflow-wrap: anywhere;
    text-decoration: none;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

/* The whole block is a link to the chapter page — subtle affordance, no bouncy lift. */
.chapter-leadership-card:hover {
    border-color: color-mix(in oklch, var(--accent) 28%, var(--line));
    box-shadow: var(--shadow-md);
}

.chapter-leadership-head h3 {
    margin: 0;
}

.chapter-leadership-head p {
    margin: 2px 0 0;
    color: var(--ink-soft);
}

.chapter-leadership-people {
    display: grid;
    gap: var(--space-md);
}

.chapter-leader {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.chapter-leader-photo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--surface);
    flex: 0 0 auto;
    font-size: 1.05rem; /* sizes the initials-avatar fallback */
}

.chapter-leader-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chapter-leader-info strong {
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.chapter-leader-info span {
    color: var(--green-dark);
    font-weight: 700;
    font-size: 0.9rem;
}

/* Chapter page — per-chapter impact stats (only shown when the chapter has any). */
.chapter-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-md);
}

.chapter-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: var(--space-lg);
    text-align: center;
    background: color-mix(in oklch, var(--paper) 96%, var(--blue-soft));
    border: 1px solid color-mix(in oklch, var(--line) 92%, transparent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.chapter-stat-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--green-dark);
}

.chapter-stat-label {
    font-size: 0.95rem;
    color: var(--ink-soft);
}

/* Chapter page — community partners (only shown when the chapter lists any). */
.chapter-partners-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.chapter-partner {
    padding: 0.6rem 1.1rem;
    font-weight: 700;
    color: var(--ink);
    background: color-mix(in oklch, var(--paper) 96%, var(--blue-soft));
    border: 1px solid color-mix(in oklch, var(--line) 92%, transparent);
    border-radius: 999px;
}

.chapter-lead-avatars {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.chapter-lead-avatars .chapter-lead-photo {
    width: 48px;
    height: 48px;
    border: 2px solid var(--paper);
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    object-fit: cover;
}

.chapter-lead-avatars .chapter-lead-photo + .chapter-lead-photo {
    margin-left: -12px;
}

.chapter-lead-avatars-large .chapter-lead-photo {
    width: 58px;
    height: 58px;
}

.chapter-lead-avatars-flip .chapter-lead-photo {
    width: 56px;
    height: 56px;
    border-color: var(--green-soft);
}

/* Initials avatar — shown on the brand lime green when a person has no real photo. */
.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: var(--green-dark);
    color: var(--paper);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 0.01em;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    font-size: 1.25rem;
}

/* Officer/board portraits sit inside a 108px round frame. */
.portrait-frame .avatar-initials {
    width: 100%;
    height: 100%;
    font-size: 2.3rem;
}

/* Person-card avatars are 64px (size comes from .person-avatar). */
.person-avatar.avatar-initials {
    font-size: 1.35rem;
}

/* Chapter-lead avatars keep their size/border but force the brand green. */
.chapter-lead-avatars .chapter-lead-photo.avatar-initials {
    background: var(--green);
    color: var(--ink);
    font-size: 1rem;
}

.chapter-lead-avatars-large .chapter-lead-photo.avatar-initials {
    font-size: 1.2rem;
}

.chapter-lead-avatars-flip .chapter-lead-photo.avatar-initials {
    font-size: 1.15rem;
}

/* Subsection heading within a team section (e.g. Leadership / Design under Board of Directors). */
.team-subsection-title {
    margin: var(--space-lg) 0 var(--space-md);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--green-dark);
}

.team-subsection-title:first-of-type {
    margin-top: var(--space-md);
}

/* Standalone gallery page — grid of clickable photos that open the lightbox. */
.photo-gallery-grid {
    /* Dense mosaic — feature/wide/tall tiles of varied scale, not a uniform checkerboard. */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 180px;
    grid-auto-flow: dense;
    gap: var(--space-sm);
}

.photo-gallery-grid .g-tile {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
}
.photo-gallery-grid .g-feature { grid-column: span 2; grid-row: span 2; }
.photo-gallery-grid .g-wide { grid-column: span 2; }
.photo-gallery-grid .g-tall { grid-row: span 2; }

.photo-gallery-grid img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    cursor: pointer;
    transition: transform 320ms ease;
}
.photo-gallery-grid .g-tile:hover img { transform: scale(1.04); }

.photo-gallery-grid figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-label);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--paper);
    background: linear-gradient(transparent, color-mix(in oklch, var(--ink) 82%, transparent));
    opacity: 0;
    transition: opacity 200ms ease;
}
.photo-gallery-grid .g-tile:hover figcaption,
.photo-gallery-grid .g-tile:focus-within figcaption { opacity: 1; }

@media (max-width: 760px) {
    .photo-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
    .photo-gallery-grid .g-feature { grid-column: span 2; grid-row: span 2; }
}

.chapter-officer-list {
    display: grid;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.chapter-officer-item {
    display: grid;
    grid-template-columns: minmax(250px, 0.65fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: color-mix(in oklch, var(--paper) 96%, var(--green-soft));
    box-shadow: var(--shadow-sm);
}

.chapter-officer-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-md);
}

.chapter-officer-identity h3 {
    font-size: 1.18rem;
}

.chapter-officer-copy {
    display: grid;
    gap: var(--space-xs);
}

.chapter-officer-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.chapter-officer-heading strong {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.08rem;
}

.chapter-officer-people,
.chapter-officer-description {
    margin: 0;
}

.chapter-officer-people {
    color: var(--blue-dark);
    font-weight: 800;
}

.chapter-officer-description {
    color: var(--ink-soft);
}

.chapter-actions {
    margin-top: auto;
    align-self: flex-start;
}

/* Subtle text cue instead of a redundant button on every (already-clickable) directory card. */
.chapter-card-go {
    margin-top: auto;
    align-self: flex-start;
    color: var(--accent-dark);
    font-family: var(--font-label);
    font-weight: 800;
    font-size: 0.92rem;
    transition: transform 160ms ease;
}
.chapter-card:hover .chapter-card-go { transform: translateX(3px); }

/* "Led by" eyebrow above the resolved lead name in directory cards (no more duplicated name). */
.chapter-lead-eyebrow {
    display: block;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--muted);
    margin-bottom: 2px;
}

.chapter-detail {
    margin-top: var(--space-xl);
}

.chapter-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--space-xl);
    align-items: start;
}

.chapter-photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

.chapter-photo-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--surface);
}

.chapter-note {
    padding: var(--space-md);
    border: 1px solid color-mix(in oklch, var(--gold) 45%, var(--line));
    border-radius: var(--radius-md);
    background: var(--gold-soft);
    color: var(--ink-soft);
}

/* ===== GALLERY STORY CARDS ===== */
.gallery-grid {
    align-items: start;
}

.story-card {
    position: relative;
    width: 100%;
    min-height: 260px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    -webkit-perspective: 1200px;
    perspective: 1200px;
    text-align: left;
    overflow: visible;
    cursor: pointer;
}

.story-card-inner {
    position: relative;
    width: 100%;
    min-height: inherit;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    /* Prevent iOS/Safari white-flash/blank-face bugs during 3D transforms. */
    transform: translateZ(0);
    will-change: transform;
    transition: transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@supports (aspect-ratio: 1 / 1) {
    /* aspect-ratio refines the card to 4:3, but we KEEP the min-height: 260px floor
       (set above) instead of zeroing it: the faces are position:absolute, so the card
       has no in-flow content height and the auto grid row collapses to 0 — which defeats
       aspect-ratio and makes the whole gallery section disappear. The floor guarantees the
       cards (and their photos) always render; aspect-ratio just shapes them when it resolves. */
    .story-card {
        aspect-ratio: 4 / 3;
    }

    .story-card-inner {
        aspect-ratio: inherit;
        height: 100%;
    }
}

.story-card.is-flipped .story-card-inner {
    transform: translateZ(0) rotateY(180deg);
}

.story-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.story-front {
    /* Must keep .story-face's absolute inset:0 fill — the <img> and overlay inside are
       position:absolute, so a relative/in-flow .story-front collapses to 0 height and the
       photo (height:100%) renders at 0. Stay absolute so the front photo fills the card. */
    display: block;
}

.story-front img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--surface);
}

.story-front-content,
.story-back {
    padding: var(--space-lg);
}

.story-front-content {
    display: grid;
    gap: var(--space-sm);
}

.story-overlay-label {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.4rem 0.58rem;
    border-radius: var(--radius-md);
    background: color-mix(in oklch, var(--ink) 76%, transparent);
    color: var(--paper);
    font-size: 0.85rem;
    font-weight: 800;
}

.story-category {
    width: fit-content;
    padding: 0.24rem 0.58rem;
    border-radius: var(--radius-md);
    background: var(--green-soft);
    color: var(--green-dark);
    font-weight: 900;
    font-size: 0.84rem;
}

.story-back {
    /* Safari/iOS can flash a blank face during 3D transforms; a tiny translateZ helps. */
    transform: rotateY(180deg) translateZ(1px);
    gap: var(--space-sm);
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.story-back dl {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
}

.story-back div {
    display: grid;
    gap: 2px;
}

.story-back dt {
    color: var(--muted);
    font-weight: 800;
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.story-back dd {
    margin: 0;
    color: var(--ink);
    font-weight: 700;
}

.tap-copy {
    margin-top: auto;
    color: var(--blue-dark);
    font-weight: 800;
}

/* ===== MEMBERS ===== */
.members-count {
    color: var(--muted);
    font-weight: 800;
    margin-left: var(--space-xs);
    font-size: 0.92em;
}

.members-slider {
    position: relative;
    margin-top: var(--space-lg);
}

.members-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-2xl);
    padding: var(--space-sm) var(--space-2xl);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.members-track {
    display: flex;
    gap: var(--space-sm);
    list-style: none;
    padding: 0;
    margin: 0;
}

.members-chip {
    flex: 0 0 auto;
    padding: 0.62rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--paper);
    color: var(--ink);
    font-weight: 800;
    white-space: nowrap;
    scroll-snap-align: start;
    box-shadow: var(--shadow-sm);
}

.members-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: color-mix(in oklch, var(--paper) 92%, transparent);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    transform: translateY(-50%);
}

.members-arrow:hover {
    background: var(--paper);
}

.members-arrow:disabled {
    opacity: 0.45;
    cursor: default;
}

.members-arrow.prev {
    left: 12px;
}

.members-arrow.next {
    right: 12px;
}

/* ===== TEAM AND LEADERSHIP ===== */
.team-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.team-member {
    max-width: none;
}

.team-photo {
    height: 300px;
    background: var(--surface);
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.leaders-grid {
    margin-top: var(--space-xl);
}

.leader-card {
    align-content: start;
}

/* ===== FORMS ===== */
.contact-form {
    display: grid;
    gap: var(--space-md);
    padding: var(--space-xl);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

.form-group {
    display: grid;
    gap: var(--space-xs);
}

.form-group label {
    color: var(--ink);
    font-weight: 800;
}

.form-group input,
.form-group textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    padding: 0.85rem 0.9rem;
}

.form-group textarea {
    resize: vertical;
}

/* ===== CAROUSEL AND LIGHTBOX ===== */
.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    display: none;
    width: 100%;
    height: 100%;
}

.carousel-slide.active {
    display: block;
}

.carousel-slide img,
.carousel-slide video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--surface);
}

.clickable-image {
    cursor: zoom-in;
}

.clickable-image:hover {
    opacity: 0.92;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: color-mix(in oklch, var(--paper) 92%, transparent);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    transform: translateY(-50%);
}

.carousel-arrow:hover {
    background: var(--paper);
}

.carousel-arrow.prev {
    left: 10px;
}

.carousel-arrow.next {
    right: 10px;
}

.carousel-dots {
    position: absolute;
    left: 50%;
    bottom: 12px;
    z-index: 10;
    display: flex;
    gap: 6px;
    transform: translateX(-50%);
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: color-mix(in oklch, var(--paper) 55%, transparent);
}

.carousel-dot.active {
    width: 22px;
    background: var(--paper);
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklch, var(--ink) 92%, transparent);
}

.lightbox.active {
    display: flex;
}

.lightbox-content {
    position: relative;
    width: min(92vw, 1100px);
    height: min(86vh, 760px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-content img,
.lightbox-content video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.lightbox-close,
.lightbox-nav {
    position: absolute;
    z-index: 10001;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in oklch, var(--paper) 22%, transparent);
    background: color-mix(in oklch, var(--ink) 46%, transparent);
    color: var(--paper);
}

.lightbox-close {
    top: 18px;
    right: 20px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 2rem;
    line-height: 1;
}

.lightbox-nav {
    top: 50%;
    width: 48px;
    height: 64px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transform: translateY(-50%);
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-counter {
    position: absolute;
    bottom: 18px;
    left: 50%;
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--ink) 62%, transparent);
    color: var(--paper);
    transform: translateX(-50%);
}

/* ===== FOOTER ===== */
.footer {
    margin-top: var(--section-block);
    padding-block: var(--space-3xl) var(--space-xl);
    background: var(--footer-bg);
    color: var(--paper);
}

.footer-content {
    display: grid;
    grid-template-columns: minmax(240px, 1.1fr) repeat(3, minmax(180px, 0.75fr));
    gap: var(--space-xl);
}

.footer-section {
    display: grid;
    align-content: start;
    gap: var(--space-sm);
}

.footer-section h3 {
    color: var(--paper);
    font-size: 1.15rem;
}

.footer-section p,
.footer-section a {
    color: color-mix(in oklch, var(--paper) 78%, var(--blue-soft));
}

.footer-section a:hover {
    color: var(--green-soft);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.footer-logo img {
    width: 54px;
    height: auto;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.45rem 0.75rem;
    border: 1px solid color-mix(in oklch, var(--paper) 18%, transparent);
    border-radius: var(--radius-md);
    font-weight: 800;
}

.footer-bottom {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid color-mix(in oklch, var(--paper) 14%, transparent);
    color: color-mix(in oklch, var(--paper) 70%, var(--blue-soft));
}

/* ===== REVEALS AND MOTION ===== */
.reveal-ready {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 520ms ease, transform 520ms ease;
}

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

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1180px) {
    .hamburger {
        display: inline-flex;
    }

	    .nav-menu {
	        position: fixed;
	        top: var(--nav-height);
	        right: 0;
	        bottom: 0;
	        left: auto;
	        z-index: 2990;
	        display: flex;
	        flex-direction: column;
	        align-items: flex-end;
	        gap: var(--space-xs);
	        /* Size the drawer to its content so there's no empty band on the left. */
	        width: max-content;
	        max-width: calc(100vw - 24px);
	        height: calc(100vh - var(--nav-height));
	        height: calc(100dvh - var(--nav-height));
	        min-height: calc(100vh - var(--nav-height));
	        min-height: calc(100dvh - var(--nav-height));
	        padding: var(--space-md) max(var(--space-md), env(safe-area-inset-right)) calc(var(--space-3xl) + env(safe-area-inset-bottom)) var(--space-sm);
	        background: color-mix(in oklch, var(--paper) 98%, var(--blue-soft));
	        opacity: 0;
	        pointer-events: none;
	        visibility: hidden;
        transform: translateX(12px);
        transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border-top: 1px solid var(--line);
        border-left: 1px solid var(--line);
        box-shadow: -18px 24px 60px color-mix(in oklch, var(--ink) 16%, transparent);
        white-space: normal;
    }

    .nav-menu.active {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: translateX(0);
    }

	    .nav-menu li {
	        width: auto;
	        min-width: 0;
	    }

	    .nav-link,
	    .btn-donate {
	        display: flex;
	        width: auto;
	        justify-content: flex-end;
	        min-height: 52px;
	        padding-inline: var(--space-md);
	        font-size: 1.08rem;
	        white-space: normal;
	    }

        .nav-item.dropdown {
            width: auto;
            position: static;
        }

        .dropdown-menu {
            position: static;
            min-width: 0;
            width: auto;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: none;
            box-shadow: none;
            background: transparent;
            border: 0;
            padding: 0 0 var(--space-xs) 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

        .dropdown-link {
            justify-content: flex-end;
            padding: 0.4rem var(--space-md);
        }

        .dropdown-caret {
            display: none;
        }
	}

@media (max-width: 900px) {
    .impact-band .stats-grid,
    .officer-grid,
    .chapter-summary,
    .chapter-officer-item,
    .split-section,
    .leadership-main-grid,
    .map-layout,
    .chapter-detail-grid,
    .footer-content {
        grid-template-columns: 1fr;
    }

    .chapter-model {
        grid-column: auto;
    }

    .world-map {
        min-height: 360px;
    }
}

@media (max-width: 680px) {
    body {
        font-size: 1rem;
    }

    .container,
    .wide-container,
    .hero-content {
        width: min(100% - 28px, 1180px);
    }

    .logo img {
        height: 48px;
    }

    .logo::after {
        max-width: 120px;
        font-size: 0.82rem;
    }

    /* On mobile, let heroes grow with their (more-wrapped) content instead of a fixed height. */
    .hero {
        height: auto;
        min-height: clamp(380px, 64vh, 520px);
    }

    .home-hero h1 {
        font-size: clamp(2.55rem, 11vw, 4rem);
    }

    /* Interior heroes + section titles were never reduced for mobile, so long words overflowed
       and got sliced by body{overflow-x:hidden}. Shrink them and allow wrapping. (Home hero keeps
       its larger size above — the :not() avoids overriding it.) */
    .hero:not(.home-hero) h1,
    .hero-fancy-title {
        font-size: clamp(1.75rem, 7.2vw, 2.6rem);
    }

    .section-title,
    h2 {
        font-size: clamp(1.75rem, 7.2vw, 2.5rem);
    }

    .hero h1,
    .hero-fancy-title,
    .section-title,
    h2,
    h1 {
        overflow-wrap: break-word;
        text-wrap: balance;
    }

    .hero-actions,
    .btn-row {
        display: grid;
    }

    .btn,
    .btn-donate {
        width: 100%;
    }

    .impact-band .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stat-card {
        min-height: 132px;
    }

    .card-media,
    .team-photo {
        height: 240px;
    }

    .service-card,
    .officer-card,
    .leader-card,
    .chapter-card,
    .map-index,
    .chapter-detail,
    .impact-card {
        padding: var(--space-lg);
    }

    .chapter-card-header {
        display: grid;
    }

    .chapter-photo-grid {
        grid-template-columns: 1fr;
    }

	    .chapter-officer-item {
	        align-items: start;
	    }

    .chapter-officer-identity {
        align-items: flex-start;
    }

    .lightbox-nav {
        width: 42px;
        height: 52px;
    }

    .lightbox-prev {
        left: 8px;
    }

    .lightbox-next {
        right: 8px;
    }
}

@media (max-height: 760px) and (min-width: 900px) {
    .hero-proof {
        display: none;
    }
}

@media (max-width: 440px) {
    .impact-band .stats-grid {
        grid-template-columns: 1fr;
    }

    .world-map {
        min-height: 300px;
    }

    .map-pin span {
        display: none;
    }
}

/* Email Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    backdrop-filter: blur(4px);
}
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.modal-content {
    background: var(--paper);
    padding: 2.5rem;
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: var(--shadow-xl);
    transform: translateY(20px);
    transition: transform 300ms ease;
}
.modal-overlay.active .modal-content {
    transform: translateY(0);
}
.modal-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: transparent;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--ink-soft);
}
.form-group {
    margin-bottom: 1.5rem;
}
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--dark);
}
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--gray);
    border-radius: var(--radius-md);
    font-family: inherit;
    resize: vertical;
}
.form-status {
    margin-top: 1rem;
    font-weight: 600;
    text-align: center;
}
.w-100 {
    width: 100%;
}

/* Flip Cards for Expanding Chapters */
.flip-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-xl);
    margin-top: var(--space-xl);
}

.flip-card {
    -webkit-perspective: 1000px;
    perspective: 1000px;
    height: 440px;
    border-radius: var(--radius-xl);
    cursor: pointer;
    position: relative;
    outline: none;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    /* Prevent iOS/Safari blank-back glitches during 3D transforms. */
    transform: translateZ(0);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--line);
    will-change: transform;
}

.flip-card.is-flipped .flip-card-inner {
    transform: translateZ(0) rotateY(180deg);
}

@media (hover: hover) and (pointer: fine) {
    .flip-card:hover .flip-card-inner,
    .flip-card:focus-within .flip-card-inner {
        transform: translateZ(0) rotateY(180deg);
    }
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--surface);
    display: flex;
    flex-direction: column;
}

.flip-card-image-container {
    position: relative;
    height: 220px;
    width: 100%;
    overflow: hidden;
}

.flip-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

@media (hover: hover) and (pointer: fine) {
    .flip-card:hover .flip-card-image {
        transform: scale(1.05);
    }
}

.flip-card-image-container .status-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    box-shadow: var(--shadow-sm);
}

.flip-card-front-content {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.flip-card-front-content h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.3rem;
    color: var(--dark);
}

.flip-card-location {
    font-size: 0.9rem;
    color: var(--ink-soft);
    font-weight: 500;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

.flip-card-desc {
    font-size: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

.flip-hint {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--green-dark);
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: auto;
    animation: pulseHint 2s infinite ease-in-out;
}

.flip-hint-touch {
    display: inline;
}

.flip-hint-hover {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .flip-hint-touch {
        display: none;
    }

    .flip-hint-hover {
        display: inline;
    }
}

@keyframes pulseHint {
    0%, 100% { opacity: 0.85; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(3px); }
}

.flip-card-back {
    transform: rotateY(180deg);
    background: var(--surface);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-md);
    border: 1.5px solid var(--green-soft);
}

.flip-card-back-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: var(--space-sm);
}

.flip-card-lead-photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--green);
    box-shadow: var(--shadow-sm);
}

.flip-card-lead-meta h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1.15rem;
    color: var(--dark);
}

.flip-card-lead-title {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ink-soft);
    font-weight: 600;
}

.flip-card-lead-list {
    margin: 0 0 var(--space-xs);
    color: var(--blue-dark);
    font-size: 0.88rem;
    font-weight: 800;
}

.flip-card-back-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    justify-content: flex-start;
}

.flip-card-bio {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-soft);
    font-style: italic;
    margin-bottom: var(--space-md);
}

.instagram-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.8rem var(--space-md);
    border-radius: var(--radius-lg);
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    margin-top: auto;
    box-shadow: var(--shadow-md);
    border: none;
}

.instagram-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    opacity: 0.95;
}

.instagram-btn:active {
    transform: translateY(0);
}

/* ===== DE-TEMPLATE UTILITIES — break the uniform "row of identical cards" rhythm ===== */

/* Asymmetric feature grid: first card is the row's hero, the rest are supporting tiles. */
.cards-grid--feature {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-md);
    align-items: start;
}
.cards-grid--feature > :first-child { grid-column: span 4; grid-row: span 2; }
.cards-grid--feature > :not(:first-child) { grid-column: span 2; }
.cards-grid--feature > :first-child .card-media { height: clamp(260px, 30vw, 420px); }
@media (max-width: 820px) {
    .cards-grid--feature { grid-template-columns: 1fr; }
    .cards-grid--feature > * { grid-column: auto !important; grid-row: auto !important; }
}

/* Let the first program tile span two tracks so a row of 5 isn't 5 equal rectangles. */
.service-grid > .service-card:first-child { grid-column: span 2; }
@media (max-width: 760px) { .service-grid > .service-card:first-child { grid-column: auto; } }

/* Oversized, faint editorial word/number bleeding off the hero — one per page, adds identity. */
.hero .hero-bignum {
    position: absolute;
    right: 0;
    bottom: -0.35em;
    margin: 0;
    z-index: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(5rem, 17vw, 13rem);
    line-height: 0.8;
    letter-spacing: -0.03em;
    color: color-mix(in oklch, var(--paper) 32%, transparent);
    pointer-events: none;
    text-transform: uppercase;
}

/* Editorial pull-quote (use inside a .band--ink or .surface-band beat). */
.editorial-quote {
    position: relative;
    max-width: 26ch;
    margin: 0;
    padding-left: var(--space-lg);
    border-left: 4px solid var(--accent);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.7rem, 3vw, 2.7rem);
    line-height: 1.15;
}
.editorial-quote::before {
    content: "\201C";
    position: absolute;
    left: 0.05em;
    top: -0.35em;
    font-family: var(--font-display);
    font-size: 5rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0.28;
    pointer-events: none;
}
.editorial-quote cite {
    display: block;
    margin-top: var(--space-md);
    font-family: var(--font-label);
    font-style: normal;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.8;
}

/* Oversized stat numeral for a dark "spotlight" beat. */
.band-figure {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(3.5rem, 11vw, 7rem);
    line-height: 0.85;
    letter-spacing: -0.02em;
    color: var(--accent-soft);
}

/* Program intro lede — replaces centered filler boxes with a left-aligned accent lede. */
.program-lede {
    max-width: 62ch;
    margin: 0 0 var(--space-xl);
    padding-left: var(--space-lg);
    border-left: 4px solid var(--accent);
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    line-height: 1.6;
    color: var(--ink-soft);
}

/* "Ways to get involved" ledger — hairline-divided rows, not identical action cards. */
.help-list {
    display: grid;
    gap: var(--space-xs);
    margin-top: var(--space-xl);
}
.help-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-sm);
    border-bottom: 1px solid var(--line);
}
.help-row .help-index {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.7rem;
    color: var(--accent-dark);
    line-height: 1;
}
.help-row h3 { margin: 0 0 2px; font-size: 1.3rem; }
.help-row p { margin: 0; }
.help-row--lead {
    background: var(--accent-soft);
    border-radius: var(--radius-lg);
    border-bottom-color: transparent;
    padding-inline: var(--space-lg);
}
@media (max-width: 680px) {
    .help-row { grid-template-columns: 44px 1fr; row-gap: var(--space-sm); }
    .help-row .btn { grid-column: 1 / -1; justify-self: start; }
}

/* Partner logos as a quiet grayscale ribbon, not 10 bordered card boxes. (!important overrides the
   inline box styles on the existing .card elements so only one container class needs changing.) */
.partner-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin-top: var(--space-xl);
}
.partner-strip .card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    display: block !important;
}
.partner-strip .card img {
    max-height: 56px !important;
    filter: grayscale(1);
    opacity: 0.6;
    transition: filter 220ms ease, opacity 220ms ease;
}
.partner-strip .card:hover img { filter: grayscale(0); opacity: 1; }

/* "Our Story" timeline — numbered nodes on an accent rail, reads as progression not a card row. */
.story-rail {
    list-style: none;
    margin: var(--space-2xl) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
    position: relative;
}
.story-rail::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 6%;
    right: 6%;
    height: 2px;
    background: color-mix(in oklch, var(--accent) 45%, var(--line));
}
.story-step {
    position: relative;
    display: grid;
    gap: var(--space-sm);
    align-content: start;
}
.story-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--accent);
    color: var(--accent-dark);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    position: relative;
    z-index: 1;
}
.story-step h3 { font-size: 1.35rem; }
.story-step img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
}
@media (max-width: 760px) {
    .story-rail { grid-template-columns: 1fr; gap: var(--space-xl); }
    .story-rail::before { display: none; }
}

/* De-carded member roster — compact pill chips for volunteers (leadership stays full cards),
   so a chapter page isn't a wall of identical initials discs. */
.roster-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}
.roster-chip {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.4rem 0.95rem 0.4rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
}
.roster-chip-avatar img,
.roster-chip-avatar .avatar-initials {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 0.85rem;
}
.roster-chip-avatar img { display: block; object-fit: cover; }
/* Keep the initials avatar's inline-flex centring (don't let it fall back to top-left block text). */
.roster-chip-avatar .avatar-initials { display: inline-flex; }
.roster-chip-meta { display: grid; line-height: 1.15; }
.roster-chip-meta strong { font-size: 0.95rem; }
.roster-chip-meta span { font-size: 0.76rem; color: var(--muted); }

/* Chapter directory: feature the founding chapter (double-wide, tinted) + a status-coloured spine
   on every card so the wall of 7 reads as a scannable, differentiated network. */
.chapter-card--feature {
    grid-column: span 2;
    background: var(--green-soft);
}
.chapter-card--feature h3 { font-size: 1.7rem; }
.chapter-card.card-edge-active { border-left: 5px solid var(--green-dark); }
.chapter-card.card-edge-launching { border-left: 5px solid var(--gold-dark); }
.chapter-card.card-edge-prospective { border-left: 5px solid var(--blue); }
@media (max-width: 680px) { .chapter-card--feature { grid-column: auto; } }

/* Inner cards become a translucent panel on a dark .band--ink CTA (so their text stays legible). */
.band--ink .impact-card {
    background: color-mix(in oklch, var(--paper) 8%, transparent);
    border-color: color-mix(in oklch, var(--paper) 20%, transparent);
}

/* Values as a de-carded typographic list with an accent top-rule, not 4 identical boxes. */
.values-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-xl) var(--space-2xl);
}
.values-list .feature-box {
    background: transparent;
    border: 0;
    border-top: 3px solid var(--accent);
    border-radius: 0;
    box-shadow: none;
    padding: var(--space-md) 0 0;
}

/* Semi-transparent chapter monogram bleeding off the chapter-profile hero. */
.chapter-hero-mark {
    position: absolute;
    right: 2vw;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(6rem, 16vw, 13rem);
    line-height: 0.8;
    letter-spacing: -0.03em;
    color: color-mix(in oklch, var(--paper) 14%, transparent);
    pointer-events: none;
    text-transform: uppercase;
}

/* ===== CHAPTER LOCATION MAPS (chapters.html "Where We Are") =====================================
   Self-contained inline-SVG maps (images/maps/florida.svg + world.svg) with status-coloured pins
   overlaid as absolutely-positioned links. No third-party map library / tiles → no CSP changes,
   no API keys, same-origin only. Pin coordinates are % of the .map-frame (set inline by script.js
   from FLORIDA_MAP_PINS / WORLD_MAP_PINS). */
.map-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: start;
}
.map-card {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.map-cap { padding-inline: 0.25rem; }
.map-cap-title {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--ink);
}
.map-cap-sub {
    display: block;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    color: var(--accent-dark);
}
/* The image fills the frame EDGE-TO-EDGE (no padding) so a pin at `left:X%` lands at exactly X% of
   the map — padding would offset the pin layer from the image and push edge pins (the SE-coast
   cluster) off-target. The SVGs have a transparent ocean, so the soft accent wash behind shows
   through as a subtle "sea". Inner padding is recreated with a small inset on the figure instead. */
.map-frame {
    position: relative;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(120% 130% at 18% 12%, color-mix(in oklch, var(--accent-soft) 75%, transparent) 0%, transparent 62%),
        var(--paper);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.map-base {
    display: block;
    width: 100%;
    height: auto;
}
/* The pin is sized to the DOT only and centred on its coordinate (translate -50%,-50%), so the dot
   sits exactly on the point regardless of label width. The label floats to one side (absolute),
   defaulting to the right; `.geo-pin--left` floats it left (used for the east-coast S. Florida
   cluster so labels point inland instead of off the map edge). */
.geo-pin {
    position: absolute;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    text-decoration: none;
    z-index: 2;
}
.geo-pin-dot {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-dark);
    border: 2.5px solid var(--paper);
    box-shadow: 0 1px 4px color-mix(in oklch, var(--ink) 35%, transparent);
    transition: transform 0.15s ease;
}
.geo-pin-label {
    position: absolute;
    top: 50%;
    left: calc(100% + 7px);
    transform: translateY(-50%);
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.74rem;
    line-height: 1;
    color: var(--ink);
    background: color-mix(in oklch, var(--paper) 90%, transparent);
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 1px 3px color-mix(in oklch, var(--ink) 18%, transparent);
    transition: background 0.15s ease, color 0.15s ease;
}
.geo-pin--left .geo-pin-label {
    left: auto;
    right: calc(100% + 7px);
}
.geo-pin.pin-active .geo-pin-dot { background: var(--green-dark); }
.geo-pin.pin-launching .geo-pin-dot { background: var(--gold-dark); }
.geo-pin.pin-prospective .geo-pin-dot { background: var(--muted); }
.geo-pin:hover { z-index: 5; }
.geo-pin:hover .geo-pin-dot { transform: scale(1.25); }
.geo-pin:hover .geo-pin-label,
.geo-pin:focus-visible .geo-pin-label {
    background: var(--ink);
    color: var(--paper);
}
/* Legend */
.map-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: clamp(1.25rem, 3vw, 2rem);
    font-family: var(--font-label);
    font-size: 0.82rem;
    color: var(--ink-soft);
}
.map-legend-item { display: inline-flex; align-items: center; gap: 0.5rem; }
.map-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid var(--paper);
    box-shadow: 0 0 0 1px var(--line);
}
.map-dot.pin-active { background: var(--green-dark); }
.map-dot.pin-launching { background: var(--gold-dark); }

@media (max-width: 760px) {
    .map-grid { grid-template-columns: 1fr; gap: 2rem; align-items: stretch; }
    .geo-pin-label { font-size: 0.68rem; }
}