/* ==================================================
   MUSLIM PATH PROGRAM SYSTEM
   Clean editorial catalogue
================================================== */

.mpa-programs-home,
.mpa-program-archive,
.mpa-program-single{
    --mpa-navy:#08284c;
    --mpa-blue:#01478d;
    --mpa-soft-blue:#6b9dc6;
    --mpa-gold:#fdb002;
    --mpa-line:#dce7ef;
    --mpa-muted:#60778c;
}


/* ==================================================
   HOME PROGRAMS
================================================== */

.mpa-programs-home{
    width:min(1320px,calc(100% - 48px));
    margin:0 auto 105px;
    padding-top:76px;
    border-top:1px solid var(--mpa-line);
}

.mpa-programs-home__intro{
    max-width:760px;
    margin:0 auto 46px;
    text-align:center;
}

.mpa-programs-home__eyebrow{
    display:block;
    margin-bottom:12px;
    color:var(--mpa-soft-blue);
    font-size:11px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.mpa-programs-home__intro h2{
    margin:0;
    color:var(--mpa-navy);
    font-size:clamp(2rem,3vw,3.35rem);
    line-height:1.08;
    letter-spacing:-.04em;
}

.mpa-programs-home__intro p{
    max-width:690px;
    margin:18px auto 0;
    color:var(--mpa-soft-blue);
    font-size:15px;
    line-height:1.8;
}

.mpa-programs-home__grid{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:18px;
}

.mpa-programs-home__grid > .mpa-program-card{
    grid-column:span 3;
}

.mpa-programs-home__grid >
.mpa-program-card--featured{
    grid-column:span 6;
}


/* ==================================================
   PROGRAM CARD
================================================== */

.mpa-program-card{
    min-width:0;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--mpa-line);
    border-radius:10px;
}

.mpa-program-card__media{
    display:block;
    position:relative;
    aspect-ratio:16/10;
    overflow:hidden;
    background:#eef5fa;
}

.mpa-program-card--featured
.mpa-program-card__media{
    aspect-ratio:16/8;
}

.mpa-program-card__media > img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .35s ease;
}

.mpa-program-card:hover
.mpa-program-card__media > img{
    transform:scale(1.018);
}

.mpa-program-card__placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    background:#edf5fa;
}

.mpa-program-card__placeholder img{
    width:62px;
    height:62px;
    object-fit:contain;
    opacity:.75;
}

.mpa-program-card__body{
    padding:21px 19px 20px;
}

.mpa-program-card__meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
    margin-bottom:12px;
    color:var(--mpa-soft-blue);
    font-size:10px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:.035em;
}

.mpa-program-card h3{
    margin:0;
    color:var(--mpa-navy);
    font-size:18px;
    line-height:1.25;
}

.mpa-program-card--featured h3{
    font-size:22px;
}

.mpa-program-card h3 a{
    color:inherit;
    text-decoration:none;
}

.mpa-program-card p{
    display:-webkit-box;
    overflow:hidden;
    margin:11px 0 0;
    color:var(--mpa-muted);
    font-size:12.5px;
    line-height:1.65;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
}

.mpa-program-card__actions{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:18px;
}

.mpa-program-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:0 13px;
    border-radius:7px;
    font-size:10.5px;
    font-weight:750;
    line-height:1;
    text-decoration:none;
    white-space:nowrap;
}

.mpa-program-btn--more{
    color:var(--mpa-navy);
    background:#fff;
    border:1px solid #b8cddd;
}

.mpa-program-btn--more:hover{
    color:var(--mpa-blue);
    border-color:#82acd0;
}

.mpa-program-btn--enroll{
    color:#fff;
    background:var(--mpa-navy);
    border:1px solid var(--mpa-navy);
}

.mpa-program-btn--enroll:hover{
    color:#fff;
    background:var(--mpa-blue);
    border-color:var(--mpa-blue);
}

.mpa-programs-home__all{
    margin-top:34px;
    text-align:center;
}

.mpa-programs-home__all a{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding-bottom:5px;
    color:var(--mpa-navy);
    border-bottom:1px solid var(--mpa-gold);
    font-size:12px;
    font-weight:750;
    text-decoration:none;
}


/* ==================================================
   ARCHIVE
================================================== */

.mpa-program-archive{
    width:min(1320px,calc(100% - 48px));
    margin:0 auto 42px;
}

.mpa-program-archive__hero{
    max-width:900px;
    margin:0 auto;
    padding:34px 0 34px;
    text-align:center;
}

.mpa-program-archive__hero > span{
    color:var(--mpa-soft-blue);
    font-size:11px;
    font-weight:700;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.mpa-program-archive__hero h1{
    margin:13px 0 0;
    color:var(--mpa-navy);
    font-size:clamp(2.5rem,5vw,5rem);
    line-height:1;
    letter-spacing:-.055em;
}

.mpa-program-archive__hero p{
    max-width:760px;
    margin:23px auto 0;
    color:var(--mpa-soft-blue);
    font-size:15px;
    line-height:1.85;
}

.mpa-program-group{
    padding:34px 0 34px;
    border-top:1px solid var(--mpa-line);
}

.mpa-program-group__heading{
    display:grid;
    grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);
    gap:70px;
    align-items:end;
    margin-bottom:34px;
}

.mpa-program-group__heading span{
    display:block;
    margin-bottom:8px;
    color:var(--mpa-soft-blue);
    font-size:10px;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.mpa-program-group__heading h2{
    margin:0;
    color:var(--mpa-navy);
    font-size:clamp(1.8rem,3vw,3rem);
    line-height:1.05;
}

.mpa-program-group__heading p{
    max-width:600px;
    margin:0;
    color:var(--mpa-muted);
    font-size:13px;
    line-height:1.75;
}

.mpa-program-archive__grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}


/* ==================================================
   SINGLE PROGRAM - FACEBOOK-LIKE COVER
================================================== */

.mpa-program-single{
    width:min(1180px,calc(100% - 48px));
    margin:28px auto 42px;
}

.mpa-program-profile{
    text-align:center;
}

.mpa-program-profile__cover{
    position:relative;
    width:100%;
    aspect-ratio:16/4.3;
    overflow:hidden;
    background:#eaf3f9;
    border-radius:10px 10px 3px 3px;
}

.mpa-program-profile__cover img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.mpa-program-profile__cover-placeholder{
    width:100%;
    height:100%;
    background:#eaf3f9;
}

.mpa-program-profile__mark{
    width:112px;
    height:112px;
    margin:-55px auto 0;
    position:relative;
    z-index:2;
}

.mpa-program-profile__mark img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.mpa-program-profile__identity{
    max-width:820px;
    margin:14px auto 0;
}

