/* ConnectEd Research Institute
   Editorial-institutional polish pass.
   Brand palette (navy / deep blue / gold) preserved; neutrals tinted toward navy. */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..900;1,8..60,300..900&family=Work+Sans:ital,wght@0,300..800;1,300..800&family=Noto+Serif+SC:wght@300;400;500;700;900&display=swap');

/* ============================================================
   TOKENS
   ============================================================ */
:root {
    /* Brand (kept) */
    --lpi-navy: #002b49;
    --lpi-blue: #005587;
    --lpi-gold: #ffb81c;

    /* Navy-tinted neutrals */
    --ink: oklch(20% 0.035 240);          /* body text */
    --ink-soft: oklch(38% 0.025 240);     /* secondary text */
    --ink-muted: oklch(55% 0.015 240);    /* tertiary / eyebrow */
    --paper: oklch(99.2% 0.002 240);      /* page background */
    --paper-warm: oklch(97.5% 0.004 85);  /* subtle warm surface */
    --surface: oklch(96.5% 0.006 240);    /* cards / panels */
    --surface-2: oklch(93% 0.01 240);
    --hairline: oklch(86% 0.012 240);     /* borders */
    --hairline-strong: oklch(72% 0.02 240);

    /* Legacy aliases (kept so nothing breaks) */
    --lpi-gray-light: var(--surface);
    --lpi-gray-dark: var(--ink);
    --lpi-border: var(--hairline);
    --white: var(--paper);

    /* Gold variants */
    --gold-soft: oklch(89% 0.10 85);
    --gold-deep: oklch(72% 0.17 75);

    /* Typography
       Chinese fallback stack matches nexgen: Noto Serif SC for display, PingFang/YaHei for body.
       Latin characters still use Source Serif 4 / Work Sans; Chinese characters fall through. */
    --font-display: 'Source Serif 4', 'Iowan Old Style', 'Charter', Georgia, 'Noto Serif SC', 'PingFang SC', 'STSong', 'Microsoft YaHei', serif;
    --font-sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;

    /* Fluid modular scale (marketing/editorial — not app UI) */
    --step--1: clamp(0.82rem, 0.78rem + 0.2vw, 0.9rem);
    --step-0:  clamp(1rem, 0.97rem + 0.2vw, 1.075rem);
    --step-1:  clamp(1.15rem, 1.1rem + 0.3vw, 1.3rem);
    --step-2:  clamp(1.35rem, 1.25rem + 0.5vw, 1.6rem);
    --step-3:  clamp(1.7rem, 1.5rem + 1vw, 2.1rem);
    --step-4:  clamp(2.1rem, 1.7rem + 2vw, 3rem);
    --step-5:  clamp(2.75rem, 2rem + 3.8vw, 4.5rem);
    --step-6:  clamp(3.4rem, 2rem + 6.2vw, 6rem);

    /* Spacing (4pt scale, semantic) */
    --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;
    --space-5xl: 128px;

    --section-y: clamp(64px, 8vw, 120px);
    --edge-x: clamp(20px, 5vw, 80px);

    /* Motion */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);

    --dur-fast: 180ms;
    --dur-med: 320ms;
    --dur-slow: 680ms;

    /* Layout */
    --measure: 68ch;
    --max-content: 1280px;
    --max-narrow: 920px;
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body {
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    font-feature-settings: "ss01", "cv11";
    overflow-x: hidden;
}

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

a { color: inherit; }

button { font: inherit; }

::selection {
    background: var(--lpi-navy);
    color: var(--lpi-gold);
}

/* Focus ring — visible, calm, keyboard-only */
:focus-visible {
    outline: 2px solid var(--lpi-gold);
    outline-offset: 3px;
    border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--lpi-navy);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

h1 { font-size: var(--step-5); font-weight: 400; letter-spacing: -0.02em; }
h2 { font-size: var(--step-4); font-weight: 500; letter-spacing: -0.015em; }
h3 { font-size: var(--step-2); font-weight: 500; }
h4 { font-size: var(--step-1); font-weight: 600; }

p {
    font-size: var(--step-0);
    line-height: 1.7;
    max-width: var(--measure);
    text-wrap: pretty;
}

strong { font-weight: 600; color: var(--lpi-navy); }

em { font-style: italic; }

/* ============================================================
   UTILITIES
   ============================================================ */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: var(--space-md);
}

.eyebrow::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--lpi-gold);
    border-radius: 50%;
    transform: translateY(-1px);
}

.section-number {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ink-muted);
    margin-bottom: var(--space-sm);
    letter-spacing: 0.02em;
}

.section-number::before { content: "— "; opacity: 0.6; }

.lead {
    font-size: var(--step-2);
    line-height: 1.45;
    color: var(--ink);
    font-weight: 300;
    letter-spacing: -0.005em;
    max-width: 32ch;
}

