/* ====================================================================
   VCC 2026 — Program Page Styles
   Depends on: /files/templates/main-2026/css/base.css
   ==================================================================== */


/* ====================================================================
   1440px CAP
   Every section is capped at 1440px.
   overflow:hidden ensures bg images clip at the cap, not the viewport.
   ==================================================================== */

.prog-hero,
.prog-breadcrumb,
.prog-overview,
.prog-recognition,
.prog-admissions,
.prog-careers,
.prog-courses,
.prog-clinic,
.prog-why,
.prog-pathway,
.prog-faq,
.prog-cta {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    overflow: unset;
}
main.program-page  {
    --wrapper-padding: 48px;
}

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

.prog-hero {
    position: relative;
    width: 100%;
    min-height: 780px;
    display: flex;
    flex-direction: column;
}

/* Layer 1 — program photo (desktop only) */
.prog-hero__bg-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Layer 2 — branded diagonal PNG (desktop only) */
.prog-hero__bg-overlay {
    position: absolute;
    inset: 0;
    background-image: url('/files/templates/main-2026/images/programs_hero_bg_desktop.webp');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Mobile img — hidden on desktop */
.prog-hero__img-mobile {
    display: none;
}

.prog-hero__inner {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 80px;
    padding-bottom: 0;
}

.prog-hero__content {
    max-width: 720px;
    padding-bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
}

.prog-hero__title {
    color: var(--vcc-snow);
    margin-bottom: 24px;
}

.prog-hero__subtitle {
    color: var(--vcc-snow);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.20);
    font-family: "Outfit-Light";
    font-size: var(--font-lead);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-lead);
}


/* ====================================================================
   HERO STAT CARDS
   Both breakpoints: left carmine border + grey background
   ==================================================================== */

.prog-hero__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding-bottom: 32px;
}

.prog-hero__stat {
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: linear-gradient(0deg, rgba(116, 131, 134, 0.20) 0%, rgba(116, 131, 134, 0.20) 100%), #FBF9FF;
    box-shadow: 0 4px 10px 0 rgba(44, 18, 36, 0.04);
    min-height: 120px;
}

.prog-hero__stat-label {
    display: block;
    font-family: "Outfit-SemiBold";
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.64px;
    text-transform: uppercase;
    color: var(--vcc-midnight-violet);
    line-height: 130%;
    margin-bottom: 8px;
}

.prog-hero__stat-text {
    font-family: "Outfit-Regular";
    font-size: 16px;
    color: var(--vcc-shadow-grey);
    font-weight: 400;
    line-height: 130%; /* 20.8px */
}

/* ====================================================================
   BREADCRUMB
   ==================================================================== */
.prog-breadcrumb-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

/*.prog-breadcrumb {
    background: var(--vcc-snow);
    padding: 14px 0;
    border-bottom: 1px solid var(--vcc-state-grey-light);
}

.prog-breadcrumb__list {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    flex-wrap: wrap;
}

.prog-breadcrumb__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "Outfit-Regular";
    font-size: 13px;
    color: var(--vcc-grey);
}

    .prog-breadcrumb__item a {
        color: var(--vcc-grey);
        text-decoration: none;
    }

        .prog-breadcrumb__item a:hover {
            color: var(--vcc-carmine);
            text-decoration: underline;
        }

.prog-breadcrumb__item--current {
    color: var(--vcc-dark);
    font-family: "Outfit-Medium";
}

.prog-breadcrumb__sep {
    color: var(--vcc-grey);
    font-size: 12px;
}

.prog-breadcrumb__home {
    display: flex;
    align-items: center;
}

    .prog-breadcrumb__home svg {
        width: 14px;
        height: 14px;
        fill: var(--vcc-grey);
    }
*/
/* ====================================================================
   PROGRAM OVERVIEW
   ==================================================================== */
.prog-overview {
    background: url('../images/program_overview_bg.webp') center top / cover no-repeat, linear-gradient(0deg, rgba(44, 18, 36, 0.10) 0%, rgba(44, 18, 36, 0.10) 100%), #FBF9FF;
    /*  background: var(--vcc-snow);*/
    padding: 48px 0 0 0;
}

/*
   Desktop grid — 2 columns:
     col 1: image spanning both rows
     col 2 row 1: body-top (eyebrow, title, lead)
     col 2 row 2: body-bottom (desc, tags)
*/
.prog-overview__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 0 24px;
/*    min-height: 640px;*/
    align-items: flex-start;
}

/* Image — col 1, spans both rows */
.prog-overview__images {
    grid-column: 1;
    grid-row: 1 / 3;
    position: sticky;
    top: 140px;
    align-self: start;
  
}

.prog-overview__img-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
   
}

    .prog-overview__img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        
    }

/* Top text — col 2, row 1 */
.prog-overview__body-top {
    grid-column: 2;
    grid-row: 1;
    padding: 0 24px;
   /* padding-bottom: 20px;*/
}

/* Bottom text — col 2, row 2 */
.prog-overview__body-bottom {
    grid-column: 2;
    grid-row: 2;
    padding: 0 24px;
}

.prog-overview__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 22px 0 15px;
    margin-bottom: 16px;
    font-family: "Outfit-Medium";
    font-size: 15px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--vcc-shadow-grey);
    background: #C5CACF;
    border: none;
    border-radius: 0;
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}

.prog-overview__title {
    font-family: "ZalandoSansExpanded-SemiBold";
    color: var(--vcc-midnight-violet);
    margin-bottom: 16px;
}

.prog-overview__lead {
    font-family: "Outfit-Light";
    font-size: var(--font-lead);
    font-style: normal;
    font-weight: 300;
    line-height: var(--lh-lead);
    color: var(--vcc-state-grey);
}
    .prog-overview__lead p {
        font-size: var(--font-lead);
        font-style: normal;
        font-weight: 300;
        line-height: var(--lh-lead); /* 36px */
        color: var(--vcc-state-grey);
        margin-bottom: 32px;
    }