.mpa-program-profile__category{
    display:block;
    margin-bottom:8px;
    color:var(--mpa-soft-blue);
    font-size:10px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.mpa-program-profile h1{
    margin:0;
    color:var(--mpa-navy);
    font-size:clamp(2.1rem,4vw,4rem);
    line-height:1.03;
    letter-spacing:-.045em;
}

.mpa-program-profile__level{
    margin:12px 0 0;
    color:var(--mpa-soft-blue);
    font-size:12px;
    font-weight:650;
}

.mpa-program-profile__actions{
    display:flex;
    justify-content:center;
    gap:9px;
    margin-top:22px;
}


/* body */

.mpa-program-single__body{
    max-width:980px;
    margin:34px auto 0;
}

.mpa-program-copy{
    display:grid;
    grid-template-columns:55px minmax(0,1fr);
    gap:25px;
    padding:34px 0;
    border-top:1px solid var(--mpa-line);
}

.mpa-program-copy > span,
.mpa-program-gallery header > span{
    color:var(--mpa-soft-blue);
    font-size:10px;
    font-weight:700;
}

.mpa-program-copy h2,
.mpa-program-gallery h2{
    margin:0;
    color:var(--mpa-navy);
    font-size:22px;
    line-height:1.25;
}

.mpa-program-copy p{
    max-width:760px;
    margin:12px 0 0;
    color:var(--mpa-muted);
    font-size:14px;
    line-height:1.85;
}

.mpa-program-copy ul{
    margin:15px 0 0;
    padding-left:19px;
    color:var(--mpa-muted);
    font-size:14px;
    line-height:1.8;
}


/* gallery */

.mpa-program-gallery{
    padding-top:40px;
    border-top:1px solid var(--mpa-line);
}

.mpa-program-gallery header{
    display:grid;
    grid-template-columns:55px minmax(0,1fr);
    gap:25px;
    align-items:center;
    margin-bottom:26px;
}

.mpa-program-gallery__grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.mpa-program-gallery figure{
    margin:0;
    overflow:hidden;
    aspect-ratio:4/3;
    background:#edf5fa;
    border-radius:5px;
}

.mpa-program-gallery figure img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.mpa-program-gallery__placeholder{
    display:block;
    width:100%;
    height:100%;
    background:#edf5fa;
}


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

@media (max-width:1080px){

    .mpa-programs-home__grid >
    .mpa-program-card{
        grid-column:span 6;
    }

    .mpa-program-archive__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}


@media (max-width:700px){

    .mpa-programs-home{
        width:calc(100% - 28px);
        margin-bottom:70px;
        padding-top:50px;
    }

    .mpa-programs-home__intro{
        margin-bottom:30px;
    }

    .mpa-programs-home__intro h2{
        font-size:2rem;
    }

    .mpa-programs-home__intro p{
        font-size:12.5px;
    }

    .mpa-programs-home__grid{
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
    }

    .mpa-programs-home__grid >
    .mpa-program-card,
    .mpa-programs-home__grid >
    .mpa-program-card--featured{
        grid-column:auto;
    }

    .mpa-program-card__media,
    .mpa-program-card--featured
    .mpa-program-card__media{
        aspect-ratio:16/9;
    }

    .mpa-program-card__body{
        padding:17px 15px 16px;
    }

    .mpa-program-card h3,
    .mpa-program-card--featured h3{
        font-size:17px;
    }

    .mpa-program-card p{
        font-size:11.5px;
    }


    .mpa-program-archive{
        width:calc(100% - 28px);
    }

    .mpa-program-archive__hero{
        padding:34px 0 34px;
    }

    .mpa-program-archive__hero h1{
        font-size:2.4rem;
    }

    .mpa-program-archive__hero p{
        font-size:12.5px;
    }

    .mpa-program-group{
        padding:32px 0 34px;
    }

    .mpa-program-group__heading{
        grid-template-columns:1fr;
        gap:13px;
        margin-bottom:26px;
    }

    .mpa-program-group__heading p{
        font-size:12px;
    }

    .mpa-program-archive__grid{
        grid-template-columns:1fr;
        gap:12px;
    }


    .mpa-program-single{
        width:calc(100% - 24px);
        margin-top:12px;
    }

    .mpa-program-profile__cover{
        aspect-ratio:16/6;
        border-radius:6px 6px 2px 2px;
    }

    .mpa-program-profile__mark{
        width:82px;
        height:82px;
        margin-top:-40px;
    }

    .mpa-program-profile h1{
        max-width:350px;
        margin-left:auto;
        margin-right:auto;
        font-size:2rem;
    }

    .mpa-program-profile__actions{
        flex-wrap:nowrap;
    }

    .mpa-program-single__body{
        margin-top:34px;
    }

    .mpa-program-copy{
        grid-template-columns:34px minmax(0,1fr);
        gap:12px;
        padding:26px 0;
    }

    .mpa-program-copy h2,
    .mpa-program-gallery h2{
        font-size:18px;
    }

    .mpa-program-copy p,
    .mpa-program-copy ul{
        font-size:12px;
    }

    .mpa-program-gallery header{
        grid-template-columns:34px minmax(0,1fr);
        gap:12px;
    }

    .mpa-program-gallery__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px;
    }

}


/* ==================================================
   PROGRAM SYSTEM V2
   HOME = EXPLORER, NOT A WALL OF CARDS
================================================== */

.mpa-program-explorer{
    --navy:#08284c;
    --blue:#01478d;
    --soft:#6b9dc6;
    --gold:#fdb002;
    --line:#dce7ef;

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

    margin:0 auto 100px;

    padding-top:74px;

    border-top:
        1px solid var(--line);
}


.mpa-program-explorer__intro{
    max-width:760px;

    margin:0 auto 42px;

    text-align:center;
}


.mpa-program-explorer__intro > span{
    display:block;

    margin-bottom:11px;

    color:var(--soft);

    font-size:11px;
    font-weight:700;

    letter-spacing:.09em;

    text-transform:uppercase;
}


.mpa-program-explorer__intro h2{
    margin:0;

    color:var(--navy);

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

    line-height:1.08;

    letter-spacing:-.04em;
}


.mpa-program-explorer__intro p{
    max-width:680px;

    margin:17px auto 0;

    color:var(--soft);

    font-size:14px;

    line-height:1.8;
}


/* Main explorer */

.mpa-program-explorer__layout{
    display:grid;

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

    gap:25px;

    align-items:stretch;
}


.mpa-program-explorer__nav{
    display:flex;

    flex-direction:column;

    border-top:
        1px solid var(--line);
}


.mpa-program-explorer__tab{
    appearance:none;

    display:grid;

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

    gap:8px;

    align-items:center;

    width:100%;

    min-height:46px;

    padding:8px 8px 8px 0;

    background:transparent;

    border:0;

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

    text-align:left;

    cursor:pointer;
}


.mpa-program-explorer__tab > span{
    color:#9bb4c8;

    font-size:9px;

    font-variant-numeric:
        tabular-nums;
}


.mpa-program-explorer__tab strong{
    min-width:0;

    color:#60778c;

    font-size:11px;
    font-weight:600;

    line-height:1.25;

    transition:
        color .18s ease;
}


.mpa-program-explorer__tab.is-active
strong{
    color:var(--navy);
}


.mpa-program-explorer__tab.is-active{
    box-shadow:
        inset 3px 0 0
        var(--gold);
}


html[dir="rtl"]
.mpa-program-explorer__tab{
    padding:
        8px 0 8px 8px;

    text-align:right;
}


html[dir="rtl"]
.mpa-program-explorer__tab.is-active{
    box-shadow:
        inset -3px 0 0
        var(--gold);
}


/* One program visible at a time */

.mpa-program-explorer__stage{
    min-width:0;
}


.mpa-program-explorer__panel{
    display:grid;

    grid-template-columns:
        minmax(0,1.1fr)
        minmax(270px,.9fr);

    min-height:455px;

    overflow:hidden;

    background:#fff;

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

    border-radius:8px;
}


.mpa-program-explorer__panel[hidden]{
    display:none !important;
}


.mpa-program-explorer__media{
    min-height:100%;

    overflow:hidden;

    background:#edf5fa;
}


.mpa-program-explorer__media > img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}


.mpa-program-explorer__placeholder{
    display:flex;

    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    min-height:455px;

    background:#edf5fa;
}


.mpa-program-explorer__placeholder img{
    width:90px;
    height:90px;

    object-fit:contain;

    opacity:.68;
}


.mpa-program-explorer__copy{
    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        clamp(28px,4vw,54px);
}