/* Scroll-reveal initial state — progressively enhanced via JS */
.reveal {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition:
        opacity var(--dur-slow) var(--ease-out-quint),
        transform var(--dur-slow) var(--ease-out-quint);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Stagger children within a .reveal-group */
.reveal-group.is-visible > * {
    animation: rise var(--dur-slow) var(--ease-out-quint) both;
}
.reveal-group.is-visible > *:nth-child(1) { animation-delay: 0ms; }
.reveal-group.is-visible > *:nth-child(2) { animation-delay: 90ms; }
.reveal-group.is-visible > *:nth-child(3) { animation-delay: 180ms; }
.reveal-group.is-visible > *:nth-child(4) { animation-delay: 270ms; }
.reveal-group.is-visible > *:nth-child(5) { animation-delay: 360ms; }
.reveal-group.is-visible > *:nth-child(6) { animation-delay: 450ms; }

@keyframes rise {
    from { opacity: 0; transform: translate3d(0, 24px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Rule separator with centered gold dot */
.rule {
    border: none;
    height: 1px;
    background: var(--hairline);
    margin: var(--space-3xl) 0;
    position: relative;
}
.rule::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 6px; height: 6px;
    background: var(--lpi-gold);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   NAVIGATION
   ============================================================ */
nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in oklab, var(--paper) 92%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--edge-x);
    border-bottom: 1px solid var(--hairline);
    transition: box-shadow var(--dur-med) var(--ease-out-quart),
                background var(--dur-med) var(--ease-out-quart);
}

nav.is-scrolled {
    background: color-mix(in oklab, var(--paper) 98%, transparent);
    box-shadow: 0 1px 0 0 var(--hairline), 0 10px 30px -20px rgba(0, 43, 73, 0.18);
}

.logo {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--lpi-navy);
    text-decoration: none;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: opacity var(--dur-fast) var(--ease-out-quart);
}
.logo:hover { opacity: 0.72; }
.logo i {
    font-size: 0.95rem;
    color: var(--lpi-gold);
    transform: translateY(-1px);
}

.nav-links {
    display: flex;
    list-style: none;
    align-items: center;
    gap: var(--space-xl);
}

.nav-links li { position: relative; }

.nav-links > li > a {
    text-decoration: none;
    color: var(--lpi-navy);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 0;
    position: relative;
    transition: color var(--dur-fast) var(--ease-out-quart);
}

.nav-links > li > a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 1px;
    background: var(--lpi-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-med) var(--ease-out-quart);
}

.nav-links > li > a:hover { color: var(--lpi-blue); }
.nav-links > li > a:hover::after { transform: scaleX(1); }

.nav-links > li > a.is-active { color: var(--lpi-blue); }
.nav-links > li > a.is-active::after { transform: scaleX(1); }

/* Dropdown */
.dropdown-content {
    display: block;
    position: absolute;
    top: calc(100% + 14px);
    left: -20px;
    min-width: 260px;
    background: var(--paper);
    border: 1px solid var(--hairline);
    box-shadow: 0 20px 40px -20px rgba(0, 43, 73, 0.25);
    padding: var(--space-xs) 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur-fast) var(--ease-out-quart),
                transform var(--dur-fast) var(--ease-out-quart),
                visibility 0s linear var(--dur-fast);
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content,
.dropdown.open .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.dropdown-content a {
    color: var(--ink);
    padding: 12px 20px;
    text-decoration: none;
    display: block;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background var(--dur-fast) var(--ease-out-quart),
                color var(--dur-fast) var(--ease-out-quart),
                padding-left var(--dur-fast) var(--ease-out-quart);
}

.dropdown-content a:hover {
    background: var(--surface);
    color: var(--lpi-blue);
    padding-left: 26px;
}

.dropdown-content a.is-active {
    color: var(--lpi-navy);
    background: color-mix(in oklab, var(--lpi-gold) 10%, transparent);
    position: relative;
}

.dropdown-content a.is-active::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    background: var(--lpi-gold);
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--lpi-navy);
    font-size: 1.4rem;
}

/* ============================================================
   LANGUAGE TOGGLE
   ============================================================ */
.lang-toggle-wrap { display: inline-flex; align-items: center; }

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 5px 12px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    transition: border-color var(--dur-fast) var(--ease-out-quart),
                background var(--dur-fast) var(--ease-out-quart);
}

.lang-toggle:hover {
    border-color: var(--lpi-navy);
    background: color-mix(in oklab, var(--lpi-gold) 8%, transparent);
}

.lang-toggle .lang-opt {
    color: var(--ink-muted);
    transition: color var(--dur-fast) var(--ease-out-quart);
}

.lang-toggle .lang-opt.active {
    color: var(--lpi-navy);
    font-weight: 600;
}

.lang-toggle .lang-sep {
    color: var(--hairline);
    font-weight: 300;
}

/* ============================================================
   PAGE HEADER (non-home)
   ============================================================ */
.page-header {
    background: var(--surface);
    padding: clamp(70px, 10vw, 140px) var(--edge-x) clamp(50px, 6vw, 80px);
    padding-inline-start: calc(var(--edge-x) + clamp(16px, 5vw, 96px) + 80px);
    border-bottom: 1px solid var(--hairline);
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1200px 600px at 15% 120%,
            color-mix(in oklab, var(--lpi-navy) 6%, transparent),
            transparent 60%),
        radial-gradient(600px 300px at 95% -20%,
            color-mix(in oklab, var(--lpi-gold) 12%, transparent),
            transparent 60%);
    pointer-events: none;
}

.page-header > * { position: relative; }

.page-header h1 {
    font-size: var(--step-5);
    color: var(--lpi-navy);
    font-weight: 400;
    max-width: 16ch;
}

/* Image variant — documentary/editorial hero with navy wash */
.page-header--image {
    background: var(--lpi-navy);
    color: var(--paper);
    border-bottom: none;
    padding: clamp(110px, 14vw, 190px) var(--edge-x) clamp(80px, 10vw, 140px);
    padding-inline-start: calc(var(--edge-x) + clamp(16px, 5vw, 96px) + 80px);
    isolation: isolate;
}

.page-header--image::before {
    background-image:
        linear-gradient(180deg,
            color-mix(in oklab, var(--lpi-navy) 55%, transparent) 0%,
            color-mix(in oklab, var(--lpi-navy) 72%, transparent) 55%,
            color-mix(in oklab, var(--lpi-navy) 92%, transparent) 100%),
        radial-gradient(900px 480px at 82% 6%,
            color-mix(in oklab, var(--lpi-gold) 22%, transparent),
            transparent 60%),
        var(--ph-image, none);
    background-size: cover, cover, cover;
    background-position: center, center, center;
    background-repeat: no-repeat;
    filter: none;
    opacity: 1;
    z-index: -1;
    animation: phDrift 42s ease-in-out infinite alternate;
}

.page-header--image::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in oklab, var(--lpi-gold) 70%, transparent) 30%,
        color-mix(in oklab, var(--lpi-gold) 70%, transparent) 70%,
        transparent);
    opacity: 0.6;
    pointer-events: none;
}