.prog-overview__desc {
    font-family: "Outfit-Light";
    color: var(--vcc-shadow-grey);
 
    margin-bottom: 32px;
}
.prog-overview__desc p{
   
    color: var(--vcc-shadow-grey);
  
  
}
    .prog-overview__desc ul,
    .prog-overview__desc ol {
        padding-left: 24px;
       
    }

    .prog-overview__desc ul {
        list-style: disc;
    }

    .prog-overview__desc ol {
        list-style: decimal;
    }



.prog-overview__tags {
    display: flex;
    gap: 10px;
}

.prog-overview__tag {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 8px;
    border: 1px solid rgba(116, 131, 134, 0.20);
    background: linear-gradient(0deg, rgba(44, 18, 36, 0.10) 0%, rgba(44, 18, 36, 0.10) 100%), #FBF9FF;
    box-shadow: 0 2px 16px 0 rgba(44, 18, 36, 0.05);
    font-family: "Outfit-Regular";
    font-size: var(--font-p);
    color: var(--vcc-shadow-grey);
    line-height: 130%;
    text-align: center;
}
/* ====================================================================
   RECOGNITION
   ==================================================================== */

.prog-recognition {
    background: linear-gradient(0deg, rgba(44, 18, 36, 0.10) 0%, rgba(44, 18, 36, 0.10) 100%), #FBF9FF;
    padding: 72px 0;
}

.prog-recognition__grid {
    display: grid;
    grid-template-columns: 2fr 2fr;
    gap: 64px;
    align-items: start;
}

.prog-recognition__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 0;
    align-self: stretch;
}

.prog-recognition__title {
   
    color: var(--vcc-midnight-violet);
   
}

.prog-recognition__subtitle {
    font-family: "Outfit-Light";
    font-size: 24px;
    color: var(--vcc-shadow-grey);
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    /*max-width: 530px;*/
}
.prog-recognition__subtitle p{
    font-family: "Outfit-Light";
    font-size: 24px;
    color: var(--vcc-shadow-grey);
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    max-width: 530px;
}

.prog-recognition__desc {
    font-family: "Outfit-Light";
    max-width: 530px;
    color: var(--vcc-shadow-grey);
}
.prog-recognition__desc p{
    font-family: "Outfit-Light";
    max-width: 530px;
    color: var(--vcc-shadow-grey);
}

.prog-recognition__right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: stretch;
}

.prog-recognition__item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 24px;
    align-self: stretch;
    background: var(--vcc-white);
    border: 1px solid rgba(116, 131, 134, 0.20);
    border-radius: 4px;
}

.prog-recognition__logo {
    flex-shrink: 0;
    width: 100px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .prog-recognition__logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.prog-recognition__text {
    font-family: "Outfit-Regular";
    color: var(--Shadow-Grey);
    
}
/* ====================================================================
   ADMISSIONS & REQUIREMENTS
   ==================================================================== */

.prog-admissions {
    background: var(--vcc-snow);
}

/* Full-width flex container — no wrapper here so photo can bleed right */
.prog-admissions__layout {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - 80px);
    max-width: 1440px;
    margin: 0 auto;
}

/* LEFT — 70%, carries the wrapper padding */
.prog-admissions__content {
    flex: 0 0 70%;
    max-width: 70%;
    display: flex;
    align-items: flex-start;
    min-height: 0;
}

.prog-admissions__content-inner {
    width: 100%;
    padding: 72px var(--wrapper-padding) 72px var(--wrapper-padding);
    display: flex;
    flex-direction: column;
}

/* Eyebrow — matches prog-overview__eyebrow */
.prog-admissions__eyebrow {
    display: inline-flex;
    align-items: center;
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    height: 32px;
    padding: 0 22px 0 15px;
    font-family: "Outfit-Medium";
    font-size: var(--font-sm);
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--vcc-shadow-grey);
    background: #C5CACF;
    margin-bottom: 20px;
    align-self: flex-start;
}

.prog-admissions__title {
   

    color: var(--vcc-midnight-violet);

    margin-bottom: 12px;
}

.prog-admissions__subtitle {
    font-family: "Outfit-Light";
    font-size: var(--font-p);
    color: var(--vcc-shadow-grey);
    line-height: 150%;
    margin-bottom: 32px;
}

/* Accordion wrapper */
.prog-admissions__accordions {
    border: none;
    border-radius: 0;
    overflow: visible;
    border-top: 1px solid var(--vcc-state-grey-light);
    margin-bottom:40px;
}

.prog-accordion__item {
    border: 1px solid rgba(116, 131, 134, 0.20);
    background: linear-gradient(0deg, rgba(116, 131, 134, 0.10) 0%, rgba(116, 131, 134, 0.10) 100%), #FBF9FF;
    margin-bottom: 4px;
    overflow: hidden;
}

.prog-accordion__trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    gap: 8px;
    border: none;
    font-family: "Outfit-SemiBold";
    font-size: var(--font-p);
    color: var(--vcc--Shadow-Grey);
    cursor: pointer;
    text-align: left;
    transition: opacity 0.18s ease;
}

    .prog-accordion__trigger:hover {
      
    }

.prog-accordion__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: auto;
    color: var(--vcc-midnight-violet); /* not red */
    transition: transform 0.25s ease;
}

.prog-accordion__trigger .prog-accordion__icon {
    transform: rotate(0deg); /* default = chevron pointing down */
}

.prog-accordion__trigger.is-open .prog-accordion__icon {
    transform: rotate(180deg); /* open = chevron pointing up */
}

