/* =========================================================
   BAPBI REDESIGN
   LEADERSHIP PAGE STYLESHEET
   Bethesda Apostolic Pentecostal Bible Institute
========================================================= */


/* =========================================================
   GOOGLE FONTS
========================================================= */

@import url(
    'https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Inter:wght@400;500;600;700;800&display=swap'
);


/* =========================================================
   ROOT
========================================================= */

:root {

    --espresso: #120906;
    --espresso-light: #211008;
    --brown: #351707;
    --bronze: #6d350c;

    --gold-dark: #9f6816;
    --gold: #d5a32f;
    --gold-light: #f1cc72;

    --ivory: #f6f0e5;
    --cream: #e9dfcf;

    --white: #ffffff;

    --text-light: #e9e4dc;
    --text-muted: #b9b0a7;

    --text-dark: #2b2019;
    --text-dark-muted: #766960;

    --border-dark:
        rgba(213, 163, 47, 0.22);

    --border-light:
        rgba(38, 20, 8, 0.14);

    --shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.35);

    --container-width: 1280px;

}


/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    background:
        var(--espresso);

    color:
        var(--text-light);

    font-family:
        "Inter",
        sans-serif;

    line-height:
        1.7;

    overflow-x:
        hidden;

}


img {

    display:
        block;

    max-width:
        100%;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button {

    font:
        inherit;

}


button,
a {

    -webkit-tap-highlight-color:
        transparent;

}


/* =========================================================
   CONTAINER
========================================================= */

.content-container {

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

    margin:
        0 auto;

}


/* =========================================================
   TOP MESSAGE
========================================================= */

.site-header {

    position:
        relative;

    z-index:
        1000;

    background:
        linear-gradient(
            180deg,
            #160b07,
            #100807
        );

    border-bottom:
        1px solid var(--border-dark);

}


.top-message {

    min-height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    padding:
        0 5%;

    border-bottom:
        1px solid
        rgba(213, 163, 47, 0.14);

}


.top-message p {

    color:
        var(--gold-light);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;

}


.top-message span {

    color:
        var(--gold);

    padding:
        0 5px;

}


/* =========================================================
   MAIN NAVIGATION
========================================================= */

.main-navigation {

    width:
        min(
            calc(100% - 48px),
            1400px
        );

    min-height:
        82px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        34px;

}


/* =========================================================
   BRAND
========================================================= */

.brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        14px;

    flex-shrink:
        0;

}


.brand-logo {

    width:
        58px;

    height:
        58px;

    object-fit:
        contain;

}


.brand span {

    color:
        var(--gold-light);

    font-family:
        "Cinzel",
        serif;

    font-size:
        1.45rem;

    font-weight:
        700;

    letter-spacing:
        0.04em;

}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.desktop-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        26px;

    margin-left:
        auto;

}


.desktop-nav > a,
.dropdown-button {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    background:
        none;

    border:
        none;

    color:
        var(--text-light);

    cursor:
        pointer;

    font-size:
        0.73rem;

    font-weight:
        700;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;

    padding:
        30px 0;

    transition:
        color 0.25s ease;

}


.desktop-nav > a:hover,
.dropdown-button:hover {

    color:
        var(--gold-light);

}


.desktop-nav > a.active::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        20px;

    height:
        2px;

    background:
        var(--gold);

}


/* =========================================================
   DROPDOWNS
========================================================= */

.nav-dropdown {

    position:
        relative;

}



.dropdown-button:hover::after {

    color:
        var(--gold-light);

}


.dropdown-arrow {

    display: inline-block;

    margin-left: 6px;

    color: var(--gold);

    font-size: 0.8rem;

    line-height: 1;

    transition: color 0.25s ease, transform 0.25s ease;

}

.dropdown-button:hover .dropdown-arrow {

    color: var(--gold-light);

    transform: translateY(1px);

}


.dropdown-menu {

    position:
        absolute;

    top:
        calc(100% - 8px);

    left:
        -18px;

    width:
        220px;

    padding:
        10px;

    background:
        #1a0d08;

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

    box-shadow:
        var(--shadow);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(8px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;

}


.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}


.dropdown-menu a {

    display:
        block;

    padding:
        11px 14px;

    color:
        var(--text-muted);

    font-size:
        0.85rem;

    transition:
        background 0.2s ease,
        color 0.2s ease;

}


.dropdown-menu a:hover,
.dropdown-menu a.active {

    color:
        var(--gold-light);

    background:
        rgba(213, 163, 47, 0.08);

}


/* =========================================================
   ENROLL BUTTON
========================================================= */

.enroll-button {

    flex-shrink:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        46px;

    padding:
        0 23px;

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold)
        );

    color:
        #241506;

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

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

}