.page-header--image .eyebrow { color: var(--gold-soft); }
.page-header--image .eyebrow::before { background: var(--lpi-gold); }

.page-header--image h1 {
    color: var(--paper);
    max-width: 22ch;
    font-weight: 300;
    letter-spacing: -0.022em;
}

.page-header--image p {
    color: color-mix(in oklab, var(--paper) 88%, transparent);
    font-size: var(--step-1);
    line-height: 1.5;
    max-width: 58ch;
    margin-top: var(--space-md);
    font-weight: 300;
}

@keyframes phDrift {
    from { transform: scale(1.02) translateX(0); }
    to   { transform: scale(1.08) translateX(-1.5%); }
}

/* ============================================================
   SECTIONS
   ============================================================ */
section {
    padding: var(--section-y) var(--edge-x);
    position: relative;
}

section > .container,
section > .content-wrap {
    position: relative;
}

.container {
    max-width: var(--max-content);
    margin: 0 auto;
}

.content-wrap {
    max-width: var(--max-narrow);
    margin: 0 auto;
}

.section-header {
    margin-bottom: var(--space-2xl);
    max-width: var(--max-content);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.section-header::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    background: var(--lpi-gold);
    margin-top: var(--space-md);
}

.section-header h2 {
    color: var(--lpi-navy);
    font-weight: 400;
    letter-spacing: -0.02em;
    max-width: 24ch;
}

/* ============================================================
   HERO (home)
   ============================================================ */
.hero {
    position: relative;
    padding: clamp(100px, 14vw, 180px) var(--edge-x) clamp(90px, 12vw, 160px);
    padding-inline-start: calc(var(--edge-x) + clamp(16px, 5vw, 96px) + 80px);
    background: var(--lpi-navy);
    color: var(--paper);
    overflow: hidden;
    isolation: isolate;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        url('https://images.unsplash.com/photo-1517486808906-6ca8b3f04846?auto=format&fit=crop&q=60&w=1920')
        center / cover no-repeat;
    opacity: 0.18;
    filter: grayscale(0.3) contrast(1.05);
    z-index: -2;
    animation: heroDrift 40s ease-in-out infinite alternate;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--lpi-navy) 40%, transparent) 0%,
            transparent 40%,
            color-mix(in oklab, var(--lpi-navy) 70%, transparent) 100%),
        radial-gradient(800px 400px at 80% 10%,
            color-mix(in oklab, var(--lpi-gold) 18%, transparent),
            transparent 55%);
    z-index: -1;
    pointer-events: none;
}

@keyframes heroDrift {
    from { transform: scale(1.02) translateX(0); }
    to   { transform: scale(1.08) translateX(-2%); }
}

.hero-content {
    position: relative;
    max-width: 960px;
    z-index: 2;
}

.hero .eyebrow {
    color: var(--gold-soft);
    margin-bottom: var(--space-lg);
    animation: heroRise 900ms var(--ease-out-expo) both;
    animation-delay: 80ms;
}
.hero .eyebrow::before { background: var(--lpi-gold); }

.hero h1 {
    font-size: var(--step-6);
    line-height: 1;
    margin-bottom: var(--space-xl);
    font-weight: 300;
    color: var(--paper);
    letter-spacing: -0.025em;
    max-width: 18ch;
    animation: heroRise 1100ms var(--ease-out-expo) both;
    animation-delay: 160ms;
}

/* Chinese hero title uses heavy weight to match nexgen's 900; English stays thin. */
:lang(zh) .hero h1 { font-weight: 900; }

.hero h1 em {
    font-style: italic;
    color: var(--lpi-gold);
    font-weight: 400;
}

/* Italic synthesis on CJK looks wrong, and 400 stands out against 900 Chinese.
   In Chinese keep upright and match surrounding weight — gold color still carries the accent. */
:lang(zh) .hero h1 em {
    font-style: normal;
    font-weight: 900;
}

.hero p {
    font-size: var(--step-2);
    line-height: 1.45;
    font-weight: 300;
    color: color-mix(in oklab, var(--paper) 90%, transparent);
    max-width: 42ch;
    padding-left: 0;
    border-left: none;
    animation: heroRise 1100ms var(--ease-out-expo) both;
    animation-delay: 280ms;
}

.hero .btn,
.hero .hero-actions {
    animation: heroRise 1100ms var(--ease-out-expo) both;
    animation-delay: 400ms;
}

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

@keyframes heroRise {
    from { opacity: 0; transform: translate3d(0, 28px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Tiny scroll cue in hero */
.hero-scroll {
    position: absolute;
    left: var(--edge-x);
    bottom: var(--space-xl);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--paper) 70%, transparent);
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    animation: heroRise 1100ms var(--ease-out-expo) both;
    animation-delay: 560ms;
}
.hero-scroll::after {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--lpi-gold);
    animation: scrollCue 2.2s var(--ease-in-out) infinite;
    transform-origin: left center;
}

@keyframes scrollCue {
    0%, 100% { transform: scaleX(0.4); opacity: 0.6; }
    50%      { transform: scaleX(1); opacity: 1; }
}

/* Hero variant — centered (Get Involved, etc.) */
.hero--centered {
    background:
        linear-gradient(rgba(0, 43, 73, 0.88), rgba(0, 43, 73, 0.82)),
        url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&q=80&w=1600') center / cover;
    padding: clamp(90px, 10vw, 140px) var(--edge-x);
    padding-inline-start: var(--edge-x);
    text-align: center;
}

.hero--centered::before,
.hero--centered::after { display: none; }

.hero--centered .hero-content { margin: 0 auto; }

.hero--centered h1 {
    font-size: var(--step-5);
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;
}