/* Panel */
.prog-accordion__panel {
    display: none;
    background: #FBF9FF;
    border-top: 1px solid rgba(116, 131, 134, 0.20);
}

    .prog-accordion__panel.is-open {
        display: block;
    }

.prog-accordion__body {
    padding: 16px;
    font-family: "Outfit-Light";
    font-size: var(--font-sm);
    color: var(--vcc-shadow-grey);
    line-height: 165%;
}

    .prog-accordion__body ul {
        padding-left: 20px;
        margin: 8px 0 16px;
    }

    .prog-accordion__body li {
        margin-bottom: 6px;
    }

    .prog-accordion__body strong {
        font-family: "Outfit-SemiBold";
        color: var(--vcc-dark);
        display: block;
        margin-bottom: 4px;
        margin-top: 12px;
    }

        .prog-accordion__body strong:first-child {
            margin-top: 0;
        }

    .prog-accordion__body p {
        margin-bottom: 8px;
    }

.prog-admissions__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--vcc-carmine);
    color: var(--vcc-white);
    font-family: "Outfit-SemiBold";
    font-size: 14px;
    font-weight: 500;
    line-height: 24px; 
    letter-spacing: 0.28px;
    padding: 8px 12px 8px 16px;
    text-decoration: none;
    align-self: flex-start;
    transition: background 0.2s ease;
}

    .prog-admissions__cta:hover {
        background: var(--vcc-carmine-dark);
        color: var(--vcc-white);
        text-decoration: none;
    }

    .prog-admissions__cta svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        display: block;
        vertical-align: middle;
    }

/* RIGHT — sticky photo col, 30%, flush to right edge */
.prog-admissions__photo-col {
    flex: 0 0 30%;
    max-width: 30%;
    position: sticky;
    top: 80px;
    height: calc(100vh - 80px);
    align-self: flex-start;
}

    .prog-admissions__photo-col img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.prog-admissions__photo-sticky {
    width: 100%;
    height: 100%;
    overflow: hidden; /* ← clipping happens here, doesn't affect sticky */
}

    .prog-admissions__photo-sticky img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* ====================================================================
   CAREER PATHS
   ==================================================================== */

.prog-careers {
    background: var(--vcc-midnight-violet);
    padding: 48px 0;
}

.prog-careers__header {
    text-align: center;
    margin-bottom: 56px;
}

.prog-careers__title {
    color: var(--vcc-snow);
    margin-bottom: 8px;
}

.prog-careers__subtitle, .prog-careers__subtitle p{
    color: var(--vcc-white);
    font-family: "Outfit-Light";
    font-size: 24px;
    margin: 0 auto;
    font-weight: 300;
    line-height: 150%; /* 36px */
}

/* Grid */
.prog-careers__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px;
    align-items: start;
}

/* Image — single composed asset */
.prog-careers__photo {
    position: sticky;
    top: 140px;
 
    
}
.prog-careers__photo-inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
   
}
    .prog-careers__photo img {
        width: 100%;
        height: 100%;
        object-fit:contain;
        display: block;
    }

/* Right column */
.prog-careers__jobs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 0 0 48px;
    flex: 1 0 0;
}
.prog-careers__list {

    width: 100%;
    margin-bottom: 24px;
}

/* Target the ul that comes from @Html.Raw(Model.Program.Jobs) */
.prog-careers__list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

    .prog-careers__list li {
        display: flex;
        align-items: center;
        padding: 16px 20px;
        background: rgba(116, 131, 134, 0.20);
        border: 2px solid #2C1224;
        border-top: none;
        color: var(--vcc-snow);
        font-family: "Outfit-Regular";
        font-size: 18px;
        font-weight: 400;
        line-height: 130%; /* 23.4px */

    }

    /* First item gets top border back */
    .prog-careers__list li:first-child {
        border-top: 1px solid #2C1224;
    }

.prog-careers__note {
    color: var(--vcc-snow);
    font-family: "Outfit-Light";
    font-size: 18px;
    font-weight: 400;
    line-height: 130%; /* 23.4px */
}

    .prog-careers__note a {
        color: rgba(255, 255, 255, 0.70);
        text-decoration: underline;
    }

        .prog-careers__note a:hover {
            color: var(--vcc-white);
        }
/* ====================================================================
   COURSES / WHAT YOU'LL LEARN
   ==================================================================== */

.prog-courses {
    background: var(--vcc-snow);
}

/* Full-width flex — same pattern as admissions */
.prog-courses__layout {
    display: flex;
    flex-direction: row-reverse; /* video on right, content on left */
    align-items: flex-start;
    min-height: calc(100vh - 80px);
    max-width: 1440px;
    margin: 0 auto;
}

/* RIGHT — sticky video 30% */
.prog-courses__media {
    flex: 0 0 50%;
    max-width: 50%;
    position: sticky;
    top: var(--main-top-margin);
    height: calc(100vh - var(--main-top-margin));
    align-self: flex-start;
}

.prog-courses__media-inner {
    width: 100%;
    height: 100%;
    overflow: hidden; /* clip lives here */
}

.prog-courses__video-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

    .prog-courses__video-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.prog-courses__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--vcc-carmine);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vcc-white);
    transition: background 0.2s ease, transform 0.2s ease;
}

    .prog-courses__play:hover {
        background: var(--vcc-carmine-dark);
        transform: translate(-50%, -50%) scale(1.08);
    }

    .prog-courses__play svg {
        width: 22px;
        height: 22px;
        margin-left: 3px; /* optical center for play icon */
    }

.prog-courses__video-title {
    padding: 16px var(--wrapper-padding);
    font-family: "ZalandoSansExpanded-Bold";
    font-size: 17px;
    color: var(--vcc-dark);
}