.enroll-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 28px
        rgba(213, 163, 47, 0.25);

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-button {

    display:
        none;

    width:
        48px;

    height:
        48px;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        6px;

    background:
        transparent;

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

    cursor:
        pointer;

}


.mobile-menu-button span {

    display:
        block;

    width:
        21px;

    height:
        2px;

    background:
        var(--gold-light);

}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

.mobile-navigation {

    display:
        none;

}


/* =========================================================
   SHARED TYPOGRAPHY
========================================================= */

.section-eyebrow {

    color:
        var(--gold-light);

    font-size:
        0.75rem;

    font-weight:
        800;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;

}


.section-heading {

    margin-bottom:
        50px;

    text-align:
        center;

}


.section-heading h2 {

    color:
        var(--text-dark);

    font-family:
        "Cinzel",
        serif;

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

    font-weight:
        600;

    line-height:
        1.15;

    text-transform:
        uppercase;

}


.section-heading p {

    margin-top:
        12px;

    color:
        var(--bronze);

    font-size:
        0.78rem;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

}


/* =========================================================
   ABOUT INTRODUCTION
========================================================= */

.about-intro-section {

    position:
        relative;

    overflow:
        hidden;

    padding:
        120px 0;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(213, 163, 47, 0.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(119, 60, 15, 0.22),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #0f0806,
            #1b0d08
        );

}


.about-intro-section::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(213, 163, 47, 0.025),
            transparent
        );

}


.about-intro-grid {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(320px, 0.8fr);

    gap:
        90px;

    align-items:
        center;

}


.about-intro-content h1 {

    max-width:
        760px;

    margin:
        18px 0 25px;

    color:
        var(--ivory);

    font-family:
        "Cinzel",
        serif;

    font-size:
        clamp(
            3rem,
            6vw,
            5.8rem
        );

    font-weight:
        600;

    line-height:
        1.04;

}


.about-intro-content h1 span {

    display:
        block;

    color:
        var(--gold-light);

}


.about-intro-lead {

    max-width:
        700px;

    color:
        var(--text-muted);

    font-size:
        1.08rem;

}


.about-intro-panel {

    position:
        relative;

    padding:
        50px;

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

    background:
        linear-gradient(
            135deg,
            rgba(213, 163, 47, 0.09),
            rgba(255, 255, 255, 0.02)
        );

    box-shadow:
        var(--shadow);

}


.about-intro-panel::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );

}


.about-intro-panel > p:last-child {

    margin-top:
        20px;

    color:
        var(--cream);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        1.75rem;

    line-height:
        1.45;

}


/* =========================================================
   OUR MISSION
========================================================= */

.mission-section {

    padding:
        120px 0;

    background:
        var(--ivory);

    color:
        var(--text-dark);

}


.mission-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 0.9fr);

    gap:
        100px;

    align-items:
        start;

}


.mission-content h2 {

    margin:
        18px 0 30px;

    color:
        var(--text-dark);

    font-family:
        "Cinzel",
        serif;

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

    font-weight:
        600;

    line-height:
        1.08;

}


.mission-content h2 span {

    display:
        block;

    color:
        var(--bronze);

}


.mission-content > p {

    max-width:
        680px;

    margin-bottom:
        22px;

    color:
        var(--text-dark-muted);

    font-size:
        1rem;

}


/* =========================================================
   WHO WE SERVE
========================================================= */

.who-we-serve-panel {

    padding:
        45px;

    background:
        #211008;

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

    box-shadow:
        0 25px 50px
        rgba(38, 20, 8, 0.16);

}


.who-we-serve-panel > .section-eyebrow {

    padding-bottom:
        22px;

    border-bottom:
        1px solid
        rgba(213, 163, 47, 0.18);

}


.serve-item {

    display:
        grid;

    grid-template-columns:
        62px 1fr;

    gap:
        22px;

    padding:
        28px 0;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);

}


.serve-item:last-child {

    padding-bottom:
        0;

    border-bottom:
        none;

}


.serve-number {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        50px;

    height:
        50px;

    color:
        var(--gold-light);

    font-family:
        "Cinzel",
        serif;

    font-size:
        0.82rem;

    border:
        1px solid var(--gold-dark);

}


.serve-item h3 {

    color:
        var(--ivory);

    font-family:
        "Cinzel",
        serif;

    font-size:
        1.05rem;

    line-height:
        1.25;

    text-transform:
        uppercase;

}


.serve-item p {

    margin-top:
        9px;

    color:
        var(--text-muted);

    font-size:
        0.9rem;

}


/* =========================================================
   OUR FOUNDATION
========================================================= */

