/* =========================================================
   JVR TRUST — COURSES & PROGRAMS PAGE
   APPEND THIS ENTIRE SECTION AT THE END OF style.css

   Scoped primarily to .courses-page so existing:
   - Home page
   - Donation page
   - Legal pages
   - Receipt pages
   - Header / footer
   are not affected.
   ========================================================= */


/* =========================================================
   COURSES PAGE BASE
   ========================================================= */

.courses-page {
    max-width: none;
    margin: 0;
    padding: 0;
    background: #f7faf5;
    color: #26342c;
}

.courses-page .courses-container {
    width: min(1200px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
}

.courses-page .section-padding {
    padding: 90px 0;
}


/* =========================================================
   COURSES HERO
   ========================================================= */

.courses-page .courses-hero {
    position: relative;

    width: 100%;
    height: auto;
    min-height: 620px;

    display: flex;
    align-items: stretch;

    padding: 0;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}


/*
   Override the old global .hero-overlay card style
   ONLY inside the courses page.
*/

.courses-page .courses-hero .hero-overlay {
    width: 100%;
    min-height: 620px;

    display: flex;
    align-items: center;

    padding: 90px max(40px, calc((100vw - 1200px) / 2));

    background:
        linear-gradient(
            90deg,
            rgba(5, 48, 32, 0.94) 0%,
            rgba(5, 48, 32, 0.80) 35%,
            rgba(5, 48, 32, 0.40) 67%,
            rgba(5, 48, 32, 0.12) 100%
        );

    border-radius: 0;

    text-align: left;
}


.courses-page .courses-hero-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 760px;

    color: #fff;
}


.courses-page .hero-eyebrow,
.courses-page .section-kicker {
    display: inline-block;

    margin-bottom: 14px;

    color: #4d8c39;

    font-size: 0.82rem;
    font-weight: 800;

    letter-spacing: 0.14em;
    line-height: 1.5;

    text-transform: uppercase;
}


.courses-page .courses-hero .hero-eyebrow {
    color: #dff4b9;
}


.courses-page .courses-hero h1 {
    max-width: 750px;

    margin: 0 0 22px;

    color: #fff;

    font-size: clamp(3rem, 6vw, 5.4rem);
    font-weight: 800;

    line-height: 1.03;
    letter-spacing: -0.04em;
}


.courses-page .courses-hero p {
    max-width: 680px;

    margin: 0 0 32px;

    color: rgba(255, 255, 255, 0.94);

    font-size: 1.15rem;
    line-height: 1.8;
}


/* =========================================================
   GENERAL BUTTONS FOR COURSES PAGE
   ========================================================= */

.courses-page .hero-actions,
.courses-page .courses-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}


.courses-page .btn {
    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 13px 27px;

    border: 2px solid transparent;
    border-radius: 999px;

    font-family: inherit;
    font-size: 15px;
    font-weight: 800;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}


.courses-page .btn:hover {
    transform: translateY(-3px);
}


.courses-page .btn-primary {
    background: #1c7b45;
    color: #fff;

    box-shadow:
        0 10px 28px
        rgba(12, 86, 50, 0.25);
}


.courses-page .btn-primary:hover {
    background: #0c6338;
    color: #fff;

    box-shadow:
        0 15px 35px
        rgba(12, 86, 50, 0.32);
}


.courses-page .btn-outline {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;

    border-color: rgba(255, 255, 255, 0.70);

    backdrop-filter: blur(5px);
}


.courses-page .btn-outline:hover {
    background: #fff;
    color: #0b4f3a;

    border-color: #fff;
}


.courses-page .btn-outline-light {
    background: transparent;
    color: #fff;

    border-color: rgba(255, 255, 255, 0.75);
}


.courses-page .btn-outline-light:hover {
    background: #fff;
    color: #0b4f3a;

    border-color: #fff;
}


/* =========================================================
   GENERAL SECTION HEADINGS
   ========================================================= */

.courses-page .section-heading {
    max-width: 820px;

    margin-bottom: 45px;
}


.courses-page .section-heading.centered {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}


.courses-page .section-heading h2,
.courses-page .access-content h2,
.courses-page .courses-cta h2 {
    margin: 0 0 18px;

    color: #123f2b;

    font-size: clamp(2.1rem, 4vw, 3.3rem);
    font-weight: 800;

    line-height: 1.15;
    letter-spacing: -0.025em;
}


.courses-page .section-heading p,
.courses-page .access-content p {
    color: #59695f;

    font-size: 1.05rem;
    line-height: 1.85;
}


/* =========================================================
   INTRODUCTION SECTION
   ========================================================= */

.courses-page .courses-intro {
    background: #fff;
}


/* =========================================================
   EDUCATION PILLARS
   ========================================================= */

.courses-page .education-pillars {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 22px;

    margin-top: 45px;
}


.courses-page .education-pillar {
    position: relative;

    padding: 32px 27px;

    background: #f8fbf5;

    border: 1px solid #e1ebda;
    border-radius: 20px;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.courses-page .education-pillar:hover {
    transform: translateY(-7px);

    border-color: #bdd7ad;

    box-shadow:
        0 18px 45px
        rgba(22, 78, 51, 0.10);
}


.courses-page .pillar-icon {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    margin-bottom: 22px;

    background: #e2f1d8;
    color: #0b5d3b;

    border-radius: 50%;

    font-size: 0.9rem;
    font-weight: 900;
}


.courses-page .education-pillar h3 {
    margin-bottom: 10px;

    color: #174d32;

    font-size: 1.3rem;
}


.courses-page .education-pillar p {
    color: #617067;

    font-size: 0.96rem;
    line-height: 1.75;
}


/* =========================================================
   PROGRAMS SECTION
   ========================================================= */

.courses-page .programs-section {
    background:
        linear-gradient(
            180deg,
            #f1f7ed 0%,
            #f8fbf6 100%
        );
}


/*
   Override your original global .course-grid
   only inside courses.php.
*/

.courses-page .course-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 28px;

    margin-top: 0;
}


/* =========================================================
   COURSE CARDS
   ALL ORIGINAL CARDS ARE PRESERVED
   ========================================================= */

.courses-page .course-card {
    position: relative;

    display: flex;
    flex-direction: column;

    height: 100%;

    background: #fff;

    border: 1px solid #e1eadc;
    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 12px 35px
        rgba(20, 72, 46, 0.08);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.courses-page .course-card:hover {
    transform: translateY(-9px);

    border-color: #bfd7b1;

    box-shadow:
        0 24px 55px
        rgba(20, 72, 46, 0.15);
}


/* =========================================================
   COURSE IMAGE
   ========================================================= */

.courses-page .course-image {
    position: relative;

    height: 235px;

    overflow: hidden;

    background: #e8eee5;
}


.courses-page .course-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.6s ease;
}


.courses-page .course-card:hover img {
    transform: scale(1.07);
}


/*
   Soft image gradient for premium appearance.
*/

.courses-page .course-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(5, 47, 31, 0.32) 100%
        );

    pointer-events: none;
}


/* =========================================================
   COURSE CATEGORY BADGE
   ========================================================= */

.courses-page .course-category {
    position: absolute;

    z-index: 2;

    left: 18px;
    bottom: 17px;

    padding: 8px 14px;

    background: rgba(255, 255, 255, 0.94);
    color: #0b5d3b;

    border-radius: 999px;

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.04em;

    box-shadow:
        0 5px 18px
        rgba(0, 0, 0, 0.12);

    backdrop-filter: blur(8px);
}


/* =========================================================
   COURSE CONTENT
   ========================================================= */