.prog-courses__video-desc {
    padding: 0 var(--wrapper-padding) 16px;
    font-family: "Outfit-Light";
    font-size: 14px;
    color: var(--vcc-shadow-grey);
    line-height: 160%;
}
.prog-courses__preview-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    inset: 0;
}


/* LEFT — scrolling content 70% */
.prog-courses__content {
    flex: 0 0 50%;
    max-width: 50%;
    min-height: 0;
}

.prog-courses__content-inner {
    padding: 72px var(--wrapper-padding) 72px var(--wrapper-padding);
    display: flex;
    flex-direction: column;
}

/* Eyebrow — matches other sections */
.prog-courses__eyebrow {
    display: inline-flex;
    align-items: center;
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    height: 32px;
    padding: 0 22px 0 15px;
    font-family: "Outfit-Medium";
    font-size: var(--font-sm);
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--vcc-shadow-grey);
    background: #C5CACF;
    margin-bottom: 20px;
    align-self: flex-start;
}

.prog-courses__title {
    font-size: var(--font-h2);
    color: var(--vcc-midnight-violet);
    line-height: 120%;
    margin-bottom: 12px;
}

.prog-courses__subtitle, .prog-courses__subtitle p{
    font-family: "Outfit-Light";
    font-size: var(--font-p);
    color: var(--vcc-shadow-grey);
    line-height: 150%;
    margin-bottom: 24px;
}

.prog-courses__label {
    font-family: "Outfit-semibold";
    font-size: var(--font-p);
    color: var(--vcc-shadow-grey);
    line-height: 150%;
    margin-bottom: 24px;
}

/* Accordion — inherits shared .prog-accordion styles */
.prog-courses__accordion {
    border-top: 1px solid var(--vcc-state-grey-light);
    margin-bottom: 24px;
}

/* Load more / Show less */
.prog-courses__load-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid var(--vcc-state-grey-light);
    color: var(--vcc-midnight-violet);
    font-family: "Outfit-SemiBold";
    font-size: var(--font-sm);
    padding: 12px 24px;
    border-radius: 2px;
    cursor: pointer;
    align-self: flex-start;
    transition: border-color 0.2s ease, color 0.2s ease;
}

    .prog-courses__load-more:hover {
        /*border-color: var(--vcc-midnight-violet);*/
    }
/* ====================================================================
   COLLEGE CLINIC
   ==================================================================== */

.prog-clinic {
    background: #E6E2E9;
    overflow: hidden;
}

/*
   Desktop grid — 2 columns:
     col 1: photo spanning both rows, full height cover
     col 2 row 1: body-top (title + lead)
     col 2 row 2: body-bottom (desc + list + link)
*/
.prog-clinic__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 0;
    min-height: 480px;
}

/* Photo — col 1, spans both rows, true full-height cover */
.prog-clinic__photo {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: stretch;
    overflow: hidden;
    position: relative;
}

    .prog-clinic__photo img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .prog-clinic__overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(230deg, rgba(0, 0, 0, 0.08) 22.93%, rgba(0, 0, 0, 0.40) 100%);
        pointer-events: none;
        z-index: 1;
    }