.mpa-program-explorer__meta{
    display:flex;

    flex-wrap:wrap;

    gap:7px;

    margin-bottom:13px;

    color:var(--soft);

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


.mpa-program-explorer__copy h3{
    margin:0;

    color:var(--navy);

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

    line-height:1.06;

    letter-spacing:-.035em;
}


.mpa-program-explorer__copy p{
    margin:18px 0 0;

    color:#60778c;

    font-size:13px;

    line-height:1.8;
}


.mpa-program-explorer__actions{
    display:flex;

    gap:8px;

    margin-top:24px;
}


.mpa-program-explorer__all{
    margin-top:29px;

    text-align:center;
}


.mpa-program-explorer__all a{
    display:inline-flex;

    align-items:center;

    gap:9px;

    padding-bottom:5px;

    color:var(--navy);

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

    font-size:12px;
    font-weight:750;

    text-decoration:none;
}


/* ==================================================
   ARCHIVE V2 - HORIZONTAL EDITORIAL RAILS
================================================== */

.mpa-program-group__heading{
    grid-template-columns:
        minmax(0,1fr)
        auto !important;

    gap:25px !important;

    align-items:end !important;
}


.mpa-program-group__controls{
    display:flex;

    gap:7px;
}


.mpa-program-group__controls button{
    width:36px;
    height:36px;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:0;

    color:#08284c;

    background:#fff;

    border:
        1px solid #cbdce8;

    border-radius:50%;

    font-size:16px;

    cursor:pointer;
}


.mpa-program-group__controls
button:hover{
    color:#fff;

    background:#08284c;

    border-color:#08284c;
}


.mpa-program-rail{
    display:flex;

    gap:14px;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-snap-type:
        x mandatory;

    scrollbar-width:none;

    overscroll-behavior-inline:
        contain;
}


.mpa-program-rail::-webkit-scrollbar{
    display:none;
}


.mpa-program-archive
.mpa-program-rail
.mpa-program-card{
    flex:
        0 0
        min(405px,31vw);

    display:grid;

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

    scroll-snap-align:start;

    min-height:205px;

    border-radius:7px;
}


.mpa-program-archive
.mpa-program-rail
.mpa-program-card__media{
    height:100%;

    aspect-ratio:auto;
}


.mpa-program-archive
.mpa-program-rail
.mpa-program-card__body{
    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:18px 16px;
}


.mpa-program-archive
.mpa-program-rail
.mpa-program-card h3{
    font-size:16px;
}


.mpa-program-archive
.mpa-program-rail
.mpa-program-card p{
    font-size:10.5px;

    line-height:1.55;

    -webkit-line-clamp:2;
}


.mpa-program-archive
.mpa-program-rail
.mpa-program-card__actions{
    margin-top:13px;
}


/* Mobile */

@media (max-width:760px){

    .mpa-program-explorer{
        width:
            calc(100% - 28px);

        margin-bottom:68px;

        padding-top:48px;
    }


    .mpa-program-explorer__intro{
        margin-bottom:28px;
    }


    .mpa-program-explorer__intro h2{
        font-size:1.95rem;
    }


    .mpa-program-explorer__intro p{
        font-size:12px;
    }


    .mpa-program-explorer__layout{
        display:block;
    }


    /*
     * 10 names in a compact 2 x 5 grid.
     * No horizontal dragging.
     */

    .mpa-program-explorer__nav{
        display:grid;

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

        gap:0;

        margin-bottom:13px;

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

        border-bottom:0;
    }


    .mpa-program-explorer__tab{
        grid-template-columns:
            22px
            minmax(0,1fr);

        min-height:42px;

        padding:6px;

        border-bottom:
            1px solid var(--line);
    }


    .mpa-program-explorer__tab:nth-child(odd){
        border-right:
            1px solid var(--line);
    }


    html[dir="rtl"]
    .mpa-program-explorer__tab:nth-child(odd){
        border-right:0;

        border-left:
            1px solid var(--line);
    }


    .mpa-program-explorer__tab strong{
        font-size:9px;
    }


    .mpa-program-explorer__tab.is-active,
    html[dir="rtl"]
    .mpa-program-explorer__tab.is-active{
        box-shadow:
            inset 0 -2px 0
            var(--gold);
    }


    .mpa-program-explorer__panel{
        display:block;

        min-height:0;
    }


    .mpa-program-explorer__media{
        aspect-ratio:16/8;
    }


    .mpa-program-explorer__placeholder{
        min-height:0;

        aspect-ratio:16/8;
    }


    .mpa-program-explorer__placeholder img{
        width:58px;
        height:58px;
    }


    .mpa-program-explorer__copy{
        padding:22px 18px 20px;

        text-align:center;
    }


    .mpa-program-explorer__meta{
        justify-content:center;

        font-size:8.5px;
    }


    .mpa-program-explorer__copy h3{
        font-size:1.55rem;
    }


    .mpa-program-explorer__copy p{
        margin-top:12px;

        font-size:11px;

        line-height:1.65;
    }


    .mpa-program-explorer__actions{
        justify-content:center;

        margin-top:18px;
    }


    /*
     * 30-program page keeps rails;
     * arrows are available, so it
     * doesn't become a wall of cards.
     */

    .mpa-program-archive
    .mpa-program-rail
    .mpa-program-card{
        flex:
            0 0
            min(330px,88vw);

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

        min-height:180px;
    }


    .mpa-program-group__heading{
        display:flex !important;

        align-items:flex-end !important;
        justify-content:space-between !important;

        gap:12px !important;
    }


    .mpa-program-group__controls button{
        width:32px;
        height:32px;
    }

}


/* ==================================================
   MPA HOME PROGRAMS V3
   COMPACT EDITORIAL SHOWCASE
================================================== */

.mpa-program-showcase{
    --mp-navy:#08284c;
    --mp-blue:#01478d;
    --mp-soft:#6b9dc6;
    --mp-gold:#fdb002;
    --mp-line:#dce7ef;

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

    margin:0 auto 95px;

    padding-top:70px;

    border-top:1px solid var(--mp-line);
}


/* heading */

.mpa-program-showcase__intro{
    max-width:740px;

    margin:0 auto 38px;

    text-align:center;
}


.mpa-program-showcase__kicker{
    display:block;

    margin-bottom:10px;

    color:var(--mp-soft);

    font-size:11px;
    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;
}


.mpa-program-showcase__intro h2{
    margin:0;

    color:var(--mp-navy);

    font-size:clamp(
        2rem,
        3vw,
        3.25rem
    );

    font-weight:720;

    line-height:1.08;

    letter-spacing:-.04em;
}


.mpa-program-showcase__intro p{
    max-width:660px;

    margin:16px auto 0;

    color:var(--mp-soft);

    font-size:14px;
    font-weight:400;

    line-height:1.75;
}


/* 10 compact choices */

.mpa-program-showcase__tabs{
    display:grid;

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

    width:100%;

    margin-bottom:18px;

    border-top:1px solid var(--mp-line);
    border-left:1px solid var(--mp-line);
}


.mpa-program-showcase__tab{
    appearance:none;

    position:relative;

    display:flex;

    align-items:center;

    gap:8px;

    min-width:0;
    min-height:54px;

    padding:9px 11px;

    background:#fff;

    border:0;
    border-right:1px solid var(--mp-line);
    border-bottom:1px solid var(--mp-line);

    text-align:left;

    cursor:pointer;
}


.mpa-program-showcase__number{
    flex:0 0 auto;

    color:#a1b7c8;

    font-size:9px;
    font-weight:650;

    font-variant-numeric:
        tabular-nums;
}


.mpa-program-showcase__tab-title{
    min-width:0;

    color:#60788d;

    font-size:10px;
    font-weight:620;

    line-height:1.3;
}


.mpa-program-showcase__tab::after{
    content:"";

    position:absolute;

    left:12px;
    right:12px;
    bottom:-1px;

    height:2px;

    background:transparent;
}


.mpa-program-showcase__tab.is-active
.mpa-program-showcase__tab-title{
    color:var(--mp-navy);

    font-weight:750;
}


.mpa-program-showcase__tab.is-active::after{
    background:var(--mp-gold);
}


/* main selected program */

.mpa-program-showcase__stage{
    width:100%;
}


.mpa-program-showcase__panel{
    display:grid;

    grid-template-columns:
        minmax(0,1.22fr)
        minmax(320px,.78fr);

    min-height:365px;

    overflow:hidden;

    border-top:1px solid var(--mp-line);
    border-bottom:1px solid var(--mp-line);

    background:#fff;
}


.mpa-program-showcase__panel[hidden]{
    display:none !important;
}


.mpa-program-showcase__image{
    min-width:0;

    overflow:hidden;

    background:#edf5fa;
}


.mpa-program-showcase__image > img{
    display:block;

    width:100%;
    height:100%;

    min-height:365px;

    object-fit:cover;
}


.mpa-program-showcase__placeholder{
    display:flex;

    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    min-height:365px;

    background:#edf5fa;
}


.mpa-program-showcase__placeholder img{
    width:82px;
    height:82px;

    object-fit:contain;

    opacity:.62;
}


.mpa-program-showcase__content{
    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        40px
        clamp(28px,4vw,48px);
}


.mpa-program-showcase__meta{
    display:flex;

    align-items:center;
    flex-wrap:wrap;

    gap:9px;

    margin-bottom:13px;

    color:var(--mp-soft);

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


.mpa-program-showcase__meta i{
    width:3px;
    height:3px;

    border-radius:50%;

    background:var(--mp-gold);
}


.mpa-program-showcase__content h3{
    max-width:430px;

    margin:0;

    color:var(--mp-navy);

    font-size:clamp(
        1.8rem,
        2.5vw,
        2.65rem
    );

    font-weight:720;

    line-height:1.07;

    letter-spacing:-.035em;
}


.mpa-program-showcase__content p{
    max-width:440px;

    margin:17px 0 0;

    color:#627b90;

    font-size:13px;

    line-height:1.75;
}


/* small, clean buttons */

.mpa-program-showcase__actions{
    display:flex;

    align-items:center;

    gap:9px;

    margin-top:24px;
}


.mpa-program-showcase__actions a{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:38px;

    padding:0 15px;

    border-radius:7px;

    font-size:10.5px;
    font-weight:750;

    text-decoration:none;
}


.mpa-program-showcase__more{
    color:var(--mp-navy);

    background:#fff;

    border:1px solid #b9cfdf;
}


.mpa-program-showcase__more:hover{
    color:var(--mp-blue);

    border-color:#86aecb;
}


.mpa-program-showcase__enroll{
    color:#fff;

    background:var(--mp-navy);

    border:1px solid var(--mp-navy);
}


.mpa-program-showcase__enroll:hover{
    color:#fff;

    background:var(--mp-blue);

    border-color:var(--mp-blue);
}


/* all programs */

.mpa-program-showcase__footer{
    margin-top:25px;

    text-align:center;
}


.mpa-program-showcase__footer a{
    display:inline-flex;

    align-items:center;

    gap:8px;

    padding-bottom:5px;

    color:var(--mp-navy);

    border-bottom:
        1px solid var(--mp-gold);

    font-size:11.5px;
    font-weight:700;

    text-decoration:none;
}


/* RTL */

html[dir="rtl"]
.mpa-program-showcase__tab{
    text-align:right;
}


html[dir="rtl"]
.mpa-program-showcase__intro h2,
html[dir="rtl"]
.mpa-program-showcase__content h3{
    letter-spacing:0;
}


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

@media (max-width:760px){

    .mpa-program-showcase{
        width:calc(100% - 28px);

        margin-bottom:65px;

        padding-top:46px;
    }


    .mpa-program-showcase__intro{
        margin-bottom:27px;
    }


    .mpa-program-showcase__intro h2{
        font-size:1.9rem;
    }


    .mpa-program-showcase__intro p{
        font-size:12px;

        line-height:1.65;
    }


    /* 2 columns x 5 rows */

    .mpa-program-showcase__tabs{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        margin-bottom:12px;
    }


    .mpa-program-showcase__tab{
        min-height:43px;

        padding:6px 7px;

        gap:5px;
    }


    .mpa-program-showcase__number{
        font-size:8px;
    }


    .mpa-program-showcase__tab-title{
        font-size:8.7px;

        line-height:1.25;
    }


    .mpa-program-showcase__tab::after{
        left:7px;
        right:7px;
    }


    /* selected program */

    .mpa-program-showcase__panel{
        display:block;

        min-height:0;
    }


    .mpa-program-showcase__image{
        aspect-ratio:16/9;
    }


    .mpa-program-showcase__image > img{
        min-height:0;

        width:100%;
        height:100%;

        object-fit:cover;
    }


    .mpa-program-showcase__placeholder{
        min-height:0;

        aspect-ratio:16/9;
    }


    .mpa-program-showcase__placeholder img{
        width:56px;
        height:56px;
    }


    .mpa-program-showcase__content{
        padding:
            22px
            17px
            21px;

        text-align:center;
    }


    .mpa-program-showcase__meta{
        justify-content:center;

        margin-bottom:10px;

        font-size:8.5px;
    }


    .mpa-program-showcase__content h3{
        max-width:340px;

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

        font-size:1.55rem;
    }


    .mpa-program-showcase__content p{
        max-width:350px;

        margin:
            12px auto 0;

        font-size:10.8px;

        line-height:1.65;
    }


    .mpa-program-showcase__actions{
        justify-content:center;

        margin-top:17px;
    }


    .mpa-program-showcase__actions a{
        min-height:36px;

        padding:0 12px;

        font-size:9.5px;
    }

}


/* ==================================================
   MPA HOME PROGRAMS V4
   EDITORIAL COVER CAROUSEL
================================================== */

.mpa-program-covers{
    --pc-navy:#08284c;
    --pc-blue:#01478d;
    --pc-soft:#6b9dc6;
    --pc-gold:#fdb002;
    --pc-line:#dbe6ee;

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

    margin:0 auto 100px;

    padding-top:74px;

    border-top:
        1px solid var(--pc-line);

    overflow:hidden;
}


/* --------------------------------
   Header
-------------------------------- */

.mpa-program-covers__top{
    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    gap:40px;

    margin-bottom:34px;
}


.mpa-program-covers__heading{
    max-width:720px;
}


.mpa-program-covers__kicker{
    display:block;

    margin-bottom:10px;

    color:var(--pc-soft);

    font-size:10px;
    font-weight:700;

    letter-spacing:.1em;

    text-transform:uppercase;
}


.mpa-program-covers__heading h2{
    margin:0;

    color:var(--pc-navy);

    font-size:clamp(
        2rem,
        3.25vw,
        3.5rem
    );

    font-weight:720;

    line-height:1.05;

    letter-spacing:-.045em;
}


.mpa-program-covers__heading p{
    max-width:650px;

    margin:16px 0 0;

    color:var(--pc-soft);

    font-size:13.5px;

    line-height:1.75;
}


/* --------------------------------
   Navigation
-------------------------------- */

.mpa-program-covers__controls{
    display:flex;

    gap:7px;

    flex:0 0 auto;
}


.mpa-program-covers__arrow{
    appearance:none;

    width:39px;
    height:39px;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:0;

    color:var(--pc-navy);

    background:#fff;

    border:
        1px solid #bdcedb;

    border-radius:50%;

    font-size:16px;

    cursor:pointer;

    transition:
        background-color .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


.mpa-program-covers__arrow:hover{
    color:#fff;

    background:var(--pc-navy);

    border-color:var(--pc-navy);

    transform:translateY(-1px);
}


/* --------------------------------
   Rail
-------------------------------- */

.mpa-program-covers__viewport{
    width:100%;

    overflow-x:auto;
    overflow-y:hidden;

    scrollbar-width:none;

    scroll-snap-type:x mandatory;

    overscroll-behavior-inline:
        contain;

    -webkit-overflow-scrolling:
        touch;
}


.mpa-program-covers__viewport::-webkit-scrollbar{
    display:none;
}


.mpa-program-covers__track{
    display:flex;

    gap:18px;

    width:max-content;

    padding:0 0 5px;
}


/* --------------------------------
   Program item
-------------------------------- */

.mpa-program-cover{
    flex:
        0 0
        clamp(
            250px,
            26vw,
            295px
        );

    scroll-snap-align:start;

    min-width:0;
}


.mpa-program-cover__visual{
    position:relative;

    display:block;

    width:100%;

    aspect-ratio:4/3;

    overflow:hidden;

    background:#edf5fa;

    border-radius:5px;

    text-decoration:none;
}


.mpa-program-cover__visual > img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .35s ease;
}


.mpa-program-cover:hover
.mpa-program-cover__visual > img{
    transform:scale(1.025);
}


/* Placeholder until real image */

.mpa-program-cover__placeholder{
    display:flex;

    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    background:#edf5fa;
}


.mpa-program-cover__placeholder img{
    width:67px;
    height:67px;

    object-fit:contain;

    opacity:.64;
}


/* Number */

.mpa-program-cover__index{
    position:absolute;

    left:12px;
    bottom:11px;

    display:flex;

    align-items:center;
    justify-content:center;

    min-width:35px;
    height:25px;

    padding:0 7px;

    color:#fff;

    background:var(--pc-navy);

    font-size:9px;
    font-weight:750;

    line-height:1;

    letter-spacing:.04em;

    border-radius:3px;

    font-variant-numeric:
        tabular-nums;
}


html[dir="rtl"]
.mpa-program-cover__index{
    left:auto;
    right:12px;
}


/* Text */

.mpa-program-cover__body{
    padding:
        16px 2px 0;
}


.mpa-program-cover__meta{
    display:flex;

    align-items:center;
    flex-wrap:wrap;

    gap:7px;

    margin-bottom:9px;

    color:var(--pc-soft);

    font-size:9px;
    font-weight:650;
}


.mpa-program-cover__meta i{
    width:3px;
    height:3px;

    flex:0 0 auto;

    border-radius:50%;

    background:var(--pc-gold);
}


.mpa-program-cover h3{
    min-height:45px;

    margin:0;

    color:var(--pc-navy);

    font-size:17px;
    font-weight:720;

    line-height:1.3;

    letter-spacing:-.02em;
}


.mpa-program-cover h3 a{
    color:inherit;

    text-decoration:none;
}


.mpa-program-cover h3 a:hover{
    color:var(--pc-blue);
}


.mpa-program-cover p{
    display:-webkit-box;

    overflow:hidden;

    min-height:53px;

    margin:9px 0 0;

    color:#667f93;

    font-size:10.5px;

    line-height:1.65;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:3;
}


/* --------------------------------
   Buttons
-------------------------------- */

.mpa-program-cover__actions{
    display:flex;

    align-items:center;

    gap:7px;

    margin-top:14px;
}


.mpa-program-cover__actions a{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:34px;

    padding:0 11px;

    border-radius:6px;

    font-size:9.5px;
    font-weight:750;

    text-decoration:none;

    white-space:nowrap;
}


.mpa-program-cover__more{
    color:var(--pc-navy);

    background:#fff;

    border:
        1px solid #bed0de;
}


.mpa-program-cover__more:hover{
    color:var(--pc-blue);

    border-color:#87afcb;
}


.mpa-program-cover__enroll{
    color:#fff;

    background:var(--pc-navy);

    border:
        1px solid var(--pc-navy);
}


.mpa-program-cover__enroll:hover{
    color:#fff;

    background:var(--pc-blue);

    border-color:var(--pc-blue);
}


/* --------------------------------
   Footer / progress
-------------------------------- */

.mpa-program-covers__bottom{
    display:grid;

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

    gap:28px;

    align-items:center;

    margin-top:34px;
}


.mpa-program-covers__progress{
    position:relative;

    width:100%;

    height:1px;

    overflow:hidden;

    background:#dce7ef;
}


.mpa-program-covers__progress span{
    position:absolute;

    top:0;
    left:0;

    width:10%;
    height:1px;

    background:var(--pc-navy);

    transform-origin:left center;

    transition:
        width .2s ease;
}


html[dir="rtl"]
.mpa-program-covers__progress span{
    left:auto;
    right:0;

    transform-origin:right center;
}


.mpa-program-covers__all{
    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--pc-navy);

    font-size:11px;
    font-weight:700;

    text-decoration:none;

    white-space:nowrap;
}


.mpa-program-covers__all span{
    color:var(--pc-gold);

    font-size:16px;
}


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

@media (max-width:700px){

    .mpa-program-covers{
        width:calc(100% - 28px);

        margin-bottom:65px;

        padding-top:48px;
    }


    .mpa-program-covers__top{
        display:block;

        margin-bottom:25px;
    }


    .mpa-program-covers__heading{
        text-align:center;
    }


    .mpa-program-covers__heading h2{
        font-size:1.95rem;
    }


    .mpa-program-covers__heading p{
        max-width:360px;

        margin:
            13px auto 0;

        font-size:11.5px;
    }


    .mpa-program-covers__controls{
        justify-content:center;

        margin-top:19px;
    }


    .mpa-program-covers__arrow{
        width:34px;
        height:34px;

        font-size:14px;
    }


    /*
     * One strong program plus a
     * visible part of the next one.
     */

    .mpa-program-cover{
        flex:
            0 0
            78vw;

        max-width:310px;
    }


    .mpa-program-covers__track{
        gap:12px;
    }


    .mpa-program-cover__visual{
        aspect-ratio:16/11;
    }


    .mpa-program-cover__body{
        padding-top:13px;
    }


    .mpa-program-cover h3{
        min-height:auto;

        font-size:15px;
    }


    .mpa-program-cover p{
        min-height:0;

        font-size:9.8px;

        -webkit-line-clamp:2;
    }


    .mpa-program-cover__actions a{
        min-height:32px;

        padding:0 10px;

        font-size:9px;
    }


    .mpa-program-covers__bottom{
        grid-template-columns:1fr;

        gap:18px;

        margin-top:25px;
    }


    .mpa-program-covers__all{
        justify-self:center;
    }

}


/* ==================================================
   MPA PROGRAM CARDS - CENTERED CONTENT
================================================== */

.mpa-program-cover__body{
    text-align:center !important;
}


/* Category + level */

.mpa-program-cover__meta{
    justify-content:center !important;

    width:100% !important;

    text-align:center !important;
}


/* Program title */

.mpa-program-cover h3{
    width:100% !important;

    margin-left:auto !important;
    margin-right:auto !important;

    text-align:center !important;
}


.mpa-program-cover h3 a{
    display:block !important;

    width:100% !important;

    text-align:center !important;
}


/* Description */

.mpa-program-cover p{
    width:100% !important;
    max-width:270px !important;

    margin-left:auto !important;
    margin-right:auto !important;

    text-align:center !important;
}


/* Buttons */

.mpa-program-cover__actions{
    justify-content:center !important;

    width:100% !important;

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


/* RTL also stays physically centred */

html[dir="rtl"]
.mpa-program-cover__body,
html[dir="rtl"]
.mpa-program-cover h3,
html[dir="rtl"]
.mpa-program-cover h3 a,
html[dir="rtl"]
.mpa-program-cover p{
    text-align:center !important;
}


html[dir="rtl"]
.mpa-program-cover__meta,
html[dir="rtl"]
.mpa-program-cover__actions{
    justify-content:center !important;
}



/* ==================================================
   MPA PROGRAM CARDS - BRAND TEXT COLORS
================================================== */

/* Program title - slightly lighter navy */

.mpa-program-cover h3,
.mpa-program-cover h3 a{
    color:#174a73 !important;
}


/* Category + level */

.mpa-program-cover__meta,
.mpa-program-cover__meta span{
    color:#01478d !important;
}


/* Small description */

.mpa-program-cover p{
    color:#4f84b0 !important;
}


/* Keep the small separator in brand gold */

.mpa-program-cover__meta i{
    background:#fdb002 !important;
}


/* Hover remains clean and branded */

.mpa-program-cover h3 a:hover{
    color:#01478d !important;
}



/* ==================================================
   MPA PROGRAMS V4
   TRUE CENTER HEADING - ALL LANGUAGES
================================================== */

.mpa-program-covers__top{
    position:relative !important;

    display:block !important;

    width:100% !important;

    margin-bottom:34px !important;
}


/* Entire heading block is physically centered */

.mpa-program-covers__heading{
    width:100% !important;
    max-width:760px !important;

    margin-left:auto !important;
    margin-right:auto !important;

    text-align:center !important;
}


/* Small upper label */

.mpa-program-covers__kicker{
    width:100% !important;

    margin-left:auto !important;
    margin-right:auto !important;

    text-align:center !important;
}


/* Main title */

.mpa-program-covers__heading h2{
    width:100% !important;

    margin-left:auto !important;
    margin-right:auto !important;

    text-align:center !important;
}


/* Description */

.mpa-program-covers__heading p{
    width:100% !important;
    max-width:680px !important;

    margin:
        16px auto 0 !important;

    text-align:center !important;
}


/* Arrows remain on the physical left,
   so they do not push the heading off-centre */

.mpa-program-covers__controls{
    position:absolute !important;

    left:0 !important;
    right:auto !important;

    bottom:0 !important;

    margin:0 !important;
}


/* RTL must remain physically centred too */

html[dir="rtl"]
.mpa-program-covers__heading,
html[dir="rtl"]
.mpa-program-covers__kicker,
html[dir="rtl"]
.mpa-program-covers__heading h2,
html[dir="rtl"]
.mpa-program-covers__heading p{
    text-align:center !important;

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


/* Mobile */

@media (max-width:700px){

    .mpa-program-covers__top{
        display:block !important;

        margin-bottom:25px !important;
    }


    .mpa-program-covers__heading{
        max-width:390px !important;

        margin-left:auto !important;
        margin-right:auto !important;

        text-align:center !important;
    }


    .mpa-program-covers__heading p{
        max-width:350px !important;

        margin:
            13px auto 0 !important;
    }


    /* On phones arrows sit below heading */

    .mpa-program-covers__controls{
        position:static !important;

        display:flex !important;

        justify-content:center !important;

        margin:
            18px auto 0 !important;
    }

}



/* ==================================================
   MPA ALL PROGRAMS BUTTON
   CENTERED - ALL LANGUAGES
================================================== */

.mpa-program-covers__bottom{
    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:100% !important;

    margin-top:34px !important;

    text-align:center !important;
}


/* Remove old progress line */

.mpa-program-covers__progress{
    display:none !important;
}


/* Elegant centered button */

.mpa-program-covers__all{
    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    gap:10px !important;

    min-height:42px !important;

    padding:0 18px !important;

    margin:0 auto !important;

    color:#ffffff !important;

    background:#0b3f6f !important;

    border:1px solid #0b3f6f !important;
    border-radius:8px !important;

    font-size:11.5px !important;
    font-weight:700 !important;

    line-height:1 !important;

    text-decoration:none !important;

    white-space:nowrap !important;

    box-shadow:none !important;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        transform .18s ease !important;
}


/* Gold arrow */

.mpa-program-covers__all span{
    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    color:#fdb002 !important;

    font-size:16px !important;
    font-weight:500 !important;

    line-height:1 !important;
}


/* Hover */

.mpa-program-covers__all:hover{
    color:#ffffff !important;

    background:#01478d !important;

    border-color:#01478d !important;

    transform:translateY(-1px) !important;
}


/* Keep RTL physically centered */

html[dir="rtl"]
.mpa-program-covers__bottom{
    justify-content:center !important;

    text-align:center !important;
}


html[dir="rtl"]
.mpa-program-covers__all{
    margin-left:auto !important;
    margin-right:auto !important;
}


/* Mobile */

@media (max-width:700px){

    .mpa-program-covers__bottom{
        display:flex !important;

        justify-content:center !important;

        margin-top:25px !important;
    }


    .mpa-program-covers__all{
        min-height:39px !important;

        padding:0 15px !important;

        font-size:10.5px !important;
    }

}



/* ==================================================
   MPA PROGRAMS PAGE V3
   FACEBOOK COVER + HOMEPAGE PROGRAM STYLE
================================================== */

.mpa-programs-page{
    --pp-navy:#08284c;
    --pp-blue:#01478d;
    --pp-soft:#6b9dc6;
    --pp-gold:#fdb002;
    --pp-line:#dce7ef;

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

    margin:22px auto 42px;
}


/* ==================================================
   FACEBOOK-STYLE PROFILE HEADER
================================================== */

.mpa-programs-page__profile{
    width:100%;

    text-align:center;

    margin-bottom:34px;
}


.mpa-programs-page__cover{
    width:100%;

    aspect-ratio:16/4.3;

    overflow:hidden;

    background:#edf5fa;

    border-radius:
        11px 11px 4px 4px;
}


.mpa-programs-page__cover img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}


.mpa-programs-page__cover-placeholder{
    width:100%;
    height:100%;

    background:#edf5fa;
}


/* Overlapping logo */

.mpa-programs-page__logo{
    position:relative;

    z-index:3;

    width:118px;
    height:118px;

    margin:
        -58px auto 0;
}


.mpa-programs-page__logo img{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
}


/* Centered title */

.mpa-programs-page__intro{
    width:100%;
    max-width:900px;

    margin:18px auto 0;

    text-align:center;
}


.mpa-programs-page__eyebrow{
    display:block;

    margin-bottom:11px;

    color:var(--pp-soft);

    font-size:10px;
    font-weight:700;

    letter-spacing:.1em;

    text-transform:uppercase;
}


.mpa-programs-page__intro h1{
    max-width:900px;

    margin:0 auto;

    color:var(--pp-navy);

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

    font-weight:730;

    line-height:1.03;

    letter-spacing:-.055em;

    text-align:center;
}


.mpa-programs-page__intro p{
    max-width:750px;

    margin:21px auto 0;

    color:var(--pp-soft);

    font-size:14px;

    line-height:1.8;

    text-align:center;
}


html[dir="rtl"]
.mpa-programs-page__intro h1{
    letter-spacing:0;
}



/* ==================================================
   PROGRAM GROUPS
================================================== */

.mpa-programs-page__group{
    padding:34px 0 34px;

    border-top:
        1px solid var(--pp-line);
}


.mpa-programs-page__group-head{
    position:relative;

    display:flex;

    align-items:flex-end;
    justify-content:center;

    min-height:80px;

    margin-bottom:31px;

    text-align:center;
}


.mpa-programs-page__group-copy{
    width:100%;

    max-width:760px;

    margin:0 auto;

    text-align:center;
}


.mpa-programs-page__group-copy > span{
    display:block;

    margin-bottom:8px;

    color:var(--pp-soft);

    font-size:10px;
    font-weight:700;

    letter-spacing:.09em;

    text-transform:uppercase;
}


.mpa-programs-page__group-copy h2{
    margin:0;

    color:var(--pp-navy);

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

    line-height:1.08;

    text-align:center;
}


/* Arrows on edge without moving title */

.mpa-programs-page__group-head
.mpa-program-covers__controls{
    position:absolute;

    right:0;
    bottom:4px;
}


html[dir="rtl"]
.mpa-programs-page__group-head
.mpa-program-covers__controls{
    right:auto;
    left:0;
}



/* ==================================================
   SAME CAROUSEL STYLE AS HOMEPAGE
================================================== */

.mpa-programs-page__rail{
    display:flex;

    gap:18px;

    width:100%;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-snap-type:
        x mandatory;

    scrollbar-width:none;

    overscroll-behavior-inline:
        contain;

    -webkit-overflow-scrolling:
        touch;
}


.mpa-programs-page__rail::-webkit-scrollbar{
    display:none;
}


.mpa-programs-page__rail
.mpa-program-cover{
    flex:
        0 0
        clamp(
            250px,
            26vw,
            295px
        );

    scroll-snap-align:start;
}



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

@media (max-width:700px){

    .mpa-programs-page{
        width:
            calc(100% - 24px);

        margin-top:12px;
        margin-bottom:42px;
    }


    .mpa-programs-page__profile{
        margin-bottom:34px;
    }


    .mpa-programs-page__cover{
        aspect-ratio:16/6;

        border-radius:
            7px 7px 3px 3px;
    }


    .mpa-programs-page__logo{
        width:84px;
        height:84px;

        margin-top:-41px;
    }


    .mpa-programs-page__intro{
        margin-top:13px;
    }


    .mpa-programs-page__eyebrow{
        font-size:8.5px;
    }


    .mpa-programs-page__intro h1{
        max-width:360px;

        font-size:2.1rem;

        line-height:1.08;
    }


    .mpa-programs-page__intro p{
        max-width:350px;

        margin-top:14px;

        font-size:11px;

        line-height:1.65;
    }


    .mpa-programs-page__group{
        padding:34px 0 34px;
    }


    .mpa-programs-page__group-head{
        display:block;

        min-height:0;

        margin-bottom:23px;
    }


    .mpa-programs-page__group-copy h2{
        font-size:1.8rem;
    }


    .mpa-programs-page__group-head
    .mpa-program-covers__controls,
    html[dir="rtl"]
    .mpa-programs-page__group-head
    .mpa-program-covers__controls{
        position:static;

        display:flex;

        justify-content:center;

        margin-top:17px;
    }


    .mpa-programs-page__rail{
        gap:12px;
    }


    .mpa-programs-page__rail
    .mpa-program-cover{
        flex:
            0 0
            78vw;

        max-width:310px;
    }

}



/* ==================================================
   MPA PROGRAMS - MOUSE DRAG FEEDBACK
================================================== */

@media (hover:hover) and (pointer:fine){

    .mpa-program-covers__viewport,
    .mpa-programs-page__rail,
    .mpa-program-rail{
        cursor:grab !important;
    }


    .mpa-program-covers__viewport.is-mouse-dragging,
    .mpa-programs-page__rail.is-mouse-dragging,
    .mpa-program-rail.is-mouse-dragging{
        cursor:grabbing !important;

        scroll-snap-type:none !important;

        user-select:none !important;
    }


    .mpa-program-covers__viewport.is-mouse-dragging *,
    .mpa-programs-page__rail.is-mouse-dragging *,
    .mpa-program-rail.is-mouse-dragging *{
        user-select:none !important;
    }


    .mpa-program-covers__viewport img,
    .mpa-programs-page__rail img,
    .mpa-program-rail img{
        -webkit-user-drag:none;
        user-drag:none;
    }

}


/* ==================================================
   MPA PROGRAM PAGE - MORE + ENROLL BUTTONS
================================================== */

.mpa-programs-page
.mpa-program-cover__actions{
    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    flex-direction:row !important;
    flex-wrap:nowrap !important;

    gap:8px !important;

    width:100% !important;

    margin:
        15px auto 0 !important;

    text-align:center !important;
}


.mpa-programs-page
.mpa-program-cover__actions a{
    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    min-width:0 !important;
    min-height:35px !important;

    padding:
        0 12px !important;

    border-radius:
        6px !important;

    font-size:
        9.5px !important;

    font-weight:
        750 !important;

    line-height:1 !important;

    text-align:center !important;

    text-decoration:none !important;

    white-space:nowrap !important;

    visibility:visible !important;
    opacity:1 !important;
}


/* More */

.mpa-programs-page
.mpa-program-cover__more{
    color:#174a73 !important;

    background:#ffffff !important;

    border:
        1px solid
        #b9cfdf !important;
}


.mpa-programs-page
.mpa-program-cover__more:hover{
    color:#01478d !important;

    border-color:
        #7faac8 !important;
}


/* Enroll */

.mpa-programs-page
.mpa-program-cover__enroll{
    color:#ffffff !important;

    background:#0b3f6f !important;

    border:
        1px solid
        #0b3f6f !important;
}


.mpa-programs-page
.mpa-program-cover__enroll:hover{
    color:#ffffff !important;

    background:#01478d !important;

    border-color:
        #01478d !important;
}


/* Arabic and every RTL language:
   keep the two buttons physically centred */

html[dir="rtl"]
.mpa-programs-page
.mpa-program-cover__actions{
    justify-content:center !important;

    text-align:center !important;
}


/* Mobile */

@media (max-width:700px){

    .mpa-programs-page
    .mpa-program-cover__actions{
        gap:6px !important;

        margin-top:
            12px !important;
    }


    .mpa-programs-page
    .mpa-program-cover__actions a{
        min-height:
            33px !important;

        padding:
            0 10px !important;

        font-size:
            9px !important;
    }

}



/* ==================================================
   MPA PROGRAM STORY V5
   PREMIUM EDITORIAL EXPERIENCE
================================================== */

.mpa-premium-program{
    --pv-navy:#174a73;
    --pv-deep:#08284c;
    --pv-blue:#01478d;
    --pv-soft:#5f8fb8;
    --pv-gold:#fdb002;
    --pv-line:#dce7ef;

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

    margin:26px auto 42px;
}


/* ==================================================
   COVER
================================================== */

.mpa-premium-program__profile{
    text-align:center;
}


.mpa-premium-program__cover{
    width:100%;

    aspect-ratio:16/4.3;

    overflow:hidden;

    background:#edf5fa;

    border-radius:
        10px 10px 3px 3px;
}


.mpa-premium-program__cover > img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}


.mpa-premium-program__cover-empty{
    display:block;

    width:100%;
    height:100%;

    background:#edf5fa;
}


.mpa-premium-program__mark{
    position:relative;

    z-index:3;

    width:112px;
    height:112px;

    margin:-55px auto 0;
}


.mpa-premium-program__mark img{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
}


.mpa-premium-program__identity{
    max-width:850px;

    margin:14px auto 0;
}


.mpa-premium-program__category{
    display:block;

    color:var(--pv-soft);

    font-size:10px;
    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;
}


.mpa-premium-program__identity h1{
    margin:8px auto 0;

    color:var(--pv-deep);

    font-size:clamp(
        2.25rem,
        4.3vw,
        4.35rem
    );

    font-weight:730;

    line-height:1.02;

    letter-spacing:-.045em;
}


html[dir="rtl"]
.mpa-premium-program__identity h1{
    letter-spacing:0;
}


.mpa-premium-program__identity > p{
    margin:12px 0 0;

    color:var(--pv-soft);

    font-size:11px;

    font-weight:650;
}


.mpa-premium-program__actions{
    display:flex;

    justify-content:center;

    gap:8px;

    margin-top:21px;
}



/* ==================================================
   STORY
================================================== */

.mpa-premium-story{
    max-width:1040px;

    margin:34px auto 0;
}


.mpa-premium-row{
    display:grid;

    grid-template-columns:
        minmax(0,.88fr)
        minmax(0,1.12fr);

    gap:clamp(
        42px,
        7vw,
        88px
    );

    align-items:center;

    padding:72px 0;

    border-top:
        1px solid var(--pv-line);
}


.mpa-premium-row--reverse
.mpa-premium-copy{
    order:2;
}


.mpa-premium-row--reverse
.mpa-premium-visual{
    order:1;
}


/* Copy */

.mpa-premium-copy{
    min-width:0;
}


.mpa-premium-no{
    display:block;

    margin-bottom:14px;

    color:#a2bace;

    font-size:9px;
    font-weight:700;

    letter-spacing:.12em;
}


.mpa-premium-kicker{
    display:block;

    margin-bottom:9px;

    color:var(--pv-soft);

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


.mpa-premium-copy h2,
.mpa-premium-ending__copy h2{
    margin:0;

    color:var(--pv-navy);

    font-size:clamp(
        1.8rem,
        2.8vw,
        2.75rem
    );

    font-weight:710;

    line-height:1.12;

    letter-spacing:-.03em;
}


html[dir="rtl"]
.mpa-premium-copy h2,
html[dir="rtl"]
.mpa-premium-ending__copy h2{
    letter-spacing:0;
}


.mpa-premium-copy p,
.mpa-premium-ending__copy p{
    margin:17px 0 0;

    color:var(--pv-soft);

    font-size:13.5px;

    line-height:1.9;
}



/* ==================================================
   VISUALS
================================================== */

.mpa-premium-visual{
    margin:0;

    overflow:hidden;

    width:100%;

    aspect-ratio:4/3;

    background:#edf5fa;

    border-radius:4px;
}


.mpa-premium-visual > img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}


.mpa-premium-visual--wide{
    aspect-ratio:16/7;
}


.mpa-premium-visual__placeholder{
    position:relative;

    display:flex;

    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    min-height:270px;

    background:#edf5fa;
}


.mpa-premium-visual__placeholder > img{
    width:66px;
    height:66px;

    object-fit:contain;

    opacity:.55;
}


.mpa-premium-visual__placeholder strong{
    position:absolute;

    right:14px;
    bottom:12px;

    color:#a1b9cc;

    font-size:9px;

    letter-spacing:.08em;
}


html[dir="rtl"]
.mpa-premium-visual__placeholder strong{
    right:auto;
    left:14px;
}



/* ==================================================
   ATMOSPHERE
================================================== */

.mpa-premium-atmosphere{
    padding:34px 0;

    border-top:
        1px solid var(--pv-line);
}


.mpa-premium-atmosphere__text{
    max-width:700px;

    margin:0 auto 29px;

    text-align:center;
}


.mpa-premium-atmosphere__text h2{
    margin:0;

    color:var(--pv-navy);

    font-size:clamp(
        1.9rem,
        3vw,
        2.8rem
    );

    line-height:1.12;
}


.mpa-premium-atmosphere__text p{
    max-width:650px;

    margin:15px auto 0;

    color:var(--pv-soft);

    font-size:13px;

    line-height:1.85;
}



/* ==================================================
   OUTCOMES
================================================== */

.mpa-premium-outcomes{
    list-style:none;

    margin:25px 0 0;

    padding:0;

    counter-reset:outcome;
}


.mpa-premium-outcomes li{
    counter-increment:outcome;

    position:relative;

    padding:
        12px 0 12px 31px;

    color:var(--pv-soft);

    border-top:
        1px solid var(--pv-line);

    font-size:12px;

    line-height:1.6;
}


.mpa-premium-outcomes li:last-child{
    border-bottom:
        1px solid var(--pv-line);
}


.mpa-premium-outcomes li::before{
    content:
        counter(outcome, decimal-leading-zero);

    position:absolute;

    left:0;
    top:13px;

    color:var(--pv-gold);

    font-size:8px;
    font-weight:750;
}


html[dir="rtl"]
.mpa-premium-outcomes li{
    padding:
        12px 31px 12px 0;
}


html[dir="rtl"]
.mpa-premium-outcomes li::before{
    left:auto;
    right:0;
}



/* ==================================================
   ENDING IMAGE
================================================== */

.mpa-premium-ending{
    padding:34px 0;

    border-top:
        1px solid var(--pv-line);
}


.mpa-premium-ending__copy{
    max-width:700px;

    margin:35px auto 0;

    text-align:center;
}


.mpa-premium-ending__copy p{
    max-width:650px;

    margin:
        15px auto 0;
}



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

.mpa-premium-cta{
    max-width:760px;

    margin:0 auto;

    padding:34px 0 10px;

    border-top:
        1px solid var(--pv-line);

    text-align:center;
}


.mpa-premium-cta h2{
    margin:0;

    color:var(--pv-deep);

    font-size:clamp(
        1.9rem,
        3.25vw,
        3.05rem
    );

    font-weight:720;

    line-height:1.08;
}


.mpa-premium-cta p{
    max-width:620px;

    margin:16px auto 0;

    color:var(--pv-soft);

    font-size:13px;

    line-height:1.8;
}


.mpa-premium-cta > div{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    margin-top:24px;
}



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

@media (max-width:700px){

    .mpa-premium-program{
        width:
            calc(100% - 24px);

        margin:12px auto 42px;
    }


    .mpa-premium-program__cover{
        aspect-ratio:16/6;

        border-radius:
            6px 6px 2px 2px;
    }


    .mpa-premium-program__mark{
        width:84px;
        height:84px;

        margin-top:-41px;
    }


    .mpa-premium-program__identity h1{
        max-width:360px;

        font-size:2rem;
    }


    .mpa-premium-story{
        margin-top:34px;
    }


    .mpa-premium-row,
    .mpa-premium-row--reverse{
        display:flex;

        flex-direction:column;

        gap:25px;

        padding:45px 0;
    }


    .mpa-premium-row--reverse
    .mpa-premium-copy,
    .mpa-premium-row--reverse
    .mpa-premium-visual{
        order:initial;
    }


    .mpa-premium-copy{
        max-width:380px;

        margin:0 auto;

        text-align:center;
    }


    .mpa-premium-copy h2{
        font-size:1.72rem;
    }


    .mpa-premium-copy p{
        font-size:11.5px;

        line-height:1.75;
    }


    .mpa-premium-visual{
        aspect-ratio:16/11;
    }


    .mpa-premium-visual--wide{
        aspect-ratio:16/10;
    }


    .mpa-premium-atmosphere{
        padding:32px 0;
    }


    .mpa-premium-atmosphere__text{
        max-width:360px;

        margin-bottom:23px;
    }


    .mpa-premium-atmosphere__text h2{
        font-size:1.75rem;
    }


    .mpa-premium-atmosphere__text p{
        font-size:11.5px;
    }


    .mpa-premium-outcomes{
        text-align:start;
    }


    .mpa-premium-ending{
        padding:32px 0;
    }


    .mpa-premium-ending__copy{
        margin-top:25px;
    }


    .mpa-premium-ending__copy h2{
        font-size:1.75rem;
    }


    .mpa-premium-ending__copy p{
        font-size:11.5px;
    }


    .mpa-premium-cta{
        padding-top:32px;
    }


    .mpa-premium-cta h2{
        font-size:1.85rem;
    }


    .mpa-premium-cta p{
        font-size:11.5px;
    }

}


/* ==================================================
   HOMEPAGE PROGRAM CAROUSEL - TRUE MOUSE DRAG
================================================== */

@media (hover:hover) and (pointer:fine){

    .mpa-program-covers__viewport{
        cursor:grab !important;
    }

    .mpa-program-covers__viewport
    .mpa-program-cover__visual,

    .mpa-program-covers__viewport
    .mpa-program-cover__body,

    .mpa-program-covers__viewport
    .mpa-program-cover h3,

    .mpa-program-covers__viewport
    .mpa-program-cover h3 a,

    .mpa-program-covers__viewport
    .mpa-program-cover p{
        cursor:grab !important;
    }


    .mpa-program-covers__viewport.is-mouse-dragging,
    .mpa-program-covers__viewport.is-mouse-dragging *{
        cursor:grabbing !important;
    }


    /* Buttons must still look clickable */

    .mpa-program-covers__viewport
    .mpa-program-cover__actions a,

    .mpa-program-covers__all,

    .mpa-program-covers__arrow{
        cursor:pointer !important;
    }


    .mpa-program-covers__viewport img{
        -webkit-user-drag:none !important;
        user-select:none !important;
    }

}



/* ==================================================
   MPA - ALL ORIGINAL PROGRAM IMAGES
   ONE IMAGE / ONE SCENE / FULL SIZE
================================================== */

.mpa-original-program-images{
    display:none;
}


.mpa-original-program-image--placed{
    width:100% !important;

    max-width:1040px !important;

    margin:
        18px auto 72px !important;

    padding:0 !important;

    overflow:hidden !important;

    background:#f5f9fc !important;

    border:0 !important;

    border-radius:6px !important;
}


.mpa-original-program-image--placed img{
    display:block !important;

    width:100% !important;
    height:auto !important;

    max-height:none !important;

    margin:0 !important;

    object-fit:contain !important;

    object-position:center !important;
}


/*
 * Give the page visual rhythm without
 * creating a collage or combining scenes.
 */

.mpa-original-program-image--placed:nth-of-type(odd){
    width:92% !important;
}


.mpa-original-program-image--placed:nth-of-type(even){
    width:100% !important;
}


@media (max-width:700px){

    .mpa-original-program-image--placed,
    .mpa-original-program-image--placed:nth-of-type(odd),
    .mpa-original-program-image--placed:nth-of-type(even){

        width:100% !important;

        margin:
            10px auto 42px !important;

        border-radius:4px !important;
    }

}



/* ==================================================
   MPA PROGRAM IMAGES - DIRECT SERVER RENDER
   NO JAVASCRIPT REQUIRED
================================================== */

.mpa-real-program-visuals{
    display:block !important;

    width:100% !important;
    max-width:1040px !important;

    margin:
        18px auto 75px !important;

    padding:0 !important;
}


/*
 * Every file is a separate scene.
 * No collage, no grid.
 */

.mpa-real-program-visual{
    display:block !important;

    width:100% !important;

    margin:
        0 auto 64px !important;

    padding:0 !important;

    overflow:hidden !important;

    background:#f5f9fc !important;

    border:0 !important;

    border-radius:6px !important;
}


.mpa-real-program-visual img{
    display:block !important;

    width:100% !important;
    height:auto !important;

    max-width:100% !important;
    max-height:none !important;

    margin:0 !important;

    object-fit:contain !important;
}


/*
 * Editorial rhythm:
 * still one image per row.
 */

.mpa-real-program-visual--1{
    width:100% !important;
}


.mpa-real-program-visual--2{
    width:91% !important;

    margin-left:0 !important;
}


.mpa-real-program-visual--3{
    width:91% !important;

    margin-right:0 !important;
}


html[dir="rtl"]
.mpa-real-program-visual--2{
    margin-left:auto !important;
    margin-right:0 !important;
}


html[dir="rtl"]
.mpa-real-program-visual--3{
    margin-left:0 !important;
    margin-right:auto !important;
}


/*
 * CRITICAL:
 * Override the old hidden stash.
 */

.mpa-original-program-images{
    display:block !important;
}


@media (max-width:700px){

    .mpa-real-program-visuals{
        margin-bottom:
            48px !important;
    }


    .mpa-real-program-visual,
    .mpa-real-program-visual--1,
    .mpa-real-program-visual--2,
    .mpa-real-program-visual--3{

        width:100% !important;

        margin:
            0 auto 36px !important;

        border-radius:
            4px !important;
    }

}


/* ==================================================
   MPA PROGRAM COVER VISIBILITY FINAL
   ================================================== */

.mpa-program-card__media,
.mpa-program-cover__media,
.mpa-program-cover__visual,
.mpa-program-explorer__media,
.mpa-program-showcase__image,
.mpa-program-profile__cover {
    position: relative;
    overflow: hidden;
}

.mpa-program-card__media > img,
.mpa-program-cover img,
.mpa-program-covers img,
.mpa-program-explorer__media > img,
.mpa-program-showcase__image > img,
.mpa-program-profile__cover > img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    max-width: 100% !important;

    object-fit: cover !important;
    object-position: center !important;
}

/* Main cards */
.mpa-program-card__media {
    aspect-ratio: 4 / 3;
}

/* Homepage / archive editorial covers */
.mpa-program-cover__media,
.mpa-program-cover__visual,
.mpa-program-explorer__media,
.mpa-program-showcase__image {
    aspect-ratio: 4 / 3;
}

.mpa-program-card__media > img,
.mpa-program-cover__media > img,
.mpa-program-cover__visual > img,
.mpa-program-explorer__media > img,
.mpa-program-showcase__image > img {
    height: 100% !important;
}

/* Never let old animation rules hide a real cover */
.mpa-program-card img[src*="/assets/images/programs/"],
.mpa-program-cover img[src*="/assets/images/programs/"],
.mpa-program-covers img[src*="/assets/images/programs/"],
.mpa-program-showcase img[src*="/assets/images/programs/"],
.mpa-program-explorer img[src*="/assets/images/programs/"] {
    transform: none;
    filter: none;
    clip-path: none;
}