.hero--centered p {
    max-width: 56ch;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   MISSION GRID (home)
   ============================================================ */
.mission-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

.mission-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.mission-text p {
    font-size: var(--step-1);
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 60ch;
}

.mission-text p:first-of-type::first-letter {
    font-family: var(--font-display);
    font-size: 3.4em;
    line-height: 0.9;
    float: left;
    padding: 6px 12px 0 0;
    color: var(--lpi-navy);
    font-weight: 400;
}

/* Sidebar callout — REWRITTEN without border-left accent stripe.
   Uses full navy surface with a thin gold rule at top instead. */
.sidebar-callout {
    background: var(--lpi-navy);
    padding: var(--space-xl);
    color: var(--paper);
    position: relative;
    overflow: hidden;
}

.sidebar-callout::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 48px;
    height: 2px;
    background: var(--lpi-gold);
}

.sidebar-callout::after {
    content: "";
    position: absolute;
    inset: auto -40% -40% auto;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in oklab, var(--lpi-gold) 18%, transparent),
        transparent 70%);
    pointer-events: none;
}

.sidebar-callout h4 {
    font-family: var(--font-sans);
    color: var(--lpi-gold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
    position: relative;
}

.sidebar-callout p {
    color: color-mix(in oklab, var(--paper) 90%, transparent);
    font-size: var(--step-0);
    line-height: 1.55;
    position: relative;
    max-width: none;
}

/* ============================================================
   PROGRAMS / INITIATIVES GRID
   ============================================================ */
.programs-section {
    background: var(--surface);
    position: relative;
}

.programs-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(500px 300px at 100% 0%,
            color-mix(in oklab, var(--lpi-gold) 6%, transparent),
            transparent 60%);
    pointer-events: none;
}

.programs-section > * { position: relative; }

.initiatives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-xl);
}

.card {
    background: var(--paper);
    border: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition:
        transform var(--dur-med) var(--ease-out-quart),
        border-color var(--dur-med) var(--ease-out-quart),
        box-shadow var(--dur-med) var(--ease-out-quart);
}

.card:hover {
    transform: translateY(-4px);
    border-color: var(--lpi-navy);
    box-shadow: 0 24px 40px -24px rgba(0, 43, 73, 0.28);
}

.card-img {
    height: 240px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    transition: transform var(--dur-slow) var(--ease-out-quart);
}

.card::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 240px;
    background: linear-gradient(180deg,
        transparent 40%,
        color-mix(in oklab, var(--lpi-navy) 40%, transparent));
    pointer-events: none;
    opacity: 0.7;
    transition: opacity var(--dur-med) var(--ease-out-quart);
}

.card:hover::after { opacity: 0.4; }
.card:hover .card-img { transform: scale(1.06); }

.card-content {
    padding: var(--space-xl);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.card-category {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--lpi-blue);
    font-weight: 600;
    letter-spacing: 0.16em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.card-category::before {
    content: "";
    width: 18px;
    height: 1px;
    background: var(--lpi-gold);
}

.card-content h3 {
    color: var(--lpi-navy);
    font-size: var(--step-2);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.card-content p {
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: none;
}

/* ============================================================
   FELLOWSHIP FEATURE (home)
   ============================================================ */
.fellowship-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(32px, 6vw, 96px);
    padding: var(--section-y) var(--edge-x);
    max-width: var(--max-content);
    margin: 0 auto;
}

.feature-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.feature-text p {
    font-size: var(--step-1);
    line-height: 1.55;
    color: var(--ink-soft);
}

.feature-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

.feature-image::before {
    content: "";
    position: absolute;
    top: 20px; left: 20px; right: -20px; bottom: -20px;
    border: 1px solid var(--lpi-gold);
    z-index: -1;
    transition: transform var(--dur-slow) var(--ease-out-quart);
}

.feature-image:hover::before { transform: translate(-8px, -8px); }

.feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.95);
    transition: transform var(--dur-slow) var(--ease-out-quart);
}

.feature-image:hover img { transform: scale(1.04); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    background: var(--lpi-navy);
    color: var(--paper);
    text-decoration: none;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: 1px solid var(--lpi-navy);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
        background var(--dur-med) var(--ease-out-quart),
        color var(--dur-med) var(--ease-out-quart),
        transform var(--dur-fast) var(--ease-out-quart);
}

.btn::after {
    content: "→";
    font-size: 1.05rem;
    letter-spacing: 0;
    transition: transform var(--dur-med) var(--ease-out-quart);
}

.btn:hover {
    background: var(--paper);
    color: var(--lpi-navy);
}
.btn:hover::after { transform: translateX(6px); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
    background: transparent;
    color: var(--paper);
    border-color: color-mix(in oklab, var(--paper) 45%, transparent);
}
.btn--ghost:hover {
    background: var(--paper);
    color: var(--lpi-navy);
    border-color: var(--paper);
}

.btn--gold {
    background: var(--lpi-gold);
    color: var(--lpi-navy);
    border-color: var(--lpi-gold);
}
.btn--gold:hover {
    background: var(--lpi-navy);
    color: var(--lpi-gold);
    border-color: var(--lpi-navy);
}

/* Legacy */
.btn-gold {
    background: var(--lpi-gold);
    color: var(--lpi-navy);
    border: 1px solid var(--lpi-gold);
}
.btn-gold:hover {
    background: var(--lpi-navy);
    color: var(--lpi-gold);
}

/* ============================================================
   CHECK LIST
   ============================================================ */
.check-list {
    list-style: none;
    margin-top: var(--space-lg);
    display: flex;
    flex-direction: column;
}

.check-list li {
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--hairline);
    font-weight: 500;
    font-size: var(--step-1);
    color: var(--lpi-navy);
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    font-family: var(--font-sans);
    transition: padding-left var(--dur-med) var(--ease-out-quart),
                color var(--dur-med) var(--ease-out-quart);
}

.check-list li:hover { padding-left: var(--space-sm); color: var(--lpi-blue); }

.check-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--lpi-gold);
    font-size: 0.9rem;
    margin-top: 0.35em;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gold-soft);
    background: color-mix(in oklab, var(--lpi-gold) 10%, transparent);
}

/* ============================================================
   ABOUT
   ============================================================ */