.foundation-section {

    position:
        relative;

    padding:
        120px 0;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(119, 60, 15, 0.22),
            transparent 55%
        ),
        #140a06;

}


.foundation-content {

    text-align:
        center;

}


.foundation-content h2 {

    margin:
        18px auto 24px;

    color:
        var(--ivory);

    font-family:
        "Cinzel",
        serif;

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

    font-weight:
        600;

    line-height:
        1.1;

}


.foundation-content h2 span {

    display:
        block;

    color:
        var(--gold-light);

}


.foundation-lead {

    max-width:
        780px;

    margin:
        0 auto;

    color:
        var(--text-muted);

    font-size:
        1.05rem;

}


.foundation-grid {

    display:
        grid;

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

    gap:
        25px;

    margin-top:
        65px;

}


.foundation-item {

    padding:
        42px 34px;

    text-align:
        left;

    border:
        1px solid
        rgba(213, 163, 47, 0.18);

    background:
        rgba(255, 255, 255, 0.025);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;

}


.foundation-item:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(241, 204, 114, 0.55);

    background:
        rgba(213, 163, 47, 0.06);

}


.foundation-item > span {

    display:
        block;

    margin-bottom:
        28px;

    color:
        var(--gold);

    font-family:
        "Cinzel",
        serif;

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.15em;

}


.foundation-item h3 {

    color:
        var(--ivory);

    font-family:
        "Cinzel",
        serif;

    font-size:
        1.2rem;

    line-height:
        1.3;

    text-transform:
        uppercase;

}


.foundation-item p {

    margin-top:
        18px;

    color:
        var(--text-muted);

    font-size:
        0.92rem;

}


/* =========================================================
   OUR COVERING
========================================================= */

.covering-section {

    padding:
        120px 0;

    background:
        #f0e7d8;

    color:
        var(--text-dark);

}


.covering-grid {

    display:
        grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap:
        110px;

    align-items:
        center;

}


.covering-emblem {

    position:
        relative;

    min-height:
        390px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    border:
        1px solid
        rgba(109, 53, 12, 0.28);

    background:
        radial-gradient(
            circle at center,
            rgba(213, 163, 47, 0.2),
            transparent 45%
        ),
        #1c0d07;

    box-shadow:
        0 25px 55px
        rgba(38, 20, 8, 0.16);

}


.covering-emblem::before {

    content:
        "";

    position:
        absolute;

    inset:
        22px;

    border:
        1px solid
        rgba(213, 163, 47, 0.35);

    pointer-events:
        none;

}


.covering-emblem p {

    position:
        relative;

    color:
        var(--gold-light);

    font-family:
        "Cinzel",
        serif;

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

    font-weight:
        700;

    letter-spacing:
        0.08em;

}


.covering-emblem span {

    position:
        relative;

    max-width:
        220px;

    margin-top:
        18px;

    color:
        var(--cream);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        1.35rem;

    font-style:
        italic;

    line-height:
        1.3;

}


.covering-content h2 {

    margin:
        18px 0 30px;

    color:
        var(--text-dark);

    font-family:
        "Cinzel",
        serif;

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

    font-weight:
        600;

    line-height:
        1.08;

}


.covering-content h2 span {

    display:
        block;

    color:
        var(--bronze);

}


.covering-content > p {

    max-width:
        680px;

    margin-bottom:
        22px;

    color:
        var(--text-dark-muted);

}


/* =========================================================
   WHAT WE ARE PREPARING FOR
========================================================= */

.preparation-section {

    padding:
        120px 0;

    background:
        var(--ivory);

}


.preparation-list {

    max-width:
        980px;

    margin:
        0 auto;

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

}


.preparation-item {

    display:
        grid;

    grid-template-columns:
        100px 1fr;

    gap:
        35px;

    padding:
        40px 0;

    border-bottom:
        1px solid var(--border-light);

}


.preparation-number {

    color:
        var(--gold-dark);

    font-family:
        "Cinzel",
        serif;

    font-size:
        1rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

}


.preparation-content {

    display:
        grid;

    grid-template-columns:
        minmax(180px, 0.65fr)
        minmax(0, 1.35fr);

    gap:
        40px;

}


.preparation-content h3 {

    color:
        var(--text-dark);

    font-family:
        "Cinzel",
        serif;

    font-size:
        1.3rem;

    line-height:
        1.3;

    text-transform:
        uppercase;

}


.preparation-content p {

    color:
        var(--text-dark-muted);

}


/* =========================================================
   BUTTONS
========================================================= */

.button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    min-height:
        54px;

    padding:
        0 28px;

    font-size:
        0.76rem;

    font-weight:
        800;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;

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

}


.button span {

    font-size:
        1.15rem;

}