.courses-page .course-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    padding: 28px;
}


.courses-page .course-content h3 {
    margin: 0 0 13px;

    color: #123f2b;

    font-size: 1.5rem;
    font-weight: 800;

    line-height: 1.25;
}


.courses-page .course-content p {
    margin: 0;

    color: #5c6b62;

    font-size: 0.96rem;
    line-height: 1.8;
}


/* =========================================================
   COURSE FEATURE LIST
   ========================================================= */

.courses-page .course-features {
    display: grid;
    gap: 9px;

    margin: 22px 0 0;
    padding: 20px 0 0;

    border-top: 1px solid #e6ede2;

    list-style: none;
}


.courses-page .course-features li {
    position: relative;

    padding-left: 25px;

    color: #45574c;

    font-size: 0.9rem;
    line-height: 1.55;
}


.courses-page .course-features li::before {
    content: "✓";

    position: absolute;

    top: 0;
    left: 0;

    width: 18px;
    height: 18px;

    display: grid;
    place-items: center;

    background: #e1f0d8;
    color: #0b5d3b;

    border-radius: 50%;

    font-size: 0.68rem;
    font-weight: 900;
}


/* =========================================================
   LEARNING APPROACH SECTION
   ========================================================= */

.courses-page .learning-approach {
    background: #fff;
}


.courses-page .approach-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 22px;
}


.courses-page .approach-card {
    position: relative;

    padding: 35px 28px;

    background:
        linear-gradient(
            145deg,
            #f7fbf4,
            #eef6e9
        );

    border: 1px solid #dfead8;
    border-radius: 20px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.courses-page .approach-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 45px
        rgba(20, 72, 46, 0.10);
}


.courses-page .approach-card > span {
    display: block;

    margin-bottom: 25px;

    color: #9bb98d;

    font-size: 2.5rem;
    font-weight: 900;

    line-height: 1;
}


.courses-page .approach-card h3 {
    margin-bottom: 10px;

    color: #174d32;

    font-size: 1.3rem;
}


.courses-page .approach-card p {
    color: #617067;

    font-size: 0.95rem;
    line-height: 1.75;
}


/* =========================================================
   ACCESS & OPPORTUNITY SECTION
   ========================================================= */

.courses-page .education-access {
    background: #eef6e9;
}


.courses-page .access-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    gap: 70px;

    align-items: center;
}


.courses-page .access-content h2 {
    margin-top: 0;
}


.courses-page .access-points {
    display: grid;
    gap: 14px;
}


.courses-page .access-point {
    position: relative;

    padding: 21px 22px 21px 58px;

    background: #fff;

    border: 1px solid #dfe9da;
    border-radius: 15px;

    color: #334a3d;

    font-size: 0.98rem;
    font-weight: 700;

    box-shadow:
        0 8px 24px
        rgba(20, 72, 46, 0.05);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.courses-page .access-point:hover {
    transform: translateX(5px);

    box-shadow:
        0 12px 30px
        rgba(20, 72, 46, 0.09);
}


.courses-page .access-point::before {
    content: "✓";

    position: absolute;

    top: 50%;
    left: 20px;

    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    transform: translateY(-50%);

    background: #dff0d5;
    color: #0b5d3b;

    border-radius: 50%;

    font-size: 0.78rem;
    font-weight: 900;
}


/* =========================================================
   IMPORTANT PROGRAM INFORMATION
   ========================================================= */

.courses-page .program-notice-section {
    padding: 70px 0;

    background: #fff;
}


.courses-page .program-notice {
    display: grid;

    grid-template-columns:
        auto minmax(0, 1fr);

    gap: 25px;

    padding: 35px;

    background: #fff9e9;

    border: 1px solid #ebdca9;
    border-radius: 20px;

    box-shadow:
        0 12px 35px
        rgba(89, 72, 18, 0.06);
}


.courses-page .notice-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    background: #d6a82f;
    color: #fff;

    border-radius: 50%;

    font-family: Georgia, serif;
    font-size: 1.35rem;
    font-weight: 700;
}


.courses-page .program-notice h2 {
    margin: 0 0 13px;

    color: #574711;

    font-size: 1.5rem;
}


.courses-page .program-notice p {
    margin: 0;

    color: #695d35;

    line-height: 1.8;
}


.courses-page .program-notice p + p {
    margin-top: 14px;
}


/* =========================================================
   FINAL COURSES CTA
   ========================================================= */

.courses-page .courses-cta {
    padding: 85px 0;

    background:
        linear-gradient(
            135deg,
            #0a3f2e 0%,
            #12613f 55%,
            #1f7048 100%
        );

    color: #fff;
}


.courses-page .courses-cta-inner {
    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(260px, 0.7fr);

    gap: 60px;

    align-items: center;
}


.courses-page .courses-cta .section-kicker {
    color: #d9f0b6;
}


.courses-page .courses-cta h2 {
    max-width: 700px;

    margin-bottom: 16px;

    color: #fff;
}


.courses-page .courses-cta p {
    max-width: 720px;

    color: rgba(255, 255, 255, 0.88);

    font-size: 1rem;
    line-height: 1.8;
}