.who-we-are-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

.beliefs-section { background: var(--surface); }

.integrity-content {
    background: var(--paper);
    border: 1px solid var(--hairline);
    padding: clamp(28px, 4vw, 56px);
    position: relative;
}

.integrity-content::before {
    content: "";
    position: absolute;
    top: -1px; left: -1px;
    width: 40px; height: 2px;
    background: var(--lpi-gold);
}

/* ============================================================
   PROGRAMS PAGE
   ============================================================ */
.fellowship-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

.clickable-card {
    background: var(--paper);
    border: 1px solid var(--hairline);
    padding: clamp(28px, 3vw, 44px);
    transition:
        border-color var(--dur-med) var(--ease-out-quart),
        transform var(--dur-med) var(--ease-out-quart),
        box-shadow var(--dur-med) var(--ease-out-quart);
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
    overflow: hidden;
}

.clickable-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 0%; height: 2px;
    background: var(--lpi-gold);
    transition: width var(--dur-slow) var(--ease-out-quart);
}

.clickable-card:hover {
    border-color: var(--lpi-navy);
    transform: translateY(-3px);
    box-shadow: 0 24px 40px -24px rgba(0, 43, 73, 0.22);
}

.clickable-card:hover::before { width: 100%; }

.clickable-card h3 {
    color: var(--lpi-navy);
    font-size: var(--step-2);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.clickable-card p {
    color: var(--ink-soft);
    margin-top: var(--space-md);
    line-height: 1.6;
}

/* Feature panel on programs page (replaces gold left-border stripe) */
.feature-panel {
    background: var(--paper);
    padding: clamp(32px, 5vw, 64px);
    position: relative;
    border: 1px solid var(--hairline);
    overflow: hidden;
}

.feature-panel::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 80px; height: 3px;
    background: var(--lpi-gold);
}

.feature-panel h3 {
    color: var(--lpi-navy);
    font-size: var(--step-3);
    font-weight: 500;
    margin-bottom: var(--space-md);
    letter-spacing: -0.015em;
}

.feature-panel p {
    font-size: var(--step-1);
    color: var(--ink-soft);
    line-height: 1.6;
    max-width: 64ch;
}

.back-link {
    background: none;
    border: none;
    color: var(--lpi-blue);
    font-family: var(--font-sans);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    cursor: pointer;
    margin-bottom: var(--space-xl);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: color var(--dur-fast) var(--ease-out-quart), gap var(--dur-fast) var(--ease-out-quart);
}

.back-link::before { content: "←"; transition: transform var(--dur-fast) var(--ease-out-quart); }
.back-link:hover { color: var(--lpi-navy); gap: 14px; }
.back-link:hover::before { transform: translateX(-4px); }

/* ============================================================
   FORMS
   ============================================================ */
.form-container {
    background: var(--paper);
    border: 1px solid var(--hairline);
    padding: clamp(28px, 4vw, 56px);
    max-width: 860px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: var(--space-lg);
    text-align: left;
}

.form-group label,
label {
    display: block;
    font-family: var(--font-sans);
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--lpi-navy);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="tel"],
select,
textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--hairline);
    border-radius: 0;
    font-size: 1rem;
    font-family: var(--font-sans);
    background: var(--paper);
    color: var(--ink);
    transition: border-color var(--dur-fast) var(--ease-out-quart),
                background var(--dur-fast) var(--ease-out-quart),
                box-shadow var(--dur-fast) var(--ease-out-quart);
}

input:hover, select:hover, textarea:hover {
    border-color: var(--hairline-strong);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--lpi-navy);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--lpi-gold) 28%, transparent);
}

textarea { min-height: 140px; resize: vertical; }

.btn-submit {
    background: var(--lpi-navy);
    color: var(--paper);
    padding: 16px 40px;
    border: 1px solid var(--lpi-navy);
    font-family: var(--font-sans);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.82rem;
    cursor: pointer;
    width: 100%;
    transition: background var(--dur-med) var(--ease-out-quart),
                color var(--dur-med) var(--ease-out-quart),
                transform var(--dur-fast) var(--ease-out-quart);
}

.btn-submit:hover {
    background: var(--paper);
    color: var(--lpi-navy);
}
.btn-submit:active { transform: translateY(1px); }
.btn-submit:disabled { background: var(--hairline); border-color: var(--hairline); color: var(--ink-muted); cursor: not-allowed; }

/* ============================================================
   GET INVOLVED
   ============================================================ */
.opportunity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-xl);
    margin-bottom: var(--space-3xl);
}

.opportunity-card {
    background: var(--paper);
    padding: clamp(28px, 3vw, 44px);
    border: 1px solid var(--hairline);
    border-top: 2px solid var(--lpi-blue);
    transition:
        transform var(--dur-med) var(--ease-out-quart),
        border-color var(--dur-med) var(--ease-out-quart),
        box-shadow var(--dur-med) var(--ease-out-quart);
    position: relative;
}

.opportunity-card:hover {
    transform: translateY(-4px);
    border-top-color: var(--lpi-gold);
    box-shadow: 0 24px 40px -24px rgba(0, 43, 73, 0.22);
}

.opportunity-card i {
    font-size: 1.9rem;
    color: var(--lpi-gold);
    margin-bottom: var(--space-md);
    display: inline-block;
    transition: transform var(--dur-med) var(--ease-out-quart);
}

.opportunity-card:hover i { transform: scale(1.08) rotate(-4deg); }