.button-gold {

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold)
        );

    color:
        #261606;

    border:
        1px solid var(--gold-light);

}


.button:hover {

    transform:
        translateY(-3px);

}


.button-gold:hover {

    box-shadow:
        0 15px 35px
        rgba(213, 163, 47, 0.25);

}


/* =========================================================
   CLOSING CALL
========================================================= */

.about-closing-section {

    position:
        relative;

    padding:
        130px 0;

    overflow:
        hidden;

    text-align:
        center;

    background:
        radial-gradient(
            circle at center,
            rgba(213, 163, 47, 0.22),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #160a06,
            #281208
        );

}


.about-closing-content {

    position:
        relative;

    max-width:
        900px;

}


.about-closing-content h2 {

    margin:
        20px auto 28px;

    color:
        var(--ivory);

    font-family:
        "Cinzel",
        serif;

    font-size:
        clamp(
            2.7rem,
            6vw,
            5.5rem
        );

    font-weight:
        600;

    line-height:
        1.08;

}


.about-closing-content h2 span {

    display:
        block;

    color:
        var(--gold-light);

}


.about-closing-content > p {

    max-width:
        680px;

    margin:
        0 auto 35px;

    color:
        var(--text-muted);

    font-size:
        1.05rem;

}


/* =========================================================
   FOOTER
========================================================= */






































































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

@media (max-width: 1100px) {

    .desktop-nav {

        gap:
            17px;

    }


    .desktop-nav > a,
    .dropdown-button {

        font-size:
            0.65rem;

    }


    .main-navigation {

        gap:
            20px;

    }


    .about-intro-grid {

        gap:
            55px;

    }


    .mission-grid {

        gap:
            60px;

    }


    .covering-grid {

        gap:
            70px;

    }




}


/* =========================================================
   MOBILE NAVIGATION AND TABLET
========================================================= */

@media (max-width: 900px) {

    .top-message {

        display:
            none;

    }


    .main-navigation {

        min-height:
            74px;

        width:
            min(
                calc(100% - 32px),
                100%
            );

    }


    .desktop-nav,
    .enroll-button {

        display:
            none;

    }


    .mobile-menu-button {

        display:
            flex;

        margin-left:
            auto;

    }


    .mobile-navigation {

        position:
            fixed;

        top:
            0;

        right:
            0;

        z-index:
            2000;

        display:
            block;

        width:
            min(
                380px,
                88vw
            );

        height:
            100vh;

        padding:
            22px;

        background:
            #130b08;

        border-left:
            1px solid var(--border-dark);

        box-shadow:
            -20px 0 60px
            rgba(0, 0, 0, 0.5);

        transform:
            translateX(110%);

        transition:
            transform 0.35s ease;

        overflow-y:
            auto;

    }


    .mobile-navigation.open {

        transform:
            translateX(0);

    }


    .mobile-nav-header {

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        padding:
            0 0 20px;

        margin-bottom:
            10px;

        border-bottom:
            1px solid var(--border-dark);

    }


    .mobile-nav-header span {

        color:
            var(--gold-light);

        font-family:
            "Cinzel",
            serif;

        font-size:
            1.1rem;

    }


    .mobile-nav-header button {

        width:
            40px;

        height:
            40px;

        background:
            transparent;

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

        color:
            var(--gold-light);

        font-size:
            1.8rem;

        cursor:
            pointer;

    }


    .mobile-navigation a {

        display:
            block;

        padding:
            16px;

        margin-bottom:
            3px;

        color:
            var(--text-light);

        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.05);

        font-size:
            1rem;

        font-weight:
            700;

    }


    .mobile-navigation a.mobile-active {

        color:
            var(--gold-light);

        background:
            linear-gradient(
                90deg,
                rgba(213, 163, 47, 0.17),
                transparent
            );

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

    }


    .about-intro-section {

        padding:
            90px 0;

    }


    .about-intro-grid {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }


    .about-intro-panel {

        max-width:
            700px;

    }


    .mission-grid {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }


    .who-we-serve-panel {

        max-width:
            700px;

    }


    .foundation-grid {

        grid-template-columns:
            1fr;

        max-width:
            700px;

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .covering-grid {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }


    .covering-emblem {

        max-width:
            600px;

    }


    .preparation-content {

        grid-template-columns:
            1fr;

        gap:
            12px;

    }




























}


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