.courses-page .courses-cta-actions {
    justify-content: flex-end;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.courses-page a:focus-visible,
.courses-page button:focus-visible {
    outline: 3px solid #7fb863;
    outline-offset: 4px;
}


/* =========================================================
   TABLET RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .courses-page .education-pillars,
    .courses-page .approach-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .courses-page .course-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .courses-page .access-layout {
        gap: 45px;
    }


    .courses-page .courses-cta-inner {
        grid-template-columns: 1fr;
        gap: 35px;
    }


    .courses-page .courses-cta-actions {
        justify-content: flex-start;
    }

}


/* =========================================================
   MOBILE RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {

    .courses-page .courses-container {
        width: min(
            100% - 28px,
            1200px
        );
    }


    .courses-page .section-padding {
        padding: 65px 0;
    }


    /* HERO */

    .courses-page .courses-hero,
    .courses-page .courses-hero .hero-overlay {
        min-height: 560px;
    }


    .courses-page .courses-hero .hero-overlay {
        padding:
            70px 22px;

        background:
            linear-gradient(
                rgba(5, 48, 32, 0.82),
                rgba(5, 48, 32, 0.72)
            );
    }


    .courses-page .courses-hero h1 {
        font-size:
            clamp(
                2.7rem,
                12vw,
                4.3rem
            );
    }


    .courses-page .courses-hero p {
        font-size: 1rem;
    }


    .courses-page .hero-actions {
        flex-direction: column;

        align-items: flex-start;
    }


    .courses-page .hero-actions .btn {
        width: 100%;
        max-width: 320px;
    }


    /* HEADINGS */

    .courses-page .section-heading {
        margin-bottom: 35px;
    }


    /* PILLARS */

    .courses-page .education-pillars {
        grid-template-columns: 1fr;
    }


    /* COURSES */

    .courses-page .course-grid {
        grid-template-columns: 1fr;

        gap: 22px;
    }


    .courses-page .course-image {
        height: 240px;
    }


    /* APPROACH */

    .courses-page .approach-grid {
        grid-template-columns: 1fr;
    }


    /* ACCESS */

    .courses-page .access-layout {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    /* NOTICE */

    .courses-page .program-notice {
        grid-template-columns: 1fr;

        padding: 27px 22px;
    }


    /* CTA */

    .courses-page .courses-cta {
        padding: 65px 0;
    }


    .courses-page .courses-cta-actions {
        flex-direction: column;

        align-items: flex-start;
    }


    .courses-page .courses-cta-actions .btn {
        width: 100%;
        max-width: 330px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .courses-page .courses-hero,
    .courses-page .courses-hero .hero-overlay {
        min-height: 520px;
    }


    .courses-page .courses-hero .hero-overlay {
        padding:
            55px 18px;
    }


    .courses-page .courses-hero h1 {
        font-size: 2.7rem;
    }


    .courses-page .course-image {
        height: 210px;
    }


    .courses-page .course-content {
        padding: 23px 20px;
    }


    .courses-page .education-pillar,
    .courses-page .approach-card {
        padding: 27px 22px;
    }


    .courses-page .access-point {
        padding:
            18px
            17px
            18px
            53px;
    }

}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    .courses-page *,
    .courses-page *::before,
    .courses-page *::after {
        scroll-behavior: auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }

}
/* =========================================================
   JVR TRUST — MODERN DESIGN SYSTEM V2
   =========================================================
   APPEND AT THE ABSOLUTE END OF style.css

   Enhances:
   - Courses
   - Compliance
   - Donation
   - Legal sections
   - Cards
   - Typography
   - Header/footer
   - Responsive layout

   Existing content and functionality are preserved.
   ========================================================= */


/* =========================================================
   1. DESIGN VARIABLES
   ========================================================= */

:root {
    --jvr-green-950: #052e22;
    --jvr-green-900: #064532;
    --jvr-green-800: #07583d;
    --jvr-green-700: #08734b;
    --jvr-green-600: #15915b;
    --jvr-green-100: #dff2e5;
    --jvr-green-50: #f0f8f2;

    --jvr-lime: #a9d77a;
    --jvr-cream: #fbfcf8;
    --jvr-white: #ffffff;

    --jvr-text: #17241d;
    --jvr-muted: #647269;
    --jvr-border: #dfe9e2;

    --jvr-gold: #d7a936;
    --jvr-gold-light: #fff7df;

    --jvr-shadow-sm:
        0 8px 25px rgba(5, 55, 38, .06);

    --jvr-shadow:
        0 18px 50px rgba(5, 55, 38, .10);

    --jvr-shadow-lg:
        0 28px 80px rgba(5, 55, 38, .15);

    --jvr-radius-sm: 14px;
    --jvr-radius: 22px;
    --jvr-radius-lg: 32px;

    --jvr-container: 1240px;
}


/* =========================================================
   2. GLOBAL MODERNIZATION
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(169, 215, 122, .08),
            transparent 25%
        ),
        #f8faf7;

    color: var(--jvr-text);

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    line-height: 1.7;

    -webkit-font-smoothing: antialiased;
}


main {
    width: 100%;
}


main h1,
main h2,
main h3,
main h4 {
    letter-spacing: -.025em;
}


main p {
    color: var(--jvr-muted);
}


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


/* =========================================================
   3. HEADER UPGRADE
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;

    z-index: 9999;

    background:
        linear-gradient(
            90deg,
            #064b37,
            #075c42
        );

    box-shadow:
        0 5px 25px rgba(0, 0, 0, .08);
}


.header-inner {
    width: min(
        var(--jvr-container),
        calc(100% - 40px)
    );

    min-height: 74px;

    padding: 9px 0;
}


.logo a {
    gap: 11px;

    font-size: 1.55rem;
    font-weight: 800;

    letter-spacing: -.025em;
}


.logo img {
    width: 52px;
    height: 52px;

    padding: 4px;

    background: #fff;

    border-radius: 10px;

    object-fit: contain;
}


.main-nav {
    gap: 5px;
}


.main-nav > a {
    position: relative;

    padding: 10px 11px;

    border-radius: 8px;

    color:
        rgba(255, 255, 255, .92);

    font-size: .92rem;
    font-weight: 600;

    transition: .25s ease;
}


.main-nav > a:hover {
    background:
        rgba(255, 255, 255, .10);

    color: #fff;
}


.main-nav > a.active {
    color: #fff;

    border-bottom: none;

    background:
        rgba(255, 255, 255, .12);
}


.main-nav > a.active::after {
    content: "";

    position: absolute;

    right: 11px;
    bottom: 4px;
    left: 11px;

    height: 2px;

    background: #dff2b7;

    border-radius: 5px;
}


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


.nav-search input {
    width: 150px;

    padding: 10px 13px;

    background:
        rgba(255, 255, 255, .96);

    border: 1px solid
        rgba(255, 255, 255, .25);

    border-radius: 9px;

    transition: .25s ease;
}


.nav-search input:focus {
    width: 190px;

    outline: none;

    box-shadow:
        0 0 0 3px
        rgba(200, 239, 171, .25);
}


#langBtn {
    min-width: 54px;

    padding: 9px 12px;

    background: #fff;
    color: #07583d;

    border-radius: 9px;

    font-weight: 800;

    transition: .25s ease;
}


#langBtn:hover {
    transform: translateY(-2px);

    background: #e8f5df;
}


/* =========================================================
   4. UNIVERSAL INNER PAGE LAYOUT
   ========================================================= */

.courses-page,
.compliance-page,
.donate-page,
.legal-page {
    width: 100%;

    max-width: none;

    margin: 0;

    padding: 0;

    background: #f8faf7;
}


.courses-container,
.compliance-container,
.legal-container,
.donate-wrap {
    width: min(
        var(--jvr-container),
        calc(100% - 40px)
    );

    margin-right: auto;
    margin-left: auto;
}


/* =========================================================
   5. UNIVERSAL MODERN HERO
   ========================================================= */

.courses-page .courses-hero,
.compliance-page .compliance-hero,
.donate-page .donate-hero,
.legal-page .legal-hero {

    position: relative;

    min-height: 500px;

    display: flex;
    align-items: center;

    overflow: hidden;

    isolation: isolate;
}


.courses-page .courses-hero::before,
.compliance-page .compliance-hero::before,
.donate-page .donate-hero::before {

    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(169, 215, 122, .22),
            transparent 28%
        );
}


.courses-page .courses-hero .hero-overlay {

    width: 100%;
    min-height: 500px;

    display: flex;
    align-items: center;

    padding:
        85px
        max(
            30px,
            calc((100vw - var(--jvr-container)) / 2)
        );

    background:
        linear-gradient(
            90deg,
            rgba(4, 48, 33, .95),
            rgba(5, 67, 45, .79) 48%,
            rgba(5, 67, 45, .30)
        );

    border-radius: 0;

    text-align: left;
}


.courses-hero-content,
.compliance-hero-content {

    position: relative;

    max-width: 790px;

    z-index: 2;
}


.hero-eyebrow,
.section-kicker,
.eyebrow,
.legal-kicker {

    display: inline-flex;

    align-items: center;

    margin-bottom: 14px;

    font-size: .78rem;
    font-weight: 800;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.hero-eyebrow::before,
.section-kicker::before,
.eyebrow::before {

    content: "";

    width: 27px;
    height: 2px;

    margin-right: 10px;

    background: currentColor;

    border-radius: 10px;
}


/* =========================================================
   6. SECTION SYSTEM
   ========================================================= */

.courses-page section:not(.courses-hero),
.compliance-page section:not(.compliance-hero),
.donate-page .donate-section {

    position: relative;

    padding-top: 90px;
    padding-bottom: 90px;
}


.section-heading {
    max-width: 800px;

    margin-bottom: 45px;
}


.section-heading.centered {
    margin-right: auto;
    margin-left: auto;

    text-align: center;
}


.section-heading h2 {

    margin: 8px 0 15px;

    color: var(--jvr-green-950);

    font-size:
        clamp(2rem, 4vw, 3.2rem);

    line-height: 1.13;
}


.section-heading p {

    max-width: 760px;

    font-size: 1.04rem;

    line-height: 1.85;
}


/* =========================================================
   7. COURSES — PROGRAM CARDS
   ========================================================= */

.courses-page .course-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 28px;

    margin: 0;
}


