/*
Theme Name: Collective Kindness
Theme URI: https://collectivekindness.net
Author: Collective Kindness
Description: Custom WordPress theme for Collective Kindness. ACF-driven content for every editable region. No page builder.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.1
License: Proprietary
Text Domain: collective-kindness
*/

:root {
    /* ── Primary trio (the brand) ─────────────────────── */
    --parchment:        #F5F3ED;
    --parchment-deep:   #E8E5DB;
    --parchment-soft:   #FBF9F3;
    --slate:            #313A44;
    --slate-soft:       #6A7280;
    --saffron:          #E8D047;

    --cream:            #FBEEA0;
    --olive-deep:       #473C16;
    --peach:            #EFA88B;
    --orange:           #DD7128;
    --cocoa:            #5A2F0F;
    --salmon:           #E08F84;
    --brick:            #CB4837;
    --maroon:           #4A1208;
    --blush:            #D89BC0;
    --magenta:          #C44C9F;
    --plum:             #511935;
    --sky:              #A6D3F0;
    --royal:            #5096F2;
    --navy:             #161B59;
    --mint:             #B0DBC8;
    --teal:             #62CDB1;
    --teal-deep:        #27484C;

    --bg:               var(--parchment);
    --bg-soft:          var(--parchment-soft);
    --bg-deep:          var(--parchment-deep);
    --ink:              var(--slate);
    --ink-soft:         var(--slate-soft);
    --accent:           var(--saffron);
    --emphasis:         #2D5BE0;

    --hairline:         rgba(49, 58, 68, 0.14);
    --hairline-strong:  rgba(49, 58, 68, 0.32);

    --serif:         'Noto Serif', 'Times New Roman', serif;
    --serif-display: 'Noto Serif Display', 'Noto Serif', serif;
    --sans:          'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    --max: 1240px;
    --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

a, button, [role="button"], .program, .pill, .hamburger,
.nav-cta, .nav-soft, .doctrine-cta, .mission-cta, .btn,
.program-cta, .drawer-toggle {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
    color-scheme: light only;
    background: var(--parchment);
    forced-color-adjust: none;
}

.scroll-focus {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(12px);
    transition: opacity 0.9s cubic-bezier(0.2, 0.65, 0.3, 1),
                filter   0.9s cubic-bezier(0.2, 0.65, 0.3, 1),
                transform 0.9s cubic-bezier(0.2, 0.65, 0.3, 1);
    will-change: opacity, filter, transform;
}
.scroll-focus.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

.scroll-darken { color: var(--ink); }
.scroll-darken .word {
    opacity: 0.18;
    transition: opacity 0.4s ease-out;
}
.scroll-darken .word.is-active { opacity: 1; }
.scroll-darken .em-blue,
.scroll-darken .em-blue .word { color: var(--emphasis); }

@media (prefers-reduced-motion: reduce) {
    .scroll-focus { opacity: 1; filter: none; transform: none; transition: none; }
    .scroll-darken { color: var(--ink); }
    .scroll-darken .word { transition: none; }
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.label {
    font-family: var(--serif);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ink-soft);
}
.label-ink { color: var(--ink); }
.label-green { color: var(--ink); }

/* ─── NAV ───────────────────────────────────────────── */
nav.site-nav {
    border-bottom: 1px solid var(--hairline);
    background: rgba(245, 243, 237, 0.92);
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(8px);
}
nav.site-nav .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 48px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.logo {
    color: var(--ink);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    flex-shrink: 0;
}
.logo-word {
    /* Optical-center nudge: the tulip icon is bottom-heavy, so geometric
       center-alignment puts the wordmark slightly high. Push the word
       down 2px so it visually centers on the icon's body. */
    transform: translateY(2px);
}
.brand-icon {
    display: inline-block;
    /* Source image is 424×108 with "Collective Kindness" text alongside the
       flower. Box width is set to ~91% of height to crop to just the flower
       (matches the original 20×22 ratio). background-size: auto 100% scales
       the image to fit the box height; the wider text portion gets clipped
       by the box's right edge. */
    width: 40px;
    height: 40px;
    background: url('assets/images/ck-logo.webp') no-repeat left center;
    background-size: auto 100%;
    flex-shrink: 0;
}
.logo-word {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.008em;
    color: var(--ink);
    white-space: nowrap;
}
nav.site-nav ul {
    list-style: none;
    display: flex;
    gap: 32px;
    align-items: center;
}
nav.site-nav ul li:has(.nav-soft) + li:has(.nav-cta) { margin-left: -22px; }
nav.site-nav a {
    font-family: var(--serif);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: var(--ink);
    transition: opacity 0.15s;
    white-space: nowrap;
}
nav.site-nav a:hover { opacity: 0.6; }
nav.site-nav a.has-chevron {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
nav.site-nav a.has-chevron svg { margin-top: 1px; flex-shrink: 0; }
.nav-soft {
    color: var(--ink) !important;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--ink);
    border-radius: 4px;
    padding: 7px 16px 9px;
    line-height: 1;
    background: transparent;
    transition: background 0.18s ease, color 0.18s ease;
}
.nav-soft:hover { background: var(--ink); color: var(--bg) !important; opacity: 1 !important; }
.reveal-arrow { display: inline-block; transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1); }
.nav-soft:hover .reveal-arrow,
.nav-cta:hover .reveal-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .reveal-arrow { transition: none; } }
.nav-cta {
    background: var(--saffron);
    color: var(--ink) !important;
    padding: 8px 18px 10px;
    border-radius: 4px;
    letter-spacing: 0 !important;
    transition: filter 0.18s ease;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
}
.nav-cta:hover { filter: brightness(0.94); opacity: 1 !important; }

/* ─── HERO ──────────────────────────────────────────── */
.hero {
    padding: clamp(80px, 14vh, 160px) 0 clamp(60px, 10vh, 120px);
    position: relative;
}
.hero-olive {
    position: absolute;
    left: -80px;
    right: -40px;
    bottom: -200px;
    width: calc(100% + 120px);
    height: auto;
    pointer-events: none;
    color: #3F3614;
    opacity: 0.12;
    z-index: 0;
}
/* Mobile: olive branch lands in the empty space below the hero copy
   (between the Founded trust line and the next section). Wider, more
   saturated, anchored to the BOTTOM of the hero so the leaf cluster sits
   in the visual "rest area" instead of competing with text. */
@media (max-width: 900px) {
    .hero-olive {
        top: auto;
        bottom: -60px;
        left: -10%;
        right: -10%;
        width: 120%;
        opacity: 0.32;
        color: #2E464A;
    }
}
@media (max-width: 540px) {
    .hero-olive {
        bottom: -40px;
        left: -18%;
        right: -18%;
        width: 136%;
        opacity: 0.38;
    }
}
.hero .wrap { position: relative; z-index: 2; text-align: center; }