@media (max-width: 600px) {

    .content-container {

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

    }


    .brand-logo {

        width:
            50px;

        height:
            50px;

    }


    .brand span {

        font-size:
            1.2rem;

    }


    .about-intro-section {

        padding:
            75px 0;

    }


    .section-eyebrow {

        font-size:
            0.62rem;

        letter-spacing:
            0.12em;

        line-height:
            1.8;

    }


    .about-intro-content h1 {

        font-size:
            2.7rem;

    }


    .about-intro-lead {

        font-size:
            0.98rem;

    }


    .about-intro-panel {

        padding:
            32px 26px;

    }


    .about-intro-panel > p:last-child {

        font-size:
            1.5rem;

    }


    .mission-section,
    .foundation-section,
    .covering-section,
    .preparation-section {

        padding:
            75px 0;

    }


    .mission-content h2,
    .covering-content h2 {

        font-size:
            2.5rem;

    }


    .who-we-serve-panel {

        padding:
            30px 24px;

    }


    .serve-item {

        grid-template-columns:
            52px 1fr;

        gap:
            15px;

    }


    .foundation-item {

        padding:
            34px 26px;

    }


    .covering-emblem {

        min-height:
            320px;

    }


    .preparation-item {

        grid-template-columns:
            1fr;

        gap:
            15px;

        padding:
            32px 0;

    }


    .about-closing-section {

        padding:
            90px 0;

    }


    .about-closing-content h2 {

        font-size:
            2.8rem;

    }


    .button {

        width:
            100%;

    }






















}

/* =========================================================
   LEADERSHIP PAGE
========================================================= */

.page-intro {
    padding: 96px 0 74px;
    background: linear-gradient(135deg, var(--espresso) 0%, var(--brown) 58%, var(--espresso-light) 100%);
    color: var(--white);
    border-bottom: 1px solid var(--border-dark);
}

.page-intro .content-container {
    max-width: var(--container-width);
}

.page-intro .eyebrow,
.leader-copy .eyebrow,
.location-card .eyebrow {
    display: block;
    margin-bottom: 14px;
    color: var(--gold-light);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.page-intro h1 {
    margin: 0 0 18px;
    color: var(--white);
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(2.6rem, 5vw, 4.4rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.08;
}

.page-intro > .content-container > p {
    max-width: 780px;
    margin: 0;
    color: var(--text-light);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.18rem, 2vw, 1.42rem);
    line-height: 1.65;
}

.leadership-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
}

.leadership-subnav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 17px;
    color: var(--text-muted);
    border: 1px solid var(--border-dark);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.leadership-subnav a:hover,
.leadership-subnav a:focus-visible,
.leadership-subnav a.active {
    color: var(--gold-light);
    background: rgba(213,163,47,.08);
    border-color: rgba(213,163,47,.42);
}

.leader-section {
    padding: 105px 0;
}

.leader-section-dark {
    background: linear-gradient(135deg, #100806, #1d0e08);
    color: var(--text-light);
}

.leader-section-light {
    background: var(--ivory);
    color: var(--text-dark);
}

.leader-profile {
    display: grid;
    grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
    gap: 72px;
    align-items: center;
}

.leader-section-light .leader-profile {
    grid-template-columns: minmax(0, 1.28fr) minmax(250px, .72fr);
}

.leader-section-light .leader-photo {
    order: 2;
}

.leader-section-light .leader-copy {
    order: 1;
}

.leader-photo {
    position: relative;
}

.leader-photo::before {
    content: "";
    position: absolute;
    inset: -12px;
    border: 1px solid rgba(213,163,47,.25);
    pointer-events: none;
}

.leader-photo img {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--espresso-light);
    border: 1px solid rgba(213,163,47,.32);
    box-shadow: var(--shadow);
}

.leader-copy {
    max-width: 760px;
}

.leader-number {
    display: block;
    margin-bottom: 10px;
    color: var(--gold);
    font-family: "Cinzel", Georgia, serif;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .14em;
}

.leader-copy h2 {
    margin: 0 0 10px;
    color: var(--ivory);
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.45rem);
    font-weight: 600;
    line-height: 1.12;
}

.leader-section-light .leader-copy h2 {
    color: var(--text-dark);
}