.opportunity-card h3 {
    color: var(--lpi-navy);
    font-size: var(--step-2);
    margin-bottom: var(--space-sm);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.opportunity-card p {
    color: var(--ink-soft);
    line-height: 1.6;
}

.form-section { background: var(--surface); }

.interest-form {
    background: var(--paper);
    padding: clamp(28px, 4vw, 56px);
    border: 1px solid var(--hairline);
    max-width: 860px;
    margin: 0 auto;
}

/* ============================================================
   SUPPORT / DONATION / CONTACT — REWRITTEN without border-left stripe
   ============================================================ */
.support-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

.support-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.support-text p {
    font-size: var(--step-1);
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 60ch;
}

/* Donation panel — replaces the border-left-gold stripe entirely */
.donation-portal,
.contact-form-container {
    background: var(--lpi-navy);
    padding: clamp(32px, 4vw, 48px);
    color: var(--paper);
    position: relative;
    overflow: hidden;
}

.donation-portal::before,
.contact-form-container::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 80px;
    height: 3px;
    background: var(--lpi-gold);
}

.donation-portal::after,
.contact-form-container::after {
    content: "";
    position: absolute;
    inset: auto -30% -40% auto;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in oklab, var(--lpi-gold) 14%, transparent),
        transparent 70%);
    pointer-events: none;
}

.donation-portal h3,
.contact-form-container h3 {
    font-family: var(--font-sans);
    color: var(--lpi-gold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: var(--space-lg);
    position: relative;
}

.donation-portal label,
.contact-form-container label {
    color: color-mix(in oklab, var(--paper) 85%, transparent);
    position: relative;
}

.donation-portal input,
.donation-portal select,
.contact-form-container input,
.contact-form-container select,
.contact-form-container textarea {
    border: 1px solid color-mix(in oklab, var(--paper) 20%, transparent);
    background: color-mix(in oklab, var(--paper) 8%, transparent);
    color: var(--paper);
    position: relative;
}

.donation-portal input::placeholder,
.contact-form-container input::placeholder,
.contact-form-container textarea::placeholder {
    color: color-mix(in oklab, var(--paper) 45%, transparent);
}

.donation-portal input:focus,
.donation-portal select:focus,
.contact-form-container input:focus,
.contact-form-container select:focus,
.contact-form-container textarea:focus {
    border-color: var(--lpi-gold);
    background: color-mix(in oklab, var(--paper) 14%, transparent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--lpi-gold) 28%, transparent);
}

.donation-portal .btn-submit,
.contact-form-container .btn-submit {
    background: var(--lpi-gold);
    color: var(--lpi-navy);
    border-color: var(--lpi-gold);
    position: relative;
}
.donation-portal .btn-submit:hover,
.contact-form-container .btn-submit:hover {
    background: var(--paper);
    color: var(--lpi-navy);
    border-color: var(--paper);
}

.monthly-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: var(--space-md) 0;
    font-weight: 500;
    font-size: 0.9rem;
    position: relative;
}

.monthly-checkbox input { width: auto; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

/* ============================================================
   MODAL
   ============================================================ */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: color-mix(in oklab, var(--lpi-navy) 70%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: modalFade var(--dur-med) var(--ease-out-quart);
    align-items: center;
    justify-content: center;
}

.modal.open { display: flex; }

.modal-content {
    background: var(--paper);
    padding: clamp(32px, 4vw, 56px);
    max-width: 560px;
    width: calc(100% - 40px);
    text-align: center;
    position: relative;
    animation: modalRise var(--dur-med) var(--ease-out-quint);
    border-top: 2px solid var(--lpi-gold);
}

.modal-content--form {
    max-width: 640px;
    text-align: left;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
.modal-content--form h3 {
    margin: 0 0 var(--space-xs);
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    color: var(--lpi-navy);
}
.modal-content--form .modal-intro {
    margin: 0 0 var(--space-lg);
    color: var(--ink-muted);
    font-size: 0.95rem;
}
.modal-content--form .btn-submit {
    width: 100%;
    margin-top: var(--space-sm);
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--ink-muted);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--dur-fast) var(--ease-out-quart),
                transform var(--dur-fast) var(--ease-out-quart);
}
.modal-close:hover { color: var(--lpi-navy); transform: rotate(90deg); }

@keyframes modalFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalRise {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
    background: var(--lpi-navy);
    color: color-mix(in oklab, var(--paper) 80%, transparent);
    padding: clamp(56px, 7vw, 96px) var(--edge-x) clamp(32px, 4vw, 48px);
    position: relative;
    overflow: hidden;
}

footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--lpi-gold) 30%,
        var(--lpi-gold) 70%,
        transparent);
    opacity: 0.5;
}

footer::after {
    content: "";
    position: absolute;
    right: -15%; bottom: -50%;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in oklab, var(--lpi-gold) 12%, transparent),
        transparent 70%);
    pointer-events: none;
}

footer > * { position: relative; }

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-xl);
    max-width: var(--max-content);
    margin: 0 auto;
}

footer .logo {
    color: var(--paper);
    font-size: 1.4rem;
    max-width: 22ch;
}

.footer-links {
    display: flex;
    gap: var(--space-xl);
    flex-wrap: wrap;
}

.footer-links a {
    color: color-mix(in oklab, var(--paper) 75%, transparent);
    text-decoration: none;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    position: relative;
    transition: color var(--dur-fast) var(--ease-out-quart);
}

.footer-links a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 1px;
    background: var(--lpi-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-med) var(--ease-out-quart);
}

.footer-links a:hover { color: var(--lpi-gold); }
.footer-links a:hover::after { transform: scaleX(1); }

.copyright {
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: 1px solid color-mix(in oklab, var(--paper) 12%, transparent);
    font-size: 0.8rem;
    color: color-mix(in oklab, var(--paper) 55%, transparent);
    text-align: center;
    font-family: var(--font-sans);
    letter-spacing: 0.04em;
    max-width: var(--max-content);
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   IMPACT BAND — stat row with editorial numerals
   ============================================================ */
.impact-band {
    background: var(--lpi-navy);
    color: var(--paper);
    padding: clamp(56px, 7vw, 96px) var(--edge-x);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.impact-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(180deg,
            color-mix(in oklab, var(--lpi-navy) 80%, transparent),
            color-mix(in oklab, var(--lpi-navy) 95%, transparent)),
        url('https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&fit=crop&q=80&w=1800');
    background-size: cover;
    background-position: center;
    z-index: -2;
    opacity: 0.9;
}

.impact-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(700px 320px at 85% 110%,
        color-mix(in oklab, var(--lpi-gold) 16%, transparent),
        transparent 60%);
    z-index: -1;
    pointer-events: none;
}