.hero-object { position: absolute; pointer-events: none; user-select: none; }
.hero-object img {
    width: 100%; height: auto; display: block;
    filter: drop-shadow(1px 2px 3px rgba(49, 58, 68, 0.06)) drop-shadow(4px 8px 14px rgba(49, 58, 68, 0.08));
}
@media (max-width: 900px) { .hero-object { display: none; } }

h1.hero-headline {
    font-family: var(--serif);
    font-stretch: 75%;
    font-weight: 300;
    font-size: clamp(56px, 6.4vw, 88px);
    line-height: 1.04;
    letter-spacing: -0.018em;
    color: var(--ink);
    max-width: 18ch;
    margin: 0 auto 28px;
}
.hero-widget {
    font-family: var(--serif);
    font-stretch: 75%;
    font-weight: 300;
    font-size: clamp(17px, 2.4vw, 34px);
    line-height: 1.5;
    color: var(--ink);
    margin: 0;
}
.widget-pill { display: inline; white-space: nowrap; }

/* slot-machine widget */
.hero-widget--slot { margin-top: 18px; }
.hero-widget--slot .slot { display: inline-block; vertical-align: bottom; }
.slot-window {
    display: inline-block; height: 1.5em; overflow: hidden;
    vertical-align: bottom;
    transition: width 600ms cubic-bezier(0.77, 0, 0.175, 1);
    will-change: width;
}
.slot-track {
    display: flex; flex-direction: column; align-items: flex-start;
    transition: transform 600ms cubic-bezier(0.77, 0, 0.175, 1);
    will-change: transform; color: var(--ink);
}
.slot-row { height: 1.5em; line-height: 1.5; white-space: nowrap; flex-shrink: 0; width: max-content; }
.slot-row em { font-style: italic; color: var(--emphasis); }
@media (prefers-reduced-motion: reduce) {
    .slot-window, .slot-track { transition: none; }
}

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

.hero-trust {
    font-family: var(--sans); font-size: 13px; color: var(--ink-soft);
    letter-spacing: 0.01em; margin: 16px 0 0;
}

h1.hero-headline em, .em-blue {
    color: var(--emphasis);
    font-style: italic;
    font-weight: inherit;
}

/* ─── MISSION ───────────────────────────────────────── */
.mission {
    padding: clamp(120px, 22vh, 260px) 0;
    border-bottom: 1px solid var(--hairline);
    background: var(--bg);
}
.mission-inner { margin: 0 auto; text-align: center; }
.mission .label { display: block; margin-bottom: 56px; }
.mission-statement {
    font-family: var(--serif); font-stretch: 75%; font-weight: 300;
    font-size: clamp(34px, 6vw, 68px); line-height: 1.12;
    letter-spacing: -0.015em; color: var(--ink);
}
.mission-cta {
    display: inline-block; margin-top: 48px;
    background: var(--saffron); color: var(--ink);
    padding: 12px 24px 14px; border-radius: 4px;
    text-decoration: none; font-family: var(--sans);
    font-size: 15px; line-height: 1;
    transition: filter 0.18s ease;
}
.mission-cta:hover { filter: brightness(0.94); }