.courses-page .course-card {

    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    height: 100%;

    background: #fff;

    border:
        1px solid
        rgba(15, 91, 59, .09);

    border-radius: 24px;

    overflow: hidden;

    box-shadow: var(--jvr-shadow);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.courses-page .course-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        var(--jvr-shadow-lg);
}


.courses-page .course-image {

    position: relative;

    height: 245px;

    overflow: hidden;
}


.courses-page .course-image img,
.courses-page .course-card > img {

    width: 100%;
    height: 245px;

    object-fit: cover;

    transition:
        transform .65s ease;
}


.courses-page .course-card:hover img {

    transform: scale(1.07);
}


.courses-page .course-image::after {

    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            transparent 50%,
            rgba(4, 45, 31, .42)
        );

    pointer-events: none;
}


.courses-page .course-category {

    position: absolute;

    z-index: 2;

    bottom: 17px;
    left: 18px;

    padding: 7px 13px;

    background:
        rgba(255, 255, 255, .94);

    color: var(--jvr-green-800);

    border-radius: 999px;

    font-size: .75rem;
    font-weight: 800;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, .12);
}


.courses-page .course-content {

    display: flex;
    flex-direction: column;

    flex-grow: 1;

    padding: 27px;
}


.courses-page .course-content h3 {

    margin-bottom: 12px;

    color: var(--jvr-green-900);

    font-size: 1.38rem;

    line-height: 1.3;
}


.courses-page .course-content p {

    margin-bottom: 18px;

    font-size: .94rem;

    line-height: 1.8;
}


.courses-page .course-features {

    display: grid;

    gap: 9px;

    margin-top: auto;

    padding:
        20px 0 0;

    border-top:
        1px solid
        var(--jvr-border);

    list-style: none;
}


.courses-page .course-features li {

    position: relative;

    padding-left: 26px;

    color: #46564c;

    font-size: .88rem;
}


.courses-page .course-features li::before {

    content: "✓";

    position: absolute;

    top: 1px;
    left: 0;

    width: 18px;
    height: 18px;

    display: grid;
    place-items: center;

    background:
        var(--jvr-green-100);

    color:
        var(--jvr-green-700);

    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}


/* =========================================================
   8. COURSES — EDUCATION PILLARS
   ========================================================= */

.education-pillars,
.approach-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 22px;
}


.education-pillar,
.approach-card {

    position: relative;

    padding: 32px 27px;

    background: #fff;

    border:
        1px solid
        var(--jvr-border);

    border-radius:
        var(--jvr-radius);

    box-shadow:
        var(--jvr-shadow-sm);

    transition: .3s ease;
}


.education-pillar:hover,
.approach-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--jvr-shadow);
}


.pillar-icon {

    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    margin-bottom: 20px;

    background:
        linear-gradient(
            135deg,
            #dff1d6,
            #eff8e9
        );

    color:
        var(--jvr-green-700);

    border-radius: 16px;

    font-weight: 900;
}


/* =========================================================
   9. COURSES — LEARNING APPROACH
   ========================================================= */

.approach-card > span {

    display: inline-block;

    margin-bottom: 22px;

    color:
        rgba(7, 88, 61, .22);

    font-size: 3rem;
    font-weight: 900;

    line-height: 1;
}


.approach-card h3 {

    margin-bottom: 10px;

    color:
        var(--jvr-green-900);
}


.access-layout {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 70px;

    align-items: center;
}


.access-points {

    display: grid;

    gap: 14px;
}


.access-point {

    position: relative;

    padding:
        20px
        20px
        20px
        58px;

    background: #fff;

    border:
        1px solid
        var(--jvr-border);

    border-radius: 16px;

    box-shadow:
        var(--jvr-shadow-sm);

    font-weight: 700;

    transition: .25s ease;
}


.access-point:hover {

    transform:
        translateX(6px);
}


.access-point::before {

    content: "✓";

    position: absolute;

    top: 50%;
    left: 20px;

    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    transform:
        translateY(-50%);

    background:
        var(--jvr-green-100);

    color:
        var(--jvr-green-700);

    border-radius: 50%;

    font-size: 11px;
}


/* =========================================================
   10. PROGRAM NOTICE
   ========================================================= */

.program-notice {

    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 25px;

    padding: 38px;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #fffdf7
        );

    border:
        1px solid
        #eadcae;

    border-radius:
        var(--jvr-radius);

    box-shadow:
        var(--jvr-shadow-sm);
}


.notice-icon {

    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    background:
        var(--jvr-gold);

    color: #fff;

    border-radius: 16px;

    font-size: 1.3rem;
}


/* =========================================================
   11. COMPLIANCE PAGE — AUTOMATIC MODERNIZATION
   ========================================================= */

/*
   These rules also improve compliance.php even when
   some content is not wrapped in special cards.
*/

.compliance-page {

    padding-bottom: 0;
}


.compliance-page > section,
.compliance-page > .compliance-container {

    width: min(
        var(--jvr-container),
        calc(100% - 40px)
    );

    margin-right: auto;
    margin-left: auto;
}


.compliance-page h1 {

    color:
        var(--jvr-green-950);

    font-size:
        clamp(2.5rem, 5vw, 4.6rem);

    line-height: 1.05;
}


.compliance-page h2 {

    margin:
        12px 0 18px;

    color:
        var(--jvr-green-950);

    font-size:
        clamp(1.8rem, 3vw, 2.7rem);
}


.compliance-page h3 {

    color:
        var(--jvr-green-800);
}


.compliance-page .compliance-card,
.compliance-page .status-card,
.compliance-page .governance-card,
.compliance-page .policy-card {

    background: #fff;

    border:
        1px solid
        var(--jvr-border);

    border-radius:
        var(--jvr-radius);

    box-shadow:
        var(--jvr-shadow-sm);

    transition: .3s ease;
}


.compliance-page .compliance-card:hover,
.compliance-page .status-card:hover,
.compliance-page .governance-card:hover,
.compliance-page .policy-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--jvr-shadow);
}


/* =========================================================
   12. COMPLIANCE STATUS CARDS
   ========================================================= */

.compliance-grid,
.status-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 22px;
}


.status-card {

    position: relative;

    padding: 30px;

    overflow: hidden;
}


.status-card::before {

    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--jvr-green-700),
            var(--jvr-lime)
        );
}


.status-card strong {

    display: block;

    margin:
        7px 0;

    color:
        var(--jvr-green-900);

    font-size: 1.35rem;
}


/* =========================================================
   13. GOVERNANCE CARDS
   ========================================================= */

.governance-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 22px;
}


.governance-card {

    padding: 30px;
}


.governance-card .number {

    display: block;

    margin-bottom: 18px;

    color:
        rgba(7, 88, 61, .20);

    font-size: 2.8rem;
    font-weight: 900;
}


/* =========================================================
   14. LEGAL / POLICY CARDS
   ========================================================= */

.policy-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 22px;
}


.policy-card {

    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 240px;

    padding: 30px;

    overflow: hidden;
}


.policy-card::after {

    content: "→";

    position: absolute;

    right: 25px;
    bottom: 22px;

    color:
        var(--jvr-green-700);

    font-size: 1.5rem;

    transition: .25s ease;
}


.policy-card:hover::after {

    transform:
        translateX(5px);
}