/* body-top — col 2, row 1 */
.prog-clinic__body-top {
    grid-column: 2;
    grid-row: 1;
    padding: 64px 48px 24px 48px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* body-bottom — col 2, row 2 */
.prog-clinic__body-bottom {
    grid-column: 2;
    grid-row: 2;
    padding: 0 48px 64px 48px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.prog-clinic__title {
  
    font-size: var(--font-h2);
    color: var(--vcc-midnight-violet);

}

.prog-clinic__lead {
    font-family: "Outfit-Light";
    font-size: var(--font-lead);
    color: var(--Shadow-Grey, #272932);
    line-height: var(--lh-lead);
}

.prog-clinic__desc, .prog-clinic__desc p {
    color: var(--vcc-shadow-grey);
    margin-bottom: 24px;
}

.prog-clinic__desc ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .prog-clinic__desc li{
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding-left: 8px; /* indent */
        font-family: "Outfit-Light";
        font-size: var(--font-p);
        line-height: var(--lh-p);
        color: var(--vcc-shadow-grey);
    }

        .prog-clinic__desc li::before {
            content: '·';
            flex-shrink: 0;
            font-size: 28px; /* bigger bullet */
            color: var(--vcc-shadow-grey);
            line-height: 0.85; /* vertically align with text */
        }
.prog-clinic__link-line {
    font-family: "Outfit-Light";
    font-size: var(--font-p);
    color: var(--vcc-shadow-grey);
    line-height: var(--lh-p);
}

.prog-clinic__link {
    font-family: "Outfit-Light";
    font-size: var(--font-p);
    color: var(--vcc-shadow-grey);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ====================================================================
   WHY CHOOSE + TESTIMONIALS
   ==================================================================== */

.prog-why {
    background: var(--vcc-snow);
    padding: 48px 0;
}

.prog-why__eyebrow-wrap {
    margin-bottom: 24px;
}

.prog-why__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 22px 0 15px;
    font-family: "Outfit-Medium";
    font-size: 15px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--vcc-shadow-grey);
    background: #C5CACF;
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}

.prog-why__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.prog-why__title {
    color: var(--vcc-midnight-violet);
    margin-bottom: 12px;
}

.prog-why__subtitle, .prog-why__subtitle p {
    font-family: "Outfit-Light";
    font-size: 18px;
    color: var(--vcc-shadow-grey);
    margin-bottom: 20px;
    line-height: 150%;
}

.prog-why__desc, .prog-why__desc p{
    font-family: "Outfit-Light";
    font-size: var(--font-p);
    color: var(--vcc-shadow-grey);
    line-height: 155%;
    margin-bottom: 24px;
}

 .prog-why__desc ul{
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .prog-why__desc li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding-left: 8px;
        font-family: "Outfit-Light";
        font-size: var(--font-p);
        color: var(--vcc-shadow-grey);
        line-height: 145%;
    }

        .prog-why__desc li::before {
            content: '·';
            flex-shrink: 0;
            font-size: 28px;
            color: var(--vcc-shadow-grey);
            line-height: 0.85;
        }

.prog-why__cta-text {
    font-family: "Outfit-Light";
    font-size: var(--font-p);
    color: var(--vcc-shadow-grey);
    line-height: 155%;
}

.prog-why__cta-link {
    font-family: "Outfit-Light";
    font-size: var(--font-p);
    color: var(--vcc-shadow-grey);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Video */
.prog-why__video {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 2px;
    background: #111;
    margin-bottom: 16px;
}

    .prog-why__video img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.85;
        display: block;
    }

.prog-why__video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

    .prog-why__video-play:hover {
        transform: translate(-50%, -50%) scale(1.08);
    }

    .prog-why__video-play svg {
        width: 18px;
        height: 18px;
        fill: var(--vcc-carmine);
        margin-left: 3px;
    }

.prog-why__video-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 14px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    color: rgba(255, 255, 255, 0.90);
}

.prog-why__video-name {
    font-family: "Outfit-SemiBold";
    font-size: 13px;
}

.prog-why__video-title {
    font-family: "Outfit-Light";
    font-size: 12px;
    font-style: italic;
}

/* Testimonials */
.prog-testimonials {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.prog-testimonial {
    background: linear-gradient(0deg, rgba(44, 18, 36, 0.10) 0%, rgba(44, 18, 36, 0.10) 100%), #FBF9FF;
    border: 1px solid var(--vcc-state-grey-light);
    padding: 24px;
    border-radius: 2px;
    position: relative;
}

.prog-testimonial__quote {
    font-family: "Outfit-Light";
    font-size: var(--font-p);
    color: var( --vcc-shadow-grey);
    line-height: var(--lh-p);
    margin-bottom: 10px;
   /* padding-right: 32px; */
}
.prog-testimonial p {
    font-family: "Outfit-Light";
    color: var(--vcc-shadow-grey);
    line-height: var(--lh-p);
    margin-bottom: 24px;
    /*padding-right: 32px;*/
}

.prog-testimonial__attr {
    font-family: "Outfit-Regular";
    font-size: var(--font-sm);
    color: var(--vcc-shadow-grey);
    display: block;
    max-width: 350px;
}




.prog-testimonial .testimonial-icon {
    position: absolute;
    bottom: 8px;
    right: 16px;
    display: block;
    width: 48px;
    height: 48px;
    aspect-ratio: 1/1;
    /*    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='49' height='48' viewBox='0 0 49 48' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.0527 8.00012C28.0524 8.00031 27.3623 32.5462 5.55275 40.0001C3.61527 40.4845 1.20835 39.0918 2.86622 37.1759L3.04005 36.9894C3.07856 36.9503 7.4336 32.5208 8.55275 29.5001C-2.94628 26.4999 -0.948266 8.00024 12.0527 8.00012ZM37 8.00012C52.9999 8.00012 52.3099 32.5462 30.5 40.0001C28.5626 40.4842 26.156 39.0916 27.8135 37.1759L27.9873 36.9894C27.9873 36.9894 32.3759 32.5342 33.5 29.5001C22.0015 26.4996 23.9995 8.00061 37 8.00012ZM12.0527 9.42883C6.39645 9.42889 3.13933 13.3897 2.53029 17.8195C1.91553 22.2923 4.03527 26.8455 8.91408 28.1183L10.4414 28.5167L9.89259 29.9962C9.23738 31.7648 7.71129 33.8025 6.47462 35.2941C5.8358 36.0646 5.23428 36.7357 4.79298 37.214C4.57211 37.4534 4.3902 37.6462 4.26271 37.7794C4.19926 37.8457 4.14908 37.8979 4.11427 37.9337C4.097 37.9515 4.08275 37.966 4.07326 37.9757L4.05568 37.9933C3.87255 38.1787 3.79527 38.3081 3.76271 38.3781C3.85148 38.4556 4.03999 38.5642 4.33009 38.6251C4.60493 38.6828 4.90152 38.6813 5.16798 38.6212C15.5627 35.0399 20.7438 27.4782 21.5645 21.0245C21.9769 17.7804 21.2894 14.8773 19.7188 12.8185C18.1735 10.7931 15.657 9.42888 12.0527 9.42883ZM37 9.42883C31.3438 9.42908 28.0865 13.3897 27.4776 17.8195C26.8628 22.2922 28.9828 26.8453 33.8613 28.1183L35.3887 28.5167L34.8399 29.9962C34.1846 31.7649 32.6586 33.8024 31.4219 35.2941C30.783 36.0647 30.1815 36.7357 29.7402 37.214C29.5193 37.4535 29.3375 37.6462 29.21 37.7794C29.1464 37.8458 29.0963 37.8979 29.0615 37.9337C29.0442 37.9516 29.03 37.966 29.0205 37.9757L29.0029 37.9933C28.8196 38.1789 28.7424 38.3082 28.71 38.3781C28.7987 38.4555 28.9875 38.5641 29.2774 38.6251C29.5521 38.6828 29.8488 38.6813 30.1152 38.6212C40.5101 35.04 45.6911 27.4783 46.5117 21.0245C46.9242 17.7802 46.2367 14.8774 44.666 12.8185C43.1207 10.7931 40.6043 9.42883 37 9.42883Z' fill='%23272932'/%3E%3C/svg%3E");*/
    background-image: url("/Files/templates/main-2026/images/icons/quotes.svg");
}

/* ====================================================================
   PATHWAY / PLAR
   ==================================================================== */

.prog-pathway {
    background: #E6E2E9;
    overflow: hidden;
}

/*
   Desktop grid — 2 columns:
     col 1 row 1: body-top  (title + lead)
     col 1 row 2: body-bottom (desc paragraphs)
     col 2      : photo spanning both rows, full-height cover
*/
.prog-pathway__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 0;
    min-height: 480px;
}

/* Photo — col 2, spans both rows, true full-height cover */
.prog-pathway__photo {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: stretch;
    overflow: hidden;
    position: relative;
}

    .prog-pathway__photo img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Overlay — matches Figma: light top-right → darker bottom-left */
.prog-pathway__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(230deg, rgba(0, 0, 0, 0.08) 22.93%, rgba(0, 0, 0, 0.40) 100%);
    pointer-events: none;
    z-index: 1;
}