/* ─── BUTTONS / CTA ──────────────────────────────────── */
.cta-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.btn {
    font-family: var(--sans); font-size: 14px; font-weight: 500;
    text-decoration: none; padding: 14px 22px; border-radius: 4px;
    display: inline-flex; align-items: center; gap: 10px;
    transition: all 0.18s ease; border: 1px solid transparent;
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-secondary {
    background: transparent; color: var(--ink);
    border-color: var(--hairline-strong);
}
.btn-secondary:hover { background: var(--bg-deep); }
.btn .arrow { transition: transform 0.18s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ─── PROBLEM ───────────────────────────────────────── */
.problem {
    padding: clamp(100px, 18vh, 220px) 0;
    border-bottom: 1px solid var(--hairline);
}
.problem .label { display: block; margin-bottom: 48px; }
.problem-statement {
    font-family: var(--serif); font-stretch: 75%; font-weight: 300;
    font-size: clamp(34px, 6vw, 68px); line-height: 1.12;
    letter-spacing: -0.015em; color: var(--ink);
}

/* ─── STATS ─────────────────────────────────────────── */
.stats {
    padding: clamp(60px, 8vh, 100px) 0;
    border-bottom: 1px solid var(--hairline);
}
.stats-cta, .journey-cta {
    display: flex; justify-content: center;
    margin-top: clamp(40px, 6vh, 64px);
}
.stats-meta {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 56px; flex-wrap: wrap; gap: 16px;
}
.stat-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}
.stat { padding: 36px 24px 32px 0; border-right: 1px solid var(--hairline); }
.stat:nth-child(4) { border-right: none; padding-right: 0; }
/* "Mission" tile spans the full row below the 4 numerical stats. Big italic
   "1" leads (we have ONE mission), with the mission statement italicized
   below. Hairline above separates it from the numerical row. */
.stat.stat--mission {
    grid-column: 1 / -1;
    border-right: none;
    border-top: 1px solid var(--hairline);
    padding: 38px 0 32px;
    text-align: center;
}
.stat.stat--mission .stat-num {
    display: block;
    font-family: var(--serif); font-stretch: 75%;
    font-weight: 300; font-style: italic;
    font-size: clamp(64px, 8vw, 108px);
    line-height: 0.92; letter-spacing: -0.03em;
    color: var(--emphasis);
    margin: 0 auto 14px;
}
.stat.stat--mission .stat-label {
    font-family: var(--serif); font-size: clamp(15px, 1.3vw, 19px);
    font-style: italic; color: var(--ink); line-height: 1.5;
    max-width: 56ch; margin: 0 auto;
    letter-spacing: 0;
}
.stat-num {
    font-family: var(--serif); font-size: clamp(46px, 5.5vw, 80px);
    line-height: 1; letter-spacing: -0.03em; color: var(--ink);
    margin-bottom: 16px;
}
.stat-num.green { color: var(--ink); }
.stat-label {
    font-family: var(--serif); font-size: 11px;
    color: var(--ink-soft); line-height: 1.5;
}

/* ─── DOCTRINE ──────────────────────────────────────── */
.doctrine {
    padding: clamp(80px, 12vh, 140px) 0;
    border-bottom: 1px solid var(--hairline);
}
.doctrine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.doctrine h2 {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(36px, 4.5vw, 64px); line-height: 1;
    letter-spacing: -0.02em; margin: 16px 0 40px;
}
.doctrine h2 em { font-style: italic; color: var(--ink); }
.doctrine-intro {
    font-size: 18px; line-height: 1.55; color: var(--ink-soft);
    max-width: 38ch; margin-bottom: 8px;
}
.doctrine ul { list-style: none; border-top: 1px solid var(--hairline); }
.doctrine li {
    padding: 22px 0; border-bottom: 1px solid var(--hairline);
    font-size: 18px; line-height: 1.45;
    display: flex; gap: 24px; align-items: baseline;
}
.doctrine-cta {
    display: inline-block; margin-top: 32px;
    padding: 12px 24px 14px; background: var(--saffron); color: var(--ink);
    border-radius: 4px; text-decoration: none;
    font-family: var(--sans); font-size: 15px; line-height: 1;
    transition: filter 0.18s ease;
}
.doctrine-cta:hover { filter: brightness(0.94); }
.doctrine-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.doctrine-ctas .doctrine-cta, .doctrine-ctas .doctrine-cta-secondary { margin-top: 0; }
.doctrine-cta-secondary {
    display: inline-block; padding: 12px 24px 14px;
    background: transparent; color: var(--ink); border: 1px solid var(--ink);
    border-radius: 4px; text-decoration: none;
    font-family: var(--sans); font-size: 15px; line-height: 1;
    transition: background 0.18s ease, color 0.18s ease;
}
.doctrine-cta-secondary:hover { background: var(--ink); color: var(--bg); }
.doctrine li .num {
    font-family: var(--serif); font-size: 11px; color: var(--ink-soft);
    min-width: 32px;
}

/* ─── JOURNEY (homepage section) ────────────────────── */
.journey {
    padding: clamp(80px, 12vh, 140px) 0;
    border-bottom: 1px solid var(--hairline);
    background: var(--bg-soft);
}
.section-head {
    margin-bottom: 72px;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 80px; align-items: end;
}
.section-head h2 {
    font-family: var(--serif); font-stretch: 75%; font-weight: 300;
    font-size: clamp(36px, 4.4vw, 64px); line-height: 1.05;
    letter-spacing: -0.015em; max-width: 16ch;
}
.section-head h2 em { font-style: italic; color: var(--ink); }
.programs .section-head h2 em { color: #511338; }
.section-head p {
    font-size: 17px; color: var(--ink-soft); line-height: 1.55; max-width: 38ch;
}
.steps {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
    border-top: 1px solid var(--hairline);
}
.step {
    padding: 32px 24px 32px 0;
    border-right: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}
.step:last-child { border-right: none; }
.step-num {
    font-family: var(--serif); font-size: 11px;
    color: var(--ink); margin-bottom: 28px;
}
.step h3 {
    font-family: var(--serif); font-weight: 400;
    font-size: 28px; line-height: 1; margin-bottom: 14px;
    letter-spacing: -0.01em;
}
.step p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }

/* ─── EXPERTS / JOURNEY (homepage condensed) ────────────
   Four phase markers in a clean horizontal timeline. Each phase has a
   single dot on the line, a small "01" eyebrow, a serif title, and one
   sentence of context. The full team-of-experts breakdown lives on
   /what-is-ck/ — the CTA below the strip links there. Reads as a
   confident "here's the arc" rather than overwhelming the homepage. */
.experts { padding: clamp(80px, 12vh, 140px) 0; border-bottom: 1px solid var(--hairline); }

.phase-strip {
    list-style: none; margin: 24px 0 0; padding: 56px 0 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    position: relative;
    border-top: 1px solid var(--hairline);
}
/* Connector line — geometry is JS-driven via --spine-y / --spine-x / --spine-w
   custom properties set from the actual first/last dot bounding boxes, so the
   line always starts and ends exactly at the dot centers regardless of how the
   content laid out. CSS fallbacks below are only used pre-script. */
.phase-strip::before {
    content: '';
    position: absolute;
    top: var(--spine-y, 56px);
    left: var(--spine-x, calc(100% / 8));
    width: var(--spine-w, calc(100% - 2 * (100% / 8)));
    height: 1.5px;
    background: var(--hairline);
    right: auto;
}
/* Scroll-driven fill bar — sits on top of the hairline, scaleX-grows from 0
   to 1 as the section is scrolled. JS updates --p (0–1) on every frame. */
.phase-strip::after {
    content: '';
    position: absolute;
    top: var(--spine-y, 56px);
    left: var(--spine-x, calc(100% / 8));
    width: var(--spine-w, calc(100% - 2 * (100% / 8)));
    height: 3px;
    margin-top: -0.75px;       /* center the 3px fill over the 1.5px hairline */
    background: var(--emphasis);
    transform-origin: left center;
    transform: scaleX(var(--p, 0));
    transition: transform 180ms linear;
    pointer-events: none;
    z-index: 1;
}
.phase-step::before {
    transition: background 220ms ease-out;
}
.phase-step.is-active::before {
    background: var(--emphasis);
}
.phase-step {
    position: relative;
    padding: 24px 16px 0;
    text-align: center;
}
.phase-step::before {
    content: '';
    position: absolute;
    top: -32px; left: 50%; transform: translateX(-50%);
    width: 17px; height: 17px;
    border-radius: 50%;
    background: var(--bg, #F5F3ED);
    border: 2px solid var(--emphasis);
    box-shadow: 0 0 0 4px var(--bg, #F5F3ED);
}
.phase-step-num {
    display: block;
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 15px; color: var(--ink-soft);
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.phase-step-title {
    font-family: var(--serif); font-weight: 400;
    font-size: 22px;
    letter-spacing: -0.01em; line-height: 1.15;
    margin: 0 0 10px;
    color: var(--ink);
}
.phase-step-sub {
    font-family: var(--serif); font-size: 14px;
    color: var(--ink-soft); line-height: 1.5;
    margin: 0 auto; max-width: 28ch;
}

.experts-foot {
    margin: 40px auto 0; max-width: 64ch; text-align: center;
    font-family: var(--serif); font-style: italic; font-size: 13.5px;
    color: var(--ink-soft); letter-spacing: 0.01em;
}
.experts-foot strong { color: var(--ink); font-weight: 500; font-style: normal; }
.experts-cta { margin-top: 32px; text-align: center; }

/* ─── PROGRAMS ──────────────────────────────────────── */
.programs {
    padding: clamp(80px, 12vh, 140px) 0;
    border-bottom: 1px solid var(--hairline);
}

/* ─── PARTNERS marquee ─────────────────────────────── */
.partners {
    padding: clamp(28px, 4vh, 48px) 0;
    border-bottom: 1px solid var(--hairline);
    overflow: hidden;
}
.partners-label {
    text-align: center;
    font-family: var(--serif); font-size: 13px;
    color: var(--ink-soft); margin-bottom: 22px;
}
.partners-track {
    display: flex; align-items: center; width: max-content;
    animation: partners-scroll 60s linear infinite;
    animation-play-state: paused;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}
/* Marquees only animate once their section scrolls into view. The
   .is-visible class is set by an IntersectionObserver in leivis.html. */
.partners.is-visible .partners-track { animation-play-state: running; }
.partners-track img {
    height: 32px; width: auto; flex-shrink: 0;
    filter: grayscale(1) contrast(0.9); opacity: 0.7;
    object-fit: contain; margin-right: 56px;
}
/* .featured retained as a hook for future use; visual treatment now matches base */
.partners-track img.featured {
    height: 32px; filter: grayscale(1) contrast(0.9); opacity: 0.7; margin-right: 56px;
}
/* Click-through link wrapper for As-Featured-In + Trusted-by + Partners marquees.
   Logos sit grayscale + muted by default; hover restores full brand color. */
.partners-track a {
    display: inline-flex; align-items: center; flex-shrink: 0;
    margin-right: 56px; transition: opacity 0.2s ease;
}
.partners-track a img,
.partners-track a svg,
.partners-track a svg.partner-fake-logo { margin-right: 0; transition: filter 0.22s ease, opacity 0.22s ease; }
.partners-track a:hover img,
.partners-track a:focus-visible img,
.partners-track a:hover svg,
.partners-track a:focus-visible svg { filter: none; opacity: 1; }
/* Inline SVG fake logos (Rohr / Emet) - match the <img> baseline treatment.
   The link-wrapped variant (.partners-track a svg.partner-fake-logo) overrides
   margin-right: 0 above to avoid doubling the gap (link wrapper supplies its
   own 56px). The standalone variant keeps 56px for when an editor adds a
   fake-logo SVG without a click-through URL. */
.partners-track svg.partner-fake-logo {
    height: 32px; width: auto; flex-shrink: 0;
    filter: grayscale(1) contrast(0.9); opacity: 0.7;
    margin-right: 56px;
}
/* Matches the 3-copy renderer in functions.php: translating by one third of
   the track moves exactly one set width, the duplicate sets fill the viewport
   at every animation position, no empty gap on the right of narrower marquees. */
@keyframes partners-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-33.3333%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .partners-track { animation-duration: 120s; }
}

.program-list { border-top: 1px solid var(--hairline); }
.program {
    position: relative; isolation: isolate;
    display: grid; grid-template-columns: 1.8fr 2fr 0.9fr;
    gap: 40px; padding: 40px 24px;
    /* The 24px horizontal padding is so the hover tint reads as a soft
       inset "card" rather than a hard edge-to-edge wash. The negative
       margin cancels it visually so the layout is unchanged at rest. */
    margin: 0 -24px;
    border-bottom: 1px solid var(--hairline);
    align-items: start; text-decoration: none; color: var(--ink);
    border-radius: 6px;
    opacity: 0; transform: translateX(40px);
    transition: opacity 520ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 520ms cubic-bezier(0.23, 1, 0.32, 1),
                background-color 120ms ease-out;
}
.program:hover,
.program:focus-visible {
    background: color-mix(in srgb, var(--program-color) 7%, transparent);
}
.program.is-visible { opacity: 1; transform: translateX(0); }
.program-list .program:nth-child(1).is-visible { transition-delay: 0ms; }
.program-list .program:nth-child(2).is-visible { transition-delay: 70ms; }
.program-list .program:nth-child(3).is-visible { transition-delay: 140ms; }
.program-list .program:nth-child(4).is-visible { transition-delay: 210ms; }
.program-list .program:nth-child(5).is-visible { transition-delay: 280ms; }
@media (prefers-reduced-motion: reduce) {
    .program { opacity: 1; transform: none; transition: none; }
}
.program::before { display: none; }
.program-list .program:nth-child(1) { --program-color: #243466; }
.program-list .program:nth-child(2) { --program-color: #1E4D3F; }
.program-list .program:nth-child(3) { --program-color: #8A5A1C; }
.program-list .program:nth-child(4) { --program-color: #6B2A33; }
.program-list .program:nth-child(5) { --program-color: #2F2A5C; }
.program:last-child { border-bottom: none; }

.program-name {
    font-family: var(--serif); font-size: clamp(28px, 3.5vw, 44px);
    line-height: 1; letter-spacing: -0.015em;
}
.program-name::before { display: none; }
.program-name em { font-style: italic; color: var(--ink); }
.program-list .program:nth-child(1) .program-name em { color: #243466; }
.program-list .program:nth-child(2) .program-name em { color: #1E4D3F; }
.program-list .program:nth-child(3) .program-name em { color: #8A5A1C; }
.program-list .program:nth-child(4) .program-name em { color: #6B2A33; }
.program-list .program:nth-child(5) .program-name em { color: #2F2A5C; }

.program-desc { font-size: 17px; line-height: 1.5; color: var(--ink); padding-top: 14px; }
.program-desc .meta {
    display: block; margin-top: 10px;
    font-family: var(--serif); font-size: 11px; color: var(--ink-soft);
}
.program-cta {
    align-self: start; justify-self: end; margin-top: 10px;
    padding: 10px 18px 12px;
    border: 1px solid var(--ink); border-radius: 4px;
    font-family: var(--sans); font-size: 13px; line-height: 1;
    color: var(--ink);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.program:hover .program-cta, .program.is-hover .program-cta {
    background: var(--ink); color: var(--bg); border-color: var(--ink);
    transform: translateX(2px);
}
.program-list .program:nth-child(1):hover .program-cta { background: #243466; border-color: #243466; }
.program-list .program:nth-child(2):hover .program-cta { background: #1E4D3F; border-color: #1E4D3F; }
.program-list .program:nth-child(3):hover .program-cta { background: #8A5A1C; border-color: #8A5A1C; }
.program-list .program:nth-child(4):hover .program-cta { background: #6B2A33; border-color: #6B2A33; }
.program-list .program:nth-child(5):hover .program-cta { background: #2F2A5C; border-color: #2F2A5C; }

/* ─── DONATE ────────────────────────────────────────── */
.donate {
    padding: clamp(100px, 16vh, 200px) 0;
    background: var(--bg-soft); color: var(--ink);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}
.donate-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; }
.donate h2 {
    font-family: var(--serif); font-stretch: 75%; font-weight: 300;
    font-size: clamp(36px, 4.4vw, 64px); line-height: 1.05;
    letter-spacing: -0.015em; color: var(--ink); max-width: 16ch;
}
.donate h2 em { font-style: italic; color: var(--emphasis); }
.donate-side { display: flex; flex-direction: column; gap: 32px; }
.donate p { font-size: 18px; line-height: 1.5; color: var(--ink-soft); max-width: 42ch; }
.donate .btn-primary { background: var(--saffron); color: var(--ink); align-self: flex-start; }
.donate .btn-primary:hover { filter: brightness(0.94); }
.donate .label { color: var(--ink-soft); }

/* ─── FOOTER ────────────────────────────────────────── */
footer.site-footer { padding: 80px 0 60px; background: var(--bg); }
.footer-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px; margin-bottom: 80px;
}
.footer-brand h3 {
    font-family: var(--serif); font-weight: 400;
    font-size: 36px; line-height: 1; letter-spacing: -0.015em;
    margin-bottom: 20px;
    display: flex; align-items: center; gap: 12px;
}
/* ck-logo.webp is the full lockup (tulip icon + COLLECTIVE KINDNESS wordmark).
   The footer-brand h3 prints the wordmark itself in serif type, so we only
   want the tulip icon next to it. Crop the image to its leftmost square via
   object-fit so we don't need a separate icon-only asset. */
.footer-brand-logo {
    width: 32px; height: 32px;
    object-fit: cover;
    object-position: left center;
    flex-shrink: 0;
    display: inline-block;
}
@media (max-width: 900px) {
    .footer-brand-logo { width: 26px; height: 26px; }
}
.footer-brand p { font-size: 15px; color: var(--ink-soft); max-width: 38ch; }
.footer-col h4 {
    font-family: var(--serif); font-size: 11px; color: var(--ink-soft);
    margin-bottom: 20px; font-weight: 500;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 12px; }
.footer-col a {
    font-size: 15px; color: var(--ink); text-decoration: none;
    transition: opacity 0.15s;
}
.footer-col a:hover { opacity: 0.6; }
.footer-base {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 32px; border-top: 1px solid var(--hairline);
    font-family: var(--serif); font-size: 11px; color: var(--ink-soft);
    flex-wrap: wrap; gap: 16px;
}
.footer-base-left { display: flex; align-items: center; gap: 16px; }
.footer-base-left a { display: inline-flex; line-height: 0; transition: opacity 0.18s ease; }
.footer-base-left a:hover { opacity: 0.78; }
.footer-seal {
    width: 64px; height: 64px; flex-shrink: 0;
    display: block;
    /* Muted treatment so the seal sits with the cream/slate palette
       rather than reading as a clashing badge. */
    filter: grayscale(0.65) contrast(0.95);
    opacity: 0.85;
    transition: filter 0.22s ease, opacity 0.22s ease;
}
.footer-base-left a:hover .footer-seal { filter: none; opacity: 1; }

/* ─── NAV DROPDOWN ──────────────────────────────────── */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
    position: absolute; top: calc(100% + 6px); left: -12px;
    background: var(--bg); border: 1px solid var(--hairline);
    border-radius: 6px; padding: 6px 0; min-width: 190px;
    box-shadow: 0 12px 32px rgba(20, 24, 30, 0.08);
    opacity: 0; transform: scale(0.97) translateY(-4px);
    transform-origin: top left; pointer-events: none;
    transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 50;
}
.nav-dropdown-menu::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1; transform: scale(1) translateY(0); pointer-events: auto;
}
.nav-dropdown-menu a {
    display: block; padding: 8px 18px; color: var(--ink);
    font-size: 14px; text-decoration: none;
    transition: opacity 120ms ease;
}
.nav-dropdown-menu a:hover { opacity: 0.55; }

/* ─── MOBILE DRAWER ─────────────────────────────────── */
.hamburger {
    display: none; background: none; border: none;
    width: 40px; height: 40px; padding: 0; cursor: pointer;
    position: relative;
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hamburger:active { transform: scale(0.94); }
.hamburger span {
    position: absolute; left: 9px; right: 9px;
    height: 1.5px; background: var(--ink); border-radius: 2px;
    transition: top 220ms cubic-bezier(0.32, 0.72, 0, 1),
                transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}
.hamburger span:nth-child(1) { top: 16px; }
.hamburger span:nth-child(2) { top: 23px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { top: 19px; transform: rotate(-45deg); }
.drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(20, 24, 30, 0.42);
    opacity: 0; pointer-events: none;
    transition: opacity 320ms cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 99; backdrop-filter: blur(2px);
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.drawer {
    position: fixed; top: 0; right: 0;
    height: 100vh; height: 100dvh;
    width: min(360px, 86vw);
    background: var(--bg); z-index: 100;
    transform: translateX(100%);
    transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1);
    padding: 72px 32px max(48px, calc(env(safe-area-inset-bottom) + 32px));
    display: flex; flex-direction: column;
    box-shadow: -24px 0 60px rgba(20, 24, 30, 0.10);
    overflow-y: auto; overscroll-behavior: contain;
}
.drawer.is-open { transform: translateX(0); }
.drawer-close {
    position: absolute; top: 16px; right: 16px;
    background: none; border: none;
    width: 40px; height: 40px; cursor: pointer; color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.drawer-close:active { transform: scale(0.94); }
.drawer-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.drawer-list li { border-bottom: 1px solid var(--hairline); }
.drawer-list li:first-child { border-top: 1px solid var(--hairline); }
.drawer-list > li > a,
.drawer-list > li > .drawer-toggle,
.drawer-list > li > .drawer-row {
    display: block; width: 100%; padding: 18px 0;
    font-family: var(--serif); font-size: 22px; font-weight: 300;
    color: var(--ink); text-decoration: none;
    background: none; border: none; text-align: left; cursor: pointer;
    opacity: 0; transform: translateX(24px);
    transition: opacity 380ms cubic-bezier(0.32, 0.72, 0, 1),
                transform 380ms cubic-bezier(0.32, 0.72, 0, 1);
}
.drawer-list > li > .drawer-toggle { display: flex; align-items: center; justify-content: space-between; }
/* Linked-row variant: text behaves as a real link, chevron-button toggles
   the submenu so users can both navigate to /about/ and expand it. */
.drawer-list > li > .drawer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.drawer-row .drawer-link {
    flex: 1; min-width: 0;
    font: inherit; color: inherit; text-decoration: none;
    padding: 0; margin: 0;
    /* tap target spans the row vertically (parent already supplies the
       18px top/bottom padding) */
}
.drawer-row .drawer-toggle--chev {
    flex: 0 0 auto; width: 44px; height: 44px; margin: -10px -10px -10px 0;
    padding: 0; background: none; border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-soft);
}
.drawer.is-open .drawer-list > li > a,
.drawer.is-open .drawer-list > li > .drawer-toggle,
.drawer.is-open .drawer-list > li > .drawer-row { opacity: 1; transform: translateX(0); }
.drawer.is-open .drawer-list > li:nth-child(1) > * { transition-delay: 80ms; }
.drawer.is-open .drawer-list > li:nth-child(2) > * { transition-delay: 140ms; }
.drawer.is-open .drawer-list > li:nth-child(3) > * { transition-delay: 200ms; }
.drawer.is-open .drawer-list > li:nth-child(4) > * { transition-delay: 260ms; }
.drawer.is-open .drawer-list > li:nth-child(5) > * { transition-delay: 320ms; }
.drawer-chev { transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1); flex-shrink: 0; color: var(--ink-soft); }
.drawer-toggle[aria-expanded="true"] .drawer-chev { transform: rotate(90deg); }
.drawer-sublist {
    list-style: none; margin: 0; padding: 0 0 0 18px;
    overflow: hidden; max-height: 0;
    transition: max-height 340ms cubic-bezier(0.32, 0.72, 0, 1);
}
.drawer-toggle[aria-expanded="true"] + .drawer-sublist { max-height: 320px; }
/* Linked-row variant: the toggle button is no longer an adjacent sibling
   of the sublist (it sits inside .drawer-row), so the expand state lives
   on the parent <li> via JS instead. */
.drawer-expandable.is-open > .drawer-sublist { max-height: 320px; }
.drawer-sublist li { border-top: 1px solid var(--hairline); }
.drawer-sublist a {
    display: block; padding: 12px 0;
    font-family: var(--serif); font-size: 17px;
    font-style: italic; font-weight: 300; color: var(--ink); text-decoration: none;
}
.drawer-apply,
.drawer-donate {
    text-align: center; padding: 16px 24px; border-radius: 4px;
    font-family: var(--sans); font-size: 15px; text-decoration: none;
    opacity: 0; transform: translateX(24px);
    transition: opacity 380ms cubic-bezier(0.32, 0.72, 0, 1),
                transform 380ms cubic-bezier(0.32, 0.72, 0, 1),
                filter 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.drawer-apply {
    background: transparent; color: var(--ink);
    border: 1.5px solid var(--ink);
    margin-top: 24px;
}
.drawer-donate {
    background: var(--saffron); color: var(--ink);
    margin-top: 12px;
}
.drawer.is-open .drawer-apply { opacity: 1; transform: translateX(0); transition-delay: 300ms; }
.drawer.is-open .drawer-donate { opacity: 1; transform: translateX(0); transition-delay: 340ms; }
.drawer-apply:hover { background: var(--ink); color: var(--bg); }
.drawer-donate:hover { filter: brightness(0.94); }
body.drawer-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
    .hamburger span, .drawer, .drawer-backdrop,
    .drawer-list a, .drawer-apply, .drawer-donate { transition: none; }
}

/* ─── RESPONSIVE ────────────────────────────────────── */
@media (max-width: 900px) {
    nav.site-nav ul { display: none; }
    .hamburger { display: block; }
    nav.site-nav .wrap { padding-top: 14px; padding-bottom: 14px; }
    .brand-icon { width: 32px; height: 32px; }
    .logo-word { font-size: 20px; }
    .hero { padding: clamp(72px, 12vh, 130px) 0 clamp(60px, 10vh, 110px); }
    h1.hero-headline { font-size: clamp(40px, 7.8vw, 64px); line-height: 1.06; max-width: 16ch; margin-bottom: 24px; }
    .hero-widget { font-size: clamp(16px, 4.2vw, 22px); }
    .hero-olive { bottom: -40px; left: -40px; right: -20px; width: calc(100% + 60px); opacity: 0.10; }
    .slot-row { max-width: 80vw; }
    .hero-trust { font-size: 12px; }
    .problem { padding: clamp(70px, 14vh, 140px) 0; }
    .problem-statement { font-size: clamp(22px, 5vw, 32px); line-height: 1.4; }
    .partners { padding: clamp(24px, 4vh, 36px) 0; }
    .partners-label { font-size: 12px; margin-bottom: 18px; }
    .partners-track img { height: 26px; margin-right: 40px; }
    .partners-track img.featured { height: 26px; margin-right: 40px; }
    .partners-track a { margin-right: 40px; }
    .partners-track a img { margin-right: 0; }
    .programs { padding: clamp(60px, 10vh, 110px) 0; }
    /* Reset the desktop hover-padding/negative-margin trick so the rows
       can't overflow the .wrap container on mobile. */
    .program { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; margin: 0; border-radius: 0; }
    .program-desc { padding-top: 0; font-size: 16px; }
    .program-name { font-size: clamp(26px, 6vw, 36px); }
    .program-cta {
        justify-self: start; margin-top: 4px;
        padding: 11px 18px 13px; font-size: 13px;
        min-height: 44px; box-sizing: border-box;
        display: inline-flex; align-items: center;
    }
    .section-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 48px; }
    .section-head h2 { font-size: clamp(34px, 7vw, 52px); max-width: 18ch; }
    .section-head p { font-size: 16px; }
    .doctrine { padding: clamp(64px, 10vh, 110px) 0; }
    .doctrine-grid { grid-template-columns: 1fr; gap: 50px; }
    .doctrine h2 { font-size: clamp(32px, 7vw, 48px); margin-bottom: 24px; }
    .doctrine-intro { font-size: 16px; }
    .doctrine li { font-size: 16px; padding: 18px 0; gap: 18px; }
    .doctrine-cta { padding: 14px 22px 16px; font-size: 15px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
    .mission { padding: clamp(70px, 14vh, 140px) 0; }
    .stats { padding: clamp(50px, 8vh, 90px) 0; }
    .stats-meta { margin-bottom: 36px; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .stat { border-right: 1px solid var(--hairline); }
    .stat:nth-child(2n) { border-right: none; }
    .stat:nth-child(1), .stat:nth-child(2),
    .stat:nth-child(3), .stat:nth-child(4) { border-bottom: 1px solid var(--hairline); }
    /* Mission stat spans full width on mobile and is centered so the
       mission line reads as a banner, not a left-aligned tile. */
    .stat--mission { grid-column: 1 / -1; border-right: none; text-align: center; padding: 24px 0; }
    .stat--mission .stat-label { max-width: 36ch; margin: 0 auto; }
    .stat-num { font-size: clamp(48px, 13vw, 80px); margin-bottom: 12px; }
    .stat-label { font-size: 12px; }
    .journey { padding: clamp(64px, 10vh, 110px) 0; }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .step:nth-child(2n) { border-right: none; }
    .step { padding: 24px 18px 24px 0; }
    .step-num { font-size: 11px; margin-bottom: 18px; }
    .step h3 { font-size: 24px; margin-bottom: 10px; }
    .step p { font-size: 14px; }
    .experts { padding: clamp(64px, 10vh, 110px) 0; }
    /* Mobile: rotate the timeline 90° — vertical spine on the left, each
       phase becomes a row with the dot on the spine and content to the right. */
    .phase-strip {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 8px 0 0;
        margin-top: 8px;
        border-top: none;
    }
    .phase-strip::before {
        top: var(--spine-y, 38px);
        bottom: auto;
        height: var(--spine-h, calc(100% - 76px));
        left: 8px;
        right: auto;
        width: 1.5px;
    }
    .phase-strip::after {
        top: var(--spine-y, 38px);
        left: 6.5px;
        margin-top: 0;
        width: 3px;
        height: var(--spine-h, calc(100% - 76px));
        transform-origin: center top;
        transform: scaleY(var(--p, 0));
    }
    .phase-step {
        text-align: left;
        padding: 18px 0 18px 36px;
    }
    .phase-step::before {
        top: 22px; left: 0; transform: none;
    }
    .phase-step-num { margin-bottom: 4px; }
    .phase-step-title { font-size: 19px; margin-bottom: 6px; }
    .phase-step-sub { max-width: none; }
    .stats-cta, .journey-cta, .experts-cta { margin-top: 32px; text-align: center; }
    .btn { padding: 14px 22px; font-size: 14px; min-height: 44px; box-sizing: border-box; }
    .donate { padding: clamp(64px, 10vh, 110px) 0; }
    .donate-inner { grid-template-columns: 1fr; gap: 32px; }
    .donate h2 { font-size: clamp(34px, 7.5vw, 52px); }
    .donate .btn-primary { padding: 16px 28px; font-size: 15px; min-height: 48px; box-sizing: border-box; }
    footer.site-footer { padding: 48px 0 32px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 28px; margin-bottom: 36px; }
    .footer-brand { grid-column: span 2; }
    .footer-brand h3 { font-size: 28px; margin-bottom: 12px; }
    .footer-brand p { font-size: 14px; line-height: 1.5; }
    .footer-col h4 { margin-bottom: 14px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
    .footer-col li { margin-bottom: 9px; }
    .footer-col a { font-size: 14px; }
    .footer-base { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 22px; }
    .footer-base-left { flex-wrap: wrap; gap: 12px; }
    .footer-seal { width: 52px; height: 52px; }
}

@media (max-width: 540px) {
    body { font-size: 16px; }
    .wrap { padding: 0 20px; }
    nav.site-nav .wrap { padding-top: 12px; padding-bottom: 12px; }
    .logo-word { font-size: 17px; }
    .phase-step { padding: 16px 0 16px 30px; }
    .phase-step::before { top: 20px; }
    .phase-step-title { font-size: 18px; }
    .hero { padding: clamp(56px, 9vh, 100px) 0 clamp(40px, 8vh, 90px); }
    h1.hero-headline { font-size: clamp(34px, 9.2vw, 48px); }
    .hero-widget { font-size: 17px; line-height: 1.45; }
    .hero-olive { bottom: -30px; opacity: 0.09; }
    .problem { padding: 56px 0; }
    .problem-statement { font-size: clamp(20px, 5.5vw, 26px); line-height: 1.4; }
    .partners { padding: 28px 0; }
    .partners-label { font-size: 11px; margin-bottom: 14px; }
    .partners-track img { height: 22px; margin-right: 32px; }
    .partners-track img.featured { height: 22px; margin-right: 32px; }
    .partners-track a { margin-right: 32px; }
    .partners-track a img { margin-right: 0; }
    .programs { padding: 56px 0; }
    .program { padding: 24px 0; gap: 12px; }
    .program-name { font-size: 26px; }
    .program-desc { font-size: 15px; }
    .program-desc .meta { font-size: 10px; margin-top: 8px; }
    .program-cta { padding: 10px 16px 12px; font-size: 12px; }
    .section-head { margin-bottom: 36px; gap: 16px; }
    .section-head h2 { font-size: 30px; }
    .section-head p { font-size: 15px; }
    .doctrine { padding: 56px 0; }
    .doctrine h2 { font-size: 30px; }
    .doctrine-intro { font-size: 15px; }
    .doctrine li { font-size: 15px; padding: 16px 0; gap: 14px; }
    .doctrine li .num { min-width: 24px; }
    .mission { padding: clamp(60px, 12vh, 100px) 0; }
    .mission-cta { padding: 13px 22px 15px; font-size: 14px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
    .stats { padding: 50px 0; }
    .stat { padding: 18px 12px 18px 0; }
    .stat-num { font-size: 52px; }
    .stat-label { font-size: 11px; }
    .journey { padding: 56px 0; }
    .step { padding: 22px 14px 22px 0; }
    .step h3 { font-size: 22px; }
    .step p { font-size: 13px; }
    .donate { padding: 56px 0; }
    .donate h2 { font-size: 32px; }
    .donate-inner { gap: 24px; }
    .donate .btn-primary { padding: 15px 26px; font-size: 14px; }
    /* Keep the 2-column layout for the link groups so the footer reads tight,
       not as one long stack. Brand still spans full width above. */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 24px; }
    .footer-brand { grid-column: span 2; }
    .footer-brand h3 { font-size: 26px; }
    .footer-col li { margin-bottom: 8px; }
    .footer-col a { font-size: 13.5px; }
}

@media (max-width: 380px) {
    .wrap { padding: 0 18px; }
    h1.hero-headline { font-size: 32px; line-height: 1.08; }
    .hero-widget { font-size: 15px; }
    .problem-statement { font-size: 19px; }
    .partners-track img { height: 20px; margin-right: 28px; }
    .partners-track img.featured { height: 20px; margin-right: 28px; }
    .partners-track a { margin-right: 28px; }
    .partners-track a img { margin-right: 0; }
    .program-name { font-size: 22px; }
    .program-desc { font-size: 14px; }
    .section-head h2 { font-size: 26px; }
    .doctrine h2 { font-size: 26px; }
    .doctrine li { font-size: 14px; }
    .stat-num { font-size: 44px; }
    .steps { grid-template-columns: 1fr; }
    .step { padding: 20px 0; border-right: none; }
    .step h3 { font-size: 20px; }
    .donate h2 { font-size: 26px; }
}

/* ─── HARD LIGHT-MODE LOCK ─────────────────────────── */
html, body { background: #F5F3ED !important; color: #313A44 !important; }
.hero, .problem, .programs, .doctrine, .mission, .stats, .journey, footer.site-footer { background: #F5F3ED !important; }
.partners { background: #F5F3ED !important; }
.partners--featured { background: #F5F3ED !important; }
.donate { background: #FBF9F3 !important; color: #313A44 !important; }
.donate h2 { color: #313A44 !important; }
.donate h2 em { color: #2D5BE0 !important; }
.donate p { color: #6A7280 !important; }

@media (prefers-color-scheme: dark) {
    html, body { background: #F5F3ED !important; color: #313A44 !important; }
    .hero, .problem, .programs, .doctrine, .mission,
    .stats, .journey, .partners, .partners--featured, footer.site-footer {
        background: #F5F3ED !important; color: #313A44 !important;
    }
    .donate { background: #FBF9F3 !important; color: #313A44 !important; }
    .donate h2 { color: #313A44 !important; }
    .donate h2 em { color: #2D5BE0 !important; }
    .donate p { color: #6A7280 !important; }
    .doctrine h2 em, .hero-headline em,
    .mission-statement em, .em-blue { color: #2B3F8A !important; }
    .nav-cta, .doctrine-cta, .mission-cta {
        background: #E8D047 !important; color: #313A44 !important;
    }
    .btn-primary, .program-cta { background: #313A44 !important; color: #F5F3ED !important; }
    .donate .btn-primary { background: #E8D047 !important; color: #313A44 !important; }
    img { filter: none !important; }
    /* Partner + featured logos must stay monochrome even when the browser
       forces dark mode - the !important on the img rule above would
       otherwise strip the grayscale and let press/partner logos render
       in their native brand colors. */
    .partners-track img,
    .partners-track img.featured,
    .partner-logo-wrap img,
    .featured-logo-wrap img {
        filter: grayscale(1) contrast(0.9) !important;
        opacity: 0.7 !important;
    }
    /* But on hover, restore full brand color - applies to the static
       transparency grids AND the homepage clickable marquees, even
       under forced dark mode. */
    a.partner-tile:hover .partner-logo-wrap img,
    a.partner-tile:focus-visible .partner-logo-wrap img,
    .featured-card:hover .featured-logo-wrap img,
    .featured-card:focus-visible .featured-logo-wrap img,
    .partners-track a:hover img,
    .partners-track a:focus-visible img,
    .partners-track a:hover svg,
    .partners-track a:focus-visible svg {
        filter: none !important;
        opacity: 1 !important;
    }
}

/* ────────────────────────────────────────────────────────────
   PDF preview modal - shared overlay used by financial filings,
   impact reports, and any link tagged [data-pdf-modal].
   ──────────────────────────────────────────────────────────── */
body.pdf-modal-open { overflow: hidden; }
.pdf-modal[hidden] { display: none !important; }
.pdf-modal {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease;
}
.pdf-modal.is-open { opacity: 1; pointer-events: auto; }
.pdf-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(20, 24, 30, 0.62);
    backdrop-filter: blur(2px);
    cursor: pointer;
}
.pdf-modal-shell {
    position: relative;
    width: min(1100px, 94vw);
    height: min(88vh, 900px);
    background: var(--parchment, #F5F3ED);
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
    display: flex; flex-direction: column;
    overflow: hidden;
    transform: translateY(8px) scale(0.985);
    transition: transform 0.22s cubic-bezier(0.23, 1, 0.32, 1);
}
.pdf-modal.is-open .pdf-modal-shell { transform: translateY(0) scale(1); }
.pdf-modal-bar {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 16px;
    padding: 14px 16px 14px 22px;
    border-bottom: 1px solid var(--hairline, rgba(49,58,68,0.12));
    background: rgba(255,255,255,0.55);
}
.pdf-modal-title {
    flex: 1 1 auto;
    margin: 0;
    font-family: var(--serif, 'Noto Serif'); font-weight: 500;
    font-size: 15px; line-height: 1.3; color: var(--ink, #313A44);
    letter-spacing: -0.005em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdf-modal-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.pdf-modal-fullpage {
    font-family: var(--sans, 'Noto Sans');
    font-size: 13px; letter-spacing: 0.01em;
    color: var(--ink, #313A44);
    padding: 8px 14px;
    border: 1px solid var(--ink, #313A44);
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
    white-space: nowrap;
}
.pdf-modal-fullpage:hover,
.pdf-modal-fullpage:focus-visible {
    background: var(--ink, #313A44); color: var(--parchment, #F5F3ED);
}
.pdf-modal-close {
    background: transparent; border: none; padding: 6px;
    cursor: pointer; color: var(--ink, #313A44);
    border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s ease;
}
.pdf-modal-close:hover,
.pdf-modal-close:focus-visible { background: rgba(49,58,68,0.08); outline: none; }
.pdf-modal-frame { flex: 1 1 auto; min-height: 0; background: #2A2F36; }
.pdf-modal-frame iframe { width: 100%; height: 100%; border: none; display: block; background: #2A2F36; }

@media (max-width: 700px) {
    .pdf-modal-shell { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
    .pdf-modal-bar { padding: 12px 12px 12px 16px; gap: 10px; }
    .pdf-modal-title { font-size: 14px; }
    .pdf-modal-fullpage { padding: 7px 11px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .pdf-modal, .pdf-modal-shell { transition: none; }
}

/* ────────────────────────────────────────────────────────────
   Video preview modal - opens any link tagged [data-video-modal]
   in an in-page Vimeo iframe with autoplay. Closes on backdrop
   click, the × button, or the Esc key. Iframe src is cleared on
   close so the video stops playing.
   ──────────────────────────────────────────────────────────── */
body.video-modal-open { overflow: hidden; }
.video-modal[hidden] { display: none !important; }
.video-modal {
    position: fixed; inset: 0; z-index: 9100;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease;
}
.video-modal.is-open { opacity: 1; pointer-events: auto; }
.video-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(10, 14, 20, 0.78);
    backdrop-filter: blur(3px);
    cursor: pointer;
}
.video-modal-shell {
    position: relative;
    width: min(1100px, 94vw);
    aspect-ratio: 16 / 9;
    max-height: 88vh;
    background: #000;
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transform: translateY(8px) scale(0.985);
    transition: transform 0.22s cubic-bezier(0.23, 1, 0.32, 1);
}
.video-modal.is-open .video-modal-shell { transform: translateY(0) scale(1); }
.video-modal-shell iframe {
    width: 100%; height: 100%;
    border: none; display: block;
    background: #000;
}
.video-modal-close {
    position: absolute; top: 10px; right: 10px;
    background: rgba(255, 255, 255, 0.92); border: none;
    width: 36px; height: 36px; border-radius: 50%;
    cursor: pointer; color: #1A1F26;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, transform 0.15s;
    z-index: 2;
}
.video-modal-close:hover,
.video-modal-close:focus-visible { background: #fff; transform: scale(1.05); outline: none; }
@media (max-width: 700px) {
    .video-modal-shell { width: 94vw; border-radius: 8px; }
    .video-modal-close { top: 8px; right: 8px; width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .video-modal, .video-modal-shell { transition: none; }
}


/* Phase 2 — KDH video tile 16:9 (was 2/1 letterboxing) */
.km-feature-shell, .km-feature-frame { aspect-ratio: 16 / 9; }

/* Phase 2 — mobile program-row reset (no negative margin causing bleed) */
@media (max-width: 700px) {
  .program-list .program { margin: 0; padding: 28px 0; border-radius: 0; }
}