.impact-band .container { position: relative; }

.impact-band .section-header h2 { color: var(--paper); max-width: 28ch; }
.impact-band .section-header::after { background: var(--lpi-gold); }
.impact-band .eyebrow { color: var(--gold-soft); }
.impact-band .eyebrow::before { background: var(--lpi-gold); }
.impact-band .section-number { color: color-mix(in oklab, var(--paper) 70%, transparent); }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(24px, 4vw, 56px);
    margin-top: var(--space-2xl);
}

.stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-top: var(--space-md);
    border-top: 1px solid color-mix(in oklab, var(--paper) 24%, transparent);
    position: relative;
}

.stat::before {
    content: "";
    position: absolute;
    top: -1px; left: 0;
    width: 40px; height: 2px;
    background: var(--lpi-gold);
}

.stat-number {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 4vw, 3.8rem);
    font-weight: 400;
    color: var(--lpi-gold);
    line-height: 1;
    letter-spacing: -0.02em;
    font-feature-settings: "lnum" 1;
}

.stat-label {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: color-mix(in oklab, var(--paper) 82%, transparent);
    margin-top: var(--space-xs);
}

.stat-detail {
    color: color-mix(in oklab, var(--paper) 70%, transparent);
    font-size: 0.92rem;
    line-height: 1.55;
    max-width: 30ch;
    margin-top: 4px;
}

/* ============================================================
   PULL QUOTE — editorial testimonial with portrait
   ============================================================ */
.pullquote-feature {
    padding: var(--section-y) var(--edge-x);
    background: var(--paper-warm);
    position: relative;
    overflow: hidden;
}

.pullquote-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 440px at 10% 0%,
            color-mix(in oklab, var(--lpi-gold) 7%, transparent),
            transparent 55%);
    pointer-events: none;
}

.pullquote-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: center;
    max-width: var(--max-content);
    margin: 0 auto;
    position: relative;
}

.pullquote-figure {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.pullquote-figure::before {
    content: "";
    position: absolute;
    inset: -18px auto auto -18px;
    width: 72%; height: 72%;
    border: 1px solid var(--lpi-gold);
    z-index: 0;
}

.pullquote-figure img {
    position: relative;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(0.9) contrast(1.02);
    z-index: 1;
    transition: transform var(--dur-slow) var(--ease-out-quart);
}

.pullquote-figure:hover img { transform: scale(1.03); }

.pullquote-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    position: relative;
}

.pullquote-body::before {
    content: "\201C";
    font-family: var(--font-display);
    font-size: clamp(5rem, 10vw, 8rem);
    line-height: 0.8;
    color: var(--lpi-gold);
    opacity: 0.35;
    position: absolute;
    top: -24px; left: -8px;
    font-weight: 400;
    z-index: 0;
}

.pullquote-body blockquote {
    font-family: var(--font-display);
    font-size: var(--step-3);
    line-height: 1.3;
    color: var(--lpi-navy);
    font-weight: 400;
    letter-spacing: -0.012em;
    text-wrap: balance;
    position: relative;
    max-width: 34ch;
}

.pullquote-cite {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: var(--space-md);
    border-top: 1px solid var(--hairline);
    max-width: 38ch;
}

.pullquote-cite strong {
    font-weight: 600;
    color: var(--lpi-navy);
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ============================================================
   PARTNERS STRIP
   ============================================================ */
.partners-strip {
    padding: clamp(48px, 6vw, 80px) var(--edge-x);
    background: var(--paper);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.partners-strip .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    align-items: center;
    text-align: center;
}

.partners-strip .eyebrow {
    margin-bottom: 0;
    color: var(--ink-muted);
}

.partners-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: clamp(24px, 4vw, 56px);
    width: 100%;
    align-items: center;
    justify-items: center;
}

.partner-mark {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    font-style: italic;
    color: var(--ink-muted);
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-align: center;
    opacity: 0.7;
    transition: opacity var(--dur-med) var(--ease-out-quart),
                color var(--dur-med) var(--ease-out-quart);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    white-space: nowrap;
}

.partner-mark::before {
    content: "";
    width: 8px; height: 8px;
    border: 1px solid currentColor;
    transform: rotate(45deg);
    flex-shrink: 0;
}

.partner-mark:hover { opacity: 1; color: var(--lpi-navy); }

/* ============================================================
   SPLIT FEATURE — alternating image/text program sections
   ============================================================ */
.split-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 96px);
    align-items: center;
    max-width: var(--max-content);
    margin: 0 auto;
}

.split-feature.split-feature--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.split-feature.split-feature--reverse .split-feature__media { order: 2; }

.split-feature__media {
    position: relative;
    aspect-ratio: 5 / 4;
    overflow: hidden;
}

.split-feature__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 55%,
        color-mix(in oklab, var(--lpi-navy) 35%, transparent));
    pointer-events: none;
}

.split-feature__media::before {
    content: "";
    position: absolute;
    right: -14px; bottom: -14px;
    width: 45%; height: 45%;
    border: 1px solid var(--lpi-gold);
    z-index: 0;
    pointer-events: none;
    transition: transform var(--dur-slow) var(--ease-out-quart);
}

.split-feature__media:hover::before { transform: translate(6px, 6px); }

.split-feature__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(0.92);
    transition: transform var(--dur-slow) var(--ease-out-quart);
}

.split-feature__media:hover img { transform: scale(1.04); }