.policy-card a {

    color:
        var(--jvr-green-700);

    font-weight: 800;
}


/* =========================================================
   15. DONATION PAGE — HERO
   ========================================================= */

.donate-page .donate-hero {

    min-height: 620px;

    background-size: cover;
    background-position: center;
}


.donate-page .donate-hero-shade {

    min-height: 620px;

    background:
        linear-gradient(
            90deg,
            rgba(4, 47, 32, .96),
            rgba(5, 73, 47, .78) 47%,
            rgba(5, 73, 47, .18)
        );
}


.donate-page .donate-hero h1 {

    font-size:
        clamp(3.2rem, 7vw, 6rem);

    letter-spacing: -.05em;
}


/* =========================================================
   16. DONATION IMPACT CARDS
   ========================================================= */

.donate-page .impact-grid {

    gap: 25px;
}


.donate-page .donate-card {

    position: relative;

    padding: 36px 30px;

    border-radius:
        var(--jvr-radius);

    box-shadow:
        var(--jvr-shadow-sm);

    overflow: hidden;
}


.donate-page .donate-card::before {

    content: "";

    position: absolute;

    top: -45px;
    right: -45px;

    width: 120px;
    height: 120px;

    background:
        var(--jvr-green-50);

    border-radius: 50%;
}


.donate-page .donate-icon {

    position: relative;

    z-index: 1;

    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    background:
        var(--jvr-green-50);

    border-radius: 17px;

    font-size: 1.7rem;
}


/* =========================================================
   17. DONATION PAYMENT PANEL
   ========================================================= */

.donate-page .donation-panel {

    border-radius:
        var(--jvr-radius-lg);

    box-shadow:
        var(--jvr-shadow-lg);
}


.donate-page .amount-box {

    background:
        linear-gradient(
            135deg,
            #f5faf2,
            #fbfdf9
        );

    border-radius:
        var(--jvr-radius);
}


.donate-page .amount-presets button {

    min-height: 48px;

    border-width: 2px;
}


.donate-page .payment-tabs {

    padding: 7px;

    background:
        #f0f6ed;

    border: none;

    border-radius: 14px;
}


.donate-page .payment-tab {

    flex: 1;

    border-radius: 10px;
}


.donate-page .payment-tab.active {

    background: #fff;

    box-shadow:
        0 5px 18px
        rgba(5, 55, 38, .09);
}


.donate-page .payment-tab.active::after {

    display: none;
}


.donate-page .payment-pane {

    margin-top: 20px;

    padding: 30px;

    background: #fff;

    border:
        1px solid
        var(--jvr-border);

    border-radius:
        var(--jvr-radius);
}


/* =========================================================
   18. RECEIPT FLOW
   ========================================================= */

.donate-page .receipt-flow {

    position: relative;
}


.donate-page .receipt-flow > div {

    min-height: 75px;

    padding: 18px 20px;

    border-radius: 16px;

    transition: .25s ease;
}


.donate-page .receipt-flow > div:hover {

    transform:
        translateX(6px);

    box-shadow:
        var(--jvr-shadow);
}


/* =========================================================
   19. CTA SECTIONS
   ========================================================= */

.courses-cta,
.compliance-cta {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #053c2c,
            #08704a
        );

    color: #fff;
}


.courses-cta::after,
.compliance-cta::after {

    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    top: -250px;
    right: -100px;

    background:
        rgba(169, 215, 122, .12);

    border-radius: 50%;
}


.courses-cta h2,
.compliance-cta h2 {

    color: #fff !important;
}


/* =========================================================
   20. FOOTER UPGRADE
   ========================================================= */

.site-footer {

    position: relative;

    margin-top: 0;

    padding:
        50px 25px;

    background:
        linear-gradient(
            135deg,
            #043a2b,
            #075c42
        );

    color: #fff;
}


.footer-inner {

    width: min(
        var(--jvr-container),
        100%
    );

    margin: auto;
}


.site-footer nav {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 8px 20px;

    margin: 20px 0;
}


.site-footer nav a {

    position: relative;

    color:
        rgba(255, 255, 255, .88);

    font-size: .9rem;

    transition: .2s ease;
}


.site-footer nav a:hover {

    color: #dff2b7;
}


.footer-note {

    max-width: 850px;

    margin:
        15px auto 0;

    color:
        rgba(255, 255, 255, .75);

    font-size: .85rem;

    line-height: 1.7;
}


/* =========================================================
   21. ANIMATION POLISH
   ========================================================= */

.fade-in {

    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity .75s ease,
        transform .75s ease;
}


.fade-in.visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   22. TABLET
   ========================================================= */

@media (
    max-width: 1050px
) {

    .courses-page .course-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .education-pillars,
    .approach-grid,
    .governance-grid,
    .compliance-grid,
    .status-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .policy-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .access-layout {

        gap: 40px;

    }

}


/* =========================================================
   23. MOBILE NAVIGATION
   ========================================================= */

@media (
    max-width: 900px
) {

    .header-inner {

        width:
            calc(100% - 28px);

    }


    .main-nav {

        position: absolute;

        top: calc(100% + 8px);
        right: 14px;
        left: 14px;

        display: none;

        padding: 18px;

        background:
            rgba(5, 73, 51, .98);

        border:
            1px solid
            rgba(255, 255, 255, .10);

        border-radius: 18px;

        box-shadow:
            0 25px 60px
            rgba(0, 0, 0, .22);

        backdrop-filter:
            blur(15px);

    }


    .main-nav.open {

        display: flex;

    }


    .main-nav > a {

        width: 100%;

        padding: 12px 14px;

    }


    .nav-search {

        width: 100%;

    }


    .nav-search input,
    .nav-search input:focus {

        width: 100%;

    }


    #langBtn {

        width: 100%;

    }

}


/* =========================================================
   24. MOBILE CONTENT
   ========================================================= */

@media (
    max-width: 760px
) {

    .courses-container,
    .compliance-container,
    .legal-container,
    .donate-wrap {

        width:
            calc(100% - 28px);

    }


    .courses-page section:not(.courses-hero),
    .compliance-page section:not(.compliance-hero),
    .donate-page .donate-section {

        padding-top: 65px;
        padding-bottom: 65px;

    }


    .courses-page .course-grid,
    .policy-grid,
    .access-layout {

        grid-template-columns: 1fr;

    }


    .education-pillars,
    .approach-grid,
    .governance-grid,
    .compliance-grid,
    .status-grid {

        grid-template-columns: 1fr;

    }


    .courses-page
    .courses-hero
    .hero-overlay {

        padding:
            65px 22px;

        background:
            rgba(4, 55, 38, .84);

    }


    .courses-page .course-image,
    .courses-page .course-image img,
    .courses-page .course-card > img {

        height: 230px;

    }


    .program-notice {

        grid-template-columns: 1fr;

        padding: 27px 22px;

    }


    .donate-page .payment-pane {

        padding: 22px 17px;

    }


    .site-footer {

        padding:
            42px 20px;

    }

}


/* =========================================================
   25. SMALL MOBILE
   ========================================================= */

@media (
    max-width: 480px
) {

    .logo a {

        font-size: 1.25rem;

    }


    .logo img {

        width: 44px;
        height: 44px;

    }


    .courses-page .course-content {

        padding: 23px 20px;

    }


    .education-pillar,
    .approach-card,
    .status-card,
    .governance-card,
    .policy-card {

        padding: 24px 20px;

    }

}


/* =========================================================
   26. ACCESSIBILITY — REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}
/* =========================================================
   CONTACT FORM — ANTI-SPAM HONEYPOT
   Keeps the spam-protection field completely off-screen.
   Do not use display:none because some basic bots detect it.
   ========================================================= */