.leader-role {
    margin: 0 0 28px;
    color: var(--gold-light);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.leader-section-light .leader-role {
    color: var(--bronze);
}

.leader-block {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(213,163,47,.2);
}

.leader-section-light .leader-block {
    border-top-color: rgba(38,20,8,.14);
}

.leader-block h3 {
    margin: 0 0 10px;
    color: var(--gold-light);
    font-family: "Cinzel", Georgia, serif;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.leader-section-light .leader-block h3 {
    color: var(--bronze);
}

.leader-block p {
    margin: 0 0 15px;
    color: var(--text-muted);
    font-size: .96rem;
    line-height: 1.8;
}

.leader-block p:last-child {
    margin-bottom: 0;
}

.leader-section-light .leader-block p {
    color: var(--text-dark-muted);
}

.leader-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin: 28px 0 0;
    color: inherit;
    font-size: .78rem;
}

.leader-contact strong {
    color: inherit;
}

.leader-contact .text-link {
    color: var(--gold-light);
}

.leader-section-light .leader-contact .text-link {
    color: var(--bronze);
}

.contact-separator {
    color: var(--gold);
}

.location-section {
    padding: 95px 0;
    background: var(--espresso-light);
}

.location-card {
    padding: 48px;
    background: linear-gradient(135deg, rgba(18,9,6,.94), rgba(53,23,7,.72));
    border: 1px solid var(--border-dark);
    box-shadow: var(--shadow);
}

.location-card h2 {
    margin: 0 0 18px;
    color: var(--ivory);
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    font-weight: 600;
}

.location-card p {
    margin: 4px 0;
    color: var(--text-muted);
    font-size: .98rem;
}

.location-card p strong {
    color: var(--text-light);
}

/* Leadership page footer compatibility */


/* =========================================================
   LEADERSHIP — TABLET LANDSCAPE
========================================================= */

@media (min-width: 761px) and (max-width: 1100px) and (orientation: landscape) {

    .page-intro {
        padding: 76px 0 60px;
    }

    .leader-section,
    .leader-section-light {
        padding: 78px 0;
    }

    .leader-profile,
    .leader-section-light .leader-profile {
        grid-template-columns: minmax(210px, .65fr) minmax(0, 1.35fr);
        gap: 45px;
    }

    .leader-section-light .leader-photo {
        order: 2;
    }

    .leader-section-light .leader-copy {
        order: 1;
    }

    .leader-photo {
        width: 100%;
        max-width: 300px;
    }

    .leader-copy {
        max-width: 700px;
    }

    .leader-copy h2 {
        font-size: 2.65rem;
    }

    .leader-block {
        margin-top: 22px;
        padding-top: 20px;
    }

    .leader-block p {
        font-size: .92rem;
        line-height: 1.7;
    }

    .location-section {
        padding: 65px 0;
    }
}


/* =========================================================
   LEADERSHIP — TABLET PORTRAIT
   Primary tablet layout.
========================================================= */

@media (min-width: 601px) and (max-width: 900px) and (orientation: portrait) {

    .page-intro .content-container,
    .leader-section .content-container,
    .location-section .content-container {
        width: calc(100% - 64px);
        max-width: 760px;
        margin-inline: auto;
    }

    /* ---------- INTRO ---------- */

    .page-intro {
        padding: 64px 0 56px;
    }

    .page-intro h1 {
        font-size: clamp(2.8rem, 7vw, 4rem);
    }

    .page-intro > .content-container > p {
        max-width: 680px;
        font-size: 1.05rem;
        line-height: 1.7;
    }

    .leadership-subnav {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 28px;
    }

    .leadership-subnav a {
        min-height: 40px;
        padding: 0 14px;
        font-size: .65rem;
    }


    /* ---------- LEADER SECTIONS ---------- */

    .leader-section,
    .leader-section-light {
        padding: 68px 0;
    }

    .leader-profile,
    .leader-section-light .leader-profile {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 36px;
        align-items: start;
    }

    /* Restore alternating image position */
    .leader-section-dark .leader-photo {
        order: initial;
    }

    .leader-section-dark .leader-copy {
        order: initial;
    }

    .leader-section-light .leader-photo {
        order: 2;
    }

    .leader-section-light .leader-copy {
        order: 1;
    }


    /* ---------- PHOTOS ---------- */

    .leader-photo {
        width: 220px;
        max-width: 220px;
        margin: 0;
    }

    .leader-photo::before {
        inset: -8px;
    }

    .leader-photo img {
        width: 220px;
        height: 220px;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }


    /* ---------- TEXT ---------- */

    .leader-copy {
        max-width: none;
    }

    .leader-number {
        margin-bottom: 8px;
        font-size: .72rem;
    }

    .leader-copy h2 {
        font-size: clamp(1.9rem, 4vw, 2.6rem);
    }

    .leader-role {
        margin-bottom: 22px;
        font-size: .7rem;
        line-height: 1.5;
    }

    .leader-block {
        margin-top: 21px;
        padding-top: 18px;
    }

    .leader-block h3 {
        font-size: .78rem;
        margin-bottom: 8px;
    }

    .leader-block p {
        font-size: .9rem;
        line-height: 1.68;
    }

    .leader-contact {
        margin-top: 22px;
        font-size: .72rem;
        gap: 7px 13px;
    }


    /* ---------- LOCATION ---------- */

    .location-section {
        padding: 62px 0;
    }

    .location-card {
        padding: 36px;
    }

    .location-card h2 {
        font-size: 2.2rem;
    }

}


/* =========================================================
   NARROW TABLET PORTRAIT
========================================================= */

@media (min-width: 601px) and (max-width: 760px) and (orientation: portrait) {

    .page-intro .content-container,
    .leader-section .content-container,
    .location-section .content-container {
        width: calc(100% - 44px);
    }

    .page-intro {
        padding: 58px 0 50px;
    }

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

    .page-intro > .content-container > p {
        font-size: .98rem;
    }

    .leadership-subnav {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .leader-section,
    .leader-section-light {
        padding: 58px 0;
    }

    .leader-profile,
    .leader-section-light .leader-profile {
        grid-template-columns: 175px minmax(0, 1fr);
        gap: 25px;
    }

    .leader-photo,
    .leader-photo img {
        width: 175px;
        height: 175px;
    }

    .leader-copy h2 {
        font-size: 2rem;
    }

    .leader-role {
        font-size: .66rem;
    }

    .leader-block p {
        font-size: .86rem;
        line-height: 1.65;
    }

    .location-card {
        padding: 30px 24px;
    }
}


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

@media (max-width: 600px) {

    .page-intro .content-container,
    .leader-section .content-container,
    .location-section .content-container {
        width: min(calc(100% - 36px), var(--container-width));
    }

    .page-intro {
        padding: 58px 0 48px;
    }

    .page-intro h1 {
        font-size: 2.35rem;
    }

    .page-intro > .content-container > p {
        font-size: 1.05rem;
    }

    .leadership-subnav {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .leader-section,
    .leader-section-light {
        padding: 60px 0;
    }

    .leader-profile,
    .leader-section-light .leader-profile {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .leader-section-light .leader-photo,
    .leader-section-light .leader-copy {
        order: initial;
    }

    .leader-photo {
        width: min(100%, 320px);
        margin-inline: auto;
    }

    .leader-photo img {
        width: 100%;
        height: auto;
    }

    .leader-copy h2 {
        font-size: 2rem;
    }

    .leader-block p {
        font-size: .93rem;
    }

    .location-section {
        padding: 60px 0;
    }

    .location-card {
        padding: 30px 24px;
    }
}

/* =========================================================
   MASTER SITE SHELL ALIGNMENT
   Leadership page uses the homepage master navigation.
   Page content styles remain above this section.
========================================================= */

.desktop-nav { display:flex; align-items:center; gap:26px; margin-left:auto; }
.desktop-nav > a, .dropdown-button { position:relative; display:inline-flex; align-items:center; gap:7px; height:82px; padding:0; background:transparent; border:0; color:var(--text-light); cursor:pointer; font-size:.73rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; transition:color .25s ease; }
.desktop-nav > a:hover, .dropdown-button:hover { color:var(--gold-light); }
.desktop-nav > a.active { color:var(--gold-light); }
.desktop-nav > a.active::after { content:""; position:absolute; left:0; right:0; bottom:19px; height:2px; background:var(--gold); }
.nav-dropdown { position:relative; height:82px; display:flex; align-items:center; }
.dropdown-button > span { display:inline-block; margin-left:0; color:var(--gold); font-size:.82rem; line-height:1; transform:translateY(-1px); transition:transform .25s ease,color .25s ease; }
.nav-dropdown:hover .dropdown-button > span, .nav-dropdown:focus-within .dropdown-button > span { color:var(--gold-light); transform:translateY(-1px) rotate(180deg); }
.dropdown-menu { position:absolute; top:calc(100% - 1px); left:50%; width:225px; padding:8px; background:linear-gradient(180deg,#211008,#160a06); border:1px solid var(--border-dark); box-shadow:0 18px 45px rgba(0,0,0,.42); opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,10px); transform-origin:top center; transition:opacity .22s ease,transform .22s ease,visibility .22s ease; }
.nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
.dropdown-menu a { position:relative; display:flex; align-items:center; min-height:44px; padding:0 15px; margin-bottom:0; color:var(--text-muted); font-size:.76rem; font-weight:600; letter-spacing:.035em; text-transform:none; border:0; transition:color .2s ease,background .2s ease,padding-left .2s ease; }
.dropdown-menu a:hover, .dropdown-menu a.active { padding-left:19px; color:var(--gold-light); background:rgba(213,163,47,.07); }
.dropdown-menu a::before { content:""; position:absolute; left:0; top:7px; bottom:7px; width:2px; background:var(--gold); opacity:0; transform:scaleY(.5); transition:opacity .2s ease,transform .2s ease; }
.dropdown-menu a:hover::before, .dropdown-menu a.active::before { opacity:1; transform:scaleY(1); }
.mobile-navigation { display:none; }

@media (max-width:1100px) {
  .main-navigation { width:calc(100% - 32px); gap:20px; }
  .desktop-nav { gap:20px; }
  .desktop-nav > a, .dropdown-button { font-size:.67rem; }
}

@media (max-width:900px) {
  .top-message { display:none; }
  .main-navigation { width:calc(100% - 32px); min-height:74px; gap:0; justify-content:space-between; }
  .desktop-nav, .enroll-button { display:none; }
  .desktop-nav > a, .dropdown-button, .nav-dropdown { height:auto; }
  .mobile-menu-button { display:flex; flex-shrink:0; margin-left:0; }
  .mobile-navigation { position:fixed; top:0; right:0; z-index:2000; display:flex; flex-direction:column; width:min(86vw,360px); height:100vh; overflow-y:auto; padding:0 0 30px; background:linear-gradient(180deg,#1b0d08,#0b0504); border-left:1px solid var(--border-dark); box-shadow:-20px 0 60px rgba(0,0,0,.45); transform:translateX(100%); visibility:hidden; opacity:0; transition:transform .3s ease,visibility .3s ease,opacity .3s ease; }
  .mobile-navigation.open { transform:translateX(0); visibility:visible; opacity:1; }
  .mobile-nav-header { display:flex; align-items:center; justify-content:space-between; min-height:76px; padding:0 24px; color:var(--gold-light); font-family:"Cinzel",serif; font-size:.9rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--border-dark); }
  .mobile-nav-header button { width:42px; height:42px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--border-dark); color:var(--gold-light); cursor:pointer; font-size:1.7rem; line-height:1; }
  .mobile-navigation > a:not(.mobile-nav-header) { display:flex; align-items:center; min-height:58px; padding:0 24px; color:var(--text-light); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid rgba(213,163,47,.10); transition:background .2s ease,color .2s ease,padding-left .2s ease; }
  .mobile-navigation > a:hover, .mobile-navigation > a.mobile-active { padding-left:30px; color:var(--gold-light); background:rgba(213,163,47,.08); }
}

@media (max-width:600px) {
  .main-navigation { width:calc(100% - 24px); min-height:68px; }
  .brand { gap:10px; }
  .brand-logo { width:48px; height:48px; }
  .brand span { font-size:1.2rem; }
  .mobile-menu-button { width:44px; height:44px; }
  .mobile-navigation { width:min(92vw,340px); }
}

/* =========================================================
   MASTER FOOTER ALIGNMENT
   Leadership uses the exact homepage footer system.
   This block intentionally overrides legacy Leadership
   footer rules without changing any Leadership content.
========================================================= */

















































@media (max-width: 900px) {



















}

@media (max-width: 600px) {













}



/* =========================================================
   SHARED STICKY SITE NAVIGATION
   Keeps the BAPBI header visible while scrolling on every page.
========================================================= */
.site-header {
    position: sticky !important;
    top: 0;
    z-index: 1000;
}

/* =========================================================
   LEADERSHIP
   TABLET PORTRAIT
   LIGHT SECTIONS ONLY
   ========================================================= */

@media (min-width: 601px) and (max-width: 900px) and (orientation: portrait) {

    .leader-section-light .leader-profile {
        grid-template-columns: minmax(0, 1fr) 240px;
        gap: 42px;
        align-items: start;
    }

    .leader-section-light .leader-copy {
        order: 1;
        max-width: none;
        width: 100%;
    }

    .leader-section-light .leader-photo {
        order: 2;
        width: 240px;
        max-width: 240px;
    }

    .leader-section-light .leader-photo img {
        width: 240px;
        height: 240px;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .leader-section-light .leader-copy h2 {
        font-size: clamp(1.9rem, 4vw, 2.65rem);
        line-height: 1.05;
    }

    .leader-section-light .leader-block p {
        font-size: .95rem;
        line-height: 1.7;
    }
}


/* =========================================================
   NARROW TABLET PORTRAIT
   ========================================================= */

@media (min-width: 601px) and (max-width: 760px) and (orientation: portrait) {

    .leader-section-light .leader-profile {
        grid-template-columns: minmax(0, 1fr) 185px;
        gap: 28px;
    }

    .leader-section-light .leader-photo {
        width: 185px;
        max-width: 185px;
    }

    .leader-section-light .leader-photo img {
        width: 185px;
        height: 185px;
    }

    .leader-section-light .leader-copy h2 {
        font-size: 2rem;
    }

    .leader-section-light .leader-block p {
        font-size: .91rem;
        line-height: 1.65;
    }
}

/* Shared sticky site navigation */
.site-header { position: sticky !important; top: 0; z-index: 1000; }