.split-feature__media .image-caption {
    position: absolute;
    left: var(--space-md);
    bottom: var(--space-md);
    z-index: 2;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    color: color-mix(in oklab, var(--paper) 85%, transparent);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 10px;
    background: color-mix(in oklab, var(--lpi-navy) 55%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-left: 2px solid var(--lpi-gold);
}

.split-feature__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.split-feature__body p {
    font-size: var(--step-1);
    line-height: 1.55;
    color: var(--ink-soft);
}

/* ============================================================
   PHOTO CARD — image-backed opportunity/feature card
   ============================================================ */
.opportunity-card.opportunity-card--photo {
    padding: 0;
    border-top: 1px solid var(--hairline);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.opportunity-card--photo .photo-card__media {
    position: relative;
    aspect-ratio: 5 / 3;
    overflow: hidden;
    background: var(--surface-2);
}

.opportunity-card--photo .photo-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(0.95);
    transition: transform var(--dur-slow) var(--ease-out-quart);
}

.opportunity-card--photo:hover .photo-card__media img { transform: scale(1.05); }

.opportunity-card--photo .photo-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 55%,
        color-mix(in oklab, var(--lpi-navy) 50%, transparent));
    pointer-events: none;
}

.opportunity-card--photo .photo-card__body {
    padding: clamp(24px, 3vw, 36px);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex: 1;
}

.opportunity-card--photo i {
    position: absolute;
    top: var(--space-md); left: var(--space-md);
    z-index: 2;
    background: color-mix(in oklab, var(--lpi-navy) 70%, transparent);
    color: var(--lpi-gold);
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin: 0;
    border: 1px solid color-mix(in oklab, var(--lpi-gold) 60%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.opportunity-card--photo:hover i { transform: scale(1.06) rotate(-3deg); }

/* ============================================================
   PAPER TEXTURE — subtle editorial grain on warm surfaces
   ============================================================ */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.035;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
}

/* Hide grain above nav/footer so it doesn't muddy text. Modals already have
   position:fixed + z-index:2000 and must not be forced into the document flow. */
nav, footer { position: relative; z-index: 2; }

/* ============================================================
   FIGURE ROW — editorial image trio
   ============================================================ */
.figure-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-2xl);
}

.figure-row figure {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--surface-2);
}

.figure-row figure:nth-child(2) { aspect-ratio: 4 / 5.4; transform: translateY(var(--space-lg)); }

.figure-row figure img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(0.9);
    transition: transform var(--dur-slow) var(--ease-out-quart);
}

.figure-row figure:hover img { transform: scale(1.04); }

.figure-row figure::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(180deg,
        transparent,
        color-mix(in oklab, var(--lpi-navy) 60%, transparent));
    pointer-events: none;
}

.figure-row figcaption {
    position: absolute;
    left: var(--space-md); right: var(--space-md); bottom: var(--space-md);
    z-index: 2;
    color: color-mix(in oklab, var(--paper) 92%, transparent);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
    padding-left: 12px;
    border-left: 2px solid var(--lpi-gold);
}

/* ============================================================
   BELIEFS SECTION (image background variant)
   ============================================================ */
.beliefs-section.beliefs-section--image {
    background: var(--lpi-navy);
    color: var(--paper);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.beliefs-section--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(180deg,
            color-mix(in oklab, var(--lpi-navy) 78%, transparent),
            color-mix(in oklab, var(--lpi-navy) 92%, transparent)),
        url('https://images.unsplash.com/photo-1541339907198-e08756dedf3f?auto=format&fit=crop&q=80&w=1800');
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.beliefs-section--image .section-header h2 { color: var(--paper); max-width: 28ch; }
.beliefs-section--image .section-header::after { background: var(--lpi-gold); }
.beliefs-section--image .section-number { color: color-mix(in oklab, var(--paper) 65%, transparent); }

.beliefs-section--image .check-list li {
    color: var(--paper);
    border-bottom-color: color-mix(in oklab, var(--paper) 16%, transparent);
}

.beliefs-section--image .check-list li:hover { color: var(--lpi-gold); }

.beliefs-section--image .check-list li::before {
    background: color-mix(in oklab, var(--lpi-gold) 18%, transparent);
    border-color: color-mix(in oklab, var(--lpi-gold) 50%, transparent);
    color: var(--lpi-gold);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
    .mission-grid,
    .who-we-are-grid,
    .support-grid,
    .contact-grid,
    .fellowship-feature,
    .pullquote-grid,
    .split-feature,
    .split-feature.split-feature--reverse {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    .split-feature.split-feature--reverse .split-feature__media { order: 0; }
    .fellowship-feature { padding-left: var(--edge-x); padding-right: var(--edge-x); }
    .feature-image { aspect-ratio: 16 / 10; }
    .pullquote-figure { aspect-ratio: 16 / 11; max-width: 520px; margin: 0 auto; }
    .split-feature__media { aspect-ratio: 16 / 10; }
    .figure-row { grid-template-columns: 1fr 1fr; }
    .figure-row figure:nth-child(3) { grid-column: span 2; aspect-ratio: 16 / 9; }
    .figure-row figure:nth-child(2) { transform: none; }
}

@media (max-width: 768px) {
    nav { padding: var(--space-sm) var(--edge-x); flex-wrap: wrap; }

    .nav-toggle { display: inline-flex; align-items: center; }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        margin-top: var(--space-md);
        padding-top: var(--space-md);
        gap: 0;
        border-top: 1px solid var(--hairline);
    }

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

    .nav-links li {
        margin-left: 0;
        width: 100%;
        padding: var(--space-sm) 0;
        border-bottom: 1px solid var(--hairline);
    }

    .nav-links li:last-child { border-bottom: none; }

    .dropdown-content {
        position: static;
        box-shadow: none;
        border: none;
        background: var(--surface);
        margin-top: var(--space-sm);
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }

    .dropdown.open .dropdown-content { display: block; }

    .mission-text p:first-of-type::first-letter {
        font-size: 2.8em;
    }

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

    .figure-row { grid-template-columns: 1fr; }
    .figure-row figure:nth-child(3) { grid-column: auto; aspect-ratio: 4 / 5; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .reveal { opacity: 1; transform: none; }
    .hero::before { animation: none; }
    .hero-scroll::after { animation: none; }
}