.contact-honeypot {
    position: absolute !important;
    left: -99999px !important;
    top: -99999px !important;

    width: 1px !important;
    height: 1px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;

    border: 0 !important;
}

.contact-honeypot input,
.contact-honeypot label {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;
}
/* ==========================================================
   JVR TRUST - MODERN ABOUT PAGE
   Scoped styles - safe for other website pages
========================================================== */

.about-page {
    --about-green: #075c46;
    --about-green-dark: #043e31;
    --about-green-light: #eaf6f1;
    --about-gold: #d7a83f;
    --about-text: #17221f;
    --about-muted: #64706c;
    --about-border: rgba(7, 92, 70, 0.12);
    --about-shadow: 0 20px 50px rgba(19, 54, 44, 0.10);

    color: var(--about-text);
    overflow: hidden;
}

.about-page * {
    box-sizing: border-box;
}

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


/* HERO */

.about-hero {
    min-height: 620px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    position: relative;
    color: #fff;
}

.about-hero-content {
    width: min(760px, 100%);
    padding: 90px 0;
}

.about-eyebrow,
.section-kicker {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--about-green);
}

.about-hero .about-eyebrow {
    color: #dcefe7;
}

.about-hero h1 {
    margin: 0;
    max-width: 800px;
    font-size: clamp(2.7rem, 6vw, 5.3rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
    color: #fff;
}

.about-hero p {
    max-width: 700px;
    margin: 28px 0 0;
    font-size: 1.08rem;
    line-height: 1.8;
    color: rgba(255,255,255,.88);
}

.about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 35px;
}


/* BUTTONS */

.about-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 13px 25px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

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

.about-btn-primary {
    background: #fff;
    color: var(--about-green-dark);
}

.about-btn-outline {
    border: 1px solid rgba(255,255,255,.55);
    color: #fff;
}

.about-btn-outline:hover {
    background: rgba(255,255,255,.12);
}


/* GENERAL SECTIONS */

.about-section,
.leadership-section,
.values-section,
.about-work-section {
    padding: 100px 0;
}

.about-intro-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 80px;
    align-items: start;
}

.about-section-heading h2,
.center-heading h2,
.founder-content h2,
.legacy-impact-card h2,
.about-cta h2 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.about-intro-copy p,
.founder-content p,
.trustee-profile-content p {
    color: var(--about-muted);
    line-height: 1.8;
}

.about-intro-copy p:first-child {
    margin-top: 0;
}


/* TRUST FACTS */

.trust-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 65px;
}

.trust-fact-card {
    display: flex;
    gap: 18px;
    align-items: center;
    min-width: 0;
    padding: 25px;
    background: #fff;
    border: 1px solid var(--about-border);
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(15, 65, 50, .06);
}

.fact-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--about-green-light);
    color: var(--about-green);
    font-size: 1.4rem;
}

.trust-fact-card small {
    display: block;
    color: var(--about-muted);
    font-size: .68rem;
    letter-spacing: .1em;
}

.trust-fact-card h3 {
    margin: 5px 0 2px;
    color: var(--about-green-dark);
}

.trust-fact-card p {
    margin: 0;
    color: var(--about-muted);
}


/* FOUNDER */

.founder-section {
    padding: 110px 0;
    background:
        linear-gradient(
            135deg,
            #f4faf7 0%,
            #ffffff 100%
        );
}

.founder-grid {
    display: grid;
    grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr);
    gap: 75px;
    align-items: center;
}

.founder-image-wrap {
    position: relative;
    min-width: 0;
}

.founder-image-wrap img {
    display: block;
    width: 100%;
    height: 600px;
    object-fit: cover;
    object-position: center top;
    border-radius: 24px;
    box-shadow: var(--about-shadow);
}

.founder-image-badge {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 25px;
    padding: 20px 22px;
    border-radius: 15px;
    background: rgba(4, 62, 49, .92);
    backdrop-filter: blur(10px);
    color: #fff;
}

.founder-image-badge span {
    display: block;
    margin-bottom: 5px;
    font-size: .7rem;
    letter-spacing: .15em;
}

.founder-image-badge strong {
    font-size: 1.3rem;
}

.founder-content h2 span {
    display: block;
    margin-top: 8px;
    font-size: .48em;
    color: var(--about-muted);
}

.founder-lead {
    font-size: 1.15rem;
    color: var(--about-green-dark) !important;
}

.founder-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.founder-highlights span {
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--about-green-light);
    color: var(--about-green-dark);
    font-size: .82rem;
    font-weight: 700;
}


/* LEADERSHIP */

.leadership-section {
    background: #fff;
}

.center-heading {
    max-width: 750px;
    margin: 0 auto 55px;
    text-align: center;
}

.center-heading p {
    color: var(--about-muted);
    line-height: 1.7;
}

.trustee-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
    align-items: stretch;
}

.trustee-profile-card {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--about-border);
    border-radius: 22px;
    box-shadow: 0 15px 45px rgba(18, 58, 46, .08);
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.trustee-profile-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 25px 60px rgba(18, 58, 46, .14);
}

.trustee-photo {
    width: 100%;
    height: 340px;
    overflow: hidden;
    background: #eef4f1;
}

.trustee-photo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center top;
    transition: transform .6s ease;
}

.trustee-profile-card:hover .trustee-photo img {
    transform: scale(1.035);
}

.trustee-profile-content {
    flex: 1;
    padding: 28px;
}

.trustee-role {
    display: block;
    margin-bottom: 9px;
    color: var(--about-green);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
}

.trustee-profile-content h3 {
    margin: 0 0 17px;
    font-size: 1.45rem;
    color: var(--about-green-dark);
}


/* LEGACY IMPACT */

.legacy-impact-section {
    padding: 40px 0 100px;
}

.legacy-impact-card {
    display: grid;
    grid-template-columns: 1.4fr .6fr;
    gap: 50px;
    align-items: center;
    padding: 65px;
    border-radius: 28px;
    background:
        linear-gradient(
            135deg,
            var(--about-green-dark),
            var(--about-green)
        );
    color: #fff;
    box-shadow: var(--about-shadow);
}

.section-kicker.light {
    color: #c9e6dc;
}

.legacy-impact-card h2 {
    color: #fff;
}

.legacy-impact-card p {
    line-height: 1.8;
    color: rgba(255,255,255,.82);
}

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

.legacy-number strong {
    display: block;
    font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: 1;
    color: #fff;
}

.legacy-number span {
    display: block;
    margin-top: 15px;
    line-height: 1.5;
    color: rgba(255,255,255,.78);
}


/* VALUES */

.values-section {
    background: #f7faf8;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.value-card {
    min-width: 0;
    padding: 32px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid var(--about-border);
}

.value-card > span {
    color: var(--about-green);
    font-weight: 800;
    font-size: .75rem;
}

.value-card h3 {
    margin: 35px 0 12px;
    font-size: 1.35rem;
}

.value-card p {
    margin-bottom: 0;
    color: var(--about-muted);
    line-height: 1.7;
}


/* OUR WORK */

.about-work-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.about-work-grid article {
    min-width: 0;
    padding: 30px;
    border: 1px solid var(--about-border);
    border-radius: 20px;
}

.work-icon {
    margin-bottom: 25px;
    font-size: 2rem;
}

.about-work-grid h3 {
    color: var(--about-green-dark);
}

.about-work-grid p {
    color: var(--about-muted);
    line-height: 1.7;
}


/* CTA */