/* body-top — col 1, row 1 */
.prog-pathway__body-top {
    grid-column: 1;
    grid-row: 1;
    padding: 64px var(--wrapper-padding) 24px var(--wrapper-padding);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* body-bottom — col 1, row 2 */
.prog-pathway__body-bottom {
    grid-column: 1;
    grid-row: 2;
    padding: 0 var(--wrapper-padding) 64px var(--wrapper-padding);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.prog-pathway__title {
    font-size: var(--font-h2);
    color: var(--vcc-midnight-violet);
}

.prog-pathway__lead {
    font-family: "Outfit-Light";
    font-size: var(--font-lead);
    color: var(--Shadow-Grey, #272932);
    line-height: var(--lh-lead);
}

.prog-pathway__desc,
.prog-pathway__desc p {
    color: var(--vcc-shadow-grey);
    margin-bottom: 0;
}

    .prog-pathway__desc p + p {
        margin-top: 16px;
    }


/* ====================================================================
   FAQ
   ==================================================================== */

.prog-faq {
    background: var(--vcc-snow);
}

.prog-faq__layout {
    display: grid;
    grid-template-columns: 30% 70%;
    grid-template-rows: auto 1fr;
    align-items: flex-start;
    min-height: calc(100vh - 80px);
    max-width: 1440px;
    margin: 0 auto;
}

/* Desktop: photo spans both rows on the left */
.prog-faq__photo-col {
    grid-column: 1;
    grid-row: 1 / 3;
    position: sticky;
    top: 0;
    height: calc(100vh - 80px);
    align-self: flex-start;
}

.prog-faq__photo-sticky {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .prog-faq__photo-sticky img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Desktop: body-top (eyebrow + title) — col 2 row 1 */
.prog-faq__body-top {
    grid-column: 2;
    grid-row: 1;
    padding: 64px var(--wrapper-padding) 0 var(--wrapper-padding);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Desktop: body-bottom (accordions) — col 2 row 2 */
.prog-faq__body-bottom {
    grid-column: 2;
    grid-row: 2;
    padding: 24px var(--wrapper-padding) 72px var(--wrapper-padding);
}

.prog-faq__eyebrow {
    display: inline-flex;
    align-items: center;
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    height: 32px;
    padding: 0 22px 0 16px;
    font-family: "Outfit-Medium";
    font-size: var(--font-sm);
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--vcc-shadow-grey);
    background: #C5CACF;
    align-self: flex-start;
}

.prog-faq__title {
    font-size: var(--font-h2);
    color: var(--vcc-midnight-violet);
    margin: 0;
}

.prog-faq__accordions {
    border-top: 1px solid var(--vcc-state-grey-light);
}
/* ====================================================================
   CTA BANNER
   ==================================================================== */

/* ── Section shell ──────────────────────────────────────────── */
.prog-cta {
    position: relative;
    overflow: hidden;
    min-height: 240px; /* desktop will grow with content */
    display: flex;
    align-items: stretch;
}

/* ── Layer 1 — program photo, right 857px of 1440px ─────────── */
/*   Figma: image is 857px wide, right-aligned inside 1440px     */
/*   = right 59.5% of the section. We pin it right so it never   */
/*   bleeds left of the overlay. object-fit: cover only within    */
/*   that 60% container, so zoom is minimal.                      */
.prog-cta__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 30%; /* occupies right ~60% ≈ 857/1440 */
    z-index: 0;
}

    .prog-cta__bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        display: block;
    }

/* ── Layer 2 — left overlay (dark navy V-shape graphic) ─────── */
.prog-cta__ol-left {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url('/files/templates/main-2026/images/programs_cta_bg_left_desktop.webp');
    background-size: auto 100%; /* scale to section height, no stretch */
    background-position: left center;
    background-repeat: no-repeat;
}

/* ── Layer 3 — right overlay (lighter graphic) ──────────────── */
.prog-cta__ol-right {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image: url('/files/templates/main-2026/images/programs_cta_bg_right_desktop.webp');
    background-size: auto 100%;
    background-position: right center;
    background-repeat: no-repeat;
}

/* ── Layer 4 — content ──────────────────────────────────────── */
.prog-cta__content {
    position: relative;
    z-index: 3;
    padding: 48px var(--wrapper-padding, 48px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    max-width: 650px; /* Figma: W Fixed 600px */
}

/* ── Typography ─────────────────────────────────────────────── */
.prog-cta__title {
    color: var(--Snow, #FBF9FF);
    margin:0 0 24px 0;
}

.prog-cta__name {
    display: block;
    color: rgba(251, 249, 255, 0.50); /* Figma: rgba(251,249,255,0.50) */
}

.prog-cta__desc {
    color: var(--vcc-white);
    margin: 0 0 24px 0;
}

/* ── Button ─────────────────────────────────────────────────── */
.prog-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--vcc-carmine, #BE1E2D);
    color: var(--vcc-white, #fff);
    font-family: "Outfit-SemiBold";
    font-size: 14px;
    padding: 8px 12px 8px 16px;
    text-decoration: none;
    align-self: flex-start;
    transition: background 0.2s ease;
    cursor: pointer;
}

    .prog-cta__btn:hover {
        background: var(--vcc-carmine-dark, #9e1825);
        color: var(--vcc-white, #fff);
        text-decoration: none;
    }

    .prog-cta__btn svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
/* ====================================================================
   RESPONSIVE - Mobile — ≤1024px  
   ==================================================================== */
@media (max-width: 1024px) {


    .prog-hero__stats  {
        
        grid-template-columns: repeat(2, 1fr);
      
    }
    .prog-overview {
        padding: 24px 0;
    }
    .prog-testimonial__attr {
        max-width: 240px;
    }

}

/* ====================================================================
   RESPONSIVE - Tablet ONLY — 769px–1024px
   ==================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    main.program-page {
    --wrapper-padding: 24px;
    }


    .prog-overview__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto; /* 3 rows now */
        gap: 24px;
    }
    .prog-overview__lead p {
        margin-bottom: 0px;
    }
    .prog-overview__body-top {
        grid-column: 1 / 3;
        grid-row: 1;
        padding: 0;
    }

    .prog-overview__images {
        grid-column: 1;
        grid-row: 2;
        position: static;
        top: auto;
        align-self: start;
    }

    /* Dissolve body-bottom — children join the outer grid directly */
    .prog-overview__body-bottom {
        display: contents;
    }

    /* desc sits in col 2 row 2 — next to image */
    .prog-overview__desc {
        grid-column: 2;
        grid-row: 2;
        margin-bottom: 0;
    }
        .prog-overview__desc ul,
        .prog-overview__desc ol {
            padding-left: 20px;
        }
    /* tags span full width in their own row 3 */
    .prog-overview__tags {
        grid-column: 1 / 3;
        grid-row: 3;
        flex-direction: row;
    }

    .prog-overview__img-wrap {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    
}

/* ====================================================================
   RESPONSIVE - Mobile — ≤768px  
   ==================================================================== */

@media (max-width: 768px) {

    main.program-page {
        --wrapper-padding: 24px;
    }

    .prog-hero__bg-overlay {
        background-image: url('/files/templates/main-2026/images/programs_hero_bg_mobile.webp');
        background-size: contain;
    }

    /* --- Hero desktop layers — hidden --- */
    .prog-hero__bg-photo {
        display: none;
    }

    /* --- Mobile img — shown full width --- */
    .prog-hero__img-mobile {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
        min-height: 250px;
        margin-top: 70px;
    }

    /* --- Hero section resets --- */
    .prog-hero {
        min-height: unset;
        background: var(--vcc-snow);
    }

    .prog-hero__inner {
        padding-top: 28px;
        padding-bottom: 0;
    }

    .prog-hero__content {
        margin-top: 0;
        margin-bottom: 0;
        max-width: 100%;
        padding-bottom: 28px;
    }

    /* Title + subtitle on snow background — dark text */
    .prog-hero__title {
        font-size: 28px;
        line-height: 120%;
        color: var(--vcc-midnight-violet);
        margin-bottom: 14px;
    }

    .prog-hero__subtitle {
        font-size: 20px;
        color: var(--vcc-shadow-grey);
        font-weight: 300;
        line-height: 130%; /* 26px */
        letter-spacing: 0.4px;
        text-shadow: none;
    }

    /* Cards — stack vertically */
    .prog-hero__stats {
        grid-template-columns: 1fr;
        gap: 8px;
        padding-bottom: 32px;
        border-radius: 2px;
    }

    .prog-hero__stat {
        min-height: unset;
        padding: 20px;
    }
    .prog-overview {
        background: url('../images/program_overview_bg.webp') top center / 100% auto no-repeat, linear-gradient(0deg, rgba(44, 18, 36, 0.10) 0%, rgba(44, 18, 36, 0.10) 100%), #FBF9FF;
    }

    .prog-overview__eyebrow, .prog-courses__eyebrow, .prog-admissions__eyebrow, .prog-why__eyebrow, .prog-faq__eyebrow {
        margin-left: calc(-1 * var(--wrapper-padding));
        padding: 0 22px 0 24px;
    }
    
    /* Other sections — single column */
    .prog-overview__grid {
        display: flex;
        flex-direction: column;
        min-height: unset;
        gap: 24px;
    }

    /* natural order: body-top(1) → images(2) → body-bottom(3) */
    .prog-overview__body-top {
        order: 1;
        padding: 0;
    }

    .prog-overview__images {
        order: 2;
        width: 100%;
        position: static;
        height: auto;
        align-self: auto;
    }

    .prog-overview__body-bottom {
        order: 3;
        padding: 0;
    }

    .prog-overview__img-wrap {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .prog-overview__title {
    }

    .prog-overview__lead {
        font-size: 20px;
        font-style: normal;
        font-weight: 300;
        line-height: 130%; /* 26px */
        letter-spacing: 0.4px;
    }

        .prog-overview__lead p {
            font-size: 20px;
            margin-bottom: 0;
        }

    .prog-overview__tags {
        flex-direction: column;
    }

  

    .prog-recognition {
        padding: 48px 0;
    }

    .prog-recognition__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .prog-recognition__left {
        padding: 0;
    }

    .prog-recognition__title {
    }

    .prog-admissions__grid,
    .prog-courses__grid,
    .prog-clinic__grid,
    .prog-why__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

  
    .prog-admissions__layout {
        flex-direction: column;
        min-height: unset;
    }

    .prog-admissions__content {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .prog-admissions__content-inner {
        padding: 48px var(--wrapper-padding) 48px var(--wrapper-padding);
    }

    /* Photo fully hidden on mobile */
    .prog-admissions__photo-col {
        display: none;
    }


    .prog-admissions__title {
        
    }

    .prog-admissions__subtitle {
        
    }

    /* Accordion wrapper */
    .prog-admissions__accordions {
        
    }
    .prog-recognition__item {
       
        padding: 16px 8px;
  
    }
    .prog-admissions__cta {
        display: flex;
        justify-content: space-between;
        align-self: stretch; /* full width */
        width: 100%;
       
    }

    .prog-careers__header {
        text-align: left; /* left-aligned on mobile per Figma */
    }

    .prog-careers__subtitle, .prog-careers__subtitle  p{
        margin: 0;
        font-size: 20px;
        font-style: normal;
        font-weight: 300;
        line-height: 130%; /* 26px */
        letter-spacing: 0.4px;
    }

    .prog-careers__list li {
        padding: 16px 16px;
        font-size: 16px;
    }

    .prog-careers__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .prog-careers__photo {
        position: static;
    }

    .prog-careers__jobs {
        padding: 0;
    }

    .prog-courses__layout {
        flex-direction: column; /* stacks — video on top, content below */
        min-height: unset;
    }

    /* Video shows above content on mobile, natural height */
    .prog-courses__media {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
        position: static;
        height: auto;
    }

    .prog-courses__media-inner {
        width: 100%;
        height: auto;
        aspect-ratio: 7 / 9;
        position: relative;
    }

    .prog-courses__preview-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .prog-courses__content {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .prog-courses__content-inner {
        padding: 48px var(--wrapper-padding);
    }

    .prog-clinic__grid {
        display: flex;
        flex-direction: column;
        min-height: unset;
        padding: 48px 24px 0 24px;
        gap: 24px;
    }

    .prog-clinic__body-top {
        order: 1;
        padding: 0;
        gap: 12px;
    }

    .prog-clinic__photo {
        order: 2;
        width: 100%;
        aspect-ratio: 4 / 3;
        position: relative;
        align-self: auto;
    }

    .prog-clinic__body-bottom {
        order: 3;
        padding: 0;
        gap: 16px;
    }

 

    .prog-clinic__lead {

        letter-spacing: 0.4px;
       
    }
    .prog-why {
        padding: 48px 0;
    }
    .prog-why__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .prog-why__title {
        font-size: 24px;
    }

    .prog-testimonial__attr {
        max-width: 236px;
    }
    .prog-pathway__grid {
        display: flex;
        flex-direction: column;
        min-height: unset;
        padding: 48px 24px;
        gap: 24px;
    }

    .prog-pathway__body-top {
        order: 1;
        padding: 0;
        gap: 12px;
    }

    .prog-pathway__photo {
        order: 2;
        width: 100%;
        aspect-ratio: 4 / 3;
        position: relative;
        align-self: auto;
    }

    .prog-pathway__body-bottom {
        order: 3;
        padding: 0;
        gap: 16px;
    }

    .prog-pathway__lead {
        letter-spacing: 0.4px;
    }

    /* FAQ mobile — follows prog-pathway pattern */
    .prog-faq__layout {
        display: flex;
        flex-direction: column;
        min-height: unset;
        padding: 48px 24px;
        gap: 24px;
    }

    .prog-faq__body-top {
        order: 1;
        padding: 0;
    }

    .prog-faq__photo-col {
        order: 2;
        position: relative;
        top: auto;
        height: auto;
        width: 100%;
        aspect-ratio: 4 / 3;
        flex: 0 0 auto;
        max-width: 100%;
    }

    .prog-faq__photo-sticky {
        height: 100%;
    }

    .prog-faq__body-bottom {
        order: 3;
        padding: 0;
    }

    

    .prog-faq__title {
        margin-bottom: 0;
    }


    .prog-cta {
        flex-direction: column;
        min-height: unset;
    }

    /* Hide desktop overlay layers on mobile */
    .prog-cta__ol-left,
    .prog-cta__ol-right {
        display: none;
    }

    /* Image block — natural height, full-width */
    .prog-cta__bg {
        position: relative; /* pull back into flow */
        inset: auto;
        width: 100%;
        aspect-ratio: 16 / 9; /* natural auto-height image block */
        flex-shrink: 0;
        z-index: 0;
    }

        .prog-cta__bg img {
            object-position: center center;
        }

        /* Mobile single overlay — sits on top of image block */
        .prog-cta__bg::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url('/files/templates/main-2026/images/programs_cta_bg_mobile.webp');
            background-size: cover;
            background-position: center;
            z-index: 1;
        }

    /* Content block — below image, dark bg, 24px padding */
    .prog-cta__content {
        position: relative;
        z-index: 1;
        background: linear-gradient(180deg, #272932 0%, #272932 36.06%);
        padding: 24px; /* Figma: 24px padding */
        max-width: none;
        width: 100%;
        align-items: stretch;
    }

    .prog-cta__title {
        margin: 0 0 16px 0;
    }

    .prog-cta__desc
     {
      
        margin: 0 0 16px 0;
    }


    .prog-cta__btn {
        align-self: stretch;
        justify-content: space-between;
    
    }

}
/* end ≤768px */

@media (max-width: 375px) {

    .prog-testimonial__attr {
        max-width: 205px;
    }

}

/* ====================================================================
   YOUTUBE MODAL
   ==================================================================== */

.yt-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

    .yt-modal:not([hidden]) {
        opacity: 1;
    }

    .yt-modal[hidden] {
        display: none;
    }

.yt-modal__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vcc-white);
    transition: background 0.2s ease;
}

    .yt-modal__close:hover {
        background: rgba(255, 255, 255, 0.28);
    }

    .yt-modal__close svg {
        width: 20px;
        height: 20px;
    }

.yt-modal__frame {
    width: 90vw;
    max-width: 960px;
    aspect-ratio: 16 / 9;
}

    .yt-modal__frame iframe {
        width: 100%;
        height: 100%;
        border-radius: 2px;
    }