.about-cta {
    padding: 100px 0;
    background: #082f27;
    color: #fff;
}

.about-cta-inner {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 50px;
    align-items: center;
}

.about-cta h2 {
    color: #fff;
}

.about-cta p {
    max-width: 700px;
    color: rgba(255,255,255,.75);
    line-height: 1.8;
}

.about-cta-inner > div:first-child > span {
    display: block;
    margin-bottom: 15px;
    color: #b8ded0;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .15em;
}

.about-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.about-btn-light {
    background: #fff;
    color: var(--about-green-dark);
}

.about-btn-outline-light {
    border: 1px solid rgba(255,255,255,.4);
    color: #fff;
}


/* ==========================================================
   RESPONSIVE FIXES
   This also fixes trustee cards/images not fitting correctly.
========================================================== */

@media (max-width: 1050px) {

    .trustee-profile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .values-grid,
    .about-work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 850px) {

    .about-hero {
        min-height: 540px;
    }

    .about-intro-grid,
    .founder-grid,
    .legacy-impact-card,
    .about-cta-inner {
        grid-template-columns: 1fr;
    }

    .about-intro-grid,
    .founder-grid {
        gap: 45px;
    }

    .trust-facts {
        grid-template-columns: 1fr;
    }

    .founder-image-wrap {
        max-width: 600px;
        margin-inline: auto;
    }

    .founder-image-wrap img {
        height: min(650px, 80vh);
    }

    .legacy-number {
        text-align: left;
    }

}


@media (max-width: 650px) {

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

    .about-section,
    .leadership-section,
    .values-section,
    .about-work-section {
        padding: 70px 0;
    }

    .about-hero-content {
        padding: 70px 0;
    }

    .about-hero h1 {
        font-size: clamp(2.35rem, 12vw, 4rem);
    }

    .about-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .trustee-profile-grid,
    .values-grid,
    .about-work-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .trustee-photo {
        height: 390px;
    }

    .legacy-impact-card {
        padding: 38px 25px;
    }

    .founder-image-wrap img {
        height: 500px;
    }

    .founder-image-badge {
        left: 15px;
        right: 15px;
        bottom: 15px;
    }

}


@media (max-width: 420px) {

    .trustee-photo {
        height: 330px;
    }

    .founder-image-wrap img {
        height: 440px;
    }

    .trustee-profile-content,
    .value-card,
    .about-work-grid article {
        padding: 23px;
    }

}


/* =========================================================
   JVR TRUST — GLOBAL RESPONSIVE COMPATIBILITY LAYER
   Consolidated final layer for desktop, tablet, iOS & Android.
   Existing page-specific features are preserved.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
}

img, picture, video, canvas, svg, iframe {
    max-width: 100%;
}

img, video {
    height: auto;
}

img {
    display: block;
}

main, section, article, aside, header, footer, nav, div {
    min-width: 0;
}

input, textarea, select, button {
    max-width: 100%;
}

textarea {
    resize: vertical;
}

table {
    max-width: 100%;
}

a, p, li, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* Shared centered content widths */
.about-container,
.courses-container,
.compliance-container,
.legal-container,
.donate-wrap,
.contact-container,
.header-inner,
.footer-inner {
    width: min(var(--jvr-container, 1240px), calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
}

/* Keep ordinary page content centered without affecting full-width page systems */
main:not(.about-page):not(.courses-page):not(.compliance-page):not(.donate-page):not(.legal-page) {
    width: 100%;
}

/* Header */
.site-header {
    width: 100%;
}

.header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logo {
    flex: 0 0 auto;
    min-width: 0;
}

.logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo img {
    flex: 0 0 auto;
    object-fit: contain;
}

.main-nav {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.menu-toggle {
    flex: 0 0 auto;
}

/* Generic hero image safety */
.page-hero,
.about-hero,
.courses-hero,
.compliance-hero,
.donate-hero,
.legal-hero {
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* About image corrections */
.about-page .founder-image-wrap,
.about-page .trustee-photo {
    width: 100%;
    min-width: 0;
}

.about-page .founder-image-wrap img,
.about-page .trustee-photo img {
    width: 100%;
    max-width: 100%;
}

/* Cards and grids must never force horizontal scrolling */
.course-grid,
.education-pillars,
.approach-grid,
.access-layout,
.compliance-grid,
.status-grid,
.governance-grid,
.policy-grid,
.trustee-profile-grid,
.trust-facts,
.values-grid,
.about-work-grid,
.about-intro-grid,
.founder-grid,
.legacy-impact-card,
.about-cta-inner {
    min-width: 0;
}

.course-card,
.education-pillar,
.approach-card,
.status-card,
.governance-card,
.policy-card,
.trustee-profile-card,
.trust-fact-card,
.value-card {
    min-width: 0;
    max-width: 100%;
}

/* Footer */
.site-footer {
    width: 100%;
}

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

.site-footer p {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Prevent sticky header anchors from hiding behind header */
[id] {
    scroll-margin-top: 95px;
}

/* Touch devices: remove hover-only dependency */
@media (hover: none) {
    .course-card:hover,
    .trustee-profile-card:hover,
    .education-pillar:hover,
    .approach-card:hover,
    .status-card:hover,
    .governance-card:hover,
    .policy-card:hover {
        transform: none;
    }
}

/* =========================================================
   TABLET / MOBILE NAVIGATION
   ========================================================= */
@media (max-width: 900px) {
    .header-inner {
        width: calc(100% - 28px);
        min-height: 68px;
        padding: 8px 0;
    }

    .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        padding: 0;
        border-radius: 10px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .main-nav {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        z-index: 10000;
        display: none;
        width: 100%;
        max-height: calc(100vh - 100px);
        max-height: calc(100dvh - 100px);
        overflow-y: auto;
        overscroll-behavior: contain;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
        padding: 16px;
        -webkit-overflow-scrolling: touch;
    }

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

    .main-nav > a,
    .nav-search,
    #langBtn {
        width: 100%;
    }

    .nav-search input,
    .nav-search input:focus {
        width: 100%;
        min-width: 0;
    }

    #langBtn {
        min-height: 44px;
    }
}

/* =========================================================
   TABLET CONTENT
   ========================================================= */
@media (max-width: 1050px) {
    .about-page .founder-grid,
    .about-page .about-intro-grid {
        gap: clamp(35px, 6vw, 60px);
    }
}

/* =========================================================
   MOBILE CONTENT
   ========================================================= */
@media (max-width: 760px) {
    .about-container,
    .courses-container,
    .compliance-container,
    .legal-container,
    .donate-wrap,
    .contact-container,
    .footer-inner {
        width: calc(100% - 28px);
    }

    .page-hero,
    .about-hero,
    .courses-page .courses-hero,
    .compliance-page .compliance-hero,
    .donate-page .donate-hero,
    .legal-page .legal-hero {
        min-height: auto;
    }

    .about-page .about-hero {
        min-height: 520px;
    }

    .about-page .about-hero-content {
        width: 100%;
        padding: 65px 0;
    }

    .about-page .founder-image-wrap {
        width: 100%;
        max-width: 560px;
    }

    .about-page .founder-image-wrap img {
        width: 100%;
        height: auto;
        min-height: 420px;
        max-height: 620px;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        object-position: center top;
    }

    .about-page .trustee-photo {
        height: auto;
        aspect-ratio: 4 / 5;
    }

    .about-page .trustee-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

    .about-page .legacy-impact-card,
    .about-page .about-cta-inner {
        text-align: left;
    }

    .about-page .about-btn {
        width: 100%;
    }

    .site-footer nav {
        align-items: center;
    }
}

/* =========================================================
   SMALL PHONES
   ========================================================= */
@media (max-width: 480px) {
    .header-inner,
    .about-container,
    .courses-container,
    .compliance-container,
    .legal-container,
    .donate-wrap,
    .contact-container,
    .footer-inner {
        width: calc(100% - 24px);
    }

    .logo a {
        gap: 8px;
    }

    .logo span {
        white-space: nowrap;
    }

    .about-page .founder-image-wrap img {
        min-height: 360px;
    }

    .about-page .founder-image-badge {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 15px;
    }

    .about-page .trustee-profile-content,
    .about-page .value-card,
    .about-page .about-work-grid article {
        padding: 22px 20px;
    }

    .site-footer {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Safari backdrop-filter compatibility */
@supports (-webkit-backdrop-filter: blur(10px)) {
    .main-nav,
    .founder-image-badge,
    .course-category,
    .courses-page .btn-outline {
        -webkit-backdrop-filter: blur(10px);
    }
}

/* Safe areas on modern iPhones */
@supports (padding: max(0px)) {
    .site-header {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .site-footer {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
        padding-bottom: max(42px, env(safe-area-inset-bottom));
    }
}

/* ===== JVR TRUST HOME PAGE V3 — scoped, safe for other pages ===== */
.home-page{max-width:none;padding:0;background:#f8faf7;overflow:hidden}.home-page .home-container{width:min(var(--jvr-container,1240px),calc(100% - 40px));margin:auto}
.home-hero{min-height:720px;background-size:cover;background-position:center}.home-hero-overlay{min-height:720px;display:flex;align-items:center;background:linear-gradient(90deg,rgba(3,42,29,.95),rgba(4,63,42,.78) 50%,rgba(4,63,42,.18))}
.home-hero-content{padding:100px 0;color:#fff}.home-eyebrow,.home-page .kicker{display:inline-block;margin-bottom:15px;font-size:.78rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.home-eyebrow{color:#dcf3b9}.home-page .kicker{color:#4d8c62}
.home-hero h1{max-width:920px;margin:0 0 24px;color:#fff;font-size:clamp(3.2rem,6.5vw,6.1rem);line-height:.99;letter-spacing:-.055em}.home-hero p{max-width:720px;color:rgba(255,255,255,.9);font-size:1.15rem;line-height:1.8}
.home-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}.home-btn{display:inline-flex;justify-content:center;align-items:center;min-height:52px;padding:13px 25px;border:1px solid transparent;border-radius:999px;font-weight:800;text-decoration:none;transition:.25s}.home-btn:hover{transform:translateY(-3px)}.home-btn.primary{background:#e5f4c9;color:#16472f}.home-btn.glass,.home-btn.outline{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.09);color:#fff}.home-btn.light{background:#fff;color:#07583d}
.home-stats{position:relative;z-index:3;margin-top:-55px;padding-bottom:35px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.stat-card{padding:28px 24px;background:#fff;border:1px solid #dce8da;border-radius:22px;box-shadow:0 20px 55px rgba(5,55,38,.11)}.stat-card b{display:block;color:#0a4c35;font-size:clamp(1.8rem,3vw,2.5rem);line-height:1}.stat-card p{margin:12px 0 0;font-size:.88rem;line-height:1.55}.stat-note{text-align:center;font-size:.75rem;color:#78857d!important}
.home-section{padding:95px 0}.home-page .split{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}.section-copy h2,.section-head h2,.home-cta h2{margin:0 0 18px;color:#123d2b;font-size:clamp(2.2rem,4.4vw,4rem);line-height:1.08;letter-spacing:-.04em}.section-copy p,.section-head p{line-height:1.85}.text-link{color:#08734b;font-weight:800;text-decoration:none}
.pillar-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:17px}.pillar-grid article{padding:28px;background:#fff;border:1px solid #dce8da;border-radius:20px;box-shadow:0 12px 35px rgba(5,55,38,.06);transition:.3s}.pillar-grid article:hover{transform:translateY(-6px)}.pillar-grid span{color:#9ab98c;font-size:1.8rem;font-weight:900}.pillar-grid h3{margin:12px 0 7px;color:#124d34}.pillar-grid p{margin:0;font-size:.9rem}
.impact{background:linear-gradient(#eef6ea,#f8faf7)}.section-head{max-width:800px;margin-bottom:42px}.chart-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:25px}.chart-card{padding:30px;background:#fff;border:1px solid #dce8da;border-radius:24px;box-shadow:0 16px 45px rgba(5,55,38,.07)}.chart-card h3{color:#123f2b}.chart-wrap{height:320px}
.gallery-section{background:#fff}.heading-row{max-width:none;display:flex;justify-content:space-between;align-items:end;gap:20px}.slider-buttons{display:flex;gap:8px}.slider-buttons button{width:45px;height:45px;border:1px solid #dce8da;border-radius:50%;background:#fff;color:#07583d;cursor:pointer}.home-slider{position:relative;height:540px;border-radius:30px;overflow:hidden;box-shadow:0 25px 70px rgba(5,55,38,.12)}.home-slider .slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:.65s}.home-slider .slide.active{opacity:1;visibility:visible}.home-slider img{width:100%;height:540px;object-fit:cover}
.voices{background:#f0f6ed}.testimonial-box{min-height:310px;padding:48px;background:#073f2e;border-radius:28px;color:#fff;box-shadow:0 24px 65px rgba(5,55,38,.16)}.testimonial-box .testimonial{display:none;margin:0}.testimonial-box .testimonial.active{display:block;animation:quoteIn .5s ease}.testimonial-box p{color:#fff;font-size:clamp(1.4rem,2.5vw,2rem);line-height:1.5}.testimonial-box cite{color:#cde0d4;font-style:normal}
.home-cta{padding:80px 0;background:linear-gradient(135deg,#043b2b,#08714b);color:#fff}.cta-inner{display:grid;grid-template-columns:1.25fr auto;gap:55px;align-items:center}.home-cta h2{color:#fff}.home-cta p{color:rgba(255,255,255,.82)}
.reveal-up,.reveal-left,.reveal-right{opacity:0;transition:opacity .75s ease,transform .75s ease}.reveal-up{transform:translateY(30px)}.reveal-left{transform:translateX(-32px)}.reveal-right{transform:translateX(32px)}.reveal-up.visible,.reveal-left.visible,.reveal-right.visible{opacity:1;transform:none}@keyframes quoteIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:1000px){.stat-grid{grid-template-columns:repeat(2,1fr)}.home-page .split,.cta-inner{grid-template-columns:1fr;gap:45px}.chart-grid{grid-template-columns:1fr}}
@media(max-width:760px){.home-page .home-container{width:calc(100% - 28px)}.home-hero,.home-hero-overlay{min-height:650px}.home-hero-overlay{background:linear-gradient(rgba(3,48,33,.87),rgba(3,48,33,.75))}.home-hero-content{padding:75px 0}.home-hero h1{font-size:clamp(2.7rem,12vw,4.4rem)}.home-stats{margin-top:-35px}.stat-grid,.pillar-grid{grid-template-columns:1fr}.home-section{padding:68px 0}.chart-card{padding:22px 16px}.chart-wrap{height:285px}.home-slider,.home-slider img{height:400px}.testimonial-box{padding:35px 25px}.home-actions{flex-direction:column}.home-btn{width:100%}}
@media(max-width:480px){.home-slider,.home-slider img{height:330px}.slider-buttons{display:none}}
@media(prefers-reduced-motion:reduce){.home-page *{animation-duration:.01ms!important;transition-duration:.01ms!important}}