/* =====================================================
   FORE School of Management — theme layer
   Loads AFTER style.css / responsive.css and remaps the
   reference build's brand colours to FORE's palette,
   then styles the components added for FORE.

     red     #aa0023 / #e30513  ->  FORE blue  #0f7ec3
     dk red  #8b021e            ->  deep blue  #0b4a75
     indigo  #0a0852            ->  navy       #10233f
   ===================================================== */

:root {
    --fore-blue: #0f7ec3;
    --fore-blue-deep: #0b4a75;
    --fore-navy: #10233f;
    --fore-gold: #f5b301;
    --fore-cream: #f6f8fb;
    --fore-ink: #131820;
    --fore-blue-soft: #e8f4fb;
    --fore-gold-soft: #fff6dc;
    --fore-border: #d8e5ef;
}

body {
    color: var(--fore-ink);
    background: var(--fore-cream);
}

::selection {
    color: #fff;
    background: var(--fore-blue);
}

/* ---------- Responsive placement highlights infographic ---------- */
.internshipSection {
    padding: clamp(40px, 5vw, 72px) 0 !important;
    overflow: hidden;
}

    .internshipSection .container-fluid {
        display: block !important;
        padding-right: clamp(16px, 4vw, 64px) !important;
        padding-left: clamp(16px, 4vw, 64px) !important;
    }

    .internshipSection h3 {
        margin: 0 0 clamp(28px, 4vw, 48px) !important;
        text-align: center !important;
        font-size: clamp(30px, 3vw, 48px) !important;
        line-height: 1.15 !important;
    }

        .internshipSection h3::after {
            content: "";
            display: block;
            width: 80px;
            height: 4px;
            margin: 14px auto 0;
            border-radius: 999px;
            background: var(--fore-blue);
        }

    .internshipSection .internshipInner {
        display: none !important;
    }

.placementHighlightsViewport {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto clamp(44px, 6vw, 80px);
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: clamp(12px, 1.5vw, 20px);
    scrollbar-width: thin;
    scrollbar-color: var(--fore-blue) #dcebf5;
    -webkit-overflow-scrolling: touch;
}

    .placementHighlightsViewport:focus-visible {
        outline: 3px solid var(--fore-blue);
        outline-offset: 5px;
    }

.placementHighlightsGraphic {
    position: relative;
    width: 100%;
    min-width: 720px;
    aspect-ratio: 2025 / 605;
    margin: 0;
    overflow: hidden;
    border-radius: inherit;
    background: #07386f;
    box-shadow: 0 16px 40px rgba(6, 32, 69, .18);
}

    .placementHighlightsGraphic img {
        position: absolute;
        top: -2.226%;
        left: -1.105%;
        width: 102.21%;
        max-width: none;
        height: auto;
        display: block;
        transform: none;
    }

@media (max-width: 767px) {
    .internshipSection {
        padding: 34px 0 48px !important;
    }

        .internshipSection h3 {
            margin-bottom: 24px !important;
            font-size: clamp(28px, 9vw, 36px) !important;
        }

    .placementHighlightsViewport {
        margin-bottom: 44px;
        border-radius: 14px;
    }

    .placementHighlightsGraphic {
        min-width: 700px;
    }
}

/* Responsive admissions banner carousel */
.banner {
    position: relative;
    min-height: 100vh !important;
    padding: 0 !important;
    overflow: hidden;
    background: var(--fore-navy) !important;
}

.admissionHeroCarousel,
.admissionHeroTrack,
.admissionHeroSlide,
.admissionHeroSlide picture {
    position: absolute;
    inset: 0;
}

.admissionHeroCarousel {
    z-index: 0;
    overflow: hidden;
    background: var(--fore-navy);
}

.admissionHeroSlide {
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: opacity .8s ease, visibility .8s ease;
}

    .admissionHeroSlide.is-active {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .admissionHeroSlide img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center;
    }

.admissionHeroControls {
    position: absolute;
    z-index: 8;
    right: clamp(24px, 4vw, 64px);
    bottom: 76px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.admissionHeroArrow {
    display: grid;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 50%;
    color: #fff;
    background: rgba(16,35,63,.78);
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    transition: transform .2s ease, background-color .2s ease;
}

    .admissionHeroArrow:hover,
    .admissionHeroArrow:focus-visible {
        color: var(--fore-navy);
        background: var(--fore-gold);
        transform: translateY(-2px);
    }

.admissionHeroDots {
    display: flex;
    gap: 8px;
}

    .admissionHeroDots button {
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
    }

        .admissionHeroDots button::before {
            content: "";
            width: 9px;
            height: 9px;
            border-radius: 999px;
            background: rgba(255,255,255,.58);
            transition: width .25s ease, background-color .25s ease;
        }

        .admissionHeroDots button.is-active::before {
            width: 16px;
            background: var(--fore-gold);
        }

@media (min-width: 992px) {
    .frm {
        position: absolute !important;
        z-index: 20;
        top: clamp(165px, 10vw, 180px) !important;
        right: clamp(22px, 2vw, 36px) !important;
        width: min(360px, 31vw) !important;
        max-width: 360px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .admissionHeroControls {
        right: auto;
        left: clamp(22px, 2vw, 36px);
        bottom: 82px;
    }
}

@media (max-width: 991px) {
    .banner {
        min-height: 100vh !important;
    }

    .admissionHeroControls {
        right: 18px;
        bottom: 70px;
    }

    .frm {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: min(calc(100% - 28px), 620px) !important;
        max-width: 620px !important;
        margin: 24px auto 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 767px) {
    /* Full-page hero at every breakpoint -- this now agrees with the
       third-party widget's own ".banner { min-height: 100vh }" instead of
       fighting it, so the higher-specificity "body .banner" bump is no
       longer needed, but is kept for stability against load-order changes. */
    body .banner {
        min-height: 100vh !important;
    }

    .admissionHeroSlide img {
        object-position: center top;
    }

    .admissionHeroControls {
        right: 50%;
        bottom: 18px;
        transform: translateX(50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .admissionHeroSlide,
    .admissionHeroArrow,
    .admissionHeroDots button {
        transition: none !important;
    }
}

/* Embedded enquiry-form heading: override the widget's late-loaded theme. */
.foreFormWidget #ee-form-2 .ee-form-header {
    padding: 22px 18px 16px !important;
    text-align: center !important;
}

.foreFormWidget #ee-form-2 .ee-form-heading,
.foreFormWidget #ee-form-2 .ee-form-heading center,
.foreFormWidget #ee-form-2 .ee-form-heading p {
    margin: 0 !important;
    color: #fff !important;
    font-family: "jiotyperegular", Arial, sans-serif !important;
    font-size: clamp(20px, 1.7vw, 24px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -.01em !important;
    text-align: center !important;
}

    .foreFormWidget #ee-form-2 .ee-form-heading::after {
        content: "";
        display: block;
        width: 46px;
        height: 3px;
        margin: 10px auto 0;
        border-radius: 999px;
        background: var(--fore-gold);
    }

/* Consent checkbox reads as cramped at the widget's default 13px size with
   baseline alignment -- give it room to breathe and align with the first text line. */
.foreFormWidget #ee-form-2 .check-box-field label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
}

    .foreFormWidget #ee-form-2 .check-box-field label input[type="checkbox"] {
        flex-shrink: 0 !important;
        width: 17px !important;
        height: 17px !important;
        margin: 1px 0 0 !important;
    }

    .foreFormWidget #ee-form-2 .check-box-field label span {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
    }

/* ---------- Admission caution modal ---------- */
body.caution-modal-open {
    overflow: hidden;
}

.cautionModal[hidden] {
    display: none;
}

.cautionModal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(16px, 4vw, 48px);
    overflow-y: auto;
    isolation: isolate;
}

.cautionModal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 25, 50, .84);
    backdrop-filter: blur(9px) saturate(.8);
    animation: cautionFadeIn .28s ease both;
}

.cautionModal .cautionModal__card {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(220px, 34%) 1fr;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    margin: auto;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(245, 179, 1, .88);
    border-top: 6px solid var(--fore-gold);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 32px 100px rgba(0, 17, 43, .48), 0 2px 0 rgba(255, 255, 255, .08) inset;
    animation: cautionCardIn .38s cubic-bezier(.2, .8, .2, 1) both;
}

.cautionModal__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    padding: 46px 34px 38px;
    overflow: hidden;
    color: #fff;
    text-align: center;
    background: var(--fore-navy);
}

    .cautionModal__brand::after {
        content: "";
        position: absolute;
        inset: auto -54px -70px auto;
        width: 220px;
        height: 220px;
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 50%;
        box-shadow: 0 0 0 38px rgba(15, 126, 195, .08), 0 0 0 76px rgba(15, 126, 195, .05);
        pointer-events: none;
    }

.cautionModal__logoWrap {
    width: min(100%, 218px);
    margin-bottom: 30px;
    padding: 13px 18px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

    .cautionModal__logoWrap img {
        display: block;
        width: 100%;
        height: auto;
    }

.cautionModal__noticeIcon {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    color: var(--fore-gold);
    font-size: 30px;
    background: rgba(15, 126, 195, .18);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .035);
}

.cautionModal__label {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    margin: 0;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--fore-gold);
    color: var(--fore-navy);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.35;
    text-align: center;
}

.cautionModal__brandDivider {
    width: 100%;
    height: 1px;
    margin: 24px 0 22px;
    background: rgba(255, 255, 255, .18);
}

.cautionModal__merit {
    margin: 0;
    color: #fff;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -.01em;
}

    .cautionModal__merit strong {
        display: block;
        color: var(--fore-gold);
        font-weight: 850;
    }

.cautionModal__official {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, .68);
    font-size: 13px;
    line-height: 1.45;
}

.cautionModal__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(46px, 5vw, 72px) clamp(34px, 5vw, 72px) clamp(38px, 4vw, 56px);
    background: #fff;
}

    .cautionModal__content h3 {
        margin: 0 0 22px !important;
        color: var(--fore-navy) !important;
        font-size: clamp(34px, 3.3vw, 48px) !important;
        line-height: 1.06 !important;
        letter-spacing: -.035em;
        text-align: left !important;
    }

    .cautionModal__content #cautionModalDescription {
        max-width: none;
        margin: 0;
        color: #4f5d6f;
        font-size: clamp(15px, 1.25vw, 17px);
        line-height: 1.72;
        text-align: justify;
        text-justify: inter-word;
    }

        .cautionModal__content #cautionModalDescription b {
            color: var(--fore-navy);
            font-weight: 850;
        }

.cautionModal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid #dfe8f1;
}

    .cautionModal__footer .byOrder {
        margin: 0;
        color: var(--fore-navy);
        font-size: 15px;
        line-height: 1.45;
        text-align: left !important;
    }

        .cautionModal__footer .byOrder span {
            display: block;
            color: #748296;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

.cautionModal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    background: var(--fore-gold);
    color: var(--fore-navy);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

    .cautionModal__close:hover,
    .cautionModal__close:focus-visible {
        background: #ffc72c;
        transform: rotate(4deg) scale(1.06);
        outline: 3px solid rgba(245, 179, 1, .28);
    }

.cautionModal__confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    width: max-content;
    margin: 0;
    padding: 12px 26px;
    border: 0;
    border-radius: 999px;
    background: var(--fore-blue);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(15, 126, 195, .23);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

    .cautionModal__confirm i {
        font-size: 18px;
        transition: transform .2s ease;
    }

    .cautionModal__confirm:hover,
    .cautionModal__confirm:focus-visible {
        background: var(--fore-blue-deep);
        transform: translateY(-2px);
        box-shadow: 0 16px 30px rgba(15, 126, 195, .3);
        outline: 3px solid rgba(13, 111, 174, .22);
    }

        .cautionModal__confirm:hover i,
        .cautionModal__confirm:focus-visible i {
            transform: translateX(4px);
        }

@keyframes cautionFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes cautionCardIn {
    from {
        opacity: 0;
        transform: translateY(28px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 575px) {
    .cautionModal {
        align-items: end;
        padding: 10px;
    }

        .cautionModal .cautionModal__card {
            display: block;
            width: 100%;
            max-height: calc(100dvh - 20px);
            padding: 0 !important;
            border-radius: 20px 20px 14px 14px;
        }

    .cautionModal__brand {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        min-height: 0;
        padding: 22px 66px 22px 20px;
        text-align: left;
    }

    .cautionModal__logoWrap {
        grid-column: 1;
        width: 150px;
        margin: 0;
        padding: 8px 11px;
        border-radius: 8px;
    }

    .cautionModal__noticeIcon,
    .cautionModal__brandDivider,
    .cautionModal__official {
        display: none;
    }

    .cautionModal__label {
        grid-column: 1 / -1;
        justify-self: start;
        margin-top: 16px;
        padding: 7px 11px;
        font-size: 9px;
    }

    .cautionModal__merit {
        grid-column: 2;
        grid-row: 1;
        margin-left: 14px;
        font-size: 14px;
        text-align: right;
    }

    .cautionModal__content {
        padding: 26px 20px 22px;
    }

    .cautionModal__eyebrow {
        margin-bottom: 7px;
        font-size: 10px;
    }

    .cautionModal__content h3 {
        margin-bottom: 14px !important;
        font-size: 30px !important;
    }

    .cautionModal__content #cautionModalDescription {
        font-size: 14px;
        line-height: 1.56;
    }

    .cautionModal__footer {
        display: block;
        margin-top: 20px;
        padding-top: 18px;
    }

        .cautionModal__footer .byOrder {
            margin-bottom: 16px;
            font-size: 14px;
        }

    .cautionModal__close {
        top: 10px;
        right: 10px;
    }

    .cautionModal__confirm {
        width: 100%;
    }
}

@media (min-width: 576px) and (max-width: 900px) {
    .cautionModal .cautionModal__card {
        grid-template-columns: 220px 1fr;
    }

    .cautionModal__brand {
        min-height: 480px;
        padding: 38px 22px 30px;
    }

    .cautionModal__logoWrap {
        width: 176px;
    }

    .cautionModal__content {
        padding: 46px 32px 34px;
    }

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

@media (prefers-reduced-motion: reduce) {
    .cautionModal__backdrop,
    .cautionModal .cautionModal__card,
    .cautionModal__confirm i {
        animation: none;
        transition: none;
    }
}

#theforeedge,
#programmes,
#application,
#placement,
#global,
#faq,
#formbanner {
    scroll-margin-top: 120px;
}

/* ---------- Logo sizing ---------- */
.fore-logo {
    height: 74px;
    width: auto;
    max-width: 100%;
}

.fore-logo-footer {
    height: 64px;
    width: auto;
    background: #fff;
    padding: 8px 12px;
    border-radius: 8px;
}

/* ---------- Header ---------- */
header.sticky {
    background: #fff !important;
    box-shadow: 0 6px 24px rgba(2, 6, 23, .08);
}

header .navbar-nav .nav-link {
    color: var(--fore-navy) !important;
    font-weight: 600;
}

    header .navbar-nav .nav-link:hover {
        color: var(--fore-blue) !important;
    }

.headApply h5 {
    color: #64748b !important;
}

.headApply p a {
    color: var(--fore-blue) !important;
    font-weight: 700;
}

/* ---------- Hero banner ----------
   The reference background is a photo of that institute's own building, so it
   cannot be reused here. This uses FORE's Gurugram campus photograph with a
   navy scrim so the white headline keeps its contrast. */
.banner {
    background: linear-gradient(100deg, rgba(16,35,63,.94) 0%, rgba(16,35,63,.86) 42%, rgba(16,35,63,.38) 78%, rgba(16,35,63,.30) 100%), url(../fore/1F7A3311.jpg) no-repeat center right !important;
    background-size: cover !important;
    min-height: 880px;
    /* bottom padding clears the date pill, which the base stylesheet pins at
       bottom:-40px and which would otherwise sit on top of the last cards */
    padding: 170px 0 200px 0;
}

/* The reference artwork ships red arrow glyphs. Where the arrow sits on a white
   circle, rotate its hue to FORE blue; where it sits on a coloured circle the
   base stylesheet already knocks it out to white, so leave that filter alone
   and only restyle the circle. */
.exploreBtn span img,
.applyBtn span img,
.foreFormBtns span img {
    filter: hue-rotate(196deg) saturate(1.35);
}

.bannerText {
    max-width: 720px;
}

    .bannerText h1 {
        font-size: 42px;
        line-height: 130%;
        margin-bottom: 18px;
    }

    .bannerText h2 {
        font-size: 56px;
        line-height: 125%;
        margin-bottom: 22px;
    }

        .bannerText h2 span {
            color: var(--fore-gold) !important;
        }

.homeBox-1 {
    border-color: var(--fore-blue) !important;
    max-width: 560px;
}

.hBLeft {
    background: var(--fore-blue) !important;
    width: 38%;
}

    .hBLeft:before {
        display: none;
    }

.hBRight {
    width: 62%;
    padding-left: 16px;
}

.homeBox-2 {
    border-color: var(--fore-blue) !important;
    gap: 12px;
}

    .homeBox-2 em {
        color: var(--fore-blue-deep) !important;
    }

    .homeBox-2 img {
        width: 34px;
        height: auto;
    }

.homeBox-new {
    border-color: var(--fore-gold) !important;
    background: rgba(255, 248, 225, .95) !important;
}

.homeBoxFlex {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

    .homeBoxFlex .homeBox-2 {
        flex: 1 1 260px;
    }

/* the reference layout floats a cut-out student photo here; FORE has none */
.banner-pic {
    display: none !important;
}

/* ---------- Enquiry card ----------
   .frm is absolutely positioned by the base stylesheet so the panel floats over
   the right of the hero (418px wide). These rules dress that slot as a card. */
.frm {
    min-height: auto !important;
    top: 200px !important;
}

.foreForm {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

    .foreForm h3 {
        color: var(--fore-navy);
        font-size: 25px;
        font-weight: 700;
        line-height: 1.25;
        margin-bottom: 12px;
    }

    .foreForm p {
        color: #5b6472;
        font-size: 14px;
        line-height: 1.6;
        margin: 0 0 22px;
    }

.foreFormBtns {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .foreFormBtns a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 12px 12px 24px;
        border-radius: 70px;
        font-weight: 600;
        font-size: 15px;
        text-decoration: none;
        transition: transform .2s ease, background .2s ease;
    }

        .foreFormBtns a:hover {
            transform: translateY(-2px);
        }

    .foreFormBtns .ffPrimary {
        background: var(--fore-blue);
        color: #fff;
    }

        .foreFormBtns .ffPrimary span {
            width: 38px;
            height: 38px;
            background: #fff;
            border-radius: 40px;
            display: grid;
            place-items: center;
            flex: 0 0 38px;
        }

            .foreFormBtns .ffPrimary span img {
                width: 16px;
                height: auto;
            }

    .foreFormBtns .ffGhost {
        border: 1px solid var(--fore-blue);
        color: var(--fore-blue);
        justify-content: center;
        padding: 12px 24px;
    }

/* On tablet and below the panel stops floating and sits under the hero. */
@media (max-width: 1200px) {
    .frm {
        position: static !important;
        max-width: 620px;
        margin: 0 auto;
        padding: 40px 16px 10px;
        right: auto !important;
        top: auto !important;
    }
}

/* ---------- Career / Edge slider ---------- */
.careerSliderSection {
    background: linear-gradient(135deg, var(--fore-navy) 0%, var(--fore-blue-deep) 100%) !important;
    max-width: min(95%, 1760px);
    overflow: hidden;
}

    .careerSliderSection .heading h3 {
        color: #fff !important;
    }

    .careerSliderSection .heading p {
        color: rgba(255,255,255,.85) !important;
    }

.careerSlider {
    width: 100%;
    padding-right: 30px;
    padding-left: 30px;
    box-sizing: border-box;
    overflow: hidden;
}

    .careerSlider .owl-carousel,
    .careerSlider .owl-stage-outer {
        width: 100%;
        max-width: 100%;
    }

    .careerSlider .owl-stage-outer {
        overflow: hidden;
    }

    .careerSlider .owl-item {
        min-width: 0;
    }

    .careerSlider .owl-dots {
        margin-top: 24px;
    }

@media (max-width: 991px) {
    .careerSliderSection {
        max-width: calc(100% - 24px);
    }

    .careerSlider {
        margin-top: 30px;
        padding-right: 20px;
        padding-left: 20px;
    }
}

@media (max-width: 599px) {
    .careerSliderSection {
        max-width: calc(100% - 20px);
    }

    .careerSlider {
        padding-right: 14px;
        padding-left: 14px;
    }
}

/* The base stylesheet's 550px floor leaves large empty space below shorter
   card copy; the content (icon + heading + description) never needs that much. */
.careerFull {
    min-height: 0;
}

    .careerFull::before {
        background: linear-gradient(124.86deg, var(--fore-gold) 2.51%, #ffffff 46.1%, var(--fore-blue) 100%) !important;
    }

    .careerFull h4 span {
        color: var(--fore-gold) !important;
    }

.exploreBtn a {
    color: var(--fore-navy) !important;
    font-weight: 700;
}

.exploreBtn:hover a,
.exploreBtn:focus-within a {
    color: var(--fore-blue-deep) !important;
}

.exploreBtn a:focus-visible {
    outline: 3px solid rgba(245, 179, 1, .6);
    outline-offset: 5px;
    border-radius: 999px;
}

.exploreBtn span {
    background: var(--fore-gold) !important;
}

/* ---------- Programme slider ----------
   The reference slides ship dark artwork behind the copy; FORE's campus
   photographs are bright daylight shots, so the white text needs its own
   scrim to stay legible. */
.masterPic {
    position: relative;
}

    .masterPic::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(16,35,63,.93) 0%, rgba(16,35,63,.82) 45%, rgba(16,35,63,.45) 75%, rgba(16,35,63,.30) 100%);
        pointer-events: none;
    }

.masterText {
    z-index: 2;
}

    .masterText h3 span {
        color: var(--fore-gold) !important;
    }

.newFlag {
    font-style: normal;
    background: var(--fore-gold);
    color: var(--fore-navy);
    padding: 4px 14px;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    display: inline-block;
}

.progFacts {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 22px;
}

    .progFacts span {
        background: rgba(255,255,255,.14);
        border: 1px solid rgba(255,255,255,.28);
        color: #fff;
        border-radius: 40px;
        padding: 8px 18px;
        font-size: 14px;
    }

        .progFacts span b {
            color: var(--fore-gold);
        }

/* ---------- Learning / EDGE ---------- */
.learningSection {
    background: var(--fore-cream) !important;
}

    .learningSection .heading h3 {
        color: var(--fore-navy) !important;
    }

.instLogo img {
    max-height: 78px;
    width: auto;
}

.learning h4,
.learningMobile h4,
.edge-1 h4, .edge-2 h4, .edge-3 h4, .edge-4 h4,
.lmbRight h4 {
    color: var(--fore-blue) !important;
}

.lmbLeft {
    background: var(--fore-navy) !important;
    color: var(--fore-gold) !important;
}

/* ---------- FORE Edge showcase: photo-filled wordmark + 4 flanking cards ---------- */
.learningInner {
    margin: 0 !important;
}

.foreEdgeShowcase {
    position: relative;
    display: grid;
    grid-template-columns: minmax(230px, 300px) minmax(320px, 720px) minmax(230px, 300px);
    grid-template-rows: auto auto;
    column-gap: clamp(24px, 4vw, 48px);
    row-gap: 56px;
    align-items: start;
    justify-content: center;
    max-width: 1360px;
    margin: 0 auto;
    padding: 10px 0 20px;
}

    .foreEdgeShowcase .instLogo {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        margin: 0 0 2px;
    }

.foreEdgeWordmark {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    margin-top: 30px;
    text-align: center;
    overflow: hidden;
}

    .foreEdgeWordmark span {
        display: inline-block;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(64px, 10.5vw, 168px);
        font-weight: 700;
        line-height: 1;
        letter-spacing: .04em;
        background-image: linear-gradient(rgba(16, 35, 63, .58), rgba(16, 35, 63, .3)), url("../fore/1F7A3311.webp");
        background-repeat: no-repeat;
        background-size: 220% auto;
        background-position: 0% 45%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        animation: foreWordmarkPan 22s ease-in-out infinite alternate;
    }

@keyframes foreWordmarkPan {
    from {
        background-position: 0% 40%;
    }

    to {
        background-position: 100% 60%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .foreEdgeWordmark span {
        animation: none;
        background-position: 35% 45%;
    }
}

.foreEdgeCard {
    position: relative;
    padding: 4px 10px;
}

.foreEdgeCard--tl {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    text-align: left;
}

.foreEdgeCard--bl {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    text-align: left;
}

.foreEdgeCard--tr {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
    text-align: left;
}

.foreEdgeCard--br {
    grid-column: 3;
    grid-row: 2;
    align-self: start;
    text-align: left;
}

.foreEdgeCard__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.foreEdgeCard__icon {
    display: grid;
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    place-items: center;
    font-size: 21px;
}

.foreEdgeCard--tl .foreEdgeCard__icon {
    background: var(--fore-blue-soft);
    color: var(--fore-blue);
}

.foreEdgeCard--tr .foreEdgeCard__icon {
    background: #e1f5ee;
    color: #12a484;
}

.foreEdgeCard--bl .foreEdgeCard__icon {
    background: #fdf0dc;
    color: #e8930c;
}

.foreEdgeCard--br .foreEdgeCard__icon {
    background: #ece4fb;
    color: #7c4fe0;
}

.foreEdgeCard h4 {
    margin: 6px 0 3px;
    font-size: 20px;
    font-weight: 750;
    line-height: 1.25;
}

.foreEdgeCard__tag {
    margin: 0;
    color: #64748b;
    font-size: 13.5px;
    font-weight: 600;
}

.foreEdgeCard p:last-child {
    max-width: 320px;
    margin: 0;
    color: #536174;
    font-size: 15px;
    line-height: 1.6;
}

/* Vertical connector: top cards drop down toward the wordmark, bottom cards
   rise up toward it -- matching how the reference actually anchors each
   card to the letters (a vertical run, not a diagonal one). */
.foreEdgeCard::after {
    position: absolute;
    z-index: 3;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(16, 35, 63, .08);
    content: "";
}

.foreEdgeCard::before {
    position: absolute;
    z-index: 2;
    width: 3px;
    content: "";
}

.foreEdgeCard--tl::before, .foreEdgeCard--tl::after,
.foreEdgeCard--bl::before, .foreEdgeCard--bl::after {
    right: 24px;
}

.foreEdgeCard--tr::before, .foreEdgeCard--tr::after,
.foreEdgeCard--br::before, .foreEdgeCard--br::after {
    left: 24px;
}

.foreEdgeCard--tl::before, .foreEdgeCard--tr::before {
    top: 100%;
    height: 16px;
}

.foreEdgeCard--tl::after, .foreEdgeCard--tr::after {
    top: calc(100% + 12px);
}

.foreEdgeCard--bl::before, .foreEdgeCard--br::before {
    bottom: 100%;
    height: 16px;
}

.foreEdgeCard--bl::after, .foreEdgeCard--br::after {
    bottom: calc(100% + 12px);
}

.foreEdgeCard--tl::before, .foreEdgeCard--tl::after, .foreEdgeCard--bl::before, .foreEdgeCard--bl::after {
    background: var(--fore-blue);
}

.foreEdgeCard--tr::before, .foreEdgeCard--tr::after, .foreEdgeCard--br::before, .foreEdgeCard--br::after {
    background: #12a484;
}

.foreEdgeCard--bl::before, .foreEdgeCard--bl::after {
    background: #e8930c;
}

.foreEdgeCard--br::before, .foreEdgeCard--br::after {
    background: #7c4fe0;
}

@media (max-width: 1024px) {
    .foreEdgeShowcase {
        display: none;
    }
}

/* ---------- Placements ---------- */
.internshipSection {
    background: #fff !important;
}

    .internshipSection h3 {
        color: var(--fore-navy) !important;
    }

.ladyPic img {
    max-width: 900px;
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(2,6,23,.12);
    margin: 0 auto;
}

.internshipBox {
    background: linear-gradient(160deg, var(--fore-navy) 0%, var(--fore-blue-deep) 100%) !important;
}

.internshipBoxShowHover {
    background: var(--fore-blue) !important;
}

.ctc h5 {
    color: var(--fore-gold) !important;
}

.ctcHeading h4 span {
    color: var(--fore-gold) !important;
}

/* Key recruiters -- fast continuous marquee, ported class-for-class from the
   live admissions site (JS-driven translateX loop in the inline script below,
   not a CSS animation) rather than the old orbiting-circle layout this project
   used to have. */
.recruiterMarquee {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto clamp(44px, 6vw, 80px);
}

.waveText h4 {
    color: var(--fore-navy);
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    padding-top: 10px;
}

    .waveText h4 .foreHeadingLead {
        color: var(--fore-blue);
    }

.logo-strip {
    overflow: hidden;
    margin-top: 24px;
}

.logo-viewport {
    overflow: hidden;
}

.logo-track {
    display: flex;
    align-items: center;
    gap: 24px;
    will-change: transform;
}

.logo-item {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 140px;
    height: 70px;
    padding: 8px;
    border-radius: 8px;
    background: rgba(0, 158, 224, .25);
}

    .logo-item img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

/* Accredited-by and International Outreach reuse the recruiter marquee
   mechanics but sit on a plain background like the rest of the
   accreditation strip, not the tinted recruiter tiles -- and size logos the
   same way the original accreditation grid did (auto width, capped height)
   instead of forcing every wildly-different logo into one uniform box. */
:is(#accreditation-logos, #outreach-logos).logo-strip {
    margin-top: 0;
}

:is(#accreditation-logos, #outreach-logos) .logo-item {
    width: auto;
    height: 96px;
    padding: 8px 18px;
    background: transparent;
}

    :is(#accreditation-logos, #outreach-logos) .logo-item img {
        max-height: 80px;
        width: auto;
    }

/* Exact breakpoints/sizes copied from the live site's computed styles --
   140x70 is the base/fallback (641-767px), not the mobile size. */
@media (max-width: 640px) {
    .logo-track {
        gap: 12px;
    }

    .logo-item {
        width: 110px;
        height: 56px;
    }
}

@media (min-width: 768px) {
    .logo-item {
        width: 160px;
        height: 80px;
    }
}

@media (min-width: 1024px) {
    .logo-item {
        width: 160px;
        height: 100px;
    }
}

/* ---------- Application section ---------- */
.applicationSection {
    background: var(--fore-cream) !important;
}

    .applicationSection .heading h3,
    .applicationSection .heading h4 {
        color: var(--fore-navy) !important;
    }

/* Icon-led application journey */
.processPic.foreProcess {
    width: 100%;
    margin: 44px auto 0;
}

.foreProcess ol {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 12px;
    list-style: none;
}

    .foreProcess ol::before {
        position: absolute;
        z-index: 0;
        top: 117px;
        right: 7%;
        left: 7%;
        height: 2px;
        background: var(--fore-blue);
        content: "";
        transform: scaleX(0);
        transform-origin: left center;
    }

.foreProcess.is-visible ol::before {
    animation: foreJourneyLine 1s cubic-bezier(.22,.7,.2,1) .15s forwards;
}

.foreProcess li {
    position: relative;
    z-index: 1;
    padding: 0 14px;
    text-align: center;
    opacity: 0;
    transform: translateY(18px);
}

.foreProcess.is-visible li {
    animation: foreJourneyStep .55s ease forwards;
}

    .foreProcess.is-visible li:nth-child(1) {
        animation-delay: .18s;
    }

    .foreProcess.is-visible li:nth-child(2) {
        animation-delay: .31s;
    }

    .foreProcess.is-visible li:nth-child(3) {
        animation-delay: .44s;
    }

    .foreProcess.is-visible li:nth-child(4) {
        animation-delay: .57s;
    }

    .foreProcess.is-visible li:nth-child(5) {
        animation-delay: .70s;
    }

.foreProcess .processIcon {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    margin: 0 auto 20px;
    border: 0;
    border-radius: 50%;
    background: var(--process-frame);
    box-shadow: 0 10px 22px rgba(16,35,63,.1);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .foreProcess .processIcon::before {
        position: absolute;
        z-index: -1;
        inset: 0;
        border-radius: 50%;
        /* background: var(--process-soft); */
        content: "";
        transform: scaleY(0);
        transform-origin: bottom center;
    }

    .foreProcess .processIcon > img {
        width: 42px;
        max-height: 42px;
        object-fit: contain;
        transition: transform .3s ease;
    }

/* Per-step micro-animations hinting at the actual action, looping continuously
   after the entrance settles. */
.foreProcess.is-visible li:nth-child(1) .processIcon > img {
    animation: foreIconPop 2.6s ease-in-out 2.4s infinite;
}

@keyframes foreIconPop {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.14);
    }
}

.foreProcess li:nth-child(2) .processIcon::after {
    position: absolute;
    z-index: -1;
    inset: 3px;
    border: 2px solid var(--process-frame);
    border-radius: 50%;
    content: "";
    opacity: 0;
}

.foreProcess.is-visible li:nth-child(2) .processIcon::after {
    animation: foreSignalPing 2.4s cubic-bezier(.3,.6,.4,1) 2.4s infinite;
}

@keyframes foreSignalPing {
    0% {
        transform: scale(1);
        opacity: .65;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.foreProcess li:nth-child(3) .processIcon::after {
    position: absolute;
    left: 50%;
    bottom: 15px;
    width: 15px;
    height: 2px;
    background: var(--process-frame);
    border-radius: 2px;
    content: "";
    transform: translateX(-50%);
    opacity: 0;
}

.foreProcess.is-visible li:nth-child(3) .processIcon::after {
    animation: foreCursorBlink 1.1s steps(1) 2.6s infinite;
}

@keyframes foreCursorBlink {
    0%, 49% {
        opacity: .85;
    }

    50%, 100% {
        opacity: 0;
    }
}

.foreProcess li:nth-child(4) .processIcon::after {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.85) 48%, transparent 64%);
    background-size: 220% 220%;
    background-position: -60% -60%;
    content: "";
    pointer-events: none;
    mix-blend-mode: soft-light;
}

.foreProcess.is-visible li:nth-child(4) .processIcon::after {
    animation: foreCardShine 2.8s ease-in-out 2.4s infinite;
}

@keyframes foreCardShine {
    0%, 30% {
        background-position: -60% -60%;
    }

    70%, 100% {
        background-position: 60% 60%;
    }
}

.foreProcess li:nth-child(5) .processIcon::after {
    position: absolute;
    left: 50%;
    bottom: 14px;
    width: 5px;
    height: 5px;
    background: var(--process-frame);
    border-radius: 50%;
    content: "";
    transform: translate(-50%, 0);
    opacity: 0;
}

.foreProcess.is-visible li:nth-child(5) .processIcon::after {
    animation: foreUploadDot 1.8s cubic-bezier(.3,.6,.3,1) 2.4s infinite;
}

@keyframes foreUploadDot {
    0% {
        transform: translate(-50%, 0);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -32px);
        opacity: 0;
    }
}

.foreProcess.is-visible li .processIcon::before {
    animation: foreIconFill .55s cubic-bezier(.22,.7,.2,1) forwards;
}

.foreProcess.is-visible li:nth-child(1) .processIcon::before {
    animation-delay: .78s;
}

.foreProcess.is-visible li:nth-child(2) .processIcon::before {
    animation-delay: 1.02s;
}

.foreProcess.is-visible li:nth-child(3) .processIcon::before {
    animation-delay: 1.26s;
}

.foreProcess.is-visible li:nth-child(4) .processIcon::before {
    animation-delay: 1.50s;
}

.foreProcess.is-visible li:nth-child(5) .processIcon::before {
    animation-delay: 1.74s;
}

@keyframes foreIconFill {
    0% {
        transform: scaleY(0);
    }

    100% {
        transform: scaleY(1);
    }
}

.foreProcess h5 {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 50px;
    margin: 0 0 26px;
    padding: 10px 14px;
    border: 2px solid var(--fore-blue);
    border-radius: 999px;
    background: #fff;
    color: var(--fore-navy);
    font-size: 17px;
    font-weight: 750;
    line-height: 1.2;
    box-shadow: 0 6px 18px rgba(16,35,63,.05);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

    .foreProcess h5::after {
        position: absolute;
        bottom: -17px;
        left: 50%;
        width: 38px;
        height: 3px;
        border-radius: 4px;
        background: var(--fore-blue);
        content: "";
        transform: translateX(-50%);
    }

.foreProcess p {
    max-width: 230px;
    margin: 0 auto;
    color: #536174;
    font-size: 14px;
    line-height: 1.55;
}

.foreProcess li:hover .processIcon,
.foreProcess li:focus-within .processIcon {
    box-shadow: 0 14px 28px var(--process-glow);
    transform: translateY(-4px);
}

.foreProcess li:hover h5,
.foreProcess li:focus-within h5 {
    border-color: var(--fore-blue-deep);
    box-shadow: 0 10px 24px rgba(15,126,195,.12);
    transform: translateY(-3px);
}

@keyframes foreJourneyLine {
    to {
        transform: scaleX(1);
    }
}

@keyframes foreJourneyStep {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {
    .processPic.foreProcess {
        max-width: 720px;
        margin-top: 32px;
    }

    .foreProcess ol {
        display: block;
        padding: 0;
    }

        .foreProcess ol::before {
            top: 34px;
            right: auto;
            bottom: 48px;
            left: 34px;
            width: 2px;
            height: auto;
            transform: scaleY(0);
            transform-origin: top center;
        }

    .foreProcess.is-visible ol::before {
        animation-name: foreJourneyLineVertical;
    }

    .foreProcess li {
        display: grid;
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 0 18px;
        align-items: start;
        margin-bottom: 24px;
        padding: 0;
        text-align: left;
    }

    .foreProcess .processIcon {
        grid-row: 1 / 3;
        width: 68px;
        height: 68px;
        margin: 0;
    }

        .foreProcess .processIcon > img {
            width: 34px;
            max-height: 34px;
        }

    .foreProcess h5 {
        justify-content: start;
        min-height: 46px;
        margin: 0 0 12px;
        padding: 9px 20px;
        text-align: left;
    }

        .foreProcess h5::after {
            right: auto;
            bottom: -8px;
            left: 20px;
            width: 28px;
            transform: none;
        }

    .foreProcess p {
        max-width: none;
        margin: 0;
    }
}

@keyframes foreJourneyLineVertical {
    to {
        transform: scaleY(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .foreProcess ol::before,
    .foreProcess li,
    .foreProcess .processIcon,
    .foreProcess .processIcon::before,
    .foreProcess h5 {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    .foreProcess ol::before,
    .foreProcess li {
        opacity: 1;
    }

    .foreProcess .processIcon::before {
        transform: none !important;
    }
}

.applicationInner {
    background: linear-gradient(160deg, var(--fore-navy) 0%, var(--fore-blue-deep) 100%) !important;
}

    .applicationInner h4 {
        color: #fff !important;
    }

    .applicationInner .accordion-button.collapsed {
        color: #eaf2f8 !important;
        background: transparent !important;
    }

    .applicationInner .accordion-button:not(.collapsed) {
        color: #fff !important;
        background: rgba(255,255,255,.10) !important;
        box-shadow: none !important;
    }

    .applicationInner .accordion-body,
    .applicationInner .accordion-body li,
    .applicationInner .appBox p,
    .applicationInner .appBox b {
        color: #eaf2f8 !important;
    }

.appBox h5 {
    color: #fff !important;
}

.feesBox {
    background: var(--fore-blue-deep) !important;
}

.feesLeft {
    background: var(--fore-navy) !important;
    box-shadow: 0 0 30px 0 rgba(15,126,195,.55) !important;
}

.feesR h4,
.feesR h5 {
    color: var(--fore-gold) !important;
}

.feesRight a {
    color: #fff !important;
}

/* fee table */
.feeTableWrap {
    max-width: 900px;
    margin: 90px auto 0;
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 10px 34px rgba(2,6,23,.08);
}

    .feeTableWrap h4 {
        color: var(--fore-navy);
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        margin-bottom: 18px;
    }

.feeTable {
    width: 100%;
    border-collapse: collapse;
}

    .feeTable th,
    .feeTable td {
        padding: 14px 16px;
        border-bottom: 1px solid rgba(16,35,63,.10);
        text-align: left;
    }

    .feeTable th {
        background: rgba(15,126,195,.10);
        color: var(--fore-navy);
        font-weight: 700;
    }

        .feeTable td:last-child,
        .feeTable th:last-child {
            text-align: center;
            font-variant-numeric: tabular-nums;
        }

.feeNote {
    margin: 14px 0 0;
    font-size: 13px;
    color: #5b6472;
    text-align: center;
}

/* ---------- Campus tabs ---------- */
.learnSection {
    background: #fff !important;
}

    .learnSection .heading h3 {
        color: var(--fore-navy) !important;
    }

.tab.active h4 {
    color: var(--fore-blue) !important;
}

/* ---------- Campus gallery ---------- */
.campuslifeSection {
    background: var(--fore-navy) !important;
}

    .campuslifeSection h3 {
        color: var(--fore-gold) !important;
    }

/* ---------- Caution notice ---------- */
.campusSection {
    background: var(--fore-cream) !important;
    padding: 70px 5%;
}

.campusText {
    position: relative !important;
    max-width: 1100px;
    margin: 0 auto;
    background: #fff !important;
    border: 1px solid rgba(245,179,1,.55);
    border-left: 6px solid var(--fore-gold);
    border-radius: 16px !important;
    padding: 32px 36px !important;
    text-align: left !important;
    box-shadow: 0 10px 34px rgba(2,6,23,.07);
}

    .campusText h3 {
        color: #b45309 !important;
        font-size: 24px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: 14px;
    }

    .campusText p {
        color: #3f4855 !important;
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 10px;
    }

    .campusText .byOrder {
        font-weight: 700;
        color: var(--fore-navy) !important;
        margin: 0;
    }

/* ---------- FAQ ---------- */
.faqSection {
    background: #fff !important;
}

    .faqSection .heading h3 {
        color: var(--fore-navy) !important;
    }

.faqMenu .nav-link {
    color: var(--fore-navy) !important;
}

    .faqMenu .nav-link.active {
        background: var(--fore-blue) !important;
        border-color: var(--fore-blue) !important;
        color: #fff !important;
    }

.accordion-button:not(.collapsed) {
    background: var(--fore-blue) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.accordion-button.collapsed {
    color: var(--fore-navy) !important;
}

.accordion-button:focus {
    box-shadow: 0 0 0 .2rem rgba(15,126,195,.30) !important;
    border-color: var(--fore-blue) !important;
}

/* ---------- Closing CTA ---------- */
.getText {
    background: transparent !important;
}

    .getText h2 {
        color: var(--fore-navy) !important;
    }

.foreWord {
    color: var(--fore-blue) !important;
    font-weight: 800;
}

.applyBtn {
    background: var(--fore-blue) !important;
}

    .applyBtn a {
        color: #fff !important;
    }

    .applyBtn span {
        background: var(--fore-gold) !important;
    }

    .applyBtn:hover {
        background: var(--fore-gold) !important;
    }

        .applyBtn:hover a {
            color: var(--fore-navy) !important;
        }

/* ---------- Footer ---------- */
footer {
    background-color: var(--fore-navy) !important;
}

    footer p,
    footer .contact p,
    footer .qukLink a,
    footer .footer-links a {
        color: rgba(255,255,255,.86) !important;
    }

    footer h5.footer-heading {
        color: var(--fore-gold) !important;
    }

    footer .qukLink a:hover,
    footer .footer-links a:hover,
    footer .contact p a:hover {
        color: var(--fore-gold) !important;
    }

    footer .contact p a {
        color: rgba(255,255,255,.86) !important;
    }

/* ---------- Carousel dots / arrows ---------- */
.owl-theme .owl-dots .owl-dot span {
    border: 1px solid var(--fore-blue) !important;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--fore-blue) !important;
    border-color: var(--fore-blue) !important;
}

.careerCarouselNav .owl-prev:hover,
.careerCarouselNav .owl-next:hover,
.brightnessMindCarouselNav .owl-prev:hover,
.brightnessMindCarouselNav .owl-next:hover,
.lifelongNetworkCarouselNav .owl-prev:hover,
.lifelongNetworkCarouselNav .owl-next:hover {
    background: var(--fore-blue) !important;
}

.mobMenu .offcanvas-body ul li a:hover {
    color: var(--fore-blue) !important;
}

/* ---------- Accreditation and academic programme details ---------- */
/* Accredited by -- plain responsive grid, pixel-matched to the live admissions
   site (which has no carousel here at all; every logo is always visible). */
.accreditationStrip {
    padding: 48px 0;
    background: rgba(15, 126, 195, .11);
}

.accreditationInner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    text-align: center;
}

.accreditationHeading {
    margin-bottom: 48px;
}

    .accreditationHeading h2 {
        margin: 0;
        margin-bottom: 0 !important;
        color: rgb(30, 41, 59);
        font-size: 36px;
        font-weight: 600;
        line-height: 1.2;
    }

.accreditationBar {
    width: 80px;
    height: 4px;
    margin: 14px auto 0;
    border-radius: 9999px;
    background: var(--fore-blue);
}

@media (max-width: 767px) {
    .accreditationHeading h2 {
        font-size: 30px;
    }
}

/* International Outreach -- reuses the "Accredited by" strip's look, with a
   small eyebrow label above a scrolling logo marquee. */
.accreditationSubhead {
    margin: 0 0 28px;
    color: rgba(30, 41, 59, .6);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.academicProgrammes {
    padding: 54px 0 70px;
    background: #f8fbff;
}

.academicHeading {
    margin-bottom: 34px;
    text-align: center;
}

    .academicHeading h2 {
        position: relative;
        display: inline-block;
        margin: 0;
        padding-bottom: 14px;
        color: var(--fore-navy);
        font-size: clamp(32px, 3vw, 48px);
        font-weight: 700;
        line-height: 1.15;
    }

        .academicHeading h2 span {
            color: var(--fore-blue);
        }

        .academicHeading h2::after {
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 80px;
            height: 4px;
            border-radius: 4px;
            background: var(--fore-blue);
            content: "";
            transform: translateX(-50%);
        }

.compactHeading {
    margin-bottom: 38px;
}

.academicTabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 18px;
    margin-bottom: 24px;
}

.academicTab {
    padding: 13px 22px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--fore-navy);
    font-size: 17px;
    font-weight: 600;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

    .academicTab:hover,
    .academicTab:focus-visible {
        color: var(--fore-blue);
        outline: none;
    }

    .academicTab.active {
        background: var(--fore-blue);
        color: #fff;
        box-shadow: 0 8px 20px rgba(15,126,195,.2);
    }

.academicPanel {
    max-width: 1400px;
    margin: 0 auto;
}

    .academicPanel[hidden] {
        display: none;
    }

/* Programmes Offered -- card grid replacing the old 5-column table, which
   forced tiny cramped cells on anything narrower than a full desktop. */
.programmeGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.programmeBrochure {
    display: flex;
    justify-content: center;
    margin: clamp(32px, 4vw, 48px) 0 0;
}

.programmeBrochureBtn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 34px;
    border-radius: 999px;
    background: var(--fore-blue);
    color: #fff !important;
    font-weight: 700;
    font-size: clamp(15px, 1.1vw, 17px);
    text-decoration: none !important;
    box-shadow: 0 14px 30px rgba(15,126,195,.24);
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

    .programmeBrochureBtn:hover,
    .programmeBrochureBtn:focus-visible {
        color: #fff !important;
        background: var(--fore-blue-deep);
        transform: translateY(-3px);
        box-shadow: 0 20px 38px rgba(15,126,195,.32);
    }

    .programmeBrochureBtn:focus-visible {
        outline: 3px solid rgba(15,126,195,.35);
        outline-offset: 3px;
    }

    .programmeBrochureBtn i {
        font-size: 18px;
    }

@media (prefers-reduced-motion: reduce) {
    .programmeBrochureBtn {
        transition: none;
    }
}

/* Dark navy card with a gold-to-blue gradient outline and a centered outlined
   icon, matching the FORE Edge cards' established look elsewhere on the page
   (same border technique as .careerFull::before) so the two sections read as
   one visual language instead of two different card styles. */
.programmeCard {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 22px 26px;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--fore-navy) 0%, var(--fore-blue-deep) 100%);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}

    .programmeCard::before {
        position: absolute;
        z-index: 1;
        inset: 0;
        padding: 2px;
        border-radius: inherit;
        background: linear-gradient(124.86deg, var(--fore-gold) 2.51%, #ffffff 46.1%, var(--fore-blue) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        content: "";
        pointer-events: none;
    }

    .programmeCard:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(6, 20, 39, .35);
    }

.programmeCard__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.programmeCard__icon {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    color: var(--fore-gold);
    font-size: 34px;
}

.campusBadge {
    padding: 4px 14px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    color: rgba(255, 255, 255, .85);
    font-size: 11.5px;
    font-weight: 650;
}

.campusBadge--delhi,
.campusBadge--gurugram {
    background: rgba(255, 255, 255, .06);
}

.programmeCard__name {
    min-height: 50px;
    margin: 0 0 18px;
    color: #fff;
    font-size: 19px;
    font-weight: 750;
    line-height: 1.3;
}

.programmeCard__stats {
    display: flex;
    gap: 22px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.programmeCard__statValue {
    display: block;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}

.programmeCard__statLabel {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
}

.programmeCard__fee {
    margin-top: auto;
}

.programmeCard__feeLabel {
    display: block;
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
    font-weight: 650;
}

.programmeCard__feeAmount {
    display: block;
    margin-top: 4px;
    color: var(--fore-gold);
    font-size: 24px;
    font-weight: 800;
}

.programmeCard__feeWords {
    display: block;
    margin-top: 2px;
    color: #fff;
    font-size: 11.5px;
}

@media (max-width: 1024px) {
    .programmeGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .programmeGrid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .programmeCard {
        transition: none !important;
    }
}

.academicTableScroll {
    overflow-x: auto;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(16,35,63,.06);
}

.academicTable {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    background: #fff;
    color: var(--fore-navy);
    font-size: 16px;
}

    .academicTable th,
    .academicTable td {
        padding: 16px 18px;
        border-bottom: 1px solid #dbe3eb;
        text-align: left;
        vertical-align: middle;
    }

    .academicTable th {
        border: 0;
        background: #dfe7ff;
        font-weight: 700;
    }

    .academicTable tbody tr:nth-child(even) {
        background: #f7f9fb;
    }

    .academicTable tbody tr:last-child td {
        border-bottom: 0;
    }

    .academicTable td:first-child {
        font-weight: 600;
    }

    .academicTable td span {
        display: block;
        margin-top: 3px;
        font-weight: 400;
    }

.criteriaGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.criteriaCard,
.applicationFeeCard {
    border: 1px solid #dbe3eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(16,35,63,.05);
}

.criteriaCard {
    min-height: 196px;
    padding: 28px 30px;
}

    .criteriaCard h3,
    .applicationFeeCard h3 {
        margin: 0 0 14px;
        color: #4c43ff;
        font-size: 20px;
        font-weight: 700;
    }

    .criteriaCard ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .criteriaCard li {
        position: relative;
        margin: 0 0 10px;
        padding-left: 25px;
        line-height: 1.45;
    }

        .criteriaCard li:last-child {
            margin-bottom: 0;
        }

.checkList li::before,
.arrowList li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 800;
}

.checkList li::before {
    color: #09ad61;
    content: "\2713";
}

.arrowList li::before {
    color: #5267f8;
    content: "\25B6";
    font-size: 12px;
    top: 3px;
}

.applicationFeeCard {
    padding: 28px 4px 24px;
}

    .applicationFeeCard h3 {
        text-align: center;
    }

.feeOnlyTable th,
.feeOnlyTable td {
    width: 50%;
}

/* ---------- Responsive hero ---------- */
@media (max-width: 1080px) {
    .banner {
        min-height: 660px;
        padding-top: 150px;
    }

        .banner .bannerText h1 {
            font-size: 34px;
        }

        .banner .bannerText h2 {
            font-size: 42px;
        }
}

@media (max-width: 768px) {
    .academicProgrammes {
        padding: 40px 0;
    }

    .academicHeading {
        margin-bottom: 26px;
    }

    .academicTabs {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .academicTab {
        width: 100%;
    }

    .criteriaGrid {
        grid-template-columns: 1fr;
    }

    .criteriaCard {
        min-height: 0;
        padding: 22px 20px;
    }

    .academicTableScroll {
        overflow: visible;
        box-shadow: none;
    }

    .academicTable,
    .academicTable tbody,
    .academicTable tr,
    .academicTable td {
        display: block;
        width: 100%;
    }

        .academicTable thead {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }

        .academicTable tr {
            margin-bottom: 14px;
            padding: 10px 16px;
            border: 1px solid #dbe3eb;
            border-radius: 10px;
            background: #fff !important;
            box-shadow: 0 4px 12px rgba(16,35,63,.05);
        }

        .academicTable td {
            display: grid;
            grid-template-columns: minmax(110px, 40%) 1fr;
            gap: 10px;
            padding: 8px 0;
            border-bottom: 1px solid #edf1f5;
        }

            .academicTable td::before {
                color: #536174;
                content: attr(data-label);
                font-weight: 700;
            }

            .academicTable td:last-child {
                border-bottom: 0;
            }

    .applicationFeeCard {
        padding: 22px 14px 10px;
    }

    .feeOnlyTable td {
        width: 100%;
    }

    .banner {
        min-height: auto;
        /* the date pill stacks to ~224px tall here, so the copy needs that much
           clearance plus breathing room */
        padding: 130px 0 260px 0;
        background-position: center center !important;
    }

        .banner .bannerText h1 {
            font-size: 27px;
        }

        .banner .bannerText h2 {
            font-size: 34px;
        }

    .fore-logo {
        height: 54px;
    }

    .homeBoxFlex {
        gap: 10px;
    }
}

/* =====================================================
   Consolidated responsive layer
   These rules intentionally load last to neutralise fixed
   dimensions inherited from the reference stylesheet.
   ===================================================== */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

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

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

.heading h3,
.internshipSection h3,
.heading-campuslife h3 {
    font-size: clamp(30px, 3vw, 48px);
    line-height: 1.2;
}

.heading p {
    font-size: clamp(15px, 1.25vw, 20px);
}

/* Programme slides */
.masterSlider {
    width: calc(100% - clamp(20px, 5vw, 96px));
    max-width: 1760px;
    padding: clamp(28px, 4vw, 50px) 0;
    overflow: hidden;
}

.masterFull,
.masterPic {
    min-height: 680px;
}

    .masterPic img {
        width: 100%;
        height: 680px;
        object-fit: cover;
    }

.masterText {
    top: 50%;
    left: clamp(28px, 4.5vw, 76px);
    width: min(720px, 54vw);
    max-width: calc(100% - clamp(56px, 9vw, 152px));
    transform: translateY(-50%);
}

    .masterText h3 {
        font-size: clamp(34px, 3vw, 48px);
        margin-bottom: clamp(20px, 3vw, 40px);
    }

    .masterText h4 {
        font-size: clamp(24px, 2.1vw, 32px);
    }

    .masterText p {
        max-width: 66ch;
        font-size: clamp(15px, 1.2vw, 18px);
    }

.masterSlider .owl-dots {
    right: clamp(24px, 4vw, 64px);
    bottom: 26px;
    left: clamp(24px, 4vw, 64px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    width: auto;
}

.masterSlider .owl-theme .owl-dots .owl-dot {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 64px;
    box-sizing: border-box;
}

    .masterSlider .owl-theme .owl-dots .owl-dot button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 62px;
        padding: 10px 18px;
        color: #fff;
        font-size: clamp(14px, 1vw, 16px);
        line-height: 1.3;
        text-align: center;
        text-wrap: balance;
    }

/* Placement highlights */
@media (min-width: 1201px) {
    .internshipSection .container-fluid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(340px, 29vw);
        grid-template-rows: auto 1fr;
        column-gap: clamp(28px, 3vw, 54px);
        align-items: start;
        padding-right: clamp(28px, 4vw, 72px);
        padding-left: clamp(28px, 4vw, 72px);
    }

    .internshipSection h3 {
        grid-column: 1;
        grid-row: 1;
    }

    .internshipInner {
        grid-column: 1;
        grid-row: 2;
        max-width: none;
        min-width: 0;
    }

    .ladyPic {
        position: static;
        grid-column: 2;
        grid-row: 1 / 3;
        width: 100%;
        max-width: 540px;
        justify-self: end;
    }
}

.internshipInner,
.internshipInner #cat-3,
.internshipInner .owl-stage-outer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

    .internshipInner .owl-stage-outer {
        overflow: hidden;
    }

.internshipBox {
    min-height: clamp(390px, 31vw, 500px);
}

.internshipInner .owl-dots {
    margin-top: 22px;
}

@media (hover: none), (pointer: coarse) {
    .internshipBox {
        min-height: 0;
        cursor: default;
    }

    .internshipBoxShowHover {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        height: auto;
        margin: 20px -12px -12px;
        padding: 22px;
        visibility: visible;
        border-radius: 14px;
    }
}

@media (max-width: 1200px) {
    .masterFull,
    .masterPic,
    .masterPic img {
        min-height: 620px;
        height: 620px;
    }

    .masterText {
        left: 32px;
        width: min(680px, 70vw);
        max-width: calc(100% - 64px);
    }

    .internshipSection {
        padding: 40px 0 55px;
    }

        .internshipSection .container-fluid {
            padding-right: clamp(20px, 4vw, 48px);
            padding-left: clamp(20px, 4vw, 48px);
        }

    .ladyPic {
        position: relative;
        top: auto;
        right: auto;
        width: min(100%, 680px);
        margin: 0 auto 30px;
    }

    .internshipInner {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .masterSlider {
        width: calc(100% - 20px);
        padding: 20px 0 36px;
        border-radius: 14px;
    }

    .masterFull,
    .masterPic,
    .masterPic img {
        min-height: 700px;
        height: 700px;
    }

        .masterPic img {
            border-radius: 0;
        }

        .masterPic::after {
            background: rgba(16,35,63,.82);
        }

    .masterText {
        top: 94px;
        left: 0;
        width: 100%;
        max-width: 100%;
        padding: 0 20px 28px;
        transform: none;
    }

        .masterText h3 {
            font-size: clamp(28px, 8vw, 36px);
            margin-bottom: 20px;
        }

        .masterText h4 {
            font-size: clamp(21px, 6vw, 28px);
            line-height: 1.3;
        }

        .masterText p {
            font-size: 15px;
            line-height: 1.5;
        }

    .progFacts {
        gap: 8px;
    }

        .progFacts span {
            padding: 7px 12px;
            font-size: 12px;
        }

    .masterSlider .owl-dots {
        top: 10px;
        right: 12px;
        bottom: auto;
        left: 12px;
        display: flex;
        width: auto;
        overflow-x: auto;
        scrollbar-width: none;
    }

        .masterSlider .owl-dots::-webkit-scrollbar {
            display: none;
        }

    .masterSlider .owl-theme .owl-dots .owl-dot {
        flex: 0 0 auto;
        width: auto;
        min-width: 118px;
    }

    .internshipSection h3 {
        text-align: left;
    }

    .internshipBox {
        padding: 24px 20px;
    }
}

/* Application content and contact panel */
.applicationSection {
    padding-right: clamp(0px, 2vw, 28px);
    padding-left: clamp(0px, 2vw, 28px);
}

.applicationInner {
    padding-right: clamp(16px, 4vw, 60px);
    padding-left: clamp(16px, 4vw, 60px);
}

.feesBox {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 1500px !important;
    min-height: 0;
    margin: 40px auto 0;
    padding: 14px;
    border-radius: 34px;
}

.feesLeft {
    width: 100%;
    height: auto;
    min-height: 180px;
    padding: 22px;
    border-radius: 26px;
    flex-wrap: nowrap;
}

.feesL {
    flex: 0 0 34%;
    width: auto;
}

    .feesL img {
        width: 100%;
        max-width: 120px;
        margin: 0;
    }

.feesR {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding-left: 16px;
}

.feesLeft h5 {
    font-size: clamp(16px, 1.25vw, 20px);
    line-height: 1.25;
}

.feesLeft h4 {
    font-size: clamp(28px, 3vw, 48px);
    line-height: 1.1;
    white-space: normal;
}

.feesRight {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    width: 100%;
    padding: 18px 10px;
}

.feesRightInner {
    width: auto;
    min-width: 0;
    padding: 0 18px;
}

    .feesRightInner::before {
        display: none !important;
    }

    .feesRightInner + .feesRightInner {
        border-left: 1px solid rgba(255,255,255,.34);
    }

.feesIcon {
    width: 66px;
    height: 66px;
    margin-bottom: 14px;
}

    .feesIcon img {
        max-width: 34px;
        max-height: 34px;
    }

.feesRightInner p {
    overflow-wrap: anywhere;
    font-size: clamp(15px, 1.3vw, 20px);
    line-height: 1.35;
}

.feeTableWrap {
    margin-top: 40px;
}

/* Campus, FAQ and caution content */
.learnSection .tab-container,
.campusSlider,
.faqInner {
    max-width: 100%;
}

.learnPic img,
.campusImage img {
    width: 100%;
    object-fit: cover;
}

.campusText {
    width: min(100%, 1100px);
}

.faqTab,
.faqTab .accordion,
.faqTab .accordion-item {
    min-width: 0;
}

.accordion-button,
.accordion-body {
    overflow-wrap: anywhere;
}

/* Footer */
.main-footer {
    display: grid !important;
    grid-template-columns: 1.15fr 1fr 1fr .85fr;
    gap: clamp(28px, 3vw, 54px);
    padding: 58px clamp(20px, 4vw, 72px);
}

    .main-footer > div {
        width: auto !important;
        max-width: none !important;
    }

    .main-footer .logo-section .footer-logo {
        width: auto;
        max-width: 100%;
    }

    .main-footer .location img,
    .main-footer .contact img {
        flex: 0 0 26px;
        width: 26px !important;
        height: 26px;
        object-fit: contain;
    }

    .main-footer .contact {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

        .main-footer .contact p,
        .main-footer .contact a {
            min-width: 0;
            overflow-wrap: anywhere;
        }

    .main-footer .qukLink a {
        width: 100%;
    }

.footer-bottom {
    margin: 0 clamp(20px, 4vw, 72px);
    flex-wrap: wrap;
    row-gap: 10px;
}

    .footer-bottom p {
        white-space: nowrap;
    }

@media (max-width: 1100px) {
    .feesBox {
        grid-template-columns: 1fr;
        max-width: 900px !important;
        border-radius: 28px;
    }

    .feesLeft {
        min-height: 150px;
    }

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

@media (max-width: 767px) {
    .applicationSection {
        padding-right: 0;
        padding-left: 0;
    }

    .applicationInner {
        padding-right: 12px;
        padding-left: 12px;
    }

    .feesBox {
        width: calc(100% - 24px);
        padding: 10px;
        border-radius: 22px;
    }

    .feesLeft {
        min-height: 0;
        padding: 20px 16px;
        border-radius: 16px;
    }

    .feesL {
        flex-basis: 30%;
    }

    .feesR {
        padding-left: 12px;
    }

    .feesRight {
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
        padding: 8px 6px;
    }

    .feesRightInner {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        align-items: center;
        gap: 14px;
        padding: 16px 8px;
        text-align: left;
    }

        .feesRightInner + .feesRightInner {
            border-top: 1px solid rgba(255,255,255,.28);
            border-left: 0;
        }

    .feesIcon {
        width: 52px;
        height: 52px;
        margin: 0;
    }

        .feesIcon img {
            max-width: 28px;
            max-height: 28px;
        }

    .feesRightInner p {
        margin: 0;
        font-size: 15px;
        text-align: left;
    }

    .feeTableWrap {
        width: calc(100% - 24px);
        margin-top: 24px;
        padding: 20px 14px;
        overflow-x: auto;
    }

    .campusSection {
        padding: 42px 14px;
    }

    .campusText {
        padding: 24px 20px !important;
    }

    .main-footer {
        grid-template-columns: 1fr;
        gap: 34px;
        padding: 44px 20px 30px;
    }

        .main-footer .quick-links a {
            width: 100%;
            margin-bottom: 8px;
            padding-bottom: 12px;
        }

    .footer-bottom {
        flex-direction: column;
        gap: 14px;
        margin: 0 20px;
        text-align: center;
    }

        .footer-bottom p {
            white-space: normal;
        }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 18px;
    }
}

@media (max-width: 420px) {
    .feesLeft {
        align-items: center;
    }

    .feesL {
        flex-basis: 26%;
    }

    .feesLeft h4 {
        font-size: 26px;
    }

    .academicTable td {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .main-footer {
        padding-right: 16px;
        padding-left: 16px;
    }
}

/* ---------- Responsive closing CTA ---------- */
.getText {
    position: relative;
    width: min(calc(100% - 32px), 1320px);
    margin: clamp(56px, 7vw, 104px) auto !important;
    padding: clamp(54px, 7vw, 96px) clamp(18px, 4vw, 56px);
    overflow: hidden;
    border: 1px solid rgba(15, 126, 195, .12);
    border-radius: clamp(22px, 3vw, 40px);
    background: radial-gradient(circle at 14% 18%, rgba(15, 126, 195, .10), transparent 34%), radial-gradient(circle at 88% 82%, rgba(245, 179, 1, .13), transparent 30%), #fff !important;
}

    .getText::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: min(180px, 34%);
        height: 5px;
        border-radius: 0 0 999px 999px;
        background: linear-gradient(90deg, var(--fore-blue), var(--fore-gold));
        transform: translateX(-50%);
    }

    .getText h2 {
        position: relative;
        max-width: 1180px;
        margin: 0 auto !important;
        color: var(--fore-navy) !important;
        font-size: clamp(42px, 5.4vw, 82px) !important;
        line-height: .94 !important;
        letter-spacing: -.045em !important;
        text-wrap: balance;
    }

        .getText h2 + h2 {
            margin-top: clamp(8px, 1.5vw, 20px) !important;
        }

    body .getText h2.foreSectionTitle {
        margin: 0 auto !important;
    }

    .getText .getTextBtns {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 14px;
        margin: 28px auto 0;
    }

    .getText .applyBtn {
        width: auto;
        max-width: 100%;
        height: 58px;
        margin: 0;
        padding: 0;
        box-shadow: 0 14px 34px rgba(15, 126, 195, .24);
        transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    }

        .getText .applyBtn a {
            width: 100%;
            height: 100%;
            padding: 0 6px 0 26px;
            border-radius: inherit;
            white-space: nowrap;
            gap: 14px;
        }

        .getText .applyBtn:hover,
        .getText .applyBtn:focus-within {
            transform: translateY(-3px);
            box-shadow: 0 18px 42px rgba(15, 126, 195, .30);
        }

        .getText .applyBtn a:focus-visible {
            outline: 3px solid rgba(245, 179, 1, .55);
            outline-offset: 5px;
            border-radius: 999px;
        }

    .getText .applyBtn--secondary {
        border: 1px solid var(--fore-blue);
        background: rgba(255, 255, 255, .9) !important;
        box-shadow: none;
    }

        .getText .applyBtn--secondary a {
            color: var(--fore-blue) !important;
        }

        .getText .applyBtn--secondary a > span {
            flex-shrink: 0;
            background: var(--fore-blue-soft, #eaf5fc) !important;
            animation: none;
        }

        .getText .applyBtn--secondary:hover,
        .getText .applyBtn--secondary:focus-within {
            background: #edf7fd !important;
            box-shadow: 0 8px 20px rgba(15, 126, 195, .12);
        }

@media (max-width: 767px) {
    .getText {
        width: min(calc(100% - 24px), 620px);
        margin: 44px auto !important;
        padding: 52px 16px 48px;
        border-radius: 24px;
    }

        .getText .getTextBtns {
            margin-top: 24px;
        }

        .getText h2 {
            font-size: clamp(34px, 10.5vw, 54px) !important;
            line-height: .98 !important;
            letter-spacing: -.035em !important;
        }
}

@media (max-width: 575px) {
    .getText .getTextBtns {
        flex-direction: column;
        gap: 12px;
    }

    .getText .applyBtn {
        width: min(100%, 280px);
    }
}

@media (max-width: 390px) {
    .getText h2 {
        font-size: clamp(32px, 10vw, 44px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .getText .applyBtn {
        transition: none;
    }
}

/* Animated CTA arrows */
@keyframes foreArrowNudge {
    0%, 100% {
        transform: translateX(0);
    }

    45% {
        transform: translateX(5px);
    }

    65% {
        transform: translateX(2px);
    }
}

@keyframes foreArrowFlash {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 190, 0, 0);
    }

    45% {
        box-shadow: 0 0 0 7px rgba(255, 190, 0, .16), 0 0 22px rgba(255, 190, 0, .52);
    }
}

.exploreBtn a > span,
.applyBtn a > span {
    animation: foreArrowFlash 2s ease-in-out infinite;
}

    .headerApplyCta img,
    .exploreBtn a > span img,
    .applyBtn a > span img,
    .cautionModal__confirm i {
        animation: foreArrowNudge 1.35s ease-in-out infinite;
        will-change: transform;
    }

.headerApplyCta:hover img,
.headerApplyCta:focus-visible img,
.exploreBtn a:hover > span img,
.applyBtn a:hover > span img,
.cautionModal__confirm:hover i,
.cautionModal__confirm:focus-visible i {
    animation-duration: .62s;
}

@media (prefers-reduced-motion: reduce) {
    .exploreBtn a > span,
    .applyBtn a > span,
    .headerApplyCta img,
    .exploreBtn a > span img,
    .applyBtn a > span img,
    .cautionModal__confirm i {
        animation: none !important;
    }
}

/* ---------- Aligned, clickable admissions contact strip ---------- */
.feesBox {
    align-items: stretch;
}

.feesLeft {
    align-self: stretch;
}

.feesRight {
    align-items: stretch;
    height: 100%;
}

.feesRightInner {
    display: flex;
    min-height: 150px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 18px;
    color: #fff !important;
    text-align: center;
    text-decoration: none;
    transition: background-color .22s ease, transform .22s ease;
}

    .feesRightInner .feesIcon {
        flex: 0 0 auto;
        margin: 0;
        transition: transform .22s ease, box-shadow .22s ease;
    }

    .feesRightInner p {
        margin: 0;
        color: #fff !important;
    }

    .feesRightInner:hover,
    .feesRightInner:focus-visible {
        background: rgba(255, 255, 255, .09);
        color: var(--fore-gold) !important;
        transform: translateY(-2px);
        outline: 3px solid rgba(245, 179, 1, .48);
        outline-offset: -3px;
    }

        .feesRightInner:hover p,
        .feesRightInner:focus-visible p {
            color: var(--fore-gold) !important;
        }

        .feesRightInner:hover .feesIcon,
        .feesRightInner:focus-visible .feesIcon {
            transform: scale(1.06);
            box-shadow: 0 0 34px rgba(245, 179, 1, .38) !important;
        }

@media (max-width: 900px) {
    .feesRight {
        grid-template-columns: 1fr;
        padding: 8px 6px;
    }

    .feesRightInner {
        width: 100%;
        min-height: 112px;
        grid-template-columns: 52px minmax(0, 1fr);
        justify-content: initial;
        gap: 14px;
        padding: 16px 12px;
        border-radius: 12px;
        text-align: left;
    }

        .feesRightInner + .feesRightInner {
            border-top: 1px solid rgba(255, 255, 255, .28);
            border-left: 0;
        }

        .feesRightInner .feesIcon {
            width: 52px;
            height: 52px;
        }

            .feesRightInner .feesIcon img {
                max-width: 28px;
                max-height: 28px;
            }

        .feesRightInner p {
            text-align: left;
        }
}

@media (prefers-reduced-motion: reduce) {
    .feesRightInner,
    .feesRightInner .feesIcon {
        transition: none;
    }
}

/* ---------- Refined application-fee card ---------- */
.feesLeft {
    gap: clamp(10px, 1vw, 18px);
    justify-content: center;
    align-items: center;
}

    .feesLeft .feesL {
        display: flex;
        flex: 0 0 clamp(82px, 28%, 118px);
        align-items: center;
        justify-content: center;
        width: auto;
    }

        .feesLeft .feesL img {
            width: 100%;
            max-width: 104px;
            margin: 0;
        }

    .feesLeft .feesR {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        flex-direction: column;
        justify-content: center;
        padding: 0;
    }

        .feesLeft .feesR h5 {
            max-width: 250px;
            margin: 0 0 8px;
            font-size: clamp(14px, 1vw, 17px);
            line-height: 1.25;
        }

        .feesLeft .feesR h4 {
            margin: 0;
            font-size: clamp(24px, 1.9vw, 30px);
            line-height: 1.12;
            letter-spacing: -.025em;
            white-space: nowrap;
        }

@media (max-width: 480px) {
    .feesLeft {
        gap: 10px;
    }

        .feesLeft .feesL {
            flex-basis: 74px;
        }

            .feesLeft .feesL img {
                max-width: 72px;
            }

        .feesLeft .feesR h5 {
            font-size: 13px;
        }

        .feesLeft .feesR h4 {
            font-size: clamp(22px, 7vw, 28px);
            white-space: normal;
        }
}

/* ---------- Eminent alumni ---------- */
/* Eminent Alumni -- pixel-matched to the live admissions site: a plain
   centered heading directly above a max-width:1100px banner carousel, no
   bordered panel or separate category-label bar (that text is baked into
   each banner image on live, so we drop the equivalent local markup too). */
.alumniSection {
    position: relative;
    padding: 36px 16px;
    background: #fff;
}

.alumniHeading {
    margin-bottom: 16px;
    text-align: center;
}

    .alumniHeading h3 {
        position: relative;
        display: inline-block;
        margin: 0;
        padding-bottom: 16px;
        color: var(--fore-navy);
        font-size: 36px;
        font-weight: 600;
        line-height: 1.2;
    }

        .alumniHeading h3 span {
            color: var(--fore-blue);
        }

        .alumniHeading h3::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 80px;
            height: 4px;
            border-radius: 999px;
            background: var(--fore-blue);
            transform: translateX(-50%);
        }

@media (max-width: 767px) {
    .alumniHeading h3 {
        font-size: 30px;
    }
}

.alumniCarousel {
    max-width: 1100px;
    margin: 0 auto;
}

    .alumniCarousel .owl-stage {
        display: flex;
    }

    .alumniCarousel .owl-item {
        display: block;
        height: auto;
    }

.alumniSlide {
    width: 100%;
}

.alumniBannerSlide {
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
}

.alumniBannerImage {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    transition: transform .5s ease;
}

    .alumniBannerImage:hover {
        transform: scale(1.02);
    }

.alumniGrid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
}

.alumniCard {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    padding: 0 8px 12px;
    text-align: center;
}

.alumniPortrait {
    width: clamp(116px, 10vw, 148px);
    aspect-ratio: 1;
    margin-bottom: 14px;
    overflow: hidden;
    border-radius: 50%;
    background: #e5e6e8;
}

    .alumniPortrait img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center bottom;
        transform: scale(1.08);
    }

        .alumniPortrait img[src$="renu-misra.png"],
        .alumniPortrait img[src$="ravindra-s-negi.png"] {
            transform: scale(1.24);
            transform-origin: center top;
        }

.alumniCard h5 {
    margin: 0 0 5px;
    color: var(--fore-blue);
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 800;
    line-height: 1.15;
}

.alumniCard p {
    margin: 0;
    color: #222;
    font-size: clamp(12px, .9vw, 14px);
    line-height: 1.2;
}

.alumniCarousel.owl-theme .owl-dots {
    margin-top: 14px;
}

    .alumniCarousel.owl-theme .owl-dots .owl-dot span {
        width: 9px;
        height: 9px;
        margin: 5px;
        border: 0;
        background: #7cc5e8;
    }

    .alumniCarousel.owl-theme .owl-dots .owl-dot.active span {
        background: var(--fore-navy) !important;
    }

    .alumniCarousel.owl-theme .owl-dots .owl-dot:focus-visible {
        border-radius: 50%;
        outline: 3px solid rgba(15, 126, 195, .35);
        outline-offset: 3px;
    }

.alumniCarousel.owl-theme .owl-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

    .alumniCarousel.owl-theme .owl-nav button.owl-prev,
    .alumniCarousel.owl-theme .owl-nav button.owl-next {
        display: inline-flex;
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        margin: 0;
        border: 1px solid rgba(15, 126, 195, .35);
        border-radius: 50%;
        background: #fff;
        transition: background .2s ease, transform .2s ease;
    }

    .alumniCarousel.owl-theme .owl-nav button img {
        width: 20px;
    }

    .alumniCarousel.owl-theme .owl-nav button:hover,
    .alumniCarousel.owl-theme .owl-nav button:focus-visible {
        background: #eaf7fd;
        transform: translateY(-2px);
        outline: 3px solid rgba(15, 126, 195, .25);
    }

    .alumniCarousel.owl-theme .owl-nav button.disabled {
        opacity: .35;
    }

.alumniSlide[hidden] {
    display: none !important;
}

.alumniCarouselControls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}

.alumniDots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.alumniDot {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
}

    .alumniDot span {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #7cc5e8;
        transition: transform .2s ease, background .2s ease;
    }

    .alumniDot.is-active span {
        background: var(--fore-navy);
        transform: scale(1.2);
    }

.alumniArrow {
    display: inline-flex;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(15, 126, 195, .35);
    border-radius: 50%;
    background: #fff;
    transition: background .2s ease, transform .2s ease, opacity .2s ease;
}

    .alumniArrow img {
        width: 20px;
    }

    .alumniArrow:hover:not(:disabled),
    .alumniArrow:focus-visible,
    .alumniDot:focus-visible {
        background: #eaf7fd;
        outline: 3px solid rgba(15, 126, 195, .25);
        outline-offset: 2px;
    }

    .alumniArrow:hover:not(:disabled) {
        transform: translateY(-2px);
    }

    .alumniArrow:disabled {
        cursor: not-allowed;
        opacity: .35;
    }

@media (max-width: 1100px) {
    .alumniGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 28px;
    }
}

@media (max-width: 767px) {
    .alumniPortrait {
        width: 126px;
    }

    .alumniGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 10px;
    }
}

@media (max-width: 420px) {
    .alumniPortrait {
        width: 112px;
    }

    .alumniCard {
        padding-right: 2px;
        padding-left: 2px;
    }

        .alumniCard h5 {
            font-size: 14px;
        }

        .alumniCard p {
            font-size: 11px;
        }
}

/* Application journey — selected elevated-card direction */
.applicationSection {
    overflow: hidden;
    background: radial-gradient(circle at 14% 28%, rgba(15,126,195,.08), transparent 26%), radial-gradient(circle at 86% 24%, rgba(15,126,195,.07), transparent 25%), #f7faff !important;
}

    .applicationSection::before {
        content: none !important;
    }

    .applicationSection > .container-fluid {
        /* padding-top: clamp(54px, 4.6vw, 70px); */
    }

    .applicationSection .heading {
        margin-bottom: 0;
        text-align: center;
    }

        .applicationSection .heading h3 {
            margin-bottom: 32px;
            font-size: clamp(34px, 3.3vw, 58px);
            font-weight: 800;
            line-height: 1.08;
            letter-spacing: -.035em;
        }

        .applicationSection .heading h4 {
            margin: 0;
            color: #263e5d !important;
            font-size: clamp(21px, 2vw, 34px);
            font-weight: 500;
            line-height: 1.25;
        }

.processPic.foreProcess {
    margin: clamp(38px, 3.25vw, 52px) auto clamp(28px, 3vw, 40px);
}

.processCta {
    display: flex;
    justify-content: center;
    margin: 0 0 clamp(24px, 3vw, 36px);
}

.processCtaBtn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 34px;
    border-radius: 999px;
    background: var(--fore-blue);
    color: #fff !important;
    font-weight: 700;
    font-size: clamp(15px, 1.1vw, 17px);
    text-decoration: none !important;
    box-shadow: 0 14px 30px rgba(15,126,195,.28);
    transition: transform .22s ease, box-shadow .22s ease;
    animation: processCtaFlash 2.4s ease-in-out infinite;
}

    .processCtaBtn:hover,
    .processCtaBtn:focus-visible {
        color: #fff !important;
        transform: translateY(-3px);
        box-shadow: 0 20px 38px rgba(15,126,195,.36);
        animation-play-state: paused;
    }

    .processCtaBtn:focus-visible {
        outline: 3px solid rgba(15,126,195,.35);
        outline-offset: 3px;
    }

@keyframes processCtaFlash {
    0%, 100% {
        box-shadow: 0 14px 30px rgba(15,126,195,.28), 0 0 0 0 rgba(255,190,0,0);
    }

    45% {
        box-shadow: 0 14px 30px rgba(15,126,195,.28), 0 0 0 8px rgba(255,190,0,.16), 0 0 26px rgba(255,190,0,.5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .processCtaBtn {
        animation: none;
    }
}

.foreProcess ol {
    width: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(40px, 5.7vw, 104px);
    max-width: 1600px;
    padding: 0 20px;
}

    .foreProcess ol::before {
        top: 118px;
        right: 8%;
        left: 8%;
        height: 3px;
        border-radius: 999px;
        background: var(--fore-blue);
    }

/* Travelling arrow -- traces the top edge of each card (like a circuit
   trace), dipping down to the connector line in the gaps between them. The
   desktop path is data-dependent (card widths/gaps are responsive), so its
   position is driven by JS (see the inline script below); this just centers
   the marker on whatever point JS writes to left/top. Mobile keeps a plain
   CSS keyframe animation since the stacked layout is just a single line. */
.foreProcessTravel {
    position: absolute;
    z-index: 2;
    top: 118px;
    left: 8%;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
}

    .foreProcessTravel i {
        color: #22c55e;
        font-size: 15px;
        filter: drop-shadow(0 0 5px rgba(34, 197, 94, .65));
    }

/* No CSS animation on desktop -- the inline script positions the marker
   frame-by-frame there. This shorthand only supplies timing for the mobile
   override below (which just swaps animation-name). */
.foreProcess.is-visible .foreProcessTravel {
    animation: none 9s linear 1.6s infinite;
}

@keyframes foreProcessTravelVertical {
    0% {
        top: var(--fore-line-top, 48px);
        opacity: 0;
    }

    6% {
        opacity: 1;
    }

    94% {
        opacity: 1;
    }

    100% {
        top: calc(var(--fore-line-top, 48px) + var(--fore-line-height, 700px));
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .foreProcessTravel {
        display: none;
    }
}

.foreProcess li {
    padding: 0;
}

    .foreProcess li:not(:last-child)::after {
        position: absolute;
        z-index: 3;
        top: 105px;
        right: -60px;
        width: 24px;
        height: 24px;
        border: 2px solid #fff;
        border-radius: 50%;
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230f7ec3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 4l4 4-4 4'/%3E%3C/svg%3E") no-repeat center / 9px 9px;
        box-shadow: 0 3px 8px rgba(15,126,195,.3), inset 0 0 0 1.5px rgba(15,126,195,.32);
        content: "";
    }

.foreProcess.is-visible li:not(:last-child)::after {
    animation: foreDotPulse 2.6s ease-in-out 2.2s 2;
}

.foreProcess.is-visible li:nth-child(1):not(:last-child)::after {
    animation-delay: 2.2s;
}

.foreProcess.is-visible li:nth-child(2):not(:last-child)::after {
    animation-delay: 2.5s;
}

.foreProcess.is-visible li:nth-child(3):not(:last-child)::after {
    animation-delay: 2.8s;
}

.foreProcess.is-visible li:nth-child(4):not(:last-child)::after {
    animation-delay: 3.1s;
}

@keyframes foreDotPulse {
    0%, 100% {
        box-shadow: 0 3px 10px rgba(15,126,195,.28), inset 0 0 0 1.5px rgba(15,126,195,.35), 0 0 0 0 rgba(15,126,195,.45);
    }

    50% {
        box-shadow: 0 3px 10px rgba(15,126,195,.28), inset 0 0 0 1.5px rgba(15,126,195,.35), 0 0 0 6px rgba(15,126,195,0);
    }
}

.foreProcess .processCard {
    --process-frame: var(--fore-blue);
    --process-soft: var(--fore-blue-soft);
    --process-glow: rgba(15,126,195,.22);
    position: relative;
    z-index: 2;
    isolation: isolate;
    display: flex;
    min-height: 266px;
    padding: 36px 18px 24px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid #edf1f6;
    border-radius: 20px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 16px 38px rgba(16,35,63,.07);
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

@property --frame-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.foreProcess .processCard {
    --frame-angle: 0deg;
}

    .foreProcess .processCard::before {
        position: absolute;
        z-index: 4;
        inset: 0;
        padding: 2px;
        border-radius: inherit;
        background: conic-gradient(from var(--frame-angle), transparent 0deg, var(--process-frame) 35deg, transparent 95deg, transparent 265deg, var(--process-frame) 325deg, transparent 360deg);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        content: "";
        pointer-events: none;
        opacity: 0;
    }

/* Single brand blue for every step -- the base .foreProcess .processCard rule
   above already sets --process-frame/--process-soft/--process-glow to
   var(--fore-blue) / var(--fore-blue-soft), so all 5 steps share it. */

.foreProcess.is-visible li .processCard::before {
    animation: foreFrameFadeIn .6s ease forwards, foreFrameSpin 4.5s linear 2;
}

.foreProcess.is-visible li:nth-child(1) .processCard::before {
    animation-delay: .30s, .30s;
}

.foreProcess.is-visible li:nth-child(2) .processCard::before {
    animation-delay: .48s, .48s;
}

.foreProcess.is-visible li:nth-child(3) .processCard::before {
    animation-delay: .66s, .66s;
}

.foreProcess.is-visible li:nth-child(4) .processCard::before {
    animation-delay: .84s, .84s;
}

.foreProcess.is-visible li:nth-child(5) .processCard::before {
    animation-delay: 1.02s, 1.02s;
}

@keyframes foreFrameFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes foreFrameSpin {
    to {
        --frame-angle: 360deg;
    }
}

.foreProcess .processIcon {
    width: 116px;
    height: 116px;
    margin: 0 auto 36px;
    box-shadow: 0 12px 26px rgba(16,35,63,.1);
}

    .foreProcess .processIcon > img {
        width: 56px;
        max-height: 56px;
    }

.foreProcess h5 {
    display: block;
    min-height: 0;
    margin: 0;
    padding: 0 0 17px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: clamp(16px, 1.25vw, 20px);
    font-weight: 800;
    line-height: 1.18;
    box-shadow: none;
}

    .foreProcess h5::after {
        bottom: 0;
        width: 38px;
        height: 3px;
    }

.foreProcess p {
    max-width: 280px;
    margin: 33px auto 0;
    color: #536174;
    font-size: clamp(14px, 1.05vw, 18px);
    line-height: 1.58;
}

.foreProcess li:hover .processCard,
.foreProcess li:focus-within .processCard {
    border-color: var(--process-frame);
    box-shadow: 0 22px 46px var(--process-glow);
    transform: translateY(-7px);
}

.foreProcess li:hover h5,
.foreProcess li:focus-within h5 {
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

@media (max-width: 1100px) and (min-width: 901px) {
    .foreProcess ol {
        gap: 12px;
        padding: 0 12px;
    }

    .foreProcess .processCard {
        min-height: 204px;
        padding: 22px 10px 20px;
        border-radius: 18px;
    }

    .foreProcess .processIcon {
        width: 70px;
        height: 70px;
        margin-bottom: 17px;
    }

        .foreProcess .processIcon > img {
            width: 36px;
            max-height: 36px;
        }

    .foreProcess h5 {
        font-size: 15px;
    }

    .foreProcess p {
        font-size: 12.5px;
    }

    .foreProcess ol::before {
        top: 102px;
    }

    .foreProcessTravel {
        top: 102px;
    }

    .foreProcess li:not(:last-child)::after {
        top: 94px;
        right: -15px;
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 900px) {
    .applicationSection > .container-fluid {
        padding-top: 50px;
    }

    .applicationSection .heading {
        padding: 0 20px;
    }

    .processPic.foreProcess {
        width: min(100% - 32px, 720px);
        margin-top: 36px;
        margin-bottom: 62px;
    }

    .foreProcess ol {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 0;
    }

        .foreProcess ol::before {
            top: var(--fore-line-top, 48px);
            bottom: auto;
            height: var(--fore-line-height, 700px);
            left: 46.5px;
            width: 3px;
        }

    .foreProcessTravel {
        top: var(--fore-line-top, 48px);
        left: 46.5px;
    }

        .foreProcessTravel i {
            transform: rotate(90deg);
        }

    .foreProcess.is-visible .foreProcessTravel {
        animation-name: foreProcessTravelVertical;
    }

    .foreProcess li {
        display: grid;
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin: 0;
    }

        .foreProcess li:not(:last-child)::after {
            display: none;
        }

    .foreProcess .processCard {
        min-height: 104px;
        padding: 16px 22px 16px 14px;
        flex-direction: row;
        justify-content: flex-start;
        border-radius: 18px;
    }

    .foreProcess .processIcon {
        width: 68px;
        height: 68px;
        margin: 0 20px 0 0;
        flex: 0 0 68px;
    }

    .foreProcess h5 {
        padding: 0 0 13px;
        text-align: left;
    }

        .foreProcess h5::after {
            right: auto;
            bottom: 0;
            left: 0;
            transform: none;
        }

    .foreProcess p {
        max-width: none;
        margin: 12px 16px 0 104px;
        font-size: 14px;
        text-align: left;
    }
}

@media (max-width: 520px) {
    .applicationSection .heading h3 {
        font-size: clamp(29px, 8vw, 34px);
    }

    .applicationSection .heading h4 {
        font-size: 20px;
    }

    .processPic.foreProcess {
        width: min(100% - 24px, 480px);
        margin-top: 38px;
    }

    .foreProcess ol {
        gap: 16px;
    }

        .foreProcess ol::before {
            left: 37.5px;
        }

    .foreProcess .processCard {
        min-height: 94px;
        padding: 14px 16px 14px 10px;
        border-radius: 16px;
    }

    .foreProcess .processIcon {
        width: 58px;
        height: 58px;
        margin-right: 15px;
        flex-basis: 58px;
    }

        .foreProcess .processIcon > img {
            width: 30px;
            max-height: 30px;
        }

    .foreProcess h5 {
        font-size: 16px;
    }

    .foreProcess p {
        margin: 10px 10px 0 83px;
        font-size: 13px;
        line-height: 1.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .foreProcess .processCard,
    .foreProcess .processCard::before,
    .foreProcess li:not(:last-child)::after,
    .foreProcess .processIcon > img,
    .foreProcess .processIcon::after {
        transition: none !important;
        animation: none !important;
    }

        .foreProcess .processCard::before {
            background: none;
            -webkit-mask: none;
            mask: none;
            box-shadow: inset 0 0 0 1.5px var(--process-frame);
            opacity: .7;
        }

    .foreProcess .processIcon::after {
        opacity: 0 !important;
    }
}

/* Compact campus map thumbnails */
.footerCampusCard + .footerCampusCard {
    margin-top: 0;
}

.footerCampusCard .footer-heading {
    margin-bottom: 12px;
}

.footerCampusCard .contact {
    margin-bottom: 12px;
}

.footerMapThumb {
    width: 100%;
    max-width: 300px;
    overflow: hidden;
    border: 1px solid rgba(255,190,0,.42);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

    .footerMapThumb iframe {
        display: block;
        width: 100%;
        height: 118px;
        border: 0;
    }

    .footerMapThumb > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 9px 12px;
        background: #fff;
        color: var(--fore-navy) !important;
        font-size: 12px;
        font-weight: 750;
        line-height: 1.25;
        text-decoration: none;
    }

        .footerMapThumb > a span {
            color: var(--fore-blue);
            font-size: 17px;
            line-height: 1;
            transition: transform .2s ease;
        }

        .footerMapThumb > a:hover span,
        .footerMapThumb > a:focus-visible span {
            transform: translateX(3px);
        }

@media (max-width: 1100px) {
    .footerMapThumb iframe {
        height: 150px;
    }
}

@media (max-width: 767px) {
    .footerMapThumb iframe {
        height: 180px;
    }
}

/* Premium admissions navigation — selected pill-navigation direction */
header.sticky {
    padding: 11px 0;
    border-bottom: 2px solid rgba(16,35,63,.82);
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 8px 28px rgba(16,35,63,.08);
}

    header.sticky .container-fluid {
        max-width: 1500px;
    }

header .top-flex {
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
}

header .top-left,
header .top-left a {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

header .top-right {
    width: auto;
    max-width: none;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(12px, 1.4vw, 22px);
}

header .navbar {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: center;
}

header .navbar-collapse {
    min-width: 0;
    flex: 0 1 auto;
}

header .navbar-collapse,
header .navbar-expand-lg .navbar-nav {
    justify-content: center;
}

header .navbar-expand-lg .navbar-nav {
    flex-wrap: nowrap;
    gap: 2px;
}

header.sticky .nav-item {
    padding: 0 !important;
}

header.sticky .navbar-dark .navbar-nav .nav-link {
    position: relative;
    padding: 12px clamp(9px, .75vw, 14px) !important;
    border-radius: 999px;
    color: var(--fore-navy) !important;
    font-size: clamp(13px, .88vw, 15px);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

    header.sticky .navbar-dark .navbar-nav .nav-link::after {
        position: absolute;
        right: 40%;
        bottom: 4px;
        left: 40%;
        height: 2px;
        border-radius: 99px;
        background: var(--fore-gold);
        content: "";
        opacity: 0;
        transition: right .2s ease, left .2s ease, opacity .2s ease;
    }

    header.sticky .navbar-dark .navbar-nav .nav-link:hover,
    header.sticky .navbar-dark .navbar-nav .nav-link:focus-visible {
        color: var(--fore-blue) !important;
        background: #edf7fd;
    }

        header.sticky .navbar-dark .navbar-nav .nav-link:hover::after,
        header.sticky .navbar-dark .navbar-nav .nav-link:focus-visible::after {
            right: 32%;
            left: 32%;
            opacity: 1;
        }

    header.sticky .navbar-dark .navbar-nav .nav-link.is-active,
    header.sticky .navbar-dark .navbar-nav .nav-link[aria-current="page"] {
        background: var(--fore-blue);
        color: #fff !important;
        box-shadow: 0 8px 18px rgba(15,126,195,.20);
    }

        header.sticky .navbar-dark .navbar-nav .nav-link.is-active::after,
        header.sticky .navbar-dark .navbar-nav .nav-link[aria-current="page"]::after {
            opacity: 0;
        }

    header.sticky .navbar-dark .navbar-nav .nav-link:active {
        transform: translateY(1px);
    }

header .headApply {
    width: auto;
    min-height: 52px;
    max-width: none;
    padding: 7px 11px;
    gap: 9px;
    flex: 0 0 auto;
    border: 1px solid var(--fore-blue);
    border-radius: 14px;
    background: #fff;
}

header .headApplyIcon {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    flex: 0 0 31px;
    border-radius: 50%;
    color: var(--fore-blue);
    background: #e4f4fd;
    box-shadow: inset 0 0 0 1px rgba(15, 126, 195, .12);
}

    header .headApplyIcon i {
        display: block;
        color: currentColor;
        font-size: 15px;
        line-height: 1;
    }

/* Floating admissions WhatsApp shortcut */
.whatsappFloat {
    position: fixed;
    right: clamp(16px, 2vw, 30px);
    bottom: clamp(16px, 2vw, 30px);
    z-index: 1050;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    color: #fff !important;
    text-decoration: none !important;
    background: linear-gradient(135deg, #20bd5a 0%, #128c4a 100%);
    box-shadow: 0 12px 30px rgba(5, 72, 37, .28);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

    .whatsappFloat::before {
        position: absolute;
        inset: 0;
        z-index: -1;
        border: 2px solid rgba(37, 211, 102, .48);
        border-radius: inherit;
        content: "";
        animation: whatsappPulse 2.4s ease-out infinite;
    }

.whatsappFloat__icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    color: #128c4a;
    font-size: 23px;
    line-height: 1;
    background: #fff;
}

.whatsappFloat__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.whatsappFloat:hover,
.whatsappFloat:focus-visible {
    color: #fff !important;
    background: linear-gradient(135deg, #25d366 0%, #0d7f40 100%);
    box-shadow: 0 16px 36px rgba(5, 72, 37, .36);
    transform: translateY(-3px);
}

.whatsappFloat:focus-visible {
    outline: 3px solid rgba(37, 211, 102, .32);
    outline-offset: 3px;
}

@keyframes whatsappPulse {
    0%, 35% {
        opacity: .75;
        transform: scale(1);
    }

    80%, 100% {
        opacity: 0;
        transform: scale(1.16, 1.3);
    }
}

@media (max-width: 575px) {
    .whatsappFloat {
        right: 14px;
        bottom: 14px;
        width: 54px;
        height: 54px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .whatsappFloat::before {
        animation: none;
    }
}

    .applicationInner .applicationBox {
        border-color: rgba(98, 190, 241, .48);
        background: rgba(255, 255, 255, .025);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    }

/* The base stylesheet's 720px floor leaves large empty space below the
   eligibility/dates content in the desktop two-column layout; scoped to
   .applicationFull only so it never overrides the mobile accordion's own
   min-height: auto reset below the 1024px breakpoint. */
@media (min-width: 1025px) {
    .applicationFull .applicationBox {
        min-height: 480px;
    }
}

.applicationInner .applicationBox h4::before {
    background: var(--fore-blue);
}

.applicationInner .accordion-button {
    border-left: 3px solid transparent;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}

    .applicationInner .accordion-button:not(.collapsed) {
        border-left-color: var(--fore-blue);
        background: linear-gradient(90deg, rgba(15, 126, 195, .42), rgba(15, 126, 195, .12)) !important;
    }

.applicationInner .appBox h5 {
    color: #fff !important;
}

.applicationInner .feesBox {
    border: 1px solid rgba(81, 180, 234, .35);
    background: linear-gradient(105deg, #0b4d78 0%, var(--fore-blue-deep) 100%) !important;
    box-shadow: 0 18px 40px rgba(4, 29, 58, .24);
}

.applicationInner .feesLeft {
    border: 1px solid rgba(15, 126, 195, .5);
    background: linear-gradient(145deg, #0b2342 0%, var(--fore-navy) 100%) !important;
    box-shadow: 0 10px 28px rgba(0, 18, 43, .34) !important;
}

.applicationInner .feesIcon {
    border: 1px solid rgba(255, 255, 255, .44);
    background: var(--fore-blue) !important;
    box-shadow: 0 8px 22px rgba(15, 126, 195, .32) !important;
}

.applicationInner .feesRightInner:hover .feesIcon,
.applicationInner .feesRightInner:focus-visible .feesIcon {
    background: var(--fore-blue-deep) !important;
    box-shadow: 0 10px 28px rgba(15, 126, 195, .34) !important;
}

header .headApplyText h5 {
    margin: 0 0 1px;
    color: #536174 !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
}

header .headApplyText p {
    margin: 0;
    line-height: 1;
}

    header .headApplyText p a {
        color: var(--fore-blue) !important;
        font-size: 15px;
        font-weight: 800;
        line-height: 1.1;
        white-space: nowrap;
    }

.headerApplyCta {
    display: inline-flex;
    min-height: 52px;
    padding: 0 18px;
    align-items: center;
    justify-content: center;
    gap: 11px;
    flex: 0 0 auto;
    border: 2px solid var(--fore-blue);
    border-radius: 14px;
    background: var(--fore-blue);
    color: #fff !important;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(15,126,195,.20);
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

    .headerApplyCta img {
        width: 17px;
        height: 17px;
        object-fit: contain;
        filter: brightness(0) saturate(100%) invert(75%) sepia(96%) saturate(1321%) hue-rotate(358deg) brightness(103%) contrast(102%);
    }

    .headerApplyCta:hover,
    .headerApplyCta:focus-visible {
        border-color: var(--fore-blue-deep);
        background: var(--fore-blue-deep);
        color: #fff !important;
        box-shadow: 0 13px 26px rgba(7,91,145,.24);
        transform: translateY(-2px);
    }

    .headerApplyCta:active {
        transform: translateY(0);
    }

.mobMenu .offcanvas {
    width: min(88vw, 390px);
    border-left: 0;
    background: #f7faff;
    box-shadow: -18px 0 50px rgba(16,35,63,.18);
}

.mobMenu .offcanvas-header {
    align-items: center;
    padding: 22px 22px 18px;
    border-bottom: 1px solid #d8e5ef;
    background: #fff;
}

.offcanvasBrand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

    .offcanvasBrand img {
        width: 54px;
        height: 54px;
        object-fit: contain;
    }

    .offcanvasBrand h5 {
        margin: 0 0 2px;
        color: var(--fore-navy);
        font-size: 17px;
        font-weight: 800;
    }

    .offcanvasBrand p {
        margin: 0;
        color: #64748b;
        font-size: 12px;
    }

.mobMenu .offcanvas-body {
    display: flex;
    padding: 20px 22px 24px;
    flex-direction: column;
}

    .mobMenu .offcanvas-body ul {
        margin: 0;
        padding: 0;
    }

        .mobMenu .offcanvas-body ul li {
            border-bottom: 1px solid #d8e5ef;
        }

            .mobMenu .offcanvas-body ul li a {
                position: relative;
                padding: 15px 12px;
                border-radius: 12px;
                color: var(--fore-navy);
                font-size: 17px;
                font-weight: 700;
                transition: color .2s ease, background-color .2s ease;
            }

                .mobMenu .offcanvas-body ul li a:hover,
                .mobMenu .offcanvas-body ul li a:focus-visible,
                .mobMenu .offcanvas-body ul li a.is-active,
                .mobMenu .offcanvas-body ul li a[aria-current="page"] {
                    background: #e8f4fb;
                    color: var(--fore-blue) !important;
                }

.offcanvasActions {
    display: grid;
    gap: 12px;
    margin-top: auto;
    padding-top: 28px;
}

.offcanvasApply {
    display: grid;
    min-height: 50px;
    place-items: center;
    border-radius: 13px;
    background: var(--fore-blue);
    color: #fff !important;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(15,126,195,.18);
}

.offcanvasCall {
    display: flex;
    min-height: 54px;
    padding: 8px 12px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--fore-blue);
    border-radius: 13px;
    background: #fff;
    color: var(--fore-blue) !important;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

    .offcanvasCall img {
        width: 23px;
        height: 23px;
        object-fit: contain;
    }

    .offcanvasCall span,
    .offcanvasCall small {
        display: block;
    }

    .offcanvasCall small {
        margin-bottom: 2px;
        color: #64748b;
        font-size: 10px;
        font-weight: 600;
    }

@media (max-width: 1400px) and (min-width: 1251px) {
    header .top-flex {
        gap: 20px;
    }

    header .top-right {
        gap: 10px;
    }

    header .fore-logo {
        height: 64px;
    }

    header.sticky .navbar-dark .navbar-nav .nav-link {
        padding-right: 8px !important;
        padding-left: 8px !important;
        font-size: 13px;
    }

    header .headApply {
        padding-right: 9px;
        padding-left: 9px;
    }

    header .headApplyIcon {
        display: none;
    }

    .headerApplyCta {
        padding: 0 13px;
    }
}

@media (max-width: 1250px) {
    header.sticky {
        padding: 9px 0;
    }

    header .top-flex {
        gap: 18px;
    }

    header .top-right {
        max-width: none;
        padding: 0 !important;
        gap: 12px;
    }

    header .headerApplyCta {
        display: none;
    }

    header .mobMenu .btn {
        position: static;
        display: grid;
        width: 46px;
        height: 46px;
        padding: 10px;
        place-items: center;
        border: 1px solid #d8e5ef;
        border-radius: 13px;
        color: var(--fore-blue);
        background: #f7faff;
        box-shadow: 0 7px 18px rgba(15, 126, 195, .12);
        transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
    }

        header .mobMenu .btn i {
            display: block;
            color: currentColor;
            font-size: 27px;
            line-height: 1;
        }

        header .mobMenu .btn:hover,
        header .mobMenu .btn:focus-visible {
            border-color: var(--fore-blue);
            color: #fff;
            background: var(--fore-blue);
            box-shadow: 0 10px 22px rgba(15, 126, 195, .22);
            transform: translateY(-1px);
            outline: 3px solid rgba(15, 126, 195, .2);
            outline-offset: 2px;
        }
}

@media (max-width: 767px) {
    header .fore-logo {
        height: 56px;
    }

    header .top-flex {
        gap: 12px;
    }

    header .headApply {
        display: none;
    }
}

@media (max-width: 420px) {
    header.sticky {
        padding: 7px 0;
    }

    header .fore-logo {
        height: 50px;
    }

    header .mobMenu .btn {
        width: 42px;
        height: 42px;
        padding: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    header .nav-link,
    .headerApplyCta,
    .offcanvasApply,
    .offcanvasCall {
        transition: none !important;
    }
}

/* Shared section-heading treatment from the approved visual reference */
.foreSectionTitle {
    width: 100%;
    margin-right: auto !important;
    margin-left: auto !important;
    color: var(--fore-navy);
    text-align: center !important;
}

    .foreSectionTitle .foreHeadingLead {
        color: var(--fore-blue) !important;
    }

.careerSliderSection .foreSectionTitle {
    color: #fff;
}

@media (min-width: 768px) {
    .heading-campuslife {
        position: relative;
        justify-content: center;
    }

        .heading-campuslife .careerCarouselNav {
            position: absolute;
            right: 0;
        }
}

@media (max-width: 767px) {
    .foreSectionTitle {
        text-wrap: balance;
    }

    .heading-campuslife {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        justify-items: center;
    }
}

/* Unified page typography and section rhythm */
:root {
    --fore-section-space: clamp(28px, 3.5vw, 48px);
    --fore-section-space-mobile: 28px;
    --fore-title-size: clamp(34px, 3.6vw, 54px);
    --fore-body-size: 16px;
}

body,
body :where(h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, label, span, strong, b, small, li, td, th) {
    font-family: "jiotyperegular", Arial, sans-serif !important;
}

body {
    font-size: var(--fore-body-size);
    line-height: 1.6;
}

    body :where(h1, h2, h3, h4, h5, h6, strong, b) {
        font-weight: 700;
    }

:is( .careerSection, .academicProgrammes, .masterSlider, .learningSection, .internshipSection, .applicationSection, .learnSection, .campuslifeSection, .faqSection ) {
    margin-block: 0 !important;
    padding-block: var(--fore-section-space) !important;
}

.foreSectionTitle,
.academicHeading .foreSectionTitle,
.internshipSection .foreSectionTitle,
.applicationSection .foreSectionTitle,
.faqSection .foreSectionTitle {
    margin: 0 auto clamp(34px, 4vw, 54px) !important;
    font-size: var(--fore-title-size) !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em !important;
    text-align: center !important;
    text-wrap: balance;
}

.heading > p,
.careerSliderSection .heading > p {
    max-width: 78ch;
    margin: -26px auto clamp(34px, 4vw, 54px) !important;
    font-size: clamp(16px, 1.2vw, 18px) !important;
    line-height: 1.65 !important;
    text-align: center;
}

/* Owl writes display values at runtime; keep programme labels on an equal grid. */
@media (min-width: 768px) {
    .masterSlider .owl-dots {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .masterSlider .owl-theme .owl-dots .owl-dot button {
        justify-content: center !important;
        padding: 10px 18px !important;
        text-align: center !important;
    }
}

@media (max-width: 767px) {
    :root {
        --fore-section-space: var(--fore-section-space-mobile);
        --fore-title-size: clamp(30px, 9vw, 40px);
    }

    .foreSectionTitle,
    .academicHeading .foreSectionTitle,
    .internshipSection .foreSectionTitle,
    .applicationSection .foreSectionTitle,
    .faqSection .foreSectionTitle {
        margin-bottom: 30px !important;
    }

    .heading > p,
    .careerSliderSection .heading > p {
        margin-top: -16px !important;
        margin-bottom: 30px !important;
        font-size: 16px !important;
    }
}

/* Keep the carousel layout authoritative over legacy hero rules above. */
.banner {
    min-height: 100vh !important;
    padding: 0 !important;
    background: var(--fore-navy) !important;
}

/* top's floor was 128px, which sat under the fixed header (~155px tall,
   promo strip + nav, z-index:99999) at the narrower end of this range --
   raised so the form's own heading always clears it. */
@media (min-width: 992px) {
    .frm {
        position: absolute !important;
        top: clamp(165px, 10vw, 180px) !important;
        right: clamp(22px, 2vw, 36px) !important;
        width: min(360px, 31vw) !important;
        max-width: 360px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 991px) {
    .banner {
        min-height: 100vh !important;
    }

    .frm {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: min(calc(100% - 28px), 620px) !important;
        max-width: 620px !important;
        margin: 24px auto 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 767px) {
    /* Full-page hero at every breakpoint -- see the matching rule earlier in
       this file for why "body .banner" is still used here. */
    body .banner {
        min-height: 100vh !important;
    }
}

/* Fully visible hero */
@media (min-width: 768px) {
    .banner {
        overflow: visible !important;
    }
}

/* Keep the full form, including submit actions, visible on laptop screens.
   top must clear the fixed header (promo strip + nav, ~155px tall,
   z-index:99999) -- it used to be 110px, which tucked the form's own
   heading behind the header instead of below it. */
@media (min-width: 1200px) and (max-height: 900px) {
    .frm {
        top: 168px !important;
    }

    .foreFormWidget #ee-form-2-modal-swapper {
        padding: 12px !important;
    }

    .foreFormWidget #ee-form-2 .ee-form-header {
        padding: 12px 12px 9px !important;
    }

    .foreFormWidget #ee-form-2 .ee-form-heading,
    .foreFormWidget #ee-form-2 .ee-form-heading center,
    .foreFormWidget #ee-form-2 .ee-form-heading p {
        font-size: 20px !important;
    }

        .foreFormWidget #ee-form-2 .ee-form-heading::after {
            margin-top: 7px;
        }

    .foreFormWidget #ee-form-2 .ee-form-footer {
        margin-top: 6px !important;
    }
}

/* Smaller laptops and tablets stack the form instead of clipping it. */
@media (min-width: 992px) and (max-width: 1199px) {
    .frm {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: min(calc(100% - 28px), 620px) !important;
        max-width: 620px !important;
        margin: 110px auto 0 !important;
        padding: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .frm {
        margin-top: 110px !important;
    }
}

/* The rounded FORE Edge panel already has internal spacing. Also drop the
   base stylesheet's decorative mk-3.webp background and the left/right-wave
   pseudo-elements entirely -- they read as visual clutter around the card
   rather than as a section background. */
.careerSection {
    padding-bottom: 0 !important;
    overflow: hidden;
    background: none !important;
}

    .careerSection::before,
    .careerSection::after {
        display: none !important;
    }

/* Refined Academic Programmes alignment */
.academicProgrammes > .container-fluid {
    width: min(100% - 32px, 1280px);
    margin-inline: auto;
    padding-inline: 0;
}

.academicProgrammes .academicTabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 760px);
    margin: 0 auto 32px;
    padding: 6px;
    gap: 6px;
    border: 1px solid rgba(15,126,195,.14);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16,35,63,.07);
}

.academicProgrammes .academicTab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 10px 16px;
    border-radius: 11px;
    line-height: 1.25;
    text-align: center;
}

    .academicProgrammes .academicTab i {
        font-size: 17px;
        line-height: 1;
    }

.academicProgrammes .academicPanel {
    width: 100%;
    max-width: 1240px;
}

.academicProgrammes .academicTableScroll {
    overflow: hidden;
    border: 1px solid #dce8f2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(16,35,63,.08);
}

.academicProgrammes .academicTable {
    table-layout: fixed;
    font-variant-numeric: tabular-nums;
}

    .academicProgrammes .academicTable th,
    .academicProgrammes .academicTable td {
        padding: 17px 18px;
        line-height: 1.45;
    }

    .academicProgrammes .academicTable th {
        color: var(--fore-navy);
        background: #e7f3fb;
        vertical-align: middle;
    }

        .academicProgrammes .academicTable th:nth-child(1),
        .academicProgrammes .academicTable td:nth-child(1) {
            width: 30%;
        }

        .academicProgrammes .academicTable th:nth-child(2),
        .academicProgrammes .academicTable td:nth-child(2) {
            width: 13%;
            text-align: center;
        }

        .academicProgrammes .academicTable th:nth-child(3),
        .academicProgrammes .academicTable td:nth-child(3) {
            width: 13%;
            text-align: center;
        }

        .academicProgrammes .academicTable th:nth-child(4),
        .academicProgrammes .academicTable td:nth-child(4) {
            width: 16%;
            text-align: center;
        }

        .academicProgrammes .academicTable th:nth-child(5),
        .academicProgrammes .academicTable td:nth-child(5) {
            width: 28%;
        }

    .academicProgrammes .academicTable tbody tr {
        transition: background-color .2s ease;
    }

        .academicProgrammes .academicTable tbody tr:hover {
            background: #eef7fd;
        }

.academicProgrammes .criteriaGrid {
    gap: 20px;
}

.academicProgrammes .criteriaCard,
.academicProgrammes .applicationFeeCard {
    border-color: #dce8f2;
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(16,35,63,.07);
}

    .academicProgrammes .criteriaCard h3,
    .academicProgrammes .applicationFeeCard h3 {
        color: var(--fore-blue);
    }

@media (max-width: 767px) {
    .academicProgrammes > .container-fluid {
        width: min(100% - 24px, 620px);
    }

    .academicProgrammes .academicTabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-bottom: 24px;
        padding: 5px;
        gap: 4px;
        border-radius: 14px;
    }

    .academicProgrammes .academicTab {
        flex-direction: column;
        gap: 4px;
        min-height: 62px;
        padding: 8px 6px;
        font-size: 13px;
    }

        .academicProgrammes .academicTab i {
            font-size: 16px;
        }

    .academicProgrammes .academicTableScroll {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .academicProgrammes .academicTable tr {
        padding: 12px 16px;
        border-radius: 14px;
        box-shadow: 0 10px 24px rgba(16,35,63,.07);
    }

    .academicProgrammes .academicTable td,
    .academicProgrammes .academicTable td:nth-child(n) {
        grid-template-columns: minmax(104px, 36%) minmax(0, 1fr);
        width: 100%;
        padding: 9px 0;
        text-align: left;
    }
}
/* ---------- FORE Advantage: reference-aligned F-O-R-E composition ---------- */
.learningSection {
    overflow: hidden;
    min-height: auto !important;
    background-position: center bottom !important;
}

    .learningSection > .container-fluid {
        max-width: 1440px;
        margin-inline: auto;
    }

    .learningSection .heading {
        position: relative;
        z-index: 2;
        max-width: 960px;
        margin: 0 auto;
        text-align: center;
    }

        .learningSection .heading > p {
            max-width: 82ch;
            margin-inline: auto !important;
            color: #58677a !important;
        }

    .learningSection .foreSectionTitle {
        margin-bottom: 14px !important;
    }

    .learningSection .heading > p {
        margin-top: 0 !important;
        margin-bottom: 24px !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

.foreEdgeShowcase {
    grid-template-columns: minmax(240px, 310px) minmax(390px, 640px) minmax(240px, 310px);
    grid-template-rows: minmax(150px, 1fr) auto minmax(165px, 1fr);
    gap: 8px clamp(24px, 3vw, 48px);
    min-height: clamp(430px, 38vw, 540px);
    padding: 0 12px 12px;
}

    .foreEdgeShowcase .instLogo {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        margin: 0 0 12px;
        text-align: center;
    }

        .foreEdgeShowcase .instLogo img {
            max-height: 62px;
        }

.foreEdgeWordmark {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    margin: 0;
}

    .foreEdgeWordmark span {
        font-size: clamp(92px, 10vw, 160px);
        letter-spacing: .1em;
    }

.foreEdgeCard {
    align-self: center;
    max-width: 310px;
    padding: 0;
}

.foreEdgeCard--tl {
    grid-column: 1;
    grid-row: 1;
}

.foreEdgeCard--tr {
    grid-column: 3;
    grid-row: 1;
}

.foreEdgeCard--bl {
    grid-column: 1;
    grid-row: 3;
}

.foreEdgeCard--br {
    grid-column: 3;
    grid-row: 3;
}

.foreEdgeCard__head {
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.foreEdgeCard__icon {
    width: 42px;
    height: 42px;
    font-size: 18px;
}

.foreEdgeCard h4 {
    margin: 0 0 2px;
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.2;
}

.foreEdgeCard__tag {
    font-size: 12.5px;
    line-height: 1.3;
}

.foreEdgeCard p:last-child {
    max-width: 300px;
    font-size: 13px;
    line-height: 1.48;
}

.foreEdgeCard--tl::before,
.foreEdgeCard--tr::before,
.foreEdgeCard--bl::before,
.foreEdgeCard--br::before {
    height: 42px;
}

.foreEdgeCard--tl::after,
.foreEdgeCard--tr::after {
    top: calc(100% + 38px);
}

.foreEdgeCard--bl::after,
.foreEdgeCard--br::after {
    bottom: calc(100% + 38px);
}

@media (max-width: 1024px) {
    .learningSection .heading {
        text-align: center !important;
    }

    .learningMobile {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

        .learningMobile .lmb {
            align-items: flex-start;
            flex-wrap: nowrap;
            gap: 16px;
            min-height: 100%;
            margin: 0;
            padding: 22px;
            border: 1px solid rgba(13, 135, 201, .16);
            border-radius: 18px;
            background: rgba(255, 255, 255, .88);
            box-shadow: 0 14px 36px rgba(16, 35, 63, .08);
        }

        .learningMobile .lmbLeft {
            width: 58px;
            flex: 0 0 58px;
            font-size: 58px;
            line-height: .9;
            text-align: center;
            border-radius: 12px;
        }

            .learningMobile .lmbLeft::before {
                display: none;
            }

        .learningMobile .lmbRight {
            width: auto;
        }

            .learningMobile .lmbRight h4 {
                margin: 0 0 7px;
                font-size: 19px;
                line-height: 1.25;
            }

            .learningMobile .lmbRight p {
                font-size: 14px;
                line-height: 1.55;
            }
}

@media (max-width: 640px) {
    .learningMobile {
        grid-template-columns: 1fr;
        gap: 14px;
    }

        .learningMobile .lmb {
            padding: 18px;
        }

        .learningMobile .lmbLeft {
            width: 48px;
            flex-basis: 48px;
            font-size: 48px;
        }

        .learningMobile .lmbRight h4 {
            font-size: 18px;
        }
}

/* Measured connectors track each letter as the viewport and fonts change. */
.foreEdgeConnectors {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 2;
}

    .foreEdgeConnectors path {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        opacity: .4;
    }

    .foreEdgeConnectors circle {
        fill: currentColor;
    }

    .foreEdgeConnectors .foreEdgeConnectors__pulse {
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-dasharray: 7 93;
        opacity: 1;
        animation: foreConnectorTravel 3.5s linear infinite;
    }

@keyframes foreConnectorTravel {
    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.foreEdgeShowcase:has(.foreEdgeConnectors) .foreEdgeCard::before,
.foreEdgeShowcase:has(.foreEdgeConnectors) .foreEdgeCard::after {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .foreEdgeConnectors .foreEdgeConnectors__pulse {
        animation: none;
        stroke-dasharray: none;
        opacity: .5;
    }
}

/* The desktop reference uses a compact, layered composition rather than a
   tall three-row grid. Pin the four stories around the wordmark so the letter
   mark, logo and connector ends sit on one deliberate visual axis. */
@media (min-width: 1025px) {
    .foreEdgeShowcase {
        display: block;
        width: 100%;
        max-width: 1440px;
        height: 440px;
        min-height: 440px;
        margin: 0 auto;
        padding: 0 clamp(20px, 3.1vw, 52px);
    }

        .foreEdgeShowcase .instLogo,
        .foreEdgeWordmark,
        .foreEdgeCard {
            position: absolute;
            margin: 0;
        }

        .foreEdgeShowcase .instLogo {
            top: 64px;
            left: 50%;
            z-index: 2;
            transform: translateX(-50%);
        }

            .foreEdgeShowcase .instLogo img {
                max-height: 58px;
            }

    .foreEdgeWordmark {
        top: 136px;
        left: 50%;
        z-index: 1;
        width: auto;
        transform: translateX(-50%);
    }

        .foreEdgeWordmark span {
            font-size: clamp(132px, 12.6vw, 208px);
            letter-spacing: .07em;
            white-space: nowrap;
        }

    .foreEdgeCard {
        width: min(310px, 24vw);
    }

    .foreEdgeCard--tl {
        top: 0;
        left: clamp(20px, 3.1vw, 52px);
    }

    .foreEdgeCard--tr {
        top: 0;
        right: clamp(20px, 3.1vw, 52px);
    }

    .foreEdgeCard--bl {
        top: 248px;
        left: clamp(20px, 3.1vw, 52px);
    }

    .foreEdgeCard--br {
        top: 248px;
        right: clamp(20px, 3.1vw, 52px);
    }

    /* The left-side stems originate under the card heading, not from its far
       outside edge; that gives the compact, balanced reference silhouette. */
    .foreEdgeCard--tl::before,
    .foreEdgeCard--tl::after,
    .foreEdgeCard--bl::before,
    .foreEdgeCard--bl::after {
        left: 112px;
        right: auto;
    }

    .foreEdgeCard--tr::before,
    .foreEdgeCard--tr::after,
    .foreEdgeCard--br::before,
    .foreEdgeCard--br::after {
        left: 28px;
    }

    .foreEdgeCard--tl::before,
    .foreEdgeCard--tr::before {
        height: 48px;
    }

    .foreEdgeCard--tl::after,
    .foreEdgeCard--tr::after {
        top: calc(100% + 44px);
    }

    .foreEdgeCard--bl::before,
    .foreEdgeCard--br::before {
        height: 48px;
    }

    .foreEdgeCard--bl::after,
    .foreEdgeCard--br::after {
        bottom: calc(100% + 44px);
    }
}
/* Compact admission notice: bounded desktop size and scrollable short screens. */
.cautionModal {
    padding: 16px;
}

    .cautionModal .cautionModal__card {
        display: block;
        width: min(620px, 100%);
        max-width: 620px;
        min-height: 0;
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
        border-top-width: 4px;
        border-radius: 18px;
    }

    .cautionModal .cautionModal__brand {
        flex-direction: row;
        justify-content: center;
        gap: 18px;
        min-height: 0;
        padding: 18px 60px 18px 24px;
    }

    .cautionModal .cautionModal__logoWrap {
        flex: 0 0 92px;
        width: 92px;
        margin: 0;
        padding: 6px 8px;
        border-radius: 8px;
        box-shadow: none;
    }

    .cautionModal .cautionModal__label {
        width: auto;
        margin: 0;
        padding: 7px 12px;
        font-size: 12px;
    }

    .cautionModal .cautionModal__noticeIcon,
    .cautionModal .cautionModal__brandDivider,
    .cautionModal .cautionModal__merit,
    .cautionModal .cautionModal__official,
    .cautionModal .cautionModal__brand::after {
        display: none;
    }

    .cautionModal .cautionModal__content {
        padding: 24px 30px;
    }

        .cautionModal .cautionModal__content h3 {
            margin: 0 0 16px !important;
            font-size: 28px !important;
            line-height: 1.2 !important;
            text-align: center !important;
        }

        .cautionModal .cautionModal__content #cautionModalDescription {
            font-size: 14px;
            line-height: 1.65;
            text-align: left;
        }

    .cautionModal .cautionModal__footer {
        flex-direction: column;
        gap: 14px;
        margin-top: 20px;
        padding-top: 16px;
    }

        .cautionModal .cautionModal__footer .byOrder {
            font-size: 13px;
            text-align: center !important;
        }

    .cautionModal .cautionModal__confirm {
        width: auto;
        min-height: 44px;
        margin: 0;
        padding: 10px 24px;
        font-size: 14px;
    }

    .cautionModal .cautionModal__close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

@media (max-width: 480px) {
    .cautionModal .cautionModal__brand {
        gap: 10px;
        padding: 16px 50px 16px 16px;
    }

    .cautionModal .cautionModal__logoWrap {
        flex-basis: 76px;
        width: 76px;
    }

    .cautionModal .cautionModal__label {
        font-size: 10px;
        padding: 6px 9px;
    }

    .cautionModal .cautionModal__content {
        padding: 20px;
    }

        .cautionModal .cautionModal__content h3 {
            font-size: 24px !important;
        }
}
/* Application fee comparison cards. */
.applicationFeeGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    max-width: 1120px;
    margin: 0 auto;
    padding-top: 14px;
}

.applicationFeeOption {
    position: relative;
    min-width: 0;
    padding: 28px 24px;
    border: 1px solid #dce5ef;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(16, 35, 63, .05);
    text-align: center;
}

.academicProgrammes .applicationFeeOption h3 {
    margin: 0 0 12px;
    color: #53647c;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
}

.applicationFeeOption .applicationFeeOption__price {
    margin: 0 0 10px;
    color: var(--fore-navy);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

.applicationFeeOption .applicationFeeOption__tax {
    margin: 0;
    color: #8092ad;
    font-size: 14px;
}

.applicationFeeOption .applicationFeeOption__note {
    margin: 20px 0 0;
    padding-top: 14px;
    border-top: 1px solid #edf1f7;
    color: #53647c;
    font-size: 15px;
    line-height: 1.5;
}

.applicationFeeOption .applicationFeeOption__saving {
    color: #008b65;
    font-weight: 700;
}

.applicationFeeOption--best {
    border: 2px solid #007dcc;
    padding: 27px 23px;
    background: #f0f6ff;
}

    .applicationFeeOption--best .applicationFeeOption__price {
        color: #007dcc;
    }

.applicationFeeOption__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -60%);
    padding: 4px 13px;
    border-radius: 999px;
    background: #007dcc;
    color: white;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .applicationFeeGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 16px;
    }
}

@media (max-width: 480px) {
    .applicationFeeGrid {
        grid-template-columns: 1fr;
    }
}
/* A slow blue-and-gold highlight travels around each programme card frame. */
@property --programme-frame-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.programmeGrid .programmeCard::before {
    background: conic-gradient(from var(--programme-frame-angle), rgba(15, 126, 195, .45) 0deg 220deg, var(--fore-blue) 260deg, var(--fore-gold) 300deg, #fff2bf 320deg, rgba(15, 126, 195, .45) 360deg);
    animation: programmeFrameOrbit 7s linear infinite;
}

.programmeGrid .programmeCard:nth-child(2)::before {
    animation-delay: -1s;
}

.programmeGrid .programmeCard:nth-child(3)::before {
    animation-delay: -2s;
}

.programmeGrid .programmeCard:nth-child(4)::before {
    animation-delay: -3s;
}

.programmeGrid .programmeCard:nth-child(5)::before {
    animation-delay: -4s;
}

.programmeGrid .programmeCard:nth-child(6)::before {
    animation-delay: -5s;
}

@keyframes programmeFrameOrbit {
    to {
        --programme-frame-angle: 360deg;
    }
}

@media (hover: hover) and (pointer: fine) {
    .programmeGrid .programmeCard:hover {
        transform: translateY(-5px);
        box-shadow: 0 16px 32px rgba(15, 126, 195, .22);
    }
}

@media (hover: none) {
    .programmeGrid .programmeCard:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .programmeGrid .programmeCard::before {
        animation: none;
    }

    .programmeGrid .programmeCard:hover {
        transform: none;
    }
}
/* Two-row admissions header, aligned to the supplied reference. */
header.sticky.foreReferenceHeader {
    width: 100%;
    max-width: none;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fdfdff !important;
    box-shadow: 0 1px 0 rgba(16,35,63,.06);
}

.admissionsStrip {
    background: linear-gradient(110deg, #00162f 0%, #07376a 56%, #0079c5 100%);
    color: #fff;
}

.admissionsStrip__inner {
    width: min(calc(100% - 48px), 1608px);
    min-height: 52px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.admissionsStrip__announcement {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 500;
}

.admissionsLive {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid #89762e;
    border-radius: 999px;
    background: #373b32;
    color: #ffcf42;
    font-size: 14px;
    white-space: nowrap;
}

    .admissionsLive i {
        position: relative;
        display: inline-block;
        font-size: 9px;
        animation: liveDotPulse 1.8s ease-in-out infinite;
    }

        .admissionsLive i::after {
            position: absolute;
            inset: -5px;
            border: 1.5px solid currentColor;
            border-radius: 50%;
            content: "";
            animation: liveDotRing 1.8s ease-out infinite;
        }

@keyframes liveDotPulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }
}

@keyframes liveDotRing {
    0% {
        opacity: .65;
        transform: scale(.5);
    }

    100% {
        opacity: 0;
        transform: scale(2.1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .admissionsLive i,
    .admissionsLive i::after {
        animation: none;
    }
}

.admissionsStrip__contacts {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-shrink: 0;
    font-size: 15px;
}

    .admissionsStrip__contacts > span {
        color: #7c96ab;
    }

    .admissionsStrip__contacts a {
        color: #fff;
        white-space: nowrap;
        text-decoration: none;
    }

    .admissionsStrip__contacts i {
        color: var(--fore-gold);
        font-size: 13px;
    }

    .admissionsStrip__contacts button {
        padding: 0;
        border: 0;
        background: none;
        color: #ffcf20;
        text-decoration: underline;
        font-weight: 700;
        white-space: nowrap;
    }

header.foreReferenceHeader > .container-fluid {
    width: min(calc(100% - 48px), 1570px);
    max-width: 1570px;
    padding: 0;
    margin: auto;
}

header.foreReferenceHeader .top-flex {
    display: flex;
    min-height: 103px;
    gap: 64px;
}

header.foreReferenceHeader .fore-logo {
    width: 130px;
    height: 80px;
    max-height: none;
    object-fit: contain;
}

header.foreReferenceHeader .top-right {
    display: flex;
    gap: 16px;
    padding: 0;
}

header.foreReferenceHeader .navbar {
    padding: 0;
}

header.foreReferenceHeader .navbar-expand-lg .navbar-nav {
    gap: 30px;
    margin: 0 !important;
}

header.foreReferenceHeader.sticky .navbar-dark .navbar-nav .nav-link {
    padding: 12px 0 !important;
    color: #39485d !important;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 500;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

    header.foreReferenceHeader.sticky .navbar-dark .navbar-nav .nav-link:hover {
        color: var(--fore-blue) !important;
    }

    header.foreReferenceHeader.sticky .navbar-dark .navbar-nav .nav-link::after {
        display: none;
    }

.headerBatch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 15px;
    border: 1px solid #bddbff;
    border-radius: 999px;
    color: #007dc8;
    background: #eff6ff;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

    .headerBatch i {
        color: #0aba89;
        font-size: 10px;
    }

header.foreReferenceHeader .headerApplyCta {
    display: inline-flex;
    flex-shrink: 0;
    min-height: 50px;
    height: 50px;
    padding: 0 30px;
    border-radius: 999px;
    font-size: 18px;
    gap: 12px;
}

header.foreReferenceHeader .mobMenu {
    display: none;
}

body:has(.foreReferenceHeader) .banner {
    margin-top: 155px !important;
}

body:has(.foreReferenceHeader) :is(#application,#academics,#placement,#rec,#campuslife,#faq,#theforeedge) {
    scroll-margin-top: 175px;
}

@media (min-width: 1251px) and (max-width: 1650px) {
    header.foreReferenceHeader .top-flex {
        gap: 28px;
    }

    header.foreReferenceHeader .navbar-expand-lg .navbar-nav {
        gap: 18px;
    }

    header.foreReferenceHeader.sticky .navbar-dark .navbar-nav .nav-link {
        font-size: 15px;
    }

    header.foreReferenceHeader .headerApplyCta {
        padding: 0 20px;
        font-size: 16px;
    }

    .admissionsStrip__announcement {
        font-size: 15px;
    }

    .admissionsStrip__contacts {
        gap: 12px;
        font-size: 13px;
    }

    .admissionsStrip__campuses {
        display: none;
    }
}

@media (max-width: 1250px) {
    header.foreReferenceHeader .navbar {
        display: none;
    }

    header.foreReferenceHeader .mobMenu {
        display: block;
    }

    header.foreReferenceHeader .top-flex {
        min-height: 84px;
        gap: 20px;
    }

    header.foreReferenceHeader .fore-logo {
        width: 104px;
        height: 66px;
    }

    .admissionsStrip__inner {
        min-height: 44px;
    }

    .admissionsStrip__announcement {
        font-size: 14px;
    }

    .admissionsStrip__campuses {
        display: none;
    }

    .admissionsStrip__contacts {
        font-size: 12px;
        gap: 12px;
    }

    body:has(.foreReferenceHeader) .banner {
        margin-top: 128px !important;
    }

    body:has(.foreReferenceHeader) :is(#application,#academics,#placement,#rec,#campuslife,#faq,#theforeedge) {
        scroll-margin-top: 148px;
    }
}

@media (max-width: 767px) {
    .admissionsStrip__inner {
        width: calc(100% - 24px);
        padding: 8px 0;
        flex-direction: column;
        gap: 6px;
    }

    .admissionsStrip__announcement {
        font-size: 11px;
        gap: 7px;
    }

    .admissionsLive {
        padding: 3px 7px;
        font-size: 11px;
    }

    .admissionsStrip__contacts {
        gap: 10px;
        font-size: 11px;
    }

        .admissionsStrip__contacts a[href^="mailto"], .admissionsStrip__contacts > span {
            display: none;
        }

    header.foreReferenceHeader > .container-fluid {
        width: calc(100% - 24px);
    }

    header.foreReferenceHeader .top-flex {
        min-height: 78px;
        gap: 12px;
    }

    header.foreReferenceHeader .fore-logo {
        width: 88px;
        height: 60px;
    }

    header.foreReferenceHeader .top-right {
        gap: 10px;
    }

    header.foreReferenceHeader .headerBatch {
        display: none;
    }

    header.foreReferenceHeader .headerApplyCta {
        font-size: 13px;
        min-height: 42px;
        height: 42px;
        padding: 0 15px;
        gap: 8px;
    }

    body:has(.foreReferenceHeader) .banner {
        margin-top: 145px !important;
    }

    body:has(.foreReferenceHeader) :is(#application,#academics,#placement,#rec,#campuslife,#faq,#theforeedge) {
        scroll-margin-top: 165px;
    }
}

/* Shared type scale: section titles, card headings, then readable body copy.
   Keep navigation, form controls, numeric highlights and artwork independent. */
:root {
    --fore-title-size: 40px;
    --fore-subtitle-size: 20px;
    --fore-body-size: 16px;
}

body .foreSectionTitle,
body .getText h2.foreSectionTitle {
    font-size: var(--fore-title-size) !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.2 !important;
    letter-spacing: -.025em !important;
    text-align: center !important;
}

    body .foreSectionTitle :is(span, b, strong) {
        font-size: inherit !important;
        line-height: inherit !important;
    }

body :is(.applicationSection, .careerSection, .academicProgrammes, .learningSection, .internshipSection, .alumniSection, .learnSection, .campuslifeSection, .faqSection, footer) :is(p, li, td, th),
body :is(.applicationSection, .academicProgrammes, .learnSection, .faqSection) .accordion-body,
body .programmeCard__feeWords,
body .careerSection .careerSliderSection .heading > p,
body .learningSection .heading > p {
    font-size: var(--fore-body-size) !important;
    line-height: 1.6 !important;
}

    body :is(.applicationSection, .careerSection, .academicProgrammes, .learningSection, .internshipSection, .alumniSection, .learnSection, .campuslifeSection, .faqSection, footer) :is(p, li, td, th) :is(a, span, b, strong) {
        font-size: inherit !important;
        line-height: inherit;
    }

body :is(.careerFull h4, .programmeCard__name, .foreEdgeCard h4, .learningMobile .lmbRight h4, .processCard h5, .applicationBox > h4, .applicationSection .heading > h4, .learnSection .tab h4, .campuslifeSection h4, .footer-heading) {
    font-size: var(--fore-subtitle-size) !important;
    line-height: 1.35 !important;
}

body :is(.applicationSection, .academicProgrammes, .learnSection, .faqSection) .accordion-button {
    font-size: var(--fore-body-size) !important;
    line-height: 1.5 !important;
}

/* More room for the FORE callouts now that their copy uses the shared scale. */
@media (min-width: 1025px) {
    .foreEdgeShowcase {
        height: 660px;
        min-height: 660px;
    }

        .foreEdgeShowcase .instLogo {
            top: 154px;
        }

    .foreEdgeWordmark {
        top: 230px;
    }

    .foreEdgeCard--bl, .foreEdgeCard--br {
        top: 350px;
    }
}

@media (max-width: 1024px) {
    :root {
        --fore-title-size: 32px;
    }
}

@media (max-width: 767px) {
    :root {
        --fore-title-size: 28px;
    }
}

/* ===================================================================
   Eligibility / Important Dates / Contact strip -- rebuilt to match the
   reference design: a light icon-accordion card, a dark photo-backed
   dates timeline, and a light contact strip. Selectors are scoped and
   !important-heavy in a few spots purely to out-rank the many older
   .applicationInner/.feesBox rules earlier in this file (and in the
   legacy style.css/responsive.css) without having to touch or delete
   them, matching the override-layer approach used throughout.
   =================================================================== */
.applicationInner {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
    height: auto !important;
}

/* The base stylesheet swaps .applicationFull for .applicationMobile at
   max-width:1024px (display:none/block, not !important) -- scope the grid
   to desktop only so it doesn't fight that toggle. */
@media (min-width: 1025px) {
    .applicationFull {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        align-items: stretch;
        gap: clamp(18px, 2.4vw, 28px);
    }
}

/* ---------- Eligibility card ---------- */
.eligibilityCard {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: clamp(16px, 2vw, 26px);
    background: #eef5fb;
    border-radius: 24px;
}

.applicationInner .eligibilityCard__title {
    margin: 0 0 6px;
    color: var(--fore-navy) !important;
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 700;
}

    .eligibilityCard__title span {
        color: var(--fore-blue) !important;
    }

.eligibilityItem {
    background: #fff;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(16, 35, 63, .05);
}

    .eligibilityItem .accordion-collapse {
        border: 0;
    }

.eligibilityBtn {
    display: flex !important;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 20px !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 17px;
    font-weight: 700;
    color: var(--fore-navy) !important;
    text-align: left;
}

    .eligibilityBtn::after {
        margin-left: auto;
        background-image: none !important;
        font-family: "bootstrap-icons" !important;
        content: "\f282" !important;
        font-size: 15px;
        color: var(--fore-blue);
        transform: none !important;
        transition: transform .2s ease;
    }

    .eligibilityBtn:not(.collapsed)::after {
        content: "\f286" !important;
    }

    .eligibilityBtn:focus {
        box-shadow: none !important;
    }

    .eligibilityCard .eligibilityBtn:not(.collapsed) {
        border-left-color: transparent !important;
        background: #eaf3fb !important;
        color: var(--fore-navy) !important;
    }

    .eligibilityCard .eligibilityBtn.collapsed {
        background: #fff !important;
        color: var(--fore-navy) !important;
    }

.eligibilityIcon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--fore-blue);
    color: #fff;
    font-size: 18px;
}

.eligibilityLabel {
    flex: 1 1 auto;
}

.eligibilityItem .accordion-body {
    padding: 4px 20px 20px 78px !important;
    background: #eaf3fb;
}

    .eligibilityItem .accordion-body ul {
        margin: 0;
        padding-left: 18px;
        color: #45596e !important;
        font-size: 14.5px;
        line-height: 1.65;
    }

    .eligibilityItem .accordion-body li {
        color: #45596e !important;
    }

    .eligibilityItem .accordion-body b {
        color: var(--fore-navy) !important;
    }

/* ---------- Important Dates panel ---------- */
.datesPanel {
    position: relative;
    overflow: hidden;
    min-height: 320px;
    padding: clamp(24px, 3vw, 36px);
    border-radius: 24px;
    background: linear-gradient(135deg, var(--fore-navy) 0%, var(--fore-blue-deep) 78%);
    isolation: isolate;
}

.datesPanel__content {
    position: relative;
    z-index: 1;
}

.datesPanel__title {
    margin: 0;
    color: #fff;
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 700;
}

    .datesPanel__title span {
        color: #6fc3f7;
    }

.datesPanel__subtitle {
    margin: 6px 0 28px;
    color: #9fb6cc;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.datesTimeline {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .datesTimeline::before {
        position: absolute;
        top: 20px;
        bottom: 20px;
        left: 19px;
        width: 1px;
        background: rgba(255, 255, 255, .25);
        content: "";
    }

    .datesTimeline li {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

        .datesTimeline li:not(:last-child) {
            margin-bottom: 22px;
        }

.datesTimeline__icon {
    position: relative;
    z-index: 1;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: var(--fore-blue-deep);
    font-size: 16px;
    box-shadow: 0 0 0 4px rgba(16, 35, 63, .55);
}

.datesTimeline__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 6px;
}

    .datesTimeline__text b {
        color: #a9c1d6;
        font-size: 13px;
        font-weight: 600;
    }

        .datesTimeline__text b small {
            color: inherit;
            font-size: inherit;
            font-weight: inherit;
        }

    .datesTimeline__text span {
        color: #fff;
        font-size: 16px;
        font-weight: 700;
    }

/* ---------- Contact strip ---------- */
.contactStrip {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: clamp(18px, 2.4vw, 28px);
    background: #fff !important;
    border: 1px solid #e7edf5;
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(16, 35, 63, .06);
}

.contactStrip__item {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    border-right: 1px solid #edf1f6;
    text-decoration: none !important;
    transition: background-color .2s ease;
}

    .contactStrip__item:last-child {
        border-right: 0;
    }

    .contactStrip__item:hover,
    .contactStrip__item:focus-visible {
        background: #f4f9fd;
    }

.contactStrip__icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--fore-blue-soft);
    color: var(--fore-blue);
    font-size: 19px;
}

.contactStrip__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

    .contactStrip__text small {
        color: #7b8ba0;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .02em;
        text-transform: uppercase;
    }

    .contactStrip__text strong {
        overflow: hidden;
        color: var(--fore-navy);
        font-size: 15px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.contactStrip__item--cta {
    justify-content: space-between;
}

.contactStrip__arrow {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fore-blue);
    color: #fff;
    font-size: 16px;
    transition: transform .2s ease;
}

    .contactStrip__item--cta:hover .contactStrip__arrow,
    .contactStrip__item--cta:focus-visible .contactStrip__arrow {
        transform: translateX(3px);
    }

@media (max-width: 900px) {
    .applicationFull {
        grid-template-columns: 1fr;
    }

    .datesPanel {
        min-height: 280px;
    }
}

@media (max-width: 640px) {
    .contactStrip {
        grid-template-columns: repeat(2, 1fr);
    }

    .contactStrip__item {
        border-bottom: 1px solid #edf1f6;
    }

    .contactStrip__item:nth-child(2n) {
        border-right: 0;
    }

    .contactStrip__item:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .contactStrip__text strong {
        white-space: normal;
    }
}

/* ============================================================
   USABILITY AUDIT PATCH — issues 5,6,7,8,9,11,13,15,16,17,24,
   25,27 + third-party widget overrides 18,19,20,21.
   Appended last so it wins on equal specificity.
   ============================================================ */

/* --- 6. Screen-reader-only utility (for the new hero <h1>) --- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- 5. Long all-caps subtitle -> sentence case --- */
.datesPanel__subtitle {
    text-transform: none;
    letter-spacing: .01em;
}

/* --- 7. datesPanel title promoted h4->h3; keep its visual size --- */
h3.datesPanel__title {
    margin: 0;
    color: #fff;
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 700;
}

/* --- 8. "Explore the campuses:" promoted h5->h4; keep label look --- */
.learnSection .heading h4 {
    font-size: clamp(15px, 1.2vw, 18px);
    font-weight: 600;
}

/* --- 9. Footer headings promoted h5->h3; keep label look --- */
footer h3.footer-heading {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: 14px;
}

/* --- 11 + 27. Campus Life slider controls: centre them under the
       heading instead of floating at the far right edge --- */
@media (min-width: 768px) {
    .heading-campuslife {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }

        .heading-campuslife .careerCarouselNav {
            position: static;
            right: auto;
            display: flex;
            justify-content: center;
            gap: 12px;
        }
}

/* --- 13. Fee in words: keep for screen readers, drop visually --- */
.programmeCard__feeWords {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- 15. Mirror the right-hand FORE blocks so the pair frames
       the centre graphic symmetrically --- */
@media (min-width: 1101px) {
    .foreEdgeCard--tr,
    .foreEdgeCard--br {
        text-align: right;
    }

        .foreEdgeCard--tr .foreEdgeCard__head,
        .foreEdgeCard--br .foreEdgeCard__head {
            flex-direction: row-reverse;
        }
}

/* --- 16. Calm the stepped connector lines --- */
.foreEdgeCard--tl::before, .foreEdgeCard--tl::after,
.foreEdgeCard--tr::before, .foreEdgeCard--tr::after,
.foreEdgeCard--bl::before, .foreEdgeCard--bl::after,
.foreEdgeCard--br::before, .foreEdgeCard--br::after {
    opacity: .45;
}

/* --- 17. Tighten the gutter between campus tabs and the image --- */
@media (min-width: 992px) {
    .learnSection .tab-container {
        gap: 28px;
    }
}

/* --- 10 (partial). Let the scattered FORE layout fall back to a
       single readable column before it gets cramped --- */
@media (max-width: 1100px) {
    .foreEdgeShowcase .foreEdgeCard::before,
    .foreEdgeShowcase .foreEdgeCard::after {
        display: none;
    }
}

/* --- 24. Remove the duplicate logo above the FORE wordmark --- */
.foreEdgeShowcase .instLogo {
    display: none;
}

/* --- 25. Active campus tab: stop it looking like a hyperlink --- */
#tabs .tab.active h4,
#tabs .tab h4 {
    text-decoration: none;
}

#tabs .tab.active h4 {
    font-weight: 700;
    color: var(--fore-navy);
}

#tabs .tab.active {
    border-left: 4px solid var(--fore-blue);
    background: rgba(15, 126, 195, .06);
}

#tabs .tab:focus-visible {
    outline: 3px solid var(--fore-gold);
    outline-offset: 2px;
}

/* ============================================================
   THIRD-PARTY ExtraaEdge widget (#ee-form-2).
   Markup is injected at runtime from an external CDN, so these
   are style-only overrides. !important is required to beat the
   widget's own stylesheet.
   ============================================================ */

/* --- ExtraaEdge widget (#ee-form-2) ---
   Button COLOURS are intentionally left as the widget ships them
   (yellow primary/secondary, olive Send OTP) at the client's request,
   so audit items 18, 19 and 21 are deliberately not applied here.
   Only spacing/alignment is corrected below. --- */

/* 20. Consent text needs room to breathe. */
#ee-form-2 [key="iAgree"] {
    margin-bottom: 0 !important;
    min-width: 18px;
    min-height: 18px;
}

#ee-form-2 label[for="ee-form-2-form-2-iAgree"],
#ee-form-2 .iAgree-label,
#ee-form-2 [key="iAgree"] + label {
    line-height: 1.65 !important;
    padding-left: 8px;
    display: inline-block;
}

/* Breathing room above the action row ONLY.
   NOTE: the Send OTP button also carries the .btn-submit class
   ("btn btn-send-otp btn-submit"), so an unscoped .btn-submit rule
   pushes it 18px below the phone field and breaks the row alignment.
   Both selectors below exclude it deliberately. */
#ee-form-2 .btn-submit:not(.btn-send-otp),
#ee-form-2 .btn-login:not(.btn-send-otp) {
    margin-top: 18px !important;
}

/* Keep Send OTP flush with the mobile input it belongs to.
   The row is inline-flex and the button sits inside its own wrapper
   div, so align-self on the button itself does nothing -- the row
   has to centre its children. */
/* The phone wrapper (.iti) carries margin-bottom:8px, so its outer box
   is 40px while the button's is 32px. Centring therefore drops the
   button by half the difference (exactly 4px). Both controls are the
   same 32px height, so top-aligning puts them on the same line. */
#ee-form-2 .inline-inputs {
    align-items: flex-start !important;
}

#ee-form-2 .btn-send-otp {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle;
}

/* --- Heading-outline cleanup (same defect class as 7/8/9) ---
   "To be announced" was marked up as <h5> but is a value, not a
   section title. Now a <p>; these rules preserve the exact look
   (16px/700/24px, 0 0 4px, #fff) it had as a heading. */
.appBox .appBox__value {
    margin: 0 0 4px;
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

/* Labels inside the mobile campus accordion were <h5> directly under
   the <h2> accordion header (a 2->5 skip); promoted to <h3>. */
.learnMobile .accordion-body h3.accordionLabel {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

/* The value element is a <p>, so ".applicationInner .appBox p" (higher
   specificity) was overriding colour and line-height. Restore the exact
   values it had as an <h5>: #fff / 24px. */
.applicationInner .appBox p.appBox__value,
.appBox p.appBox__value {
    margin: 0 0 4px;
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px !important;
}

/* ============================================================
   "One Institute. Two Campuses." — rebuilt to match the supplied
   design. Replaces the old tabbed .learnSection, which also
   retires audit items 17 (tab/image gutter), 25 (active tab
   looked like a link) and 26 (duplicate "Campus Life" label).
   ============================================================ */
.campusesSection {
    position: relative;
    overflow: hidden;
    padding: 72px 0 84px;
    background: linear-gradient(180deg, #f7fbff 0%, #eef6fd 100%);
}

/* soft decorative circles, top-left and top-right */
.campusesBlob {
    position: absolute;
    top: -120px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: rgba(15, 126, 195, .06);
    pointer-events: none;
}

.campusesBlob--l { left: -130px; }
.campusesBlob--r { right: -130px; }

.campusesInner {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 28px;
}

.campusesTitle {
    margin: 0 0 16px;
    color: var(--fore-navy);
    font-size: clamp(28px, 3.1vw, 46px);
    font-weight: 800;
    line-height: 1.18;
    text-align: center;
    letter-spacing: -.01em;
}

.campusesTitle__accent { color: var(--fore-blue); }

.campusesLede {
    max-width: 68ch;
    margin: 0 auto 46px;
    color: #5a6472;
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.6;
    text-align: center;
}

.campusGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
}

.campusCard {
    padding: 14px 14px 16px;
    border: 1px solid #e6eff8;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 34px rgba(13, 35, 64, .07);
}

.campusCard__media {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    line-height: 0;
}

    .campusCard__media img {
        display: block;
        width: 100%;
        height: clamp(220px, 21vw, 320px);
        object-fit: cover;
        object-position: center;
    }

.campusCard__chip {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 13px 26px;
    border-radius: 0 14px 0 14px;
    background: var(--fore-navy);
    color: #fff;
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 700;
    line-height: 1.2;
}

.campusCard__address {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 14px;
    padding: 20px 22px;
    border-radius: 14px;
    background: #eaf4fb;
}

.campusCard__pin {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #d5e9f8;
    color: var(--fore-blue);
    font-size: 21px;
}

.campusCard__addressBody { min-width: 0; }

.campusCard__addressLabel {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
}

.campusCard__addressText {
    margin: 0;
    color: var(--fore-navy);
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 700;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .campusGrid { grid-template-columns: 1fr; gap: 26px; }
    .campusesSection { padding: 52px 0 60px; }
    .campusesInner { padding: 0 18px; }
}

@media (max-width: 560px) {
    .campusCard__address { padding: 16px; gap: 12px; }
    .campusCard__pin { width: 40px; height: 40px; font-size: 18px; }
    .campusCard__chip { padding: 10px 18px; }
}

/* ============================================================
   Campus Life slider — text panels removed on request.
   .campusContent used to supply height:180px, which was the only
   thing giving each card a non-zero box. With it gone the card
   collapsed to 0px, so the lazy-loaded images never intersected
   the viewport and never loaded at all. Give the image its own
   height so the card stands up independently of image load.
   ============================================================ */
.campusSlider .campusFull {
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
}

    .campusSlider .campusFull .campusImage {
        line-height: 0;
    }

        .campusSlider .campusFull .campusImage img {
            display: block;
            width: 100%;
            height: clamp(220px, 21vw, 330px);
            object-fit: cover;
            object-position: center;
        }

/* ============================================================
   IMPORTED SECTIONS  (How to Apply + Important Dates,
   Why FORE highlights, Explore FORE programmes/selection/fee)
   Ported from the supplied standalone HTML files.
   The originals carried a global reset and a body rule; both are
   SCOPED here so they cannot leak into the rest of the page.
   ============================================================ */
.mba-apply-section,
.fore-why-section,
.fore-admission-section {
    font-family: "Poppins", Arial, Helvetica, sans-serif;
    color: #17233c;
}

.mba-apply-section *,
.fore-why-section *,
.fore-admission-section * {
    box-sizing: border-box;
}

.mba-apply-section h1, .mba-apply-section h2, .mba-apply-section h3,
.mba-apply-section h4, .mba-apply-section p,
.fore-why-section h1, .fore-why-section h2, .fore-why-section h3,
.fore-why-section h4, .fore-why-section p,
.fore-admission-section h1, .fore-admission-section h2, .fore-admission-section h3,
.fore-admission-section h4, .fore-admission-section p {
    margin: 0;
    padding: 0;
}

/* ===================== HOW TO APPLY ===================== */
.mba-apply-section { width: 100%; padding: 50px 15px; background: linear-gradient(135deg, #f8f9fc 0%, #eef1f6 100%); }
.mba-apply-container { max-width: 1250px; margin: auto; display: grid; grid-template-columns: 2fr 0.75fr; gap: 25px; align-items: stretch; }
.apply-column { background: #fff; padding: 38px 38px 32px; border-radius: 18px; box-shadow: 0 12px 35px rgba(23,35,60,.08); border: 1px solid #edf0f5; }
.mba-apply-section .section-heading { margin-bottom: 30px; }
.mba-apply-section .section-heading h2 { font-size: 30px; line-height: 1.2; font-weight: 700; color: #17233c; }
.mba-apply-section .section-heading h2 span { color: #dd8c07; }
.mba-apply-section .section-heading p { margin-top: 7px; font-size: 12px; color: #747c8c; }

.horizontal-process { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; position: relative; margin-top: 34px; }
.horizontal-process::before { content: ""; position: absolute; left: 8%; right: 8%; top: 27px; height: 2px; background: #e2e5eb; z-index: 0; }
.horizontal-step { flex: 1; text-align: center; position: relative; z-index: 2; min-width: 0; }
.step-circle { width: 56px; height: 56px; margin: 0 auto 13px; border-radius: 50%; background: #17233c; color: #17bdfa; display: flex; align-items: center; justify-content: center; font-size: 17px; position: relative; border: 5px solid #fff; box-shadow: 0 6px 18px rgba(23,35,60,.18); transition: all .3s ease; }
.horizontal-step:hover .step-circle { background: #a51c30; transform: translateY(-5px) scale(1.05); box-shadow: 0 10px 22px rgba(165,28,48,.25); }
.step-info h3 { font-size: 13px; line-height: 1.3; font-weight: 700; color: #17233c; margin-bottom: 4px; }
.step-info p { font-size: 9px; line-height: 1.45; color: #7c8493; padding: 0 4px; }
.process-arrow { flex: 0 0 25px; display: flex; align-items: center; justify-content: center; margin-top: 22px; color: #a51c30; font-size: 11px; z-index: 3; }
.process-arrow i { animation: arrowMove 1.8s infinite ease-in-out; }
@keyframes arrowMove { 0%,100% { transform: translateX(0); opacity: .45; } 50% { transform: translateX(4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .process-arrow i { animation: none; } }
.application-flow-label { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 28px; font-size: 10px; color: #8a919f; }
.application-flow-label span { height: 1px; width: 45px; background: #dfe3e9; }
.application-flow-label b { font-weight: 500; }
.apply-button { display: flex; align-items: center; justify-content: center; width: fit-content; margin: 20px auto 0; padding: 11px 24px; background: #dd8c07; color: #fff; text-decoration: none; border-radius: 7px; font-size: 12px; font-weight: 600; transition: all .3s ease; }
.apply-button i { margin-left: 9px; transition: transform .3s ease; }
.apply-button:hover { background: #17233c; transform: translateY(-2px); color: #fff; }
.apply-button:hover i { transform: translateX(4px); }

.dates-column { display: flex; }
.dates-card { width: 100%; background: #061c4b; color: #fff; padding: 30px 23px; border-radius: 18px; position: relative; overflow: hidden; box-shadow: 0 12px 35px rgba(23,35,60,.15); }
.dates-card::before { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; border: 35px solid rgba(255,255,255,.035); right: -110px; top: -100px; }
.dates-card::after { content: ""; position: absolute; width: 100px; height: 100px; border-radius: 50%; background: rgba(165,28,48,.12); left: -55px; bottom: -45px; }
.dates-header { display: flex; align-items: center; gap: 13px; padding-bottom: 24px; position: relative; z-index: 2; }
.calendar-icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 10px; background: #dd8c07; display: flex; align-items: center; justify-content: center; font-size: 19px; color: #fff; }
.dates-header span { display: block; font-size: 9px; font-weight: 600; letter-spacing: 1.5px; color: #cbd3e3; }
.dates-header h2 { margin-top: 3px; font-size: 22px; line-height: 1.2; color: #fff; }
.date-timeline { position: relative; padding-left: 19px; z-index: 2; }
.date-timeline::before { content: ""; position: absolute; left: 4px; top: 7px; bottom: 7px; width: 1px; background: rgba(255,255,255,.18); }
.date-item { position: relative; padding: 0 0 23px 20px; }
.date-item:last-child { padding-bottom: 5px; }
.date-dot { position: absolute; left: -20px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: #dd8c07; border: 2px solid #fff; }
.date-item.active .date-dot { width: 12px; height: 12px; left: -21.5px; top: 3px; background: #dd8c07; box-shadow: 0 0 0 5px rgba(23,189,250,.5); }
.date-label { display: block; font-size: 8px; font-weight: 700; letter-spacing: 1px; color: #cbd3e3; }
.date-content h3 { margin-top: 4px; margin-bottom: 3px; font-size: 14px; line-height: 1.3; color: #fff; }
.date-content p { font-size: 10px; line-height: 1.45; color: #aeb8cb; }

@media (max-width: 1050px) {
    .mba-apply-container { grid-template-columns: 1fr 0.75fr; }
    .apply-column { padding: 32px 25px; }
    .step-info h3 { font-size: 11px; }
    .step-info p { font-size: 8px; }
    .process-arrow { flex: 0 0 18px; }
    .step-circle { width: 52px; height: 52px; }
}
@media (max-width: 800px) {
    .mba-apply-container { grid-template-columns: 1fr; }
    .dates-column { width: 100%; }
    .horizontal-process { gap: 5px; }
    .step-info h3 { font-size: 12px; }
    .step-info p { font-size: 9px; }
}
@media (max-width: 600px) {
    .mba-apply-section { padding: 35px 15px; }
    .apply-column { padding: 28px 20px; }
    .mba-apply-section .section-heading h2 { font-size: 25px; }
    .horizontal-process { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px 10px; }
    .horizontal-process::before, .process-arrow, .application-flow-label { display: none; }
    .step-circle { width: 55px; height: 55px; }
    .dates-card { padding: 28px 22px; }
}
@media (max-width: 400px) {
    .horizontal-process { grid-template-columns: 1fr; }
    .step-info p { font-size: 10px; }
}

/* ===================== WHY FORE ===================== */
.fore-why-section { padding: 42px 20px; background: #f5f8fb; }
.fore-why-container { max-width: 1180px; margin: auto; }
.fore-why-heading { text-align: center; margin-bottom: 25px; }
.fore-why-heading > span { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 2px; color: #c49a42; margin-bottom: 6px; }
.fore-why-heading h2 { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 800; color: #003b70; }
.fore-why-heading h2 b { color: #c49a42; }
.fore-why-heading p { margin: 8px auto 0; max-width: 650px; font-size: 13px; line-height: 1.5; color: #68798a; }
.fore-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fore-why-item { display: flex; align-items: center; gap: 10px; min-height: 82px; padding: 12px 13px; background: #fff; border: 1px solid #e4ebf1; border-radius: 12px; transition: all .25s ease; }
.fore-why-item:hover { transform: translateY(-3px); border-color: #c49a42; box-shadow: 0 8px 20px rgba(0,45,85,.08); }
.fore-icon { flex-shrink: 0; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #eef5fa; font-size: 18px; }
.fore-why-item strong { display: block; margin-bottom: 3px; color: #003b70; font-size: 14px; line-height: 1.25; }
.fore-why-item p { margin: 0; color: #758494; font-size: 11.5px; line-height: 1.35; }
.global-institutes { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.global-institutes span { padding: 2px; border-radius: 20px; background: #fff; border: 1px solid rgba(0,59,112,.10); color: var(--fore-blue); font-size: 6px; font-weight: 700; }
@media (max-width: 1000px) { .fore-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
    .fore-why-section { padding: 32px 14px; }
    .fore-why-heading h2 { font-size: 26px; }
    .fore-why-heading p { font-size: 12px; }
    .fore-why-grid { grid-template-columns: 1fr; }
    .fore-why-item { min-height: 70px; }
}

/* ===================== EXPLORE FORE ===================== */
.fore-admission-section { padding: 55px 20px; background: #f5f7fa; font-family: Arial, Helvetica, sans-serif; }
.fore-admission-container { max-width: 1200px; margin: auto; }
.fore-admission-heading { text-align: center; margin-bottom: 25px; }
.fore-admission-heading > span { color: #b58a2b; font-size: 10px; font-weight: 800; letter-spacing: 2px; }
.fore-admission-heading h2 { margin: 6px 0; color: #17365d; font-size: 32px; }
.fore-admission-heading h2 b { color: #b58a2b; }
.fore-admission-heading p { margin: 0; color: #788393; font-size: 12px; }
.fore-admission-tabs { max-width: 720px; margin: 0 auto 30px; display: flex; padding: 5px; background: #fff; border: 1px solid #e1e6ed; border-radius: 50px; box-shadow: 0 5px 20px rgba(20,45,75,.07); }
.fore-tab { flex: 1; border: 0; background: transparent; padding: 12px 18px; border-radius: 40px; color: #667384; font-size: 11px; font-weight: 700; cursor: pointer; transition: .3s ease; }
.fore-tab:hover { color: #17365d; }
.fore-tab.active { background: #17365d; color: #fff; box-shadow: 0 5px 14px rgba(23,54,93,.20); }
.fore-tab:focus-visible { outline: 3px solid #c49a3a; outline-offset: 2px; }
.tab-symbol { margin-right: 6px; font-size: 13px; }
.fore-tab-content { display: none; }
.fore-tab-content.active { display: block; animation: foreFade .35s ease; }
@keyframes foreFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .fore-tab-content.active { animation: none; } }
.fore-programme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fore-programme-card { background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid #e2e7ed; box-shadow: 0 7px 25px rgba(20,45,75,.055); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.fore-programme-card:hover { transform: translateY(-7px); border-color: #c49a3a; box-shadow: 0 18px 40px rgba(20,45,75,.13); }





.programme-label { position: absolute; top: 14px; right: 14px; padding: 5px 9px; background: #c49a3a; color: #fff; border-radius: 20px; font-size: 7px; font-weight: 800; letter-spacing: .8px; z-index: 3; }
.programme-card-body { padding: 19px; }
.programme-code { color: #b58a2b; font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.programme-card-body h3 { color: #17365d; font-size: 18px; line-height: 1.3; min-height: 47px; margin: 7px 0 17px; font-weight: 800; }
.programme-details { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid #edf0f4; border-bottom: 1px solid #edf0f4; grid-auto-flow: column; }






































@media (max-width: 950px) { .fore-programme-grid { grid-template-columns: repeat(2, 1fr); }  }
@media (max-width: 600px) {
    .fore-admission-heading h2 { font-size: 26px; }
    .fore-admission-tabs { flex-direction: column; border-radius: 18px; }
    .fore-tab { border-radius: 14px; }
    .fore-programme-grid { grid-template-columns: 1fr; }
    
    
    
    
    
    
    
    
    
}

/* ============================================================
   PLACEMENT HIGHLIGHTS — mobile fix.
   The infographic is a single wide artwork held at min-width:700px
   inside a 324px viewport on a 375px phone, so 376px (54% of it)
   sat behind a horizontal scrollbar: the donut was sliced in half
   and the whole "Placement Pinnacle" panel was unreachable.
   Below 768px the graphic is hidden and the same headline numbers
   are shown as stacked cards instead.
   ============================================================ */

/* desktop / tablet: cards hidden, infographic does the work */
.placementStatsMobile {
    display: none;
}

@media (max-width: 767px) {
    .internshipSection .placementHighlightsViewport {
        display: none;
    }

    .placementStatsMobile {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        width: 100%;
        max-width: 420px;
        margin: 0 auto 30px;
        padding: 0 4px;
    }

    .placementStat {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 20px;
        border-radius: 14px;
        background: linear-gradient(135deg, #0b2a54 0%, #10447c 100%);
        box-shadow: 0 8px 22px rgba(6, 32, 69, .18);
    }

    .placementStat__label {
        color: #cfe4f6;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .placementStat__value {
        color: #ffd43b;
        font-size: 30px;
        font-weight: 800;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

        .placementStat__value small {
            margin-left: 3px;
            font-size: 14px;
            font-weight: 700;
        }
}

/* Very small phones: keep the numbers from crowding the labels */
@media (max-width: 360px) {
    .placementStat {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ============================================================
   PLACEMENT HIGHLIGHTS — alignment + rhythm pass.

   Before: the three blocks each had their own measure, so nothing
   shared a vertical edge at desktop widths (1425px viewport):
       heading      left 93   right 1332  (1238 wide)
       infographic  left 152  right 1272  (1120 wide, max-width 1120)
       marquee      left 112  right 1312  (1200 wide, max-width 1200)
   -> 40px mismatch on each side between infographic and marquee.

   After: one shared measure + one spacing scale, so every block
   starts and ends on the same line.
   ============================================================ */
.internshipSection {
    --placement-measure: 1200px;
    --placement-gutter: clamp(16px, 3vw, 32px);
    --placement-gap-sm: clamp(18px, 2.2vw, 28px);
    --placement-gap-md: clamp(34px, 4.2vw, 56px);
    --placement-gap-lg: clamp(48px, 6vw, 84px);
}

    /* every direct block shares the same measure and gutters */
    .internshipSection > .container-fluid {
        width: 100%;
        max-width: none;
        padding-inline: var(--placement-gutter);
    }

    .internshipSection h3,
    .internshipSection .placementHighlightsViewport,
    .internshipSection .placementStatsMobile,
    .internshipSection .recruiterMarquee {
        width: 100%;
        max-width: var(--placement-measure);
        margin-inline: auto;
    }

    /* vertical rhythm on one scale instead of ad-hoc values */
    .internshipSection h3 {
        margin-bottom: var(--placement-gap-md) !important;
    }

    .internshipSection .placementHighlightsViewport {
        margin-top: 0;
        margin-bottom: var(--placement-gap-lg);
    }

    .internshipSection .recruiterMarquee {
        margin-top: 0;
        margin-bottom: 0;
    }

        .internshipSection .recruiterMarquee .waveText h4 {
            margin-bottom: var(--placement-gap-sm) !important;
        }

/* Soften the marquee's hard edges. Logos were being sliced mid-word
   at both ends; a mask fades them out instead of cutting them. */
.internshipSection .logo-viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

/* Mobile: keep the stat cards on the same measure, tighter rhythm */
@media (max-width: 767px) {
    .internshipSection .placementStatsMobile {
        max-width: 480px;
        margin-bottom: var(--placement-gap-md);
    }

    .internshipSection .logo-viewport {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    }
}

/* ============================================================
   KEY RECRUITERS — replaces the old .recruiterMarquee block.
   Every selector is scoped under .recruiters-section: the page
   already uses .arrow in 8 other places, and .marquee /
   .logo-text / .section-header are generic enough to collide,
   so nothing here is allowed to leak out of this section.
   ============================================================ */
.recruiters-section {
    position: relative;
    overflow: hidden;
    padding: 80px 20px;
    background:
        radial-gradient(circle at 10% 20%, rgba(174, 28, 48, .07), transparent 28%),
        radial-gradient(circle at 90% 80%, rgba(22, 38, 68, .06), transparent 30%),
        #f8f9fb;
    font-family: Arial, Helvetica, sans-serif;
    color: #172033;
}

    .recruiters-section * {
        box-sizing: border-box;
    }

    .recruiters-section h2,
    .recruiters-section h3,
    .recruiters-section p {
        margin: 0;
        padding: 0;
    }

.recruiters-container {
    width: 100%;
    max-width: 1240px;
    margin: auto;
}

/* ---------- header ---------- */
.recruiters-section .section-header {
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center;
}

.recruiters-section .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: #a71930;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

    .recruiters-section .eyebrow::before,
    .recruiters-section .eyebrow::after {
        content: "";
        width: 28px;
        height: 1px;
        background: #a71930;
    }

.recruiters-section .section-header h2 {
    margin-bottom: 15px;
    color: #16223a;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.1;
    letter-spacing: -1.5px;
}

    .recruiters-section .section-header h2 span {
        color: #a71930;
    }

.recruiters-section .section-header p {
    color: #667085;
    font-size: 17px;
    line-height: 1.7;
}

/* ---------- featured ---------- */
.recruiters-section .featured-label {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

    .recruiters-section .featured-label span {
        white-space: nowrap;
        color: #667085;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
    }

    .recruiters-section .featured-label::before,
    .recruiters-section .featured-label::after {
        content: "";
        height: 1px;
        flex: 1;
        background: #e2e5ea;
    }

.recruiters-section .featured-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-bottom: 55px;
}

.recruiters-section .recruiter-card {
    position: relative;
    height: 115px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

    .recruiters-section .recruiter-card::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 3px;
        background: #a71930;
        border-radius: 4px 4px 0 0;
        transform: translateX(-50%);
        transition: width .3s ease;
    }

    .recruiters-section .recruiter-card:hover {
        transform: translateY(-6px);
        border-color: rgba(167, 25, 48, .25);
        box-shadow: 0 14px 35px rgba(16, 24, 40, .10);
    }

        .recruiters-section .recruiter-card:hover::before {
            width: 55%;
        }

    .recruiters-section .recruiter-card img {
        width: 100%;
        max-width: 125px;
        max-height: 58px;
        object-fit: contain;
    }

.recruiters-section .logo-text {
    font-size: 20px;
    font-weight: 700;
    color: #263348;
    text-align: center;
}

/* ---------- marquee ---------- */
.recruiters-section .marquee-heading {
    margin-bottom: 28px;
    text-align: center;
}

    .recruiters-section .marquee-heading h3 {
        margin-bottom: 7px;
        color: #182337;
        font-size: 23px;
    }

    .recruiters-section .marquee-heading p {
        color: #7b8494;
        font-size: 14px;
    }

.recruiters-section .marquee-wrapper {
    position: relative;
}

    .recruiters-section .marquee-wrapper::before,
    .recruiters-section .marquee-wrapper::after {
        content: "";
        position: absolute;
        z-index: 4;
        top: 0;
        width: 110px;
        height: 100%;
        pointer-events: none;
    }

    .recruiters-section .marquee-wrapper::before {
        left: 0;
        background: linear-gradient(to right, #f8f9fb, rgba(248, 249, 251, 0));
    }

    .recruiters-section .marquee-wrapper::after {
        right: 0;
        background: linear-gradient(to left, #f8f9fb, rgba(248, 249, 251, 0));
    }

.recruiters-section .marquee {
    overflow: hidden;
    margin-bottom: 14px;
}

.recruiters-section .marquee-track {
    display: flex;
    width: max-content;
    gap: 14px;
    animation: recruitersScrollLeft 30s linear infinite;
}

.recruiters-section .marquee.reverse .marquee-track {
    animation: recruitersScrollRight 34s linear infinite;
}

.recruiters-section .marquee:hover .marquee-track {
    animation-play-state: paused;
}

.recruiters-section .marquee-logo {
    width: 170px;
    height: 78px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid #e5e7eb;
    border-radius: 11px;
    transition: transform .25s ease, box-shadow .25s ease;
}

    .recruiters-section .marquee-logo:hover {
        transform: scale(1.04);
        box-shadow: 0 8px 25px rgba(0, 0, 0, .07);
    }

    .recruiters-section .marquee-logo img {
        width: 100%;
        max-width: 115px;
        max-height: 46px;
        object-fit: contain;
    }

    .recruiters-section .marquee-logo .logo-text {
        font-size: 16px;
    }

/* ---------- CTA ---------- */
.recruiters-section .placement-cta {
    margin-top: 45px;
    text-align: center;
}

    .recruiters-section .placement-cta a {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 14px 24px;
        color: #fff;
        background: #a71930;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        transition: transform .25s ease, box-shadow .25s ease;
    }

        .recruiters-section .placement-cta a:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(167, 25, 48, .25);
        }

    .recruiters-section .placement-cta .arrow {
        transition: transform .25s ease;
    }

    .recruiters-section .placement-cta a:hover .arrow {
        transform: translateX(4px);
    }

/* ---------- animations ---------- */
@keyframes recruitersScrollLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes recruitersScrollRight {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .recruiters-section .marquee-track {
        animation: none !important;
    }

    .recruiters-section .marquee {
        overflow-x: auto;
    }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    .recruiters-section .featured-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 650px) {
    .recruiters-section {
        padding: 58px 14px;
    }

    .recruiters-section .section-header {
        margin-bottom: 36px;
    }

        .recruiters-section .section-header h2 {
            font-size: 34px;
        }

        .recruiters-section .section-header p {
            font-size: 15px;
        }

    .recruiters-section .featured-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 45px;
    }

    .recruiters-section .recruiter-card {
        height: 95px;
        padding: 15px;
    }

    .recruiters-section .marquee-logo {
        width: 140px;
        height: 70px;
    }

    .recruiters-section .marquee-wrapper::before,
    .recruiters-section .marquee-wrapper::after {
        width: 45px;
    }
}

/* ============================================================
   KEY RECRUITERS — heading swapped to the FORE section style,
   logo tiles enlarged.

   NOTE ON SHARPNESS: every recruiter logo is 205x118 in both the
   .webp and the .jpg original — there is no higher-res source in
   the project. On a 2x display the sharp ceiling is ~102 CSS px
   wide, so the previous 125px was ALREADY upscaling. Enlarging
   further trades a little more softness for presence; the only
   real fix is higher-resolution artwork.
   The logos also carry a thin frame + padding baked into the
   canvas, which is what produced the box-inside-a-box look. A
   small scale-and-clip trims it so the mark itself reads larger
   without enlarging the tile further.
   ============================================================ */

/* let the page's own section heading style win inside this section */
.recruiters-section .section-header {
    margin: 0 auto 40px;
}

    .recruiters-section .section-header h2.foreSectionTitle {
        margin: 0;
        color: inherit;
        font-size: inherit;
        line-height: inherit;
        letter-spacing: inherit;
    }

        .recruiters-section .section-header h2.foreSectionTitle span {
            color: inherit;
        }

/* ---------- featured tiles: larger ---------- */
.recruiters-section .recruiter-card {
    height: 132px;
    padding: 14px;
    overflow: hidden;
}

    .recruiters-section .recruiter-card img {
        max-width: 158px;
        max-height: 80px;
        transform: scale(1.1);          /* trims the frame baked into the artwork */
        transform-origin: center;
    }

/* ---------- marquee tiles: larger ---------- */
.recruiters-section .marquee-logo {
    width: 196px;
    height: 96px;
    padding: 12px 16px;
    overflow: hidden;
}

    .recruiters-section .marquee-logo img {
        max-width: 152px;
        max-height: 66px;
        transform: scale(1.1);
        transform-origin: center;
    }

@media (max-width: 650px) {
    .recruiters-section .recruiter-card {
        height: 108px;
        padding: 10px;
    }

        .recruiters-section .recruiter-card img {
            max-width: 128px;
            max-height: 64px;
        }

    .recruiters-section .marquee-logo {
        width: 162px;
        height: 84px;
    }

        .recruiters-section .marquee-logo img {
            max-width: 128px;
            max-height: 56px;
        }
}

/* ============================================================
   IMPORTED SECTIONS — heading typography + theme normalisation.

   The three imported sections shipped with their own heading
   scale and their own gold/amber accents, so they read as a
   different product next to the rest of the page:

                      size  weight  tracking  accent
     canonical        28px    700   -0.025em  #0f7ec3 blue
     How to Apply     25px    600   normal    #dd8c07 amber
     Important Dates  22px    600   normal    -
     Why FORE         26px    600   normal    #c49a42 gold
     Explore FORE     26px    600   normal    #b58a2b gold

   These rules put all four on the canonical scale and palette,
   matching "body .foreSectionTitle". Font family already
   matched (jiotyperegular inherited from the page).
   ============================================================ */

/* ---- heading scale: match body .foreSectionTitle exactly ---- */
.mba-apply-section .section-heading h2,
.fore-why-heading h2,
.fore-admission-heading h2,
.dates-card .dates-header h2 {
    font-size: var(--fore-title-size);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

/* ---- colour: navy body, blue accent word ---- */
.mba-apply-section .section-heading h2,
.fore-why-heading h2,
.fore-admission-heading h2 {
    color: var(--fore-navy);
}

    .mba-apply-section .section-heading h2 span,
    .fore-why-heading h2 b,
    .fore-admission-heading h2 b {
        color: var(--fore-blue);
        font-weight: inherit;
    }

/* the dates card sits on navy, so its heading stays white */
.dates-card .dates-header h2 {
    color: #fff;
}

/* ---- eyebrows / kickers: gold -> the page's blue ---- */
.fore-why-heading > span,
.fore-admission-heading > span {
    color: var(--fore-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* ---- supporting copy: one muted tone instead of three ---- */
.mba-apply-section .section-heading p,
.fore-why-heading p,
.fore-admission-heading p {
    color: #5b6472;
    font-size: clamp(13px, 1.05vw, 15px);
    line-height: 1.6;
}

/* ---- sub-headings inside the imported sections ---- */



.programme-code{
    color: var(--fore-blue);
}

/* programme card banner + chips on the page's blue, not slate/gold */


.programme-label{
    background: var(--fore-blue);
}







    


.fore-programme-card:hover {
    border-color: var(--fore-blue);
}



.fore-tab.active {
    background: var(--fore-navy);
}

.fore-why-item:hover {
    border-color: var(--fore-blue);
}

@media (max-width: 767px) {
    .mba-apply-section .section-heading h2,
    .fore-why-heading h2,
    .fore-admission-heading h2 {
        font-size: clamp(24px, 6.4vw, 28px);
    }

    .dates-card .dates-header h2 {
        font-size: clamp(20px, 5.6vw, 24px);
    }
}

/* A third-party stylesheet loaded into the page (not in this project -- an
   inline style set to 700 on these h2s still computed 600) forces a lighter
   weight on bare headings. The canonical .foreSectionTitle escapes it via its
   own class rule; these imported headings are bare h2s, so they need the
   override stated explicitly to reach the page's 700. */
.mba-apply-section .section-heading h2,
.fore-why-heading h2,
.fore-admission-heading h2,
.dates-card .dates-header h2 {
    font-weight: 700 !important;
}

/* ============================================================
   APPLICATION PROCESS & IMPORTANT DATES — section title + alignment

   Fixes measured at 1440px:
     - "Important Dates" was wrapping to 2 lines: the heading
       normalisation gave it the 40px section scale, but it sits
       in a 334px card beside a 48px icon, leaving ~227px.
       Card headings get their own smaller scale.
     - 121px of dead space under the Apply Now button, because the
       left column stretches to match the taller dates card. The
       column is now a flex column and the footer block is pushed
       down with margin-top:auto instead of leaving a gap.
   ============================================================ */

/* section title shares the container's measure */
.mba-apply-heading {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto clamp(26px, 3vw, 40px);
    padding: 0 15px;
}

/* card headings: their own scale, NOT the 40px section scale */
.mba-apply-section .section-heading h3,
.dates-card .dates-header h3 {
    font-size: clamp(20px, 1.9vw, 26px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.mba-apply-section .section-heading h3 {
    color: var(--fore-navy);
}

    .mba-apply-section .section-heading h3 span {
        color: var(--fore-blue);
    }

.dates-card .dates-header h3 {
    color: #fff;
    white-space: nowrap;      /* "Important Dates" stays on one line */
}

/* left column: fill the height instead of leaving a gap at the bottom */
.apply-column {
    display: flex;
    flex-direction: column;
}

    .apply-column .horizontal-process {
        margin-top: clamp(26px, 3vw, 34px);
    }

    .apply-column .application-flow-label {
        margin-top: auto;      /* pushes the footer block to the bottom */
        padding-top: 24px;
    }

@media (max-width: 800px) {
    .dates-card .dates-header h3 {
        white-space: normal;
    }

    .apply-column .application-flow-label {
        margin-top: 28px;
    }
}

/* Centre the "How to Apply" card heading and its subtitle, so it sits on the
   same axis as the step row and the Apply Now button below it. */
.mba-apply-section .section-heading {
    text-align: center;
}

    .mba-apply-section .section-heading h3,
    .mba-apply-section .section-heading p {
        text-align: center;
    }

    .mba-apply-section .section-heading p {
        margin-left: auto;
        margin-right: auto;
        max-width: 56ch;
    }

/* ============================================================
   PLACEMENT -> KEY RECRUITERS — close the orphaned gap.

   The infographic carried margin-bottom: var(--placement-gap-lg)
   (84px at 1440px) to separate it from the old .recruiterMarquee
   block that used to sit below it INSIDE #placement. That block
   was replaced by the standalone .recruiters-section, so the
   infographic is now the last child and the margin became pure
   trailing space, stacking with #placement's 48px padding-bottom
   and the recruiters section's 80px padding-top:

       84 + 48 + 80 = 212px of white above the heading.

   Collapse the orphaned margin and trim both paddings so the two
   sections read as one gap (~68px desktop / ~46px mobile).
   ============================================================ */
/* NOTE: :last-child does NOT work here -- .placementStatsMobile is the
   last child in the markup (display:none on desktop), so the viewport
   never matches it. Nothing visible follows either block inside the
   section any more, so both trailing margins are zeroed outright. */
.internshipSection .placementHighlightsViewport,
.internshipSection .placementStatsMobile {
    margin-bottom: 0;
}

.internshipSection#placement {
    padding-bottom: clamp(18px, 1.8vw, 26px) !important;
}

.recruiters-section {
    padding-top: clamp(34px, 3vw, 42px);
}

@media (max-width: 767px) {
    .internshipSection#placement {
        padding-bottom: 18px !important;
    }
}

@media (max-width: 650px) {
    .recruiters-section {
        padding-top: 30px;
    }
}


/* ████████████████████████████████████████████████████████████████████
   PROGRAMMES OFFERED / SELECTION CRITERIA / APPLICATION FEE
   Imported from FORE_Programmes_Compact (3).html.

   Imported as-is: only the rules the new markup actually uses were
   carried over. The source sheet had accumulated ~5 generations of
   rules for the same section, including the whole previous design
   (.programme-banner, .programme-icon, .detail, .selection-box,
   .fee-card*, .fee-header*, .fee-featured-tag) -- 84 selectors that
   the new markup no longer contains. Those were dropped.

   Verified identical to the source file at 1200 / 760 / 600px across
   all three tab panels: 26 selectors x 25 computed properties, then
   27 selectors x 21 properties for the criteria / fee / dialog panels.

   The 2.24 MB base64 PNG that the source inlined as a 3x2 sprite is
   now assets/fore/programme-photos.webp (277 KB, 2069x760, cells
   690x380). The sprite sheet is kept whole -- 2069/3 is not an
   integer, so slicing it into six files would shift every cell by a
   sub-pixel and stop it being a pixel copy.

   Typography is normalised to the page in the block that follows.
   ████████████████████████████████████████████████████████████████████ */

/* =====================================================
   MAIN SECTION
===================================================== */

.fore-admission-section {
    padding: 55px 20px;
    background: #f5f7fa;
    font-family: Arial, Helvetica, sans-serif;
}

.fore-admission-container {
    max-width: 1200px;
    margin: auto;
}

/* =====================================================
   HEADING
===================================================== */

.fore-admission-heading {
    text-align: center;
    margin-bottom: 25px;
}

.fore-admission-heading > span {
    color: #A87100;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.fore-admission-heading h2 {
    margin: 6px 0;
    color: #075AA5;
    font-size: 32px;
}

.fore-admission-heading h2 b {
    color: #A87100;
}

.fore-admission-heading p {
    margin: 0;
    color: #788393;
    font-size: 12px;
}

/* =====================================================
   TOGGLE
===================================================== */

.fore-admission-tabs {
    max-width: 720px;
    margin: 0 auto 30px;
    display: flex;
    padding: 5px;
    background: #ffffff;
    border: 1px solid #e1e6ed;
    border-radius: 50px;
    box-shadow: 0 5px 20px rgba(20,45,75,.07);
}

.fore-tab {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 12px 18px;
    border-radius: 40px;
    color: #667384;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: .3s ease;
}

.fore-tab:hover {
    color: #075AA5;
}

.fore-tab.active {
    background: #075AA5;
    color: #ffffff;
    box-shadow: 0 5px 14px rgba(23,54,93,.20);
}

.tab-symbol {
    margin-right: 6px;
    font-size: 13px;
}

/* =====================================================
   TAB CONTENT
===================================================== */

.fore-tab-content {
    display: none;
}

.fore-tab-content.active {
    display: block;
    animation: foreFade .35s ease;
}

@keyframes foreFade {
    from {
        opacity: 0;
    transform: translateY(8px);
    }

    to {
        opacity: 1;
    transform: translateY(0);
    };
}

/* =====================================================
   PROGRAMME GRID
===================================================== */

.fore-programme-grid {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 20px;
}

/* =====================================================
   PROGRAMME CARD
===================================================== */

.fore-programme-card {
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #e2e7ed;
    box-shadow:
        0 7px 25px rgba(20,45,75,.055);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.fore-programme-card:hover {
    transform: translateY(-7px);
    border-color: #FFCB05;
    box-shadow:
        0 18px 40px rgba(20,45,75,.13);
}

/* =====================================================
   LABEL
===================================================== */

.programme-label {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 5px 9px;
    background: #FFCB05;
    color: #ffffff;
    border-radius: 20px;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .8px;
    z-index: 3;
}

/* =====================================================
   CARD BODY
===================================================== */

.programme-card-body {
    padding: 19px;
}

.programme-code {
    color: #A87100;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.programme-card-body h3 {
    color: #075AA5;
    font-size: 18px;
    line-height: 1.3;
    min-height: 47px;
    margin: 7px 0 17px;
    font-weight: 800;
}

/* =====================================================
   DETAILS
===================================================== */

.programme-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid #edf0f4;
    border-bottom: 1px solid #edf0f4;
    grid-auto-flow: column;
}

/* =====================================================
   JAVASCRIPT
===================================================== */


/* Premium programme cards */
.fore-admission-section {
    background:#f7f7f5;
    padding:76px 20px 90px;
}

.fore-admission-container {
    max-width:1260px;
}

.fore-admission-heading {
    margin-bottom:34px;
}

.fore-admission-heading>span {
    font-size:11px;
    letter-spacing:2.8px;
}

.fore-admission-heading h2 {
    font-family:Georgia,serif;
    font-size:clamp(34px,4vw,52px);
    font-weight:400;
    letter-spacing:-1.5px;
    margin:8px 0;
}

.fore-admission-heading p {
    font-size:14px;
    line-height:1.5;
}

.fore-admission-tabs {
    margin-bottom:10px;
}

.fore-programme-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.fore-programme-card {
    display:flex;
    flex-direction:column;
    min-width:0;
    border:1px solid #e2e5e8;
    border-radius:17px;
    box-shadow:0 10px 28px rgba(20,45,75,.055);
    overflow:hidden;
    background:#fff;
    transition:transform .25s,box-shadow .25s,border-color .25s;
}

.fore-programme-card:hover {
    transform:translateY(-5px);
    border-color:#c6a96b;
    box-shadow:0 18px 42px rgba(20,45,75,.13);
}

.programme-photo {
    height:235px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(140deg,#16385a,#547792);
}

.programme-photo:after {
    content:"";
    position:absolute;
    inset:45% 0 0;
    background:linear-gradient(transparent,rgba(8,28,48,.75));
    pointer-events:none;
}

.programme-photo img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s;
}

.fore-programme-card:hover .programme-photo img {
    transform:scale(1.055);
}

.programme-label, .programme-campus {
    position:absolute;
    top:16px;
    z-index:2;
    padding:8px 12px;
    border-radius:5px;
    font-size:10px;
    letter-spacing:1px;
    font-weight:800;
    line-height:1;
    text-transform:uppercase;
}

.programme-label {
    left:16px;
    right:auto;
    background:#FFCB05;
    color:#162f4f;
}

.programme-campus {
    right:16px;
    max-width:55%;
    background:rgba(12,34,55,.84);
    color:#fff;
    text-align:right;
}

.programme-photo-caption {
    position:absolute;
    bottom:16px;
    left:19px;
    right:19px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#fff;
    z-index:2;
    font-size:11px;
    letter-spacing:.4px;
}

.programme-photo-caption span {
    font-size:18px;
}

.programme-card-body {
    display:flex;
    flex-direction:column;
    flex:1;
    padding:25px 25px 24px;
}

.programme-code {
    font-size:11px;
    letter-spacing:1.8px;
    color:#a37a32;
    font-weight:800;
}

.programme-card-body h3 {
    font-family:Georgia,serif;
    font-size:25px;
    font-weight:500;
    line-height:1.18;
    letter-spacing:-.45px;
    color:#075AA5;
    min-height:88px;
    margin:11px 0 17px;
}

.programme-details {
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-auto-flow:row;
    gap:13px 10px;
    padding:17px 0 19px;
    border-top:1px solid #e9ecef;
    border-bottom:0;
}

.fore-meta span {
    display:block;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:9px;
    font-weight:700;
    color:#7b8790;
    margin-bottom:6px;
}

.fore-meta strong {
    display:block;
    font-size:13px;
    color:#075AA5;
    font-weight:700;
}

.programme-cta {
    margin-top:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-decoration:none;
    background:#075AA5;
    border:1px solid #075AA5;
    border-radius:7px;
    color:#fff;
    padding:14px 17px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.25px;
    transition:background .2s,color .2s;
}

.programme-cta span {
    font-size:18px;
    line-height:1;
}

.programme-cta:hover, .programme-cta:focus-visible {
    background:#FFCB05;
    border-color:#FFCB05;
    color:#075AA5;
    outline-offset:3px;
}

@media(max-width:950px) {
    .fore-programme-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:600px) {
    .fore-admission-section {
        padding:48px 0 65px;
    }

    .fore-admission-heading, .fore-admission-tabs {
        margin-left:18px;
        margin-right:18px;
    }

    .fore-programme-grid {
        display:flex;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        gap:14px;
        padding:4px 18px 25px;
        scroll-padding-left:18px;
        scrollbar-width:thin;
    }

    .fore-programme-card {
        flex:0 0 min(84vw,340px);
        scroll-snap-align:start;
    }

    .programme-photo {
        height:205px;
    }

    .programme-card-body h3 {
        font-size:23px;
        min-height:82px;
    }

    .fore-admission-heading h2 {
        font-size:36px;
    }

    .fore-admission-tabs {
        border-radius:16px;
    }

    .fore-tab {
        padding:10px 5px;
        font-size:10px;
    }

    .tab-symbol {
        display:none;
    }
}

.fore-admission-section {
    background:#f2f0eb;
    padding:88px 22px 100px;
    font-family:Arial,Helvetica,sans-serif;
}

.fore-admission-container {
    max-width:1280px;
}

.fore-admission-heading {
    margin-bottom:38px;
}

.fore-admission-heading>span {
    color:#9c783a;
    font-size:11px;
    letter-spacing:3px;
}

.fore-admission-heading h2 {
    font:400 clamp(38px,5vw,66px)/1.08 Georgia,serif;
    letter-spacing:-2.4px;
    margin:15px auto 17px;
    color:#075AA5;
}

.fore-admission-heading h2 em {
    font-weight:400;
    color:#aa8240;
}

.fore-admission-heading p {
    font-size:15px;
    color:#64717b;
}

.fore-admission-tabs {
    max-width:660px;
    margin-bottom:48px;
    border:1px solid #e2dcd1;
    border-radius:7px;
    padding:5px;
    box-shadow:none;
}

.fore-tab {
    border-radius:4px;
    font-size:12px;
}

.fore-tab.active {
    background:#075AA5;
    box-shadow:none;
}

.fore-programme-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px;
    counter-reset:foreprogrammes;
}

.fore-programme-card {
    counter-increment:foreprogrammes;
    display:flex;
    flex-direction:column;
    border-radius:4px;
    border:1px solid #e1ded8;
    box-shadow:0 8px 30px rgba(13,37,57,.04);
    background:#fff;
    overflow:hidden;
    transition:transform .25s,box-shadow .25s;
}

.fore-programme-card:hover {
    transform:translateY(-5px);
    box-shadow:0 20px 45px rgba(13,37,57,.13);
}

.programme-photo {
    height:270px;
    position:relative;
    background:linear-gradient(135deg,#0f304b,#58778c);
    overflow:hidden;
}

.programme-photo img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:saturate(.78);
    transition:transform .6s,filter .6s;
}

.fore-programme-card:hover .programme-photo img {
    transform:scale(1.04);
    filter:saturate(1);
}

.programme-photo:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(3,23,38,.35),transparent 48%,rgba(3,23,38,.68));
    pointer-events:none;
}

.programme-photo:before {
    content:'0' counter(foreprogrammes);
    position:absolute;
    right:18px;
    bottom:7px;
    z-index:2;
    font:400 61px/1 Georgia,serif;
    color:rgba(255,255,255,.72);
}

.programme-label, .programme-campus {
    position:absolute;
    z-index:2;
    top:19px;
    border-radius:2px;
    padding:9px 12px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    font-size:10px;
    font-weight:800;
    line-height:1;
}

.programme-label {
    left:19px;
    right:auto;
    background:#FFCB05;
    color:#075AA5;
}

.programme-campus {
    right:19px;
    background:rgba(16,45,71,.9);
    color:#fff;
}

.programme-photo-caption {
    position:absolute;
    bottom:25px;
    left:24px;
    z-index:2;
    color:#fff;
    font-size:10px;
    font-weight:700;
    letter-spacing:2.2px;
}

.programme-photo-caption span {
    display:none;
}

.programme-card-body {
    display:flex;
    flex:1;
    flex-direction:column;
    padding:29px 32px 30px;
}

.programme-code {
    font-size:11px;
    letter-spacing:2px;
    color:#A87100;
}

.programme-card-body h3 {
    font:400 30px/1.13 Georgia,serif;
    min-height:68px;
    letter-spacing:-.8px;
    color:#075AA5;
    margin:11px 0 24px;
}

.programme-details {
    display:flex;
    gap:0;
    align-items:stretch;
    padding:19px 0;
    margin-bottom:20px;
    border-top:1px solid #e5e5e2;
    border-bottom:1px solid #e5e5e2;
}

.fore-meta {
    flex:1;
    padding-right:15px;
}

.fore-meta+.fore-meta {
    padding-left:18px;
    border-left:1px solid #e5e5e2;
}

.fore-meta span {
    font-size:10px;
    letter-spacing:1px;
    color:#78838b;
    text-transform:uppercase;
    font-weight:700;
    margin:0 0 8px;
}

.fore-meta strong {
    font-size:14px;
    color:#075AA5;
}

.programme-cta {
    width:100%;
    margin-top:auto;
    cursor:pointer;
    padding:15px 17px;
    border-radius:3px;
    background:#075AA5;
    color:#fff;
    border:1px solid #075AA5;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.1px;
    text-transform:uppercase;
    transition:background .2s,color .2s;
}

.programme-cta span {
    font-size:19px;
    line-height:1;
}

.programme-cta:hover, .programme-cta:focus-visible {
    background:#FFCB05;
    color:#075AA5;
    border-color:#FFCB05;
}

.fore-programme-card:first-child {
    background:#075AA5;
    border-color:#075AA5;
}

.fore-programme-card:first-child .programme-code, .fore-programme-card:first-child .fore-meta span {
    color:#FFDE5A;
}

.fore-programme-card:first-child h3, .fore-programme-card:first-child .fore-meta strong {
    color:#fff;
}

.fore-programme-card:first-child .programme-details {
    border-color:rgba(255,255,255,.22);
}

.fore-programme-card:first-child .fore-meta+.fore-meta {
    border-color:rgba(255,255,255,.22);
}

.fore-programme-card:first-child .programme-cta {
    background:#FFCB05;
    border-color:#FFCB05;
    color:#075AA5;
}

.fore-programme-card:first-child .programme-cta:hover {
    background:#fff;
    border-color:#fff;
}

.fore-programme-card:first-child .programme-photo {
    height:270px;
}

.fore-programme-dialog {
    border:0;
    padding:0;
    max-width:440px;
    width:calc(100% - 36px);
    border-radius:6px;
    box-shadow:0 30px 90px rgba(0,0,0,.25);
}

.fore-programme-dialog::backdrop {
    background:rgba(6,27,44,.7);
}

.fore-dialog-body {
    padding:32px;
    background:#fff;
    color:#075AA5;
}

.fore-dialog-body .eyebrow {
    color:#A87100;
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:800;
}

.fore-dialog-body h3 {
    font:400 29px/1.15 Georgia,serif;
    margin:12px 0 16px;
}

.fore-dialog-body p {
    font-size:14px;
    line-height:1.6;
    color:#536576;
}

.fore-dialog-close {
    float:right;
    background:transparent;
    border:0;
    font-size:27px;
    cursor:pointer;
    color:#075AA5;
}

@media(max-width:800px) {
    .fore-programme-grid {
        gap:15px;
    }

    .programme-photo {
        height:210px;
    }

    .fore-programme-card:first-child .programme-photo {
        height:210px;
    }

    .programme-card-body {
        padding:22px;
    }

    .programme-card-body h3 {
        font-size:24px;
    }

    .programme-details {
        flex-wrap:wrap;
        row-gap:15px;
    }

    .fore-meta {
        min-width:45%;
    }

    .fore-meta+.fore-meta {
        padding-left:0;
        border:0;
    }
}

@media(max-width:650px) {
    .fore-admission-section {
        padding:56px 0 70px;
    }

    .fore-admission-heading, .fore-admission-tabs {
        margin-left:19px;
        margin-right:19px;
    }

    .fore-admission-heading h2 {
        font-size:42px;
    }

    .fore-programme-grid {
        display:flex;
        overflow-x:auto;
        gap:15px;
        padding:0 19px 20px;
        scroll-snap-type:x mandatory;
        scroll-padding-left:19px;
    }

    .fore-programme-card {
        flex:0 0 min(84vw,350px);
        scroll-snap-align:start;
    }

    .programme-photo, .fore-programme-card:first-child .programme-photo {
        height:205px;
    }

    .programme-card-body h3 {
        min-height:78px;
    }

    .fore-admission-tabs {
        border-radius:6px;
    }

    .fore-tab {
        font-size:10px;
        padding:10px 5px;
    }

    .tab-symbol {
        display:none;
    }
}

.fore-admission-section {
    padding:62px 20px 76px;
    background:#f7f8fa;
}

.fore-admission-container {
    max-width:1210px;
}

.fore-admission-heading {
    margin-bottom:27px;
}

.fore-admission-heading h2 {
    font-size:clamp(34px,4vw,51px);
    line-height:1.08;
    margin:9px auto 12px;
}

.fore-admission-heading p {
    font-size:13px;
}

.fore-admission-tabs {
    margin-bottom:30px;
}

.fore-programme-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.fore-programme-card {
    border-radius:11px;
}

.programme-photo, .fore-programme-card:first-child .programme-photo {
    height:168px;
    /* sprite removed -- superseded by the per-card slices below; see "PROGRAMME CARD PHOTOS" at the end of this file */
    background-size:300% 200%;
    background-repeat:no-repeat;
}

.fore-programme-card:nth-child(1) .programme-photo {
    background-position:0% 0%;
}

.fore-programme-card:nth-child(2) .programme-photo {
    background-position:50% 0%;
}

.fore-programme-card:nth-child(3) .programme-photo {
    background-position:100% 0%;
}

.fore-programme-card:nth-child(4) .programme-photo {
    background-position:0% 100%;
}

.fore-programme-card:nth-child(5) .programme-photo {
    background-position:50% 100%;
}

.fore-programme-card:nth-child(6) .programme-photo {
    background-position:100% 100%;
}

.programme-photo:before {
    font-size:39px;
    bottom:10px;
    right:12px;
}

.programme-photo-caption {
    bottom:14px;
    left:14px;
    font-size:8px;
    letter-spacing:1.4px;
}

.programme-label, .programme-campus {
    top:11px;
    font-size:8px;
    padding:7px 8px;
    letter-spacing:.8px;
}

.programme-label {
    left:11px;
}

.programme-campus {
    right:11px;
}

.programme-card-body {
    padding:18px 19px 19px;
}

.programme-code {
    font-size:9px;
    letter-spacing:1.4px;
}

.programme-card-body h3 {
    font-size:21px;
    line-height:1.18;
    min-height:51px;
    margin:7px 0 14px;
    letter-spacing:-.45px;
}

.programme-details {
    margin-bottom:15px;
    padding:13px 0;
    min-height:58px;
}

.fore-meta {
    min-width:0;
    padding-right:6px;
}

.fore-meta+.fore-meta {
    padding-left:11px;
    border-left:1px solid #e5e5e2;
}

.fore-meta span {
    font-size:8px;
    letter-spacing:.55px;
    margin-bottom:5px;
}

.fore-meta strong {
    font-size:11px;
    line-height:1.25;
}

.programme-cta {
    padding:11px 12px;
    font-size:10px;
    letter-spacing:.65px;
}

.programme-cta span {
    font-size:16px;
}

@media(max-width:950px) {
    .fore-programme-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .programme-photo, .fore-programme-card:first-child .programme-photo {
        height:190px;
    }

    .programme-card-body h3 {
        min-height:52px;
    }
}

@media(max-width:600px) {
    .fore-admission-section {
        padding:47px 0 62px;
    }

    .fore-programme-grid {
        display:flex;
        overflow-x:auto;
        gap:12px;
        padding:0 16px 18px;
        scroll-snap-type:x mandatory;
        scroll-padding-left:16px;
    }

    .fore-programme-card {
        flex:0 0 min(78vw,295px);
        scroll-snap-align:start;
    }

    .programme-photo, .fore-programme-card:first-child .programme-photo {
        height:153px;
    }

    .programme-card-body {
        padding:17px;
    }

    .programme-card-body h3 {
        font-size:20px;
        min-height:49px;
    }

    .fore-admission-heading h2 {
        font-size:36px;
    }

    .fore-admission-heading, .fore-admission-tabs {
        margin-left:16px;
        margin-right:16px;
    }
}

.fore-fee-panel {
    max-width:900px;
    margin:auto;
    background:#fff;
    border:1px solid #e0e9f1;
    border-radius:15px;
    padding:34px 38px 28px;
    box-shadow:0 12px 34px rgba(7,90,165,.045);
}

.fore-fee-heading {
    text-align:center;
    margin-bottom:27px;
}

.fore-fee-eyebrow {
    display:block;
    color:#a87100;
    font-size:10px;
    letter-spacing:2px;
    font-weight:800;
    margin-bottom:9px;
}

.fore-fee-heading h3 {
    font:400 31px/1.15 Georgia,serif;
    color:#075aa5;
    margin:0 0 9px;
}

.fore-fee-heading p {
    font-size:13px;
    color:#667987;
    line-height:1.5;
    margin:0;
}

@media(max-width:650px) {
    .fore-fee-panel {
        padding:24px 18px;
    }

    .fore-fee-heading h3 {
        font-size:27px;
    }
}

.fore-criteria-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.fore-criteria-card {
    min-width:0;
    background:#fff;
    border:1px solid #dce6ef;
    border-radius:12px;
    padding:26px 28px 28px;
    box-shadow:0 6px 20px rgba(7,90,165,.045);
}

.fore-criteria-kicker {
    display:block;
    color:#a87100;
    letter-spacing:1.8px;
    font-size:9px;
    font-weight:800;
    margin-bottom:9px;
}

.fore-criteria-card h3 {
    font:400 26px/1.15 Georgia,serif;
    color:#075aa5;
    margin:0 0 18px;
}

.fore-criteria-card ul, .fore-criteria-card ol {
    margin:0;
    padding:0;
    list-style:none;
    display:grid;
    gap:14px;
}

.fore-criteria-card li {
    display:flex;
    align-items:flex-start;
    gap:12px;
    color:#243f58;
    font-size:13px;
    line-height:1.5;
}

.fore-criteria-mark {
    display:grid;
    place-items:center;
    flex:none;
    width:23px;
    height:23px;
    border-radius:50%;
    background:#eaf4fc;
    color:#075aa5;
    font-size:11px;
    font-weight:800;
    line-height:1;
}

.fore-criteria-card:first-child .fore-criteria-mark {
    color:#075aa5;
    background:#ffec95;
    font-size:15px;
}

@media(max-width:760px) {
    .fore-criteria-grid {
        grid-template-columns:1fr;
        gap:14px;
    }

    .fore-criteria-card {
        padding:22px;
    }

    .fore-criteria-card h3 {
        font-size:24px;
    }
}

.fore-fee-panel--wide {
    max-width:980px;
}

.fore-price-table-wrap {
    overflow-x:auto;
    border:1px solid #dfe8ef;
    border-radius:9px;
}

.fore-price-table {
    width:100%;
    border-collapse:collapse;
    text-align:left;
    font-size:13px;
    color:#27435b;
}

.fore-price-table thead {
    background:#075aa5;
    color:#fff;
}

.fore-price-table th, .fore-price-table td {
    padding:15px 18px;
}

.fore-price-table thead th {
    font-size:11px;
    letter-spacing:.5px;
    font-weight:700;
}

.fore-price-table tbody tr+tr {
    border-top:1px solid #e6edf3;
}

.fore-price-table tbody th {
    font-weight:700;
    color:#123e67;
}

.fore-price-table td:last-child strong {
    color:#075aa5;
    font-size:15px;
}

.fore-price-featured {
    background:#fffbea;
}

.fore-price-featured th {
    border-left:3px solid #ffcb05;
}

.fore-price-example {
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:18px;
    padding:18px 20px;
    background:#eaf4fc;
    border:1px solid #d6e6f4;
    border-radius:8px;
}

.fore-price-example-label {
    font-size:9px;
    font-weight:800;
    color:#9b7000;
    letter-spacing:1.2px;
}

.fore-price-example div {
    flex:1;
}

.fore-price-example div strong, .fore-price-example div small {
    display:block;
}

.fore-price-example div strong {
    font-size:13px;
    color:#123e67;
}

.fore-price-example div small {
    font-size:11px;
    color:#61798a;
    margin-top:4px;
}

.fore-price-total {
    font-size:24px;
    color:#075aa5;
    white-space:nowrap;
}

.fore-price-context {
    margin:15px 2px 0;
    color:#657786;
    font-size:11px;
    line-height:1.5;
}

@media(max-width:600px) {
    .fore-price-table {
        min-width:565px;
    }

    .fore-price-table th, .fore-price-table td {
        padding:13px 12px;
    }

    .fore-price-example {
        flex-wrap:wrap;
        padding:15px;
    }

    .fore-price-example-label {
        width:100%;
    }

    .fore-price-total {
        font-size:20px;
    }
}

/* ============================================================
   ...AND ITS TYPE NORMALISED TO THE PAGE.

   The imported sheet shipped its own display face and its own
   heading scale, which read as a different product next to the
   rest of the page:

                            family          size        weight
     canonical (page)       jiotyperegular  40px/28px   700
     section h2             Georgia serif   34-51px     400
     programme card h3      Georgia serif   21px        500
     criteria card h3       Georgia serif   26px        400
     fee panel h3           Georgia serif   31px        400
     dialog h3              Georgia serif   29px        400

   NOTE: four of those use the `font:` SHORTHAND, which resets
   weight to 400. Overriding font-family alone would leave them
   at 400, so every rule below restates weight explicitly.

   The section wrapper also declared Arial. body's own
   "jiotyperegular ... !important" does NOT win there: an
   inherited !important still loses to a descendant's own
   ordinary declaration, so Arial was leaking into every element
   this file does not name individually (.programme-campus,
   .fore-meta, .programme-cta, the price table). Setting the
   family once on the section fixes all of them by inheritance.
   ============================================================ */

/* ---- family: one face for the whole section ---- */
.fore-admission-section,
.fore-programme-dialog {
    font-family: "jiotyperegular", Arial, sans-serif;
}

/* ---- section title: the page's canonical heading scale ---- */
.fore-admission-section .fore-admission-heading h2 {
    font-family: "jiotyperegular", Arial, sans-serif;
    font-size: var(--fore-title-size);
    font-weight: 700 !important;   /* see note below */
    line-height: 1.2;
    letter-spacing: -0.025em;
}

    /* the emphasised second line stays the accent, at the same weight */
    .fore-admission-section .fore-admission-heading h2 em {
        font-family: inherit;
        font-style: normal;
        font-weight: inherit;
    }

/* ---- eyebrow + supporting copy on the page's scale ---- */
.fore-admission-section .fore-admission-heading > span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
}

.fore-admission-section .fore-admission-heading p {
    font-size: clamp(13px, 1.05vw, 15px);
    line-height: 1.6;
}

/* ---- panel sub-headings: the same scale the other imported
        sections use (.selection-heading h3 / .fee-header h3) ---- */
.fore-admission-section .fore-criteria-card h3,
.fore-admission-section .fore-fee-heading h3,
.fore-programme-dialog .fore-dialog-body h3 {
    font-family: "jiotyperegular", Arial, sans-serif;
    font-size: clamp(20px, 1.9vw, 26px);
    /* !important: the ExtraaEdge widget's cross-origin stylesheet sets
       font-weight:600 on bare h3, which outranks any selector here. */
    font-weight: 700 !important;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

/* ---- programme card title: one step down from a panel heading ---- */
.fore-admission-section .programme-card-body h3 {
    font-family: "jiotyperegular", Arial, sans-serif;
    font-size: clamp(18px, 1.5vw, 21px);
    font-weight: 700 !important;   /* see note above */
    line-height: 1.25;
    letter-spacing: -0.015em;
}

/* ---- data + body copy at the page's reading size ---- */
.fore-admission-section .fore-price-table {
    font-size: 14px;
}

.fore-admission-section .fore-fee-heading p,
.fore-admission-section .fore-criteria-card li,
.fore-programme-dialog .fore-dialog-body p {
    font-size: clamp(13px, 1.05vw, 15px);
    line-height: 1.6;
}

@media (max-width: 767px) {
    /* the source drops the card title to 21px here; keep it a step
       under the 28px mobile section title so the hierarchy holds */
    .fore-admission-section .programme-card-body h3 {
        font-size: clamp(17px, 4.6vw, 20px);
    }

    .fore-admission-section .fore-criteria-card h3,
    .fore-admission-section .fore-fee-heading h3,
    .fore-programme-dialog .fore-dialog-body h3 {
        font-size: clamp(19px, 5.2vw, 23px);
    }
}


/* ============================================================
   WHAT TRULY SETS FORE APART — rebuilt to the supplied design.

   Was: centred heading above a 4-across row of bordered white
   cards with emoji glyphs.
   Now: a two-column split — a sticky intro column (eyebrow,
   title, gold rule, copy, CTA, line-art watermark) beside a
   2-across list of eight items with tinted circular SVG icons,
   no card chrome, divided by a hairline rule.

   The wrapper keeps the class name .fore-why-heading on purpose:
   the shared heading-normalisation block above matches on it, so
   the title keeps the page's canonical scale (var(--fore-title-size)
   / 700 / -0.025em) and its b -> --fore-blue accent, and the
   eyebrow keeps the shared 11px/.18em treatment. Renaming it
   would have silently dropped all of that.

   Emoji were replaced with stroke SVGs: emoji render as colour
   glyphs from a system font, so they ignore currentColor and look
   different on every OS.
   ============================================================ */

.fore-why-section {
    padding: clamp(52px, 5.5vw, 86px) 20px;
    background: #f7fafd;
}

.fore-why-container {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.5fr);
    /* `gap` was set as the two-column gutter, but grid applies it to rows
       too -- and the section title is a full-width row in this same grid,
       so it was pushing the content 64.8px below the title on top of the
       title's own 33px margin. The gutter is horizontal only; the row
       rhythm belongs to the title. */
    column-gap: clamp(30px, 4.5vw, 74px);
    row-gap: 0;
    align-items: start;
    max-width: 1220px;
    margin: auto;
}

/* ---------- intro column ---------- */
.fore-why-section .fore-why-heading {
    position: relative;
    margin-bottom: 0;          /* was 25px, for the old stacked layout */
    text-align: left;          /* was centred */
    padding-bottom: clamp(120px, 13vw, 190px);   /* room for the watermark */
}

    /* decorative campus line-art, behind the copy */
    .fore-why-section .fore-why-heading::after {
        content: "";
        position: absolute;
        z-index: 0;
        left: -14px;
        bottom: 0;
        width: min(430px, 108%);
        aspect-ratio: 520 / 300;
        background: url(../fore/campus-lineart.svg) left bottom / contain no-repeat;
        opacity: .17;
        pointer-events: none;
    }

    .fore-why-section .fore-why-heading > * {
        position: relative;
        z-index: 1;
    }

    .fore-why-section .fore-why-heading > span {
        display: block;
        margin-bottom: 14px;
    }

    .fore-why-section .fore-why-heading h2 {
        max-width: 13ch;   /* hold the "What Truly Sets / FORE Apart" break */
    }

.fore-why-rule {
    display: block;
    width: 62px;
    height: 4px;
    margin: 20px 0 18px;
    border-radius: 4px;
    background: var(--fore-gold);
}

.fore-why-section .fore-why-heading p {
    max-width: 34ch;
    margin: 0;
}

.fore-why-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding: 13px 24px;
    border-radius: 40px;
    background: var(--fore-blue);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

    .fore-why-cta span {
        transition: transform .25s ease;
    }

    .fore-why-cta:hover,
    .fore-why-cta:focus-visible {
        background: #0c6aa6;
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(15, 126, 195, .28);
    }

        .fore-why-cta:hover span {
            transform: translateX(4px);
        }

/* ---------- item grid ---------- */
.fore-why-section .fore-why-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(26px, 3vw, 40px) 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fore-why-section .fore-why-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-height: 0;             /* was 82px, for the old card */
    padding: 4px clamp(18px, 2.2vw, 32px);
    background: none;          /* card chrome removed */
    border: 0;
    border-radius: 0;
}

    /* hairline between the two columns */
    .fore-why-section .fore-why-item:nth-child(even) {
        border-left: 1px solid #e2eaf2;
    }

    .fore-why-section .fore-why-item:hover {
        transform: none;
        border-color: #e2eaf2;
        box-shadow: none;
    }

.fore-why-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: clamp(44px, 3.6vw, 54px);
    aspect-ratio: 1;
    border-radius: 50%;
}

    .fore-why-icon svg {
        width: 50%;
        height: 50%;
    }

    /* left column reads blue, right column gold — as supplied */
    .fore-why-item:nth-child(odd) .fore-why-icon {
        background: #e7f1fb;
        color: var(--fore-blue);
    }

    .fore-why-item:nth-child(even) .fore-why-icon {
        background: #fdf2dc;
        color: var(--fore-navy);
    }

.fore-why-copy {
    min-width: 0;
}

.fore-why-section .fore-why-item strong {
    display: block;
    margin-bottom: 6px;
    color: var(--fore-navy);
    font-size: clamp(14px, 1.15vw, 16px);
    font-weight: 700;
    line-height: 1.3;
}

.fore-why-section .fore-why-item p {
    margin: 0;
    color: #667585;
    font-size: clamp(12px, .95vw, 13.5px);
    line-height: 1.5;
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
    .fore-why-container {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .fore-why-section .fore-why-heading {
        padding-bottom: 0;
    }

        /* the watermark has no column to sit under once stacked */
        .fore-why-section .fore-why-heading::after {
            display: none;
        }

        .fore-why-section .fore-why-heading h2,
        .fore-why-section .fore-why-heading p {
            max-width: none;
        }
}

@media (max-width: 640px) {
    .fore-why-section {
        padding: 44px 16px;
    }

    .fore-why-section .fore-why-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .fore-why-section .fore-why-item {
        padding: 0;
    }

        /* single column: the divider would sit against the text */
        .fore-why-section .fore-why-item:nth-child(even) {
            border-left: 0;
        }
}

@media (prefers-reduced-motion: reduce) {
    .fore-why-cta,
    .fore-why-cta span {
        transition: none;
    }

        .fore-why-cta:hover {
            transform: none;
        }

        .fore-why-cta:hover span {
            transform: none;
        }
}


/* ============================================================
   MOTION — scroll-reveal initial state.

   Paired with assets/js/fore-motion.js. Both classes below are
   added by script, never by the document:

     .has-motion  on <html>, only when JS runs AND the user has
                  not asked for reduced motion
     .fore-rv     on each element the script is about to reveal

   So with JS off, the library missing, or reduced motion set,
   this rule matches nothing and every element renders normally.
   That is the whole point -- content must never depend on an
   animation to become visible.

   `will-change` is deliberately NOT set: these elements are
   revealed once and then released back to CSS, and a permanent
   will-change on dozens of cards costs more than it saves.
   ============================================================ */

.has-motion .fore-rv {
    opacity: 0;
    transform: translateY(var(--fore-rv-y, 16px));
}

/* The reveal animates transform, so anything that also animates
   transform on hover must not transition FROM the hidden state --
   otherwise the first hover races the reveal. Once .fore-rv is
   removed the element's own transition takes over again. */
.has-motion .fore-rv {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    /* belt and braces: the script already refuses to add
       .has-motion here, but if it is ever forced on, nothing
       should still be sitting at opacity 0 */
    .has-motion .fore-rv {
        opacity: 1;
        transform: none;
    }
}


/* ============================================================
   ONE PAGE MEASURE.

   Measured at a 1800px viewport, the page had EIGHT different
   content widths, so the left edge of the content jumped by up
   to 560px as you scrolled:

       .fore-admission-container      1210
       .fore-why-container            1220
       .recruiters-container          1240
       .mba-apply-container           1250   <- the cramped one
       .campusesInner                 1500
       header .container-fluid        1570
       .careerSliderSection           1696
       accreditation / alumni /
       campuslife / faq / footer      1730   <- six containers
       #placement .container-fluid    1785

   1730px is not an invented number: it is what six of the
   containers already used, so unifying on it leaves those
   untouched and widens the cramped sections up to meet them.
   Everything now shares one measure and one gutter, so every
   section's edges line up down the whole page.
   ============================================================ */

:root {
    --fore-measure: 1730px;
    --fore-gutter: clamp(14px, 1.6vw, 28px);
}

/* every section's content well, plus the header and footer so the
   logo and the nav line up with the content underneath them */
header.foreReferenceHeader > .container-fluid,
.mba-apply-heading,
.mba-apply-container,
.fore-why-container,
.fore-admission-container,
.recruiters-container,
.campusesInner,
.careerSliderSection,
.internshipSection > .container-fluid,
.accreditationStrip > .container-fluid,
.alumniSection > .container-fluid,
.campuslifeSection > .container-fluid,
.faqSection > .container-fluid,
footer > .container-fluid {
    width: 100%;
    max-width: var(--fore-measure);
    margin-inline: auto;
    padding-inline: var(--fore-gutter);
}

/* .internshipSection .container-fluid sets its inset with !important
   earlier in this file (clamp(16px, 4vw, 64px) -- 64px at 1800px, which
   left the placement section inset 36px further than every other
   section). Matching the !important is the only way to bring it onto
   the shared gutter without editing that older rule. */
.internshipSection > .container-fluid {
    padding-inline: var(--fore-gutter) !important;
}

/* the sections themselves stop adding a second, different inset --
   the gutter now lives on the well above, in one place */
.mba-apply-section,
.fore-why-section,
.fore-admission-section,
.recruiters-section,
.alumniSection {
    padding-inline: 0;
}

/* #placement carried its own gutter token from the placement
   rhythm block; point it at the shared one so the infographic
   and the stat cards line up with everything else */
.internshipSection {
    --placement-gutter: var(--fore-gutter);
    --placement-measure: var(--fore-measure);
}

/* The recruiters CTA sits OUTSIDE .recruiters-container in the
   markup, so it was spanning the full section (1745px) while the
   marquee above it was inset. It is centred text so it read as
   fine, but it did not share the measure. */
.recruiters-section > .placement-cta {
    width: 100%;
    max-width: var(--fore-measure);
    margin-inline: auto;
    padding-inline: var(--fore-gutter);
}

@media (max-width: 600px) {
    :root {
        --fore-gutter: 16px;
    }
}


/* ============================================================
   HERO SLIDE 4 — "One Institute. Two Campuses." artwork.

   The three photo slides ship an art-directed pair (a 1920x1080
   landscape crop and a 1080x1920 portrait crop) and use
   object-fit:cover, which is right for a photograph: cropping a
   photo loses scenery, not meaning.

   This slide is a composed graphic. Its headline sits against the
   top edge, the campus captions and the gold rule against the
   bottom, so cover would cut the type off:

     .banner is min-height:100vh, so the slot aspect follows the
     window. At 1920x800 (a short, wide window) cover scales the
     1672x941 artwork to 1920x1080 and crops 140px from the top --
     straight through "FORE SCHOOL OF MANAGEMENT".

   contain never clips, and because the artwork's own background is
   the same navy as .banner, the letterboxing is invisible on a
   wide window and reads as a full-bleed design.
   ============================================================ */

.admissionHeroSlide--art {
    background: var(--fore-navy);
}

    .admissionHeroSlide--art img {
        object-fit: contain;
        object-position: center;
        box-sizing: border-box;
    }

/* The enquiry panel (#formbanner) is position:absolute, right:36px,
   width:360px, z-index:20 -- it sits ON TOP of the hero. The photo
   slides do not care, but this artwork carries "PGDM ADMISSIONS
   2027-29" in its top-right corner, which landed directly underneath
   the panel (measured overlap at 1800px wide).

   Padding the image shrinks its content box, and object-fit:contain
   fits inside that box, so the artwork is scaled to sit clear of the
   panel instead of behind it. */
/* 1201px, not 992px: .frm only floats over the hero above 1200px --
   `@media (max-width: 1200px)` puts it back in normal flow below the
   banner. Reserving the panel's width at 1024px shrank the artwork to
   605px to dodge something that was no longer there. */
@media (min-width: 1201px) {
    .admissionHeroSlide--art img {
        padding-right: 404px;   /* 360 panel + 36 right offset + 8 breathing */

        /* .banner is min-height:100vh but STARTS below the 155px header, so
           the slot's last 155px always hangs under the fold. Centring the
           artwork in that slot pushed its captions and gold rule off screen;
           anchoring to the top brings the whole thing back above the fold.
           The leftover navy band lands at the bottom, against the same navy,
           so it is not visible. */
        object-position: center top;
    }
}

@media (max-width: 767px) {
    /* KNOWN LIMITATION, deliberately not faked:
       a 16:9 composition cannot be made legible in a 9:16 slot. At
       375px wide the artwork renders ~375x211 and its headline lands
       at roughly 11px -- readable as a brand mark, not as copy.
       Cropping to portrait is worse: it would drop one campus
       photograph or behead the title. Anchoring it high at least
       keeps it in the strongest part of the screen.
       The real fix is a portrait version of this artwork, the same
       way slides 1-3 each ship one. */
    .admissionHeroSlide--art img {
        object-position: center 38%;
    }
}


/* ============================================================
   ACCREDITED BY / INTERNATIONAL OUTREACH — background + edges.

   BACKGROUND
   The two strips sat on rgba(15, 126, 195, .11), which renders as
   rgb(229, 241, 248). Every neighbouring section is a near-white
   (#f7fafd, #f7f8fa, #fff, #f8f9fb), so the pair read as one
   saturated blue slab interrupting the page.

   It also fought the logos. Most of these files are transparent,
   but partner-frankfurt.webp and partner-unitar.webp have WHITE
   baked in (they are RGB, no alpha) -- on the blue they showed as
   white rectangles, which is the box visible around the UN logo.
   White backs them invisibly and is what logo artwork is drawn
   for, so it is both the tidier and the more correct choice.

   EDGES
   The viewport hard-clipped the first and last logo mid-mark. A
   mask fades the track out at both ends instead, so logos arrive
   and leave rather than being sliced. mask-image is used rather
   than gradient overlays so this keeps working if the background
   ever changes again.
   ============================================================ */

.accreditationStrip {
    background: #fff;
}

/* a hairline keeps the two white strips from merging into one slab
   with the white placement section that follows them */
#international-outreach.accreditationStrip {
    border-bottom: 1px solid #eaeef3;
}

:is(#accreditation-logos, #outreach-logos) .logo-viewport {
    -webkit-mask-image: linear-gradient(to right,
        transparent 0,
        #000 clamp(28px, 6vw, 120px),
        #000 calc(100% - clamp(28px, 6vw, 120px)),
        transparent 100%);
    mask-image: linear-gradient(to right,
        transparent 0,
        #000 clamp(28px, 6vw, 120px),
        #000 calc(100% - clamp(28px, 6vw, 120px)),
        transparent 100%);
}

/* The strips scroll in opposite directions (see initLogoMarquee in
   fore-index.html). Nudging the partner row's logos slightly larger
   keeps the two rows from looking like the same belt run twice. */
#outreach-logos .logo-item {
    height: 104px;
}

    #outreach-logos .logo-item img {
        max-height: 88px;
    }

@media (max-width: 640px) {
    #outreach-logos .logo-item {
        height: 84px;
    }

        #outreach-logos .logo-item img {
            max-height: 68px;
        }
}


/* ============================================================
   PROGRAMME CARD PHOTOS — stop stretching them.

   The imported section shipped one 2069x760 sprite sheet laid out
   3 across x 2 down, positioned with:

       background-size: 300% 200%;
       background-position: 0%/50%/100%  0%/100%;

   That pins the sheet to exactly 3x the element's width and 2x its
   height, which forces every cell into the ELEMENT's aspect ratio
   and ignores the photograph's own. Each cell is natively 690x380
   (1.815). The photo box is 168px tall, so the rendered aspect is
   cardWidth/168 and the horizontal stretch is (cardWidth/168)/1.815:

       card 394px wide  ->  2.347  ->  1.29x stretched
       card 546px wide  ->  3.250  ->  1.79x stretched

   The wider the card, the worse it gets -- so unifying the page
   measure to 1730px (which widened these cards from ~394 to ~546)
   made an existing flaw considerably more visible. It came in with
   the imported markup; the earlier "identical to source" check
   passed because the SOURCE had the same defect.

   Fixed by slicing the sheet into six real images and using
   background-size: cover, which preserves the photo's aspect and
   crops the overflow instead of scaling the axes independently.
   The sprite file is no longer referenced.
   ============================================================ */

.programme-photo,
.fore-programme-card:first-child .programme-photo {
    background-image: none;      /* drop the sprite */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.fore-programme-card:nth-child(1) .programme-photo { background-image: url(../fore/programme-photo-1.webp); background-position: center; }
.fore-programme-card:nth-child(2) .programme-photo { background-image: url(../fore/programme-photo-2.webp); background-position: center; }
.fore-programme-card:nth-child(3) .programme-photo { background-image: url(../fore/programme-photo-3.webp); background-position: center; }
.fore-programme-card:nth-child(4) .programme-photo { background-image: url(../fore/programme-photo-4.webp); background-position: center; }
.fore-programme-card:nth-child(5) .programme-photo { background-image: url(../fore/programme-photo-5.webp); background-position: center; }
.fore-programme-card:nth-child(6) .programme-photo { background-image: url(../fore/programme-photo-6.webp); background-position: center; }


/* ████████████████████████████████████████████████████████████████████
   THEME CONFORMANCE PASS

   Audit at 1440px found the page running three blues, three golds and
   a crimson against a palette that defines one of each:

     --fore-blue  #0f7ec3     found also #075aa5, #17365d, #0c6aa6
     --fore-gold  #f5b301     found also #ffcb05, #ffcf20
     (no crimson in the palette) found #a71930

   #075aa5 / #ffcb05 arrived with the imported programmes + fee section,
   #a71930 with the imported recruiters section, #0c6aa6 was hand-picked
   for the Know More hover instead of using --fore-blue-deep.

   Several of these were also the worst contrast offenders in the QA
   pass (the golds measured 4.00-4.18 against a 4.5 requirement), so
   putting them on token colours fixes conformance and legibility in
   one move. Where a token is still short of 4.5 on white, a darker
   shade of the SAME hue is used rather than inventing a new colour.
   ████████████████████████████████████████████████████████████████████ */

:root {
    /* accessible companions to the brand colours, for small text on light
       backgrounds where the brand value itself cannot reach 4.5:1 */
    --fore-blue-text: #0b5f94;   /* 5.674:1 on #fff */
    --fore-gold-text: #7a5200;   /* 7.2:1  on #fff -- for <12px gold labels */
    --fore-muted: #5a6573;       /* 5.9:1  on #fff -- replaces the grey soup */
}

/* ---------- imported blue -> --fore-blue ---------- */
.fore-tab.active {
    background: var(--fore-blue);
}

.fore-programme-card:not(:first-child) .programme-cta {
    background: var(--fore-blue);
    border-color: var(--fore-blue);
}

.fore-tab:hover,
.fore-tab:focus-visible {
    color: var(--fore-blue-text);
}

.fore-criteria-card h3,
.fore-fee-heading h3,
.fore-fee-name strong,
.fore-price-table td:last-child strong,
.fore-price-total,
.fore-programme-dialog .fore-dialog-close {
    color: var(--fore-blue-text);
}

.fore-price-table thead {
    background: var(--fore-blue);
}

/* ---------- imported gold -> --fore-gold ---------- */
.fore-programme-card:first-child .programme-cta {
    background: var(--fore-gold);
    border-color: var(--fore-gold);
    color: var(--fore-navy);
}

.programme-cta:hover,
.programme-cta:focus-visible {
    background: var(--fore-gold);
    border-color: var(--fore-gold);
    color: var(--fore-navy);
}

.fore-programme-card:first-child .programme-cta:hover,
.fore-programme-card:first-child .programme-cta:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--fore-navy);
}

/* ---------- crimson -> brand blue ---------- */
.recruiters-section .eyebrow,
.recruiters-section .section-header h2 span {
    color: var(--fore-blue-text);
}

    .recruiters-section .eyebrow::before,
    .recruiters-section .eyebrow::after {
        background: var(--fore-blue);
    }

.recruiters-section .placement-cta a {
    background: var(--fore-blue);
}

    .recruiters-section .placement-cta a:hover,
    .recruiters-section .placement-cta a:focus-visible {
        background: var(--fore-blue-deep);
        box-shadow: 0 10px 25px rgba(15, 126, 195, .28);
    }

.recruiters-section .recruiter-card::before {
    background: var(--fore-blue);
}

.recruiters-section .recruiter-card:hover {
    border-color: rgba(15, 126, 195, .25);
}

/* ---------- hand-picked hover -> the token ---------- */
.fore-why-cta:hover,
.fore-why-cta:focus-visible {
    background: var(--fore-blue-deep);
}

/* ---------- contrast: small gold + grey text ---------- */
.programme-code,
.fore-fee-eyebrow,
.fore-price-example-label,
.fore-criteria-kicker,
.fore-admission-heading > span,
.fore-selection-kicker,
.fore-step {
    color: var(--fore-gold-text);
}

.fore-meta span,
.fore-why-heading > span,
.horizontal-step .step-info p,
.application-flow-label,
.campusCard__addressLabel,
.fore-price-example div small {
    color: var(--fore-muted);
}

.fore-why-section .fore-why-heading > span {
    color: var(--fore-blue-text);
}


/* ============================================================
   TYPE FLOOR

   QA found 46 elements below 11px, with 8px the largest
   non-body group (programme labels, campus tags, "Intake",
   date labels). 8px is not readable on a phone and fails as
   a matter of basic legibility, not just preference.

   These are all UPPERCASE TRACKED LABELS, which is why they
   were set so small -- they read as "small caps" rather than
   copy. Lifting them to 11px keeps that role while making
   them legible; letter-spacing is eased slightly so the
   larger size does not sprawl.
   ============================================================ */

.programme-label,
.programme-campus,
.programme-photo-caption,
.fore-meta span,
.date-label,
.fore-criteria-kicker,
.fore-price-example-label,
.programme-code,
.fore-fee-eyebrow {
    font-size: 11px;
    letter-spacing: .09em;
}

.horizontal-step .step-info p,
.application-flow-label {
    font-size: 12px;
}

/* ============================================================
   FOCUS VISIBILITY

   33 of 71 focusable elements had no focus style of their own,
   and two accordion rules actively removed the indicator with
   `outline: 0` plus a transparent box-shadow.

   This is a floor, not a restyle: :focus-visible only, so it
   shows for keyboard users and never on mouse click, and it
   is placed early enough that any component with its own
   focus treatment still overrides it.
   ============================================================ */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--fore-blue);
    outline-offset: 2px;
    border-radius: 3px;
}

/* the two rules that stripped the indicator outright */
.appContent .accordion-button:focus-visible,
.faqTab .accordion-button:focus-visible {
    outline: 3px solid var(--fore-blue) !important;
    outline-offset: -3px;
}

/* dark surfaces need a light ring to be visible at all */
:where(.banner, .internshipSection, .careerSliderSection, .dates-card,
       footer, .admissionsStrip) :where(a, button, [tabindex]):focus-visible {
    outline-color: var(--fore-gold);
}

/* ============================================================
   TAP TARGETS

   14 controls measured under 24x24 (WCAG 2.5.8), the worst
   being the footer social icons at 10x19. Padding is used
   rather than width/height so nothing reflows -- the hit area
   grows around the existing glyph.
   ============================================================ */

footer .social-media a,
footer .qukLink a,
.contactStrip__item,
.admissionsStrip a,
.admissionsStrip button {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding-block: 3px;
}

footer .social-media a {
    justify-content: center;
    min-width: 24px;
}

.owl-theme .owl-dots .owl-dot {
    min-width: 24px;
    min-height: 24px;
}

@media (pointer: coarse) {
    /* touch devices get the full 44px recommendation */
    footer .social-media a,
    .contactStrip__item,
    .admissionsStrip a,
    .admissionsStrip button {
        min-height: 44px;
    }

    footer .social-media a {
        min-width: 44px;
    }
}


/* ============================================================
   FINAL CONFORMANCE SWEEP

   Remaining items after the first pass, each measured rather
   than guessed.
   ============================================================ */

/* --- white text on brand blue measured 4.38:1, just under the
       4.50 requirement. #0f7bbf is the same hue 2% darker and
       reaches 4.56:1 -- indistinguishable side by side, so the
       brand colour is kept for everything EXCEPT surfaces that
       carry white text. --- */
:root {
    --fore-blue-cta: #0f7bbf;   /* 4.56:1 with #fff */
}

.headerApplyCta,
.fore-price-table thead,
.fore-tab.active,
.fore-programme-card:not(:first-child) .programme-cta,
.recruiters-section .placement-cta a,
.fore-why-cta {
    background: var(--fore-blue-cta);
}

.fore-programme-card:not(:first-child) .programme-cta {
    border-color: var(--fore-blue-cta);
}

/* --- last of the sub-11px text: the Important Dates card --- */
.dates-card .dates-header span {
    font-size: 11px;
}

.date-timeline .date-content p {
    font-size: 12px;
    line-height: 1.45;
}

/* --- footer contact links were 19px tall; the earlier rule
       targeted .qukLink/.social-media and missed these --- */
.location .contact p a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

@media (pointer: coarse) {
    .location .contact p a {
        min-height: 44px;
    }
}

/* two more white-on-blue surfaces found on the final sweep:
   the FAQ category tabs and the open accordion header */
.faqMenu .nav-link.active,
.faqMenu .nav-link[aria-selected="true"],
.accordion-button:not(.collapsed) {
    background: var(--fore-blue-cta) !important;
}


/* ============================================================
   HEADER NAV COLLISION

   Between roughly 1200px and 1400px the "Batch 2026-28" pill
   overlapped the "FAQs" nav link by 36px (measured at 1280px:
   FAQs 932-969, pill 926-1077, same vertical band), rendering
   as "FAQBatch 2026-28".

   The nav and the right-hand cluster are laid out independently,
   so widening the header does not help -- the extra space goes
   to the gap between them, not to relieving the overlap. The
   pill is the lowest-value item in that row, so it is dropped
   where the row cannot hold everything; the same information is
   in the admissions strip above it and in the page title.
   ============================================================ */

@media (max-width: 1400px) {
    header.foreReferenceHeader .headerBatch {
        display: none;
    }
}


/* ============================================================
   CAUTION MODAL — short-viewport layout.

   Measured across device sizes: fine down to 375x640, but at
   375x568 (iPhone SE and similar, and any phone once browser
   chrome eats the height) the card overflowed by 4px and the
   "I understand" button fell outside the visible area:

       375x812  card 333x573  button visible
       375x667  card 333x573  button visible
       360x640  card 318x573  button visible
       375x568  card 333x520  button NOT visible   <-- trap

   Two causes:
     1. .cautionModal__card carried max-height: 780px, which is
        taller than the viewport it has to fit inside.
     2. .cautionModal__footer lives INSIDE .cautionModal__content,
        so the only dismiss control scrolls away with the body
        text. A notice you cannot dismiss without discovering an
        inner scroll is a dead end, not a modal.

   Fix: clamp the card to the viewport, let only the prose
   scroll, and pin the footer to the bottom of that scroll area
   so the button is on screen at every height.
   ============================================================ */

.cautionModal .cautionModal__card {
    /* dvh tracks the visible viewport as mobile browser chrome
       shows and hides; the vh line is the fallback */
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
}

@media (max-width: 767px) {
    /* The footer (and therefore the only dismiss button) lives INSIDE
       .cautionModal__content, so it cannot be made a sibling of the scroll
       area with CSS alone. Instead the CARD becomes the scroll container and
       the footer sticks to it: content flows normally, the card scrolls, and
       position:sticky resolves against the card's scrollport -- so the button
       is pinned at the bottom at every height, with the prose sliding under
       its solid background. */
    .cautionModal .cautionModal__card {
        display: flex;
        flex-direction: column;
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .cautionModal__brand {
        flex: 0 0 auto;
    }

    .cautionModal__content {
        flex: 1 0 auto;
        display: block;      /* drop the flex centring from the base rule */
        min-height: 0;
    }

    .cautionModal__footer {
        position: sticky;
        bottom: 0;
        z-index: 2;
        margin-top: 24px;
        padding-bottom: 14px;
        background: #fff;
    }

        /* soft edge so text reads as continuing under the pinned footer */
        .cautionModal__footer::before {
            content: "";
            position: absolute;
            top: -18px;
            left: 0;
            right: 0;
            height: 18px;
            background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
            pointer-events: none;
        }
}

/* The modal grid was bottom-aligned (align-items: end). Once the card's
   natural height exceeds the available row the `end` keyword pushes it PAST
   the bottom edge -- measured 12px over at 375x568 and 13px at 320x480.
   `safe center` centres while there is room and falls back to start instead
   of overflowing, so the top of the notice is never clipped either. */
.cautionModal {
    align-items: center;
    align-items: safe center;
    /* The grid row was being sized to the card's NATURAL height (577px)
       while the card itself clamps to the viewport (528px at 375x568).
       Centring then happened inside an over-tall row, pushing the card
       12px past the bottom edge. Pinning the row to the container height
       makes the card centre against the viewport it actually has. */
    grid-template-rows: minmax(0, 1fr);
}

/* ████████████████████████████████████████████████████████████████████
   ELIGIBILITY CRITERIA & SELECTION PROCESS
   Rebuilt to the supplied design, on FORE tokens.

   Layout: a narrow left rail (programme tabs + the criteria list that
   responds to them) beside a wider right column (the four-step flow
   and the centre chips).

   The programme tabs are real tabs — role="tablist"/"tab"/"tabpanel"
   with aria-selected maintained in JS — because picking a programme
   swaps the criteria list. Working Professional carries an extra
   requirement (3 years' experience) that the other two do not, which
   is the entire reason the control exists.

   Step 01 is blue and step 04 is gold: the flow starts in the brand
   colour and resolves in the accent, so the eye lands on the outcome.
   Steps 02 and 03 stay quiet.
   ████████████████████████████████████████████████████████████████████ */

.fore-elig-section {
    padding: clamp(48px, 5vw, 80px) 0;
}

.fore-elig-container {
    width: 100%;
    max-width: var(--fore-measure);
    margin-inline: auto;
    padding-inline: var(--fore-gutter);
}

/* ---------- heading row ----------
   This was a two-column grid only so the intro paragraph could sit at
   the right. With the intro gone the heading centres on its own. */
.fore-elig-top {
    margin-bottom: clamp(26px, 3vw, 42px);
    text-align: center;
}

.fore-elig-rule {
    display: block;
    width: 58px;
    height: 4px;
    margin: 16px auto 0;
    border-radius: 4px;
    background: var(--fore-gold);
}

/* ---------- two-column body ---------- */
.fore-elig-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.65fr);
    align-items: start;
    gap: clamp(16px, 1.8vw, 26px);
}

.fore-elig-aside {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.8vw, 24px);
}

/* ---------- programme tabs ---------- */
.fore-elig-tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
    background: var(--fore-blue-soft);
}

.fore-elig-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #fff;
    color: var(--fore-navy);
    font-family: inherit;
    font-size: clamp(13px, 1.05vw, 14.5px);
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: background .22s ease, color .22s ease,
                border-color .22s ease, box-shadow .22s ease;
}

    .fore-elig-tab:hover {
        border-color: rgba(15, 126, 195, .35);
    }

    .fore-elig-tab.is-active {
        background: var(--fore-blue-cta);
        border-color: var(--fore-blue-cta);
        color: #fff;
        box-shadow: 0 10px 22px rgba(15, 126, 195, .26);
    }

.fore-elig-tab-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--fore-blue-soft);
    color: var(--fore-blue);
    transition: background .22s ease, color .22s ease;
}

    .fore-elig-tab.is-active .fore-elig-tab-icon {
        background: rgba(255, 255, 255, .18);
        color: #fff;
    }

    .fore-elig-tab-icon svg {
        width: 19px;
        height: 19px;
    }

.fore-elig-tab-label {
    flex: 1;
    min-width: 0;
}

.fore-elig-tab-chevron {
    flex: none;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    color: #9fb2c6;
    transition: color .22s ease, transform .22s ease;
}

    .fore-elig-tab.is-active .fore-elig-tab-chevron {
        color: #fff;
        transform: translateX(2px);
    }

    .fore-elig-tab-chevron svg {
        width: 14px;
        height: 14px;
    }

/* ---------- criteria panel ---------- */
.fore-elig-criteria {
    padding: clamp(20px, 2vw, 26px);
    border-radius: 16px;
    background: #0f7bbf;
}

    .fore-elig-criteria > h3 {
        margin: 0 0 16px;
        color: #f5b301;
        font-size: clamp(17px, 1.5vw, 21px);
        font-weight: 700 !important;   /* third-party sheet forces 600 on bare h3 */
        letter-spacing: -.01em;
    }

.fore-elig-criteria-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .fore-elig-criteria-list[hidden] {
        display: none;
    }

    .fore-elig-criteria-list li {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        margin-bottom: 12px;
        color: #ffffff;
        font-size: 13px;
        line-height: 1.5;
    }

        .fore-elig-criteria-list li:last-child {
            margin-bottom: 0;
        }

.fore-elig-bullet {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    color: var(--fore-blue);
}

    .fore-elig-bullet svg {
        width: 18px;
        height: 18px;
		color: #ffffff;
    }

/* ---------- right column ---------- */
.fore-elig-main {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.8vw, 24px);
}

.fore-elig-process {
    padding: clamp(20px, 2vw, 28px);
    border: 1px solid var(--fore-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(16, 35, 63, .06);
}

    .fore-elig-process > h3 {
        margin: 0 0 5px;
        color: var(--fore-navy);
        font-size: clamp(18px, 1.6vw, 22px);
        font-weight: 700 !important;
        letter-spacing: -.015em;
    }

.fore-elig-process-sub {
    margin: 0 0 clamp(22px, 2.4vw, 32px);
    color: var(--fore-muted);
    font-size: 13px;
}

/* ---------- the selection flow ----------
   Five icon discs on one line, joined by dashed connectors with a solid
   arrowhead. The discs carry the sequence on their own, so there are no
   number chips: the icon IS the step marker.

   Arrows are real grid cells rather than pseudo-elements. A pseudo-element
   connector has to guess the gap in a calc(); a cell cannot be wrong, and
   it lets the dashes be a repeating-gradient (exact 9px dash / 8px gap)
   with a filled triangle head instead of CSS `dashed`, whose dash length
   the browser picks for us.

   Only the last disc is gold. Admission is the outcome, so the flow runs
   blue the whole way and resolves in the accent exactly once. */

.fore-elig-steps {
    --disc: clamp(46px, 4.5vw, 65px);
    --elig-dash: #8fc4ec;
    --elig-head: #5aa5e0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr) minmax(16px, .38fr)) minmax(0, 1fr);
    align-items: start;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fore-elig-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: 4px;
    text-align: center;
}

/* ---------- the discs ---------- */
.fore-elig-step-icon {
    flex: none;            /* in the <=460 row layout the text would squash it */
    display: grid;
    place-items: center;
    width: var(--disc);
    height: var(--disc);
    margin-bottom: clamp(14px, 1.5vw, 22px);
    border-radius: 50%;
    background: #e8f1fb;
    color: #0f6cb5;
}

    .fore-elig-step.is-final .fore-elig-step-icon {
        background: #fde5ad;
        color: #132a4a;
    }

    .fore-elig-step-icon svg {
        width: 50%;   /* reference: icon is half the disc */
        height: 50%;
        /* the reference draws these at ~2.2 in a 24 viewBox; the shared
           1.7 on the markup is too light beside it. CSS wins over the
           presentation attribute, so the icons elsewhere keep 1.7. */
        stroke-width: 2.1;
    }

/* ---------- step text ---------- */
.fore-elig-step h4 {
    margin: 0 0 8px;
    color: #16325c;
    font-size: clamp(12.5px, 1vw, 14px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.005em;
}

.fore-elig-step p {
    margin: 0;
    color: #5a6b80;
    font-size: clamp(12px, .88vw, 12.5px);   /* 12px is the page's body floor */
    line-height: 1.5;
}

/* ---------- the connectors ---------- */
.fore-elig-arrow {
    display: flex;
    align-items: center;
    gap: 3px;
    /* park the arrow on the discs' centre line */
    margin-top: calc(var(--disc) / 2 - 5.5px);
    padding-inline: 5px;
}

.fore-elig-arrow-line {
    flex: 1 1 auto;
    height: 2px;
    min-width: 8px;
    /* exact 9px dash / 8px gap — CSS `dashed` leaves the length to the UA */
    background-image: repeating-linear-gradient(90deg,
        var(--elig-dash) 0 7px, transparent 7px 13px);
}

.fore-elig-arrow-head {
    flex: none;
    width: 9px;
    height: 11px;
    color: var(--elig-head);
}

/* ---------- centres ---------- */
.fore-elig-centres {
    padding: clamp(20px, 2vw, 26px);
    border-radius: 18px;
    background: var(--fore-blue-soft);
}

.fore-elig-centres-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

    .fore-elig-centres-head h3 {
        margin: 0;
        color: var(--fore-navy);
        font-size: clamp(15px, 1.3vw, 17px);
        font-weight: 700 !important;
    }

.fore-elig-pin {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    color: var(--fore-blue);
}

    .fore-elig-pin svg {
        width: 16px;
        height: 16px;
    }

/* Five fixed columns rather than a wrapping row. Ten chips in a
   flex-wrap left nine on one line and orphaned the tenth; five per row
   divides the ten centres into exactly two full rows. */
.fore-elig-centre-list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .fore-elig-centre-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 10px 10px;
        border: 1px solid #dbe6f1;
        border-radius: 12px;
        background: #fff;
        color: #3e4c60;
        font-size: 13px;
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(16, 35, 63, .05);
        transition: background .22s ease, color .22s ease,
                    border-color .22s ease, box-shadow .22s ease,
                    transform .22s ease;
    }

        .fore-elig-centre-list li:hover {
            transform: translateY(-2px);
            border-color: var(--fore-blue);
            background: var(--fore-blue-cta);
            color: #fff;
            box-shadow: 0 10px 20px rgba(15, 126, 195, .24);
        }

.fore-elig-centre-pin {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--fore-blue-soft);
    color: var(--fore-blue);
    transition: background .22s ease, color .22s ease;
}

    .fore-elig-centre-list li:hover .fore-elig-centre-pin {
        background: rgba(255, 255, 255, .2);
        color: #fff;
    }

    .fore-elig-centre-pin svg {
        width: 15px;
        height: 15px;
    }

.fore-elig-centre-name {
    min-width: 0;
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
    .fore-elig-layout {
        grid-template-columns: 1fr;
    }

    .fore-elig-tabs {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .fore-elig-tab {
        flex: 1 1 220px;
    }
}

@media (max-width: 720px) {
    /* five across stops fitting; drop to a 2-up grid and retire the
       connectors, which only mean anything on a single line */
    .fore-elig-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(24px, 4vw, 34px) 12px;
    }

    .fore-elig-arrow {
        display: none;
    }

    .fore-elig-tabs {
        flex-direction: column;
    }

    .fore-elig-centre-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 460px) {
    .fore-elig-centre-list {
        grid-template-columns: 1fr;
    }

    .fore-elig-steps {
        grid-template-columns: 1fr;
    }

    .fore-elig-step {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
        text-align: left;
    }

    /* one per row, disc beside the text rather than above it */
    .fore-elig-step-icon {
        --disc: 46px;
        margin-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fore-elig-tab,
    .fore-elig-tab-icon,
    .fore-elig-tab-chevron,
    .fore-elig-centre-list li {
        transition: none;
    }

        .fore-elig-centre-list li:hover {
            transform: none;
        }
}


/* ████████████████████████████████████████████████████████████████████
   SECTION RHYTHM

   Measured: the page was running five near-white section tones —
   #ffffff, #f8f9fb, #f7fafd, #f7f8fa, #f6f8fb. The four non-white
   values sit within 1.6% luminance of each other, so they read as a
   single flat tone. The result was ~8,900px of undifferentiated light
   between the dark hero and the dark footer, with three pure-white
   sections scattered through it in no particular order.

   That is what reads as cheap: not the colours themselves, but the
   absence of any intention behind them.

   Replaced with two deliberate tones plus a dark anchor:

     --surface-a  #ffffff   pure white
     --surface-b  #eef3f9   10.9% darker — far enough apart to read
                            as a band, still light and airy
     --fore-navy  #10233f   anchor

   Assignment alternates, with two constraints that are not arbitrary:

     * Accreditation and Key Recruiters stay WHITE. Several of those
       logo files (partner-frankfurt, partner-unitar) have white baked
       into the image rather than transparency, so on any tinted or
       dark surface they show as white rectangles.
     * Placement goes DARK. Its infographic panel is already #07386f
       navy, so on white it floated as a dark slab on a light page.
       On navy it becomes part of the section.

   Depth comes from a very slight vertical gradient on the tinted
   bands and a soft radial lift on the dark one — restraint rather
   than decoration.
   ████████████████████████████████████████████████████████████████████ */

:root {
    --surface-a: #ffffff;
    --surface-b: #eef3f9;
    --surface-edge: #e3ebf4;
}

/* ---------- tinted bands ---------- */
.fore-why-section,
.mba-apply-section,
.fore-admission-section,
.alumniSection {
    background-color: var(--surface-b);
    background-image: linear-gradient(180deg, #f3f7fb 0%, var(--surface-b) 55%);
    border-top: 1px solid var(--surface-edge);
}

/* ---------- white bands ---------- */
.accreditationStrip,
.fore-elig-section,
.recruiters-section,
.campusesSection {
    background-color: var(--surface-a);
    background-image: none;
    border-top: 1px solid var(--surface-edge);
}

/* the recruiters section carried its own radial tints; clear them so the
   logo row sits on flat white and the baked-in white logo plates vanish */
.recruiters-section {
    background: var(--surface-a);
    border-top: 1px solid var(--surface-edge);
}

/* ---------- dark anchor: Placement ---------- */
/* !important is required: an earlier rule in this file pins
   .internshipSection to `background: #fff !important`. */
.internshipSection {
    background-color: var(--fore-navy) !important;
    background-image:
        radial-gradient(90% 70% at 50% 0%, rgba(15, 126, 195, .22), transparent 70%),
        linear-gradient(180deg, #0d6193 0%, #0d6193 100%) !important;
    border-top: 0;
}

    /* The title is navy by default and would vanish on this navy band.
       !important is needed on both: an earlier rule pins
       `.foreSectionTitle .foreHeadingLead` to the brand blue with
       !important, which on navy measures about 3:1 -- too low for the
       size it renders at, and invisible for the navy title itself. */
    .internshipSection .foreSectionTitle {
        color: #fff !important;
    }

        .internshipSection .foreSectionTitle .foreHeadingLead {
            color: var(--fore-gold) !important;
        }

    .internshipSection p,
    .internshipSection li {
        color: #d5e2f0;
    }

    /* the infographic now sits on navy, so its own drop shadow and
       rounded plate would read as a seam — soften both */
    .internshipSection .placementHighlightsGraphic {
        box-shadow: 0 18px 46px rgba(0, 0, 0, .34);
    }

/* Campus Life and the footer are already navy. A hairline in the brand
   blue marks the handover from the light run into the dark close. */
.campuslifeSection {
    border-top: 1px solid rgba(15, 126, 195, .38);
}

/* ---------- the hero keeps its own treatment ---------- */
.banner {
    border-top: 0;
}

/* The enquiry panel floats over the hero on desktop but drops into the
   flow below it on narrow screens, where it needs to sit on a surface
   rather than on whatever happens to follow. */
@media (max-width: 1200px) {
    .frm {
        background: var(--surface-b);
    }
}

@media (prefers-reduced-motion: reduce) {
    /* nothing here animates; included so the block is explicit about it */
    .internshipSection {
        background-attachment: scroll;
    }
}

/* The tinted band is 10.9% darker than the white it replaced, which pushed
   two borderline greys under 4.5:1 -- #667585 fell to 4.23 and #64717b to
   4.49. Both move onto --fore-muted (#5a6573), which clears the threshold
   on the tint AND on white, so these stay correct if a section's tone is
   ever swapped again. */
.fore-why-section .fore-why-item p,
.fore-admission-heading p,
.fore-why-heading p {
    color: var(--fore-muted);
}


/* ============================================================
   FOOTER — give it its own surface.

   Campus Life and the footer were both #10233f with a 0px gap,
   no border, and `padding-top: 0` on the footer. Measured: the
   two backgrounds were byte-identical and the boundary sat at
   exactly one pixel with nothing marking it. The result was a
   single ~3,500px slab of navy with the page's last section and
   its footer dissolved into each other.

   The footer is a different KIND of surface — utility rather
   than content — so it now looks like one:

     page navy   #10233f
     footer      #0a1628   52% darker, still unmistakably navy

   Plus a fading hairline in the brand blue to mark the handover,
   real top padding so the columns are not pinned to the seam, and
   a soft inner shadow so the footer reads as sitting BEHIND the
   page rather than continuing it.

   Contrast improves rather than degrades: white on #0a1628 is
   18.1:1 against 17.1:1 before.
   ============================================================ */

/* !important: an earlier rule pins `footer` to
   `background-color: var(--fore-navy) !important`. */
footer {
    position: relative;
    background-color: #0a1628 !important;
    padding-top: clamp(46px, 4vw, 72px);
    box-shadow: inset 0 14px 28px -14px rgba(0, 0, 0, .55);
}

    /* hairline that fades at both ends — a hard edge-to-edge rule
       looks like a table border, this reads as a seam */
    footer::before {
        content: "";
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(15, 126, 195, .12) 12%,
            rgba(15, 126, 195, .55) 50%,
            rgba(15, 126, 195, .12) 88%,
            transparent 100%);
    }

/* air before the seam so the gallery does not butt against it.
   !important: `:is(..., .campuslifeSection) { padding-block: ... !important }`
   earlier in this file sets both edges at once. */
.campuslifeSection {
    padding-bottom: clamp(44px, 4.5vw, 72px) !important;
}

/* The bottom bar (copyright / Terms / Privacy) is the last thing on the
   page; drop it a further step so the footer itself has an internal
   hierarchy instead of one flat block. */
footer .copyRight,
footer .footer-bottom,
footer .bottom-footer {
    margin-top: clamp(26px, 2.6vw, 40px);
    padding-top: clamp(18px, 1.8vw, 26px);
    border-top: 1px solid rgba(255, 255, 255, .09);
}

@media (max-width: 767px) {
    footer {
        padding-top: 40px;
    }

    .campuslifeSection {
        padding-bottom: 38px !important;
    }
}


/* ████████████████████████████████████████████████████████████████████
   FOOTER — rebuilt to the supplied reference.

   Five columns: brand, the two campuses, Quick Links, Contact. Gold
   monument marks sit over each campus heading, and the Gurugram campus
   photo is bled in behind the right edge under a blue tint with a gold
   diagonal, the way the reference does it.

   Height is deliberately tight: the reference footer is short for how
   much it carries, so the maps are 104px, the type runs 12.5-13px and
   the whole block lands near 400px at desktop rather than the ~640px
   the previous stacked footer needed.

   Everything here is namespaced .foreFoot* because the old footer's
   class names (.main-footer, .logo-section, .footerCampusCard,
   .location, .social-media) are styled in six different places earlier
   in this file. New names mean none of that has to be unpicked.

   The `footer { background-color: ... !important }` rule near the top of
   this file forces --fore-navy, so the background here has to match its
   weight to win.
   ████████████████████████████████████████████████████████████████████ */

footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #07162b !important;
    background-image:
        linear-gradient(103deg,
            #061225 0%,
            #0a2646 34%,
            #0d3d66 58%,
            #0a2749 100%) !important;
    padding-top: clamp(34px, 3.4vw, 54px);
    padding-bottom: 0;
}

/* ---------- the photo bleed on the right ---------- */
.foreFootArt {
    position: absolute;
    z-index: -1;
    inset: 0 0 0 auto;
    width: clamp(320px, 42%, 780px);
    background: url("../fore/1F7A3311.webp") center right / cover no-repeat;
    /* NB: no element-level opacity -- it would dim ::after (the gold
       diagonal) as well. All the knock-back happens in the wash. */
    /* fade it into the gradient instead of ending on a hard edge */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 46%, #000 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 46%, #000 100%);
}

    /* blue wash over the photo so the type stays readable on top of it */
    .foreFootArt::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg,
            rgba(6, 18, 37, .96) 0%,
            rgba(9, 40, 76, .88) 45%,
            rgba(14, 62, 112, .74) 100%);
    }

    /* the gold diagonal in the lower right */
    .foreFootArt::after {
        content: "";
        position: absolute;
        /* rotate(34deg) throws the bar's top end ~400px to the RIGHT of
           its anchor, so the anchor has to sit well inside the art or the
           whole streak lands off-screen and nothing renders. */
        right: 24%;
        bottom: -34%;
        width: 14px;
        height: 140%;
        transform: rotate(34deg);
        transform-origin: bottom center;
        background: linear-gradient(180deg,
            rgba(245, 179, 1, 0) 0%,
            rgba(245, 179, 1, .95) 38%,
            rgba(201, 143, 0, .9) 72%,
            rgba(201, 143, 0, 0) 100%);
    }

/* ---------- the five-column grid ---------- */
.foreFootGrid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr) minmax(0, 1.2fr) minmax(0, 1.2fr)
        minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: start;
    gap: clamp(20px, 2.4vw, 46px);
    padding-bottom: clamp(26px, 2.6vw, 40px);
}

/* ---------- shared bits ---------- */
.foreFootHead {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(14px, 1.15vw, 16.5px);
    font-weight: 700 !important;   /* a third-party sheet forces 600 on bare h3 */
    letter-spacing: -.005em;
    line-height: 1.25;
}

    .foreFootHead--sm {
        font-size: 14px;
        margin-bottom: 12px;
    }
.foreFootHeadCamp{
	margin: 0 0 10px;
    color: #fff;
    font-size: clamp(12px, 1.15vw, 13.5px);
    font-weight: 700 !important;   /* a third-party sheet forces 600 on bare h3 */
    letter-spacing: -.005em;
    line-height: 1.25;
}
.foreFootRule {
    display: block;
    width: 54px;
    height: 3px;
    margin: 0 0 14px;
    border-radius: 3px;
    background: var(--fore-gold);
}

/* ---------- brand column ---------- */
.foreFootBrand .fore-logo-footer {
    width: clamp(140px, 11vw, 176px);
    height: auto;
    margin-bottom: 14px;
    /* the logo file is brand blue; the reference footer shows it white.
       The file does carry alpha, so inverting gives a clean white mark --
       but .fore-logo-footer earlier in this file puts a white plate
       behind it, which has to go or the whole thing reads as a box. */
    filter: brightness(0) invert(1);
    background: none;
    padding: 0;
    border-radius: 0;
}

.foreFootGrid .foreFootBrand p {
    margin: 0 0 18px !important;
    color: rgba(255, 255, 255, .82) !important;
    font-size: 12.5px !important;
    line-height: 1.65 !important;
}

    .foreFootBrand p strong {
        color: rgba(255, 255, 255, .95);
        font-weight: 700;
    }

.foreFootSocial {
    display: flex;
    gap: 10px;
}

    .foreFootSocial a {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border: 1px solid rgba(255, 255, 255, .34);
        border-radius: 50%;
        color: #fff;
        transition: background .22s ease, border-color .22s ease,
                    color .22s ease, transform .22s ease;
    }

        .foreFootSocial a:hover,
        .foreFootSocial a:focus-visible {
            transform: translateY(-2px);
            border-color: var(--fore-gold);
            background: var(--fore-gold);
            color: var(--fore-navy);
        }

        .foreFootSocial svg {
            width: 17px;
            height: 17px;
        }

/* ---------- campus columns ---------- */
.foreFootMark {
    display: block;
    margin-bottom: 6px;
    color: var(--fore-gold);
}

    .foreFootMark svg {
        width: 42px;
        height: 35px;
    }

.foreFootGrid .foreFootAddr {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 12px !important;
    color: rgba(255, 255, 255, .84) !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
}

.foreFootPin {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--fore-blue);
    color: #fff;
}

    .foreFootPin svg {
        width: 14px;
        height: 14px;
    }

/* the map card: a white plate with the embed on top and the link below,
   the way the reference lays it out */
.foreFootMap {
    overflow: hidden;
    max-width: 300px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
}

    .foreFootMap iframe {
        display: block;
        width: 100%;
        height: 104px;
        border: 0;
    }

    .foreFootMap > a {
        display: block;
        padding: 9px 12px;
        color: var(--fore-blue-text) !important;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        transition: background .22s ease, color .22s ease;
    }

        .foreFootMap > a:hover,
        .foreFootMap > a:focus-visible {
            background: var(--fore-blue-soft);
            color: var(--fore-blue-deep) !important;
        }

/* ---------- quick links ---------- */
.foreFootLinks ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.foreFootLinks li + li {
    margin-top: 2px;
}

.foreFootLinks a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 24px;
    padding: 4px 0;
    color: rgba(255, 255, 255, .84) !important;
    font-size: 12.5px !important;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

/* the <li> is caught by the same normalisation rule, and the <a> inside
   it is pinned to `font-size: inherit !important`, so the size has to be
   set on both at (0,2,x) */
.foreFootGrid .foreFootLinks li,
.foreFootGrid .foreFootLinks a {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
}

    .foreFootLinks a:hover,
    .foreFootLinks a:focus-visible {
        transform: translateX(3px);
        color: var(--fore-gold) !important;
    }

.foreFootChev {
    flex: none;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    color: rgba(255, 255, 255, .42);
}

    .foreFootLinks a:hover .foreFootChev {
        color: var(--fore-gold);
    }

    .foreFootChev svg {
        width: 12px;
        height: 12px;
    }

/* ---------- contact ---------- */
.foreFootRow {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 14px;
}

    .foreFootRow:last-child {
        margin-bottom: 0;
    }

    .foreFootGrid .foreFootRow p {
        margin: 0 !important;
        color: rgba(255, 255, 255, .84) !important;
        font-size: 12.5px !important;
        line-height: 1.7 !important;
    }

        .foreFootRow p a {
            color: inherit !important;
            text-decoration: none;
            transition: color .2s ease;
        }

            .foreFootRow p a:hover,
            .foreFootRow p a:focus-visible {
                color: var(--fore-gold) !important;
            }

.foreFootIcon {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fore-blue);
    color: #fff;
}

    .foreFootIcon svg {
        width: 16px;
        height: 16px;
    }

/* ---------- bottom bar ---------- */
footer .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 0;
    padding: 16px 0 18px;
    border-top: 1px solid rgba(255, 255, 255, .13);
}

    footer .footer-bottom p {
        margin: 0 !important;
        color: rgba(255, 255, 255, .7) !important;
        font-size: 12px !important;
        line-height: 1.6 !important;
    }

    footer .footer-links {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0;
    }

        footer .footer-links a {
            min-height: 24px;
            padding: 3px 16px;
            color: rgba(255, 255, 255, .7) !important;
            font-size: 12px;
            text-decoration: none;
            transition: color .2s ease;
        }

            footer .footer-links a + a {
                border-left: 1px solid rgba(255, 255, 255, .22);
            }

            footer .footer-links a:last-child {
                padding-right: 0;
            }

            footer .footer-links a:hover,
            footer .footer-links a:focus-visible {
                color: var(--fore-gold) !important;
            }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
    .foreFootGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: clamp(24px, 3vw, 36px);
    }

    /* the brand column reads as the header of the block */
    .foreFootBrand {
        grid-column: 1 / -1;
        max-width: 620px;
    }
}

@media (max-width: 860px) {
    .foreFootGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .foreFootArt {
        width: 58%;
        opacity: .22;
    }
}

@media (max-width: 560px) {
    footer {
        padding-top: 32px;
    }

    .foreFootGrid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .foreFootMap {
        max-width: none;
    }

    /* stacked, this footer ran to ~1770px. Two columns of quick links and
       a shorter map bring it back near 1400 without dropping anything. */
    .foreFootLinks ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 14px;
    }

    .foreFootLinks li + li {
        margin-top: 0;
    }

    .foreFootMap iframe {
        height: 86px;
    }

    footer .footer-bottom {
        justify-content: flex-start;
    }

        footer .footer-links a:first-child {
            padding-left: 0;
        }
}

@media (pointer: coarse) {
    .foreFootSocial a {
        width: 44px;
        height: 44px;
    }

    .foreFootLinks a,
    footer .footer-links a {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .foreFootSocial a,
    .foreFootLinks a,
    .foreFootMap > a,
    .foreFootRow p a,
    footer .footer-links a {
        transition: none;
    }

        .foreFootSocial a:hover,
        .foreFootLinks a:hover {
            transform: none;
        }
}


/* ████████████████████████████████████████████████████████████████████
   APPLICATION PROCESS & IMPORTANT DATES — rebuilt to the reference.

   The section already had the right skeleton (five steps, four arrows,
   a dates timeline), so this is a repalette and a relayout rather than
   new markup. Per the brief the heading, the step titles and the step
   descriptions are untouched, and no number badges are added.

   The old styling ran on colours from the template it came from --
   #a51c30 maroon, #17bdfa cyan, #dd8c07 amber, #061c4b navy -- none of
   which are FORE's. Everything below moves onto the page tokens.

   The arrows now run as a left-to-right wave: same keyframes on all
   four, staggered .22s apart, so the eye is pulled along the sequence
   instead of seeing four arrows twitch in unison.
   ████████████████████████████████████████████████████████████████████ */

/* ---------- the two cards ---------- */
.mba-apply-container {
    align-items: stretch;
    gap: clamp(16px, 1.8vw, 26px);
}

.apply-column {
    padding: clamp(24px, 2.4vw, 38px);
    border: 1px solid var(--fore-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(16, 35, 63, .07);
}

/* ---------- heading ---------- */
.apply-rule {
    display: block;
    width: 52px;
    height: 3px;
    margin: 0 auto 14px;
    border-radius: 3px;
    background: var(--fore-gold);
}

/* Centred, gold rule included. `.mba-apply-section .section-heading
   h3, ... p` sets text-align on the CHILDREN at (0,2,1), so it is set
   there rather than relying on the wrapper to pass it down. */
.apply-column .section-heading {
    text-align: center;
}

.mba-apply-container .apply-column .section-heading h3,
.mba-apply-container .apply-column .section-heading p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.apply-column .section-heading h3 {
    margin-bottom: 8px;
    color: var(--fore-navy);
    font-weight: 700 !important;
}

.apply-column .section-heading p {
    max-width: 52ch;
}

    .apply-column .section-heading h3 span {
        color: var(--fore-blue) !important;
    }

/* ---------- the five steps ---------- */
.horizontal-process {
    /* One source of truth for the disc size. The rail sat at a fixed
       top:30px and the arrows at a fixed margin, while the disc is a
       clamp() -- so the three only agreed at 1440px. Measured at 1024
       and 800 the rail ran 6px below the disc centres and the chevrons
       3px below that again. Deriving both offsets from the disc keeps
       them locked together at every width. */
    --step-disc: clamp(50px, 4.4vw, 62px);
    margin-top: clamp(24px, 2.6vw, 38px);
}

    /* the rail the arrows sit on -- 2px tall, so -1px to centre it */
    .horizontal-process::before {
        top: calc(var(--step-disc) / 2 - 1px);
        background: #dde7f1;
    }

.step-circle {
    width: var(--step-disc);
    height: var(--step-disc);
    margin-bottom: 15px;
    border: 0;
    background: #e8f1fb;
    color: #0f6cb5;
    font-size: clamp(16px, 1.4vw, 19px);
    box-shadow: 0 0 0 6px #fff;
}

    .horizontal-step:hover .step-circle {
        transform: translateY(-4px);
        background: var(--fore-blue-cta);
        color: #fff;
        box-shadow: 0 0 0 6px #fff, 0 10px 22px rgba(15, 126, 195, .3);
    }

.horizontal-step .step-info h3 {
    margin: 0 0 5px;
    color: var(--fore-navy);
    font-size: clamp(12.5px, 1.05vw, 14.5px);
    font-weight: 700 !important;
    line-height: 1.25;
}

.horizontal-step .step-info p {
    margin: 0;
    color: var(--fore-muted) !important;
    font-size: clamp(11.5px, .95vw, 12.5px) !important;
    line-height: 1.5 !important;
}

/* ---------- the arrows: a left-to-right wave ---------- */
.process-arrow {
    /* the arrow box is 12px tall, so -6px puts its centre on the rail */
    margin-top: calc(var(--step-disc) / 2 - 6px);
    color: #8fb9dd;
    font-size: 12px;
}

    .process-arrow i {
        animation: foreArrowFlow 2s infinite ease-in-out;
    }

/* children alternate step / arrow, so the arrows are 2, 4, 6, 8 */
.horizontal-process > .process-arrow:nth-child(2) i  { animation-delay: 0s; }
.horizontal-process > .process-arrow:nth-child(4) i  { animation-delay: .22s; }
.horizontal-process > .process-arrow:nth-child(6) i  { animation-delay: .44s; }
.horizontal-process > .process-arrow:nth-child(8) i  { animation-delay: .66s; }

@keyframes foreArrowFlow {
    0%        { transform: translateX(-4px); opacity: .28; }
    35%       { transform: translateX(4px);  opacity: 1; }
    70%, 100% { transform: translateX(-4px); opacity: .28; }
}

/* ---------- the CTA bar ---------- */
.apply-cta {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.4vw, 18px);
    margin-top: clamp(24px, 2.6vw, 36px);
    padding: clamp(14px, 1.4vw, 18px) clamp(16px, 1.6vw, 22px);
    border-radius: 12px;
    border-left: 4px solid var(--fore-gold);
    background: var(--fore-blue-soft);
}

.apply-cta__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #fff;
    color: var(--fore-blue);
    font-size: 17px;
}

.apply-cta__text {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    color: var(--fore-navy) !important;
    font-size: clamp(12.5px, 1.05vw, 14px) !important;
    font-weight: 600;
    line-height: 1.45 !important;
}

.apply-cta .apply-button {
    flex: none;
    margin: 0;
    padding: 11px 22px;
    border-radius: 8px;
    background: var(--fore-gold);
    color: var(--fore-navy);
    font-size: 12.5px;
    font-weight: 700;
}

    .apply-cta .apply-button:hover,
    .apply-cta .apply-button:focus-visible {
        background: var(--fore-navy);
        color: #fff;
    }

/* ---------- the dates card ---------- */
.dates-card {
    padding: clamp(24px, 2.2vw, 32px) clamp(20px, 2vw, 28px);
    background: #0b1b3a;
    box-shadow: 0 12px 34px rgba(11, 27, 58, .22);
}

    /* the template's decorative blobs were maroon-tinted */
    .dates-card::after {
        background: rgba(15, 126, 195, .16);
    }

.dates-header .calendar-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--fore-gold);
    color: var(--fore-navy);
    font-size: 19px;
}

.dates-card .dates-header span {
    color: #b9c9e0 !important;
    letter-spacing: .12em;
}

/* ---------- the timeline ---------- */
.date-timeline {
    position: relative;
}

.date-item {
    padding-left: 26px;
}

    /* the connecting rail between the dots */
    .date-item:not(:last-child)::before {
        content: "";
        position: absolute;
        left: -16.5px;
        top: 16px;
        bottom: 6px;
        width: 1px;
        background: rgba(255, 255, 255, .17);
    }

.date-dot {
    left: -21px;
    top: 4px;
    width: 12px;
    height: 12px;
    border: 3px solid var(--fore-gold);
    background: #0b1b3a;
    box-shadow: none;
}

    .date-item.active .date-dot {
        left: -21px;
        top: 4px;
        width: 12px;
        height: 12px;
        background: var(--fore-gold);
        box-shadow: 0 0 0 4px rgba(245, 179, 1, .22);
    }

.date-content .date-label {
    display: block;
    margin-bottom: 3px;
    color: #b9c9e0;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .12em;
}

.date-content h3 {
    margin: 0 0 4px;
    color: #fff;
    font-size: clamp(13px, 1.15vw, 15.5px);
    font-weight: 700 !important;
    line-height: 1.25;
}

    /* the live milestone is the one that matters most */
    .date-item.active .date-content h3 {
        color: var(--fore-gold);
    }

.date-content p {
    margin: 0 !important;
    color: #aebdd4 !important;
    font-size: 11.5px !important;
    line-height: 1.5 !important;
}

/* ---------- the trust strip ---------- */
.apply-features {
    /* it is a child of the two-column .mba-apply-container, so without
       this it lands inside the left column instead of running under both
       cards the way the reference shows it */
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    /* NB: auto side margins would stop this stretching across the span
       and size it to content instead (it came out 954px inside a 1368px
       span), so the insets stay at 0 */
    margin: clamp(22px, 2.4vw, 36px) 0 0;
    padding: 0;
    list-style: none;
}

.apply-feature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: clamp(12px, 1.2vw, 16px) clamp(8px, 1vw, 18px);
}

    .apply-feature + .apply-feature {
        border-left: 1px solid var(--surface-edge);
    }

.apply-feature__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--fore-blue);
    font-size: 18px;
}

.apply-feature__label {
    color: var(--fore-navy);
    font-size: clamp(11.5px, .95vw, 13px);
    font-weight: 700;
    line-height: 1.3;
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    .apply-features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 4px;
    }

    /* a left border only makes sense within a row */
    .apply-feature + .apply-feature {
        border-left: 0;
    }

    .apply-feature {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .apply-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .apply-cta {
        flex-wrap: wrap;
    }

    .apply-cta__text {
        flex: 1 1 100%;
        order: 2;
    }

    .apply-cta .apply-button {
        order: 3;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .apply-features {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .process-arrow i {
        animation: none;
        opacity: .65;
        transform: none;
    }
}


/* The programmes heading is now an ordinary section title ("Academic
   Programmes") rather than the old all-blue display line, so it takes the
   same navy body + blue lead word as every other section. Two later
   `.fore-admission-heading h2` rules still force #075aa5 for the old
   treatment; this outranks them at (0,2,1). The lead word keeps its blue
   from `.foreSectionTitle .foreHeadingLead`. */
.fore-admission-heading h2.foreSectionTitle {
    color: var(--fore-navy);
}


/* ---- top contact strip: icon/label alignment ----
   The markup separates each icon from its label with a literal space
   ("<i></i> +91 11 41242415"), but these are `display: flex`, and flex
   strips leading whitespace from the anonymous text item -- measured
   icon-to-text gap was 0px on all three, so the icons sat jammed against
   their labels. A real `gap` is the only thing flex will honour.

   The icons also rode 0.9px low (icon box centre 26.0 vs text 25.1)
   because the <i> inherited the 1.6 line-height, giving it a 20.8px box
   around a 13px glyph. line-height: 1 collapses the box onto the glyph
   so align-items: center lines them up. */
.admissionsStrip__contacts a,
.admissionsStrip__contacts button {
    gap: 7px;
}

.admissionsStrip__contacts a i,
.admissionsStrip__contacts button i {
    display: block;
    line-height: 1;
}

/* the separator bullets carry the same 1.6 line-height and drift with it */
.admissionsStrip__contacts > span[aria-hidden] {
    display: block;
    line-height: 1;
}


/* ---- Why FORE School: centred section title ----
   The title used to live in the left intro column as a bespoke display
   heading. It is now an ordinary centred section title spanning both
   columns, like every other section, with the gold rule beneath it. The
   left column keeps only the Know More CTA and the line-art watermark. */
.fore-why-top {
    grid-column: 1 / -1;
    margin-bottom: clamp(16px, 2vw, 28px);
    text-align: center;
}

    .fore-why-top .fore-why-rule {
        margin: 16px auto 0;
    }


/* ████████████████████████████████████████████████████████████████████
   ACADEMIC PROGRAMMES — rebuilt to the supplied reference.

   Tab strip: pill buttons with a leading icon, the active one filled
   navy with a gold underline. Campus panels each open with a group
   header (title, gold dash, kicker, hairline, place tag). Cards lose the
   caption and number watermarks and the code line, and carry icon-led
   Intake / Programme fee rows above a full-width View Highlights bar.

   Card photos now key off [data-photo] rather than :nth-child, because
   the six cards are split across two grids and nth-child restarts in
   each one.
   ████████████████████████████████████████████████████████████████████ */

/* ---------- title: gold brush underline ---------- */
.fore-admission-heading {
    position: relative;
    margin-bottom: clamp(24px, 2.6vw, 38px);
}

    .fore-admission-heading h2.foreSectionTitle::after {
        content: "";
        display: block;
        width: 132px;
        height: 9px;
        margin: 12px auto 0;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 9'%3E%3Cpath d='M3 6.4C28 2.4 62 1.6 129 3.4' stroke='%23f5b301' stroke-width='4.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
    }

/* ---------- tab strip ---------- */
.fore-admission-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.fore-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px clamp(16px, 1.8vw, 26px);
    border: 1px solid var(--fore-border);
    border-bottom: 3px solid transparent;
    border-radius: 12px;
    background: #fff;
    color: var(--fore-navy);
    font-size: clamp(12.5px, 1.05vw, 14.5px);
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(16, 35, 63, .06);
}

    .fore-tab:hover {
        border-color: rgba(15, 126, 195, .45);
        color: var(--fore-blue-text);
    }

    .fore-tab.active {
        border-color: #123a6b;
        border-bottom-color: var(--fore-gold);
        background: #123a6b;
        color: #fff;
        box-shadow: 0 10px 24px rgba(18, 58, 107, .28);
    }

.fore-tab .tab-symbol {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin: 0;
    color: var(--fore-blue);
}

    .fore-tab.active .tab-symbol {
        color: var(--fore-gold);
    }

    .fore-tab .tab-symbol svg {
        width: 20px;
        height: 20px;
    }

/* ---------- campus group header ---------- */
.programme-group-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: clamp(26px, 2.8vw, 40px) 0 clamp(16px, 1.8vw, 24px);
}

    .programme-group-head h3 {
        flex: none;
        margin: 0;
        color: var(--fore-navy);
        font-size: clamp(19px, 1.9vw, 27px);
        font-weight: 700 !important;
        letter-spacing: -.02em;
        line-height: 1.15;
    }

.programme-group-dash {
    flex: none;
    width: 34px;
    height: 3px;
    border-radius: 3px;
    background: var(--fore-gold);
}

.programme-group-kicker {
    flex: none;
    color: var(--fore-blue-text);
    font-size: clamp(9.5px, .85vw, 11px);
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
}

.programme-group-line {
    flex: 1 1 auto;
    min-width: 12px;
    height: 1px;
    background: linear-gradient(90deg, var(--fore-border), rgba(216, 229, 239, .25));
}

.programme-group-place {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--fore-blue-text);
    font-size: clamp(9.5px, .85vw, 11px);
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

    .programme-group-place > span[aria-hidden] {
        display: grid;
        place-items: center;
        width: 16px;
        height: 16px;
        color: var(--fore-blue);
    }

        .programme-group-place svg {
            width: 15px;
            height: 15px;
        }

/* ---------- cards ---------- */
.fore-programme-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 24px);
}

.fore-programme-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--fore-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(16, 35, 63, .07);
}

/* the six photos, keyed so regrouping cannot shuffle them */
.fore-programme-card[data-photo="1"] .programme-photo { background-image: url(../fore/programme-photo-1.webp); }
.fore-programme-card[data-photo="2"] .programme-photo { background-image: url(../fore/programme-photo-2.webp); }
.fore-programme-card[data-photo="3"] .programme-photo { background-image: url(../fore/programme-photo-3.webp); }
.fore-programme-card[data-photo="4"] .programme-photo { background-image: url(../fore/programme-photo-4.webp); }
.fore-programme-card[data-photo="5"] .programme-photo { background-image: url(../fore/programme-photo-5.webp); }
.fore-programme-card[data-photo="6"] .programme-photo { background-image: url(../fore/programme-photo-6.webp); }

.fore-programme-card .programme-photo {
    position: relative;
    aspect-ratio: 16 / 9;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

    /* the template drew a scrim and a big number over the photo; the
       reference shows a clean image with only the badge */
    .fore-programme-card .programme-photo::before,
    .fore-programme-card .programme-photo::after {
        content: none;
    }

.fore-programme-card .programme-label {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 11px;
    border-radius: 6px;
    background: var(--fore-gold);
    color: var(--fore-navy);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.programme-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(14px, 1.4vw, 20px) clamp(14px, 1.4vw, 20px) 0;
}

    /* nine rules already set a size on this element; the strongest is
       `.fore-admission-section .programme-card-body h3` at (0,2,1), which
       forced 21px. Match that specificity so the reference's ~17px holds. */
    .fore-admission-section .programme-card-body h3,
    .programme-card-body h3 {
        margin: 0 0 clamp(12px, 1.3vw, 18px);
        color: var(--fore-blue-text);
        font-size: clamp(14px, 1.2vw, 17px);
        font-weight: 700 !important;
        letter-spacing: -.01em;
        line-height: 1.3;
    }

/* ---------- intake / fee ---------- */
.fore-admission-section .programme-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(14px, 1.4vw, 20px);
    /* Four older rules give this block `padding: 13px 0` and a
       `border-top` -- left from the previous card design, where the
       figures sat under a rule. Measured, they added 27px of dead space
       between the title and the Intake row (row content is 37px, the
       block was 64px) plus a stray hairline. The reference has neither:
       the only divider is the vertical one between the two figures. */
    padding: 0;
    border-top: 0;
    /* and a `min-height: 58px` from the same era, which held the row at
       58px around 37px of content. With it gone the figures sit directly
       under the title and the spare height from equal-height cards goes
       to the CTA's auto top margin, pinning the button to the bottom. */
    min-height: 0;
}

    /* the hairline between the two figures */
    .programme-details::before {
        content: "";
        grid-column: 2;
        grid-row: 1;
        width: 1px;
        height: 30px;
        background: var(--fore-border);
    }

.programme-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

    .programme-meta:first-of-type { grid-column: 1; }
    .programme-meta:last-of-type  { grid-column: 3; }

.programme-meta-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: var(--fore-blue);
}

    .programme-meta-icon svg {
        width: 22px;
        height: 22px;
    }

.programme-meta .fore-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

    .programme-meta .fore-meta span {
        color: var(--fore-muted);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .programme-meta .fore-meta strong {
        color: var(--fore-navy);
        font-size: clamp(11.5px, 1vw, 13px);
        font-weight: 700;
        white-space: nowrap;
    }

/* ---------- the View Highlights bar ---------- */
.programme-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: calc(100% + 2 * clamp(14px, 1.4vw, 20px));
    margin: auto calc(-1 * clamp(14px, 1.4vw, 20px)) 0;
    padding: 13px 44px 13px 16px;
    border: 0;
    border-radius: 0;
    background: var(--fore-blue-cta);
    color: #fff;
    font-size: clamp(12px, 1.05vw, 13.5px);
    font-weight: 600;
    /* an older rule uppercases this at 1.1px tracking; the reference
       sets it in sentence case */
    text-transform: none;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background .22s ease;
}

    .programme-cta:hover,
    .programme-cta:focus-visible {
        background: #0b5f94;
        color: #fff;
    }

/* Focus indicators, measured rather than assumed.

   The card CTA used to turn gold on :focus-visible; the hover colour
   above overrides that, and #0f7bbf -> #0b5f94 is ~1.3:1 -- not a
   perceivable indicator at all (WCAG 2.4.7).

   Gold was the obvious replacement, but gold on the blue button is only
   2.46:1 and the tab strip's existing gold ring is 2.62:1 on white --
   both under the 3:1 that WCAG 2.4.11 wants for a focus indicator.

   So: a white ring inside the blue button (4.86:1), and a navy ring
   outside the tabs, which reads against the light section background
   whether the tab is white or navy. The CTA's ring is inset because the
   card clips its children and an outset ring would be cut off. */
.programme-cta:focus-visible,
.fore-programme-card:first-child .programme-cta:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -4px;
}

.fore-tab:focus-visible {
    outline: 3px solid var(--fore-navy);
    outline-offset: 2px;
}

.programme-cta-chev {
    position: absolute;
    right: 16px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    transition: transform .22s ease;
}

    .programme-cta:hover .programme-cta-chev {
        transform: translateX(3px);
    }

    .programme-cta-chev svg {
        width: 15px;
        height: 15px;
    }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
    .fore-programme-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .fore-admission-tabs {
        flex-wrap: wrap;
    }

    .programme-group-head {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* the hairline and the place tag stop earning their space once the
       header wraps */
    .programme-group-line {
        display: none;
    }
}

@media (max-width: 620px) {
    .fore-programme-grid {
        grid-template-columns: 1fr;
    }

    .fore-tab {
        flex: 1 1 100%;
        justify-content: center;
    }
}

@media (pointer: coarse) {
    .fore-tab,
    .programme-cta {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .programme-cta,
    .programme-cta-chev {
        transition: none;
    }

        .programme-cta:hover .programme-cta-chev {
            transform: none;
        }
}


/* ---- retire the "featured first card" treatment ----
   .fore-programme-card:first-child used to paint card one navy with a
   gold CTA. The reference shows all six cards identical -- and now that
   they are split across two grids, :first-child fires once per campus,
   so it would have highlighted PGDM and Big Data Analytics both. */
.fore-programme-card:first-child {
    background: #fff;
}

    .fore-programme-card:first-child .programme-card-body h3 {
        color: var(--fore-blue-text);
    }

    .fore-programme-card:first-child .programme-meta-icon {
        color: var(--fore-blue);
    }

    .fore-programme-card:first-child .programme-meta .fore-meta span {
        color: var(--fore-muted);
    }

    .fore-programme-card:first-child .programme-meta .fore-meta strong {
        color: var(--fore-navy);
    }

    .fore-programme-card:first-child .programme-details::before {
        background: var(--fore-border);
    }

    .fore-programme-card:first-child .programme-cta {
        background: var(--fore-blue-cta);
        color: #fff;
    }

        .fore-programme-card:first-child .programme-cta:hover,
        .fore-programme-card:first-child .programme-cta:focus-visible {
            background: #0b5f94;
            color: #fff;
        }


/* ████████████████████████████████████████████████████████████████████
   SECTION HEADINGS — one treatment for all of them.

   The page had grown four different heading underlines: a curved gold
   brush on Programmes, and three separate <span> rules in Why FORE,
   Application Process and Eligibility, each its own width and offset.
   Several sections had no rule at all.

   Now every section title draws the same straight gold rule from its own
   ::after, so nothing depends on a span being present in the markup, and
   the three existing spans are hidden rather than deleted (they are
   aria-hidden decorations; removing them from the HTML would be a second
   edit for no gain).

   Spacing is set once here -- the wrappers contribute nothing -- so the
   gap above and below every section title is identical.
   ████████████████████████████████████████████████████████████████████ */

/* Measured, five titles still disagreed: Placement sat on
   `.internshipSection h3 { margin-bottom: var(--placement-gap-md)
   !important }`, Accreditation collapsed to 0, Alumni kept a blue 80px
   rule of its own, Placement an 80px one, and "One Institute. Two
   Campuses." ran 44.6px against everyone else's 40px.

   Those live at (0,2,x), so a plain `.foreSectionTitle` -- even with
   !important -- loses. Repeating the class through :is() lifts this to
   (0,3,0), which clears them without having to hunt down and edit each
   older rule one by one. */
.foreSectionTitle:is(.foreSectionTitle):is(.foreSectionTitle),
.campusesTitle:is(.campusesTitle):is(.campusesTitle) {
    margin: 0 auto clamp(22px, 2.3vw, 34px) !important;
    padding: 0 !important;
    font-size: var(--fore-title-size) !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

    /* the straight gold rule, centred under every title */
    .foreSectionTitle:is(.foreSectionTitle):is(.foreSectionTitle)::after,
    .campusesTitle:is(.campusesTitle):is(.campusesTitle)::after {
        content: "" !important;
        display: block !important;
        width: 74px !important;
        height: 4px !important;
        margin: clamp(12px, 1.2vw, 16px) auto 0 !important;
        border-radius: 2px !important;
        background: var(--fore-gold) !important;
        transform: none !important;
        opacity: 1 !important;
    }

/* The standalone rule elements would now double up under the title's own
   gold rule. .accreditationBar is the same thing in the Accreditation and
   International Outreach sections -- an 80x4 blue bar -- and was showing
   as a second, differently-coloured line beneath the gold one. */
.fore-why-rule,
.apply-rule,
.fore-elig-rule,
.accreditationBar {
    display: none;
}

/* wrappers stop adding their own spacing, so the rhythm is the title's
   alone and identical in every section */
.fore-why-top,
.fore-elig-top,
.fore-admission-heading,
.mba-apply-heading {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Placement and the dark sections keep a white title, but the rule is
   gold everywhere -- it reads on both the light and the navy bands. */
.internshipSection .foreSectionTitle::after,
.campuslifeSection .foreSectionTitle::after {
    background: var(--fore-gold);
}


/* The campuses slide is designed artwork, laid out with object-fit:
   contain to protect the type -- which letterboxed it badly on phones.
   It now has a portrait file, so on mobile it can fill the frame like
   the photo slides.

   But the hero is 100dvh tall, and a 390x844 phone is aspect 0.46
   against the banners' 0.5625. Measured, `cover` then clipped 8.9% off
   each side -- about 84px at the artwork's own scale, and "TWO
   CAMPUSES." only carries ~60px of side margin, so the headline was
   being cut. Letting the hero take the banners' 9:16 aspect on phones
   means cover crops nothing. All four mobile files are 9:16, so one
   ratio serves them all. 100dvh stays as the ceiling for landscape. */
@media (max-width: 767px) {
    /* `body .banner { min-height: 100vh !important }` sits at (0,1,1) and
       beat a plain .banner rule even with !important, so the hero stayed
       844px and kept cropping. (0,3,0) clears it. */
    .banner:is(.banner):is(.banner) {
        height: calc(100vw * 16 / 9 + 60px) !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        background: var(--fore-navy);
    }

    /* The arrows and dots live at the carousel's bottom edge, so once the
       hero shrank to the artwork's own height they covered the banner's
       last line ("PGDM (FM), PGDM (BDA)" -- 60px of overlap, measured).
       Ending the track 60px early gives them a strip of their own while
       the slides keep an exact 9:16, so nothing is cropped and nothing is
       covered. The strip takes the page navy, which the artwork already
       ends on. */
    .admissionHeroTrack {
        bottom: 60px !important;
    }

    .admissionHeroSlide--art img {
        object-fit: cover !important;
    }
}


/* ████████████████████████████████████████████████████████████████████
   CAMPUS LIFE — premium gallery.

   Six photographs on an auto-playing loop instead of four static ones.
   Each sits in a card with a fixed 4:3 window, so the slides line up
   regardless of the source aspect (these range from 799x533 to
   6000x4000), with a caption over a gradient foot and a slow zoom on
   hover.

   The arrows used to sit in the middle of the gap under the heading,
   which is what made the section look unfinished. They now ride the
   slider's own edges, vertically centred, with dots underneath.

   NB: every card rule is scoped to .campusSlider. "One Institute. Two
   Campuses." uses .campusCard and .campusCard__media for its own two
   address cards, and unscoped these rules would have forced a 4:3 crop
   and a caption gradient onto them.
   ████████████████████████████████████████████████████████████████████ */

.campuslifeSection .heading-campuslife {
    display: block;
    margin-bottom: 0;
}

.campusSlider {
    position: relative;
    padding-inline: 0;
}

/* ---------- the card ---------- */
.campusSlider .campusCard {
    position: relative;
    overflow: hidden;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    background: #0d1f3a;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .34);
    transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}

    .campusSlider .campusCard:hover {
        transform: translateY(-4px);
        border-color: rgba(245, 179, 1, .5);
        box-shadow: 0 22px 50px rgba(0, 0, 0, .46);
    }

/* a fixed window so slides of very different source aspects still align */
.campusSlider .campusCard__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

    .campusSlider .campusCard__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .6s ease;
    }

        .campusSlider .campusCard:hover .campusSlider .campusCard__media img {
            transform: scale(1.06);
        }

    /* gradient foot so the caption holds contrast over any photo */
    .campusSlider .campusCard__media::after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 58%;
        background: linear-gradient(180deg,
            rgba(6, 16, 32, 0) 0%,
            rgba(6, 16, 32, .58) 52%,
            rgba(6, 16, 32, .9) 100%);
        pointer-events: none;
    }

.campusSlider .campusCard__caption {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px 18px;
    color: #fff;
    font-size: clamp(13px, 1.1vw, 15px);
    font-weight: 700;
    letter-spacing: -.005em;
}

    /* a short gold tick above the caption -- the page's accent, reused */
    .campusSlider .campusCard__caption::before {
        content: "";
        display: block;
        width: 26px;
        height: 3px;
        margin-bottom: 8px;
        border-radius: 3px;
        background: var(--fore-gold);
    }

/* ---------- arrows on the slider's edges ---------- */
.campuslifeSection .careerCarouselNav {
    position: static;
    margin: 0;
}

    .campuslifeSection .careerCarouselNav .owl-prev,
    .campuslifeSection .careerCarouselNav .owl-next {
        position: absolute;
        z-index: 6;
        top: 50%;
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        margin: 0;
        transform: translateY(-50%);
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 50%;
        background: rgba(8, 22, 44, .72);
        backdrop-filter: blur(6px);
        transition: background .25s ease, border-color .25s ease, transform .25s ease;
    }

        .campuslifeSection .careerCarouselNav .owl-prev { left: -8px; }
        .campuslifeSection .careerCarouselNav .owl-next { right: -8px; }

        .campuslifeSection .careerCarouselNav .owl-prev:hover,
        .campuslifeSection .careerCarouselNav .owl-next:hover,
        .campuslifeSection .careerCarouselNav .owl-prev:focus-visible,
        .campuslifeSection .careerCarouselNav .owl-next:focus-visible {
            border-color: var(--fore-gold);
            background: var(--fore-gold);
            transform: translateY(-50%) scale(1.06);
        }

        .campuslifeSection .careerCarouselNav img {
            width: 17px;
            height: 17px;
            /* the arrow SVGs are dark; invert them onto the navy pill */
            filter: brightness(0) invert(1);
        }

        .campuslifeSection .careerCarouselNav .owl-prev:hover img,
        .campuslifeSection .careerCarouselNav .owl-next:hover img {
            filter: none;
        }

/* ---------- dots ---------- */
.campuslifeSection .owl-dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: clamp(18px, 2vw, 28px);
}

    .campuslifeSection .owl-dots .owl-dot span {
        display: block;
        width: 9px;
        height: 9px;
        margin: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, .3);
        transition: background .25s ease, width .25s ease;
    }

    .campuslifeSection .owl-dots .owl-dot.active span {
        width: 26px;
        border-radius: 5px;
        background: var(--fore-gold);
    }

    .campuslifeSection .owl-dots .owl-dot:focus-visible {
        outline: 3px solid var(--fore-gold);
        outline-offset: 3px;
    }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    .campuslifeSection .careerCarouselNav .owl-prev { left: 4px; }
    .campuslifeSection .careerCarouselNav .owl-next { right: 4px; }
}

@media (pointer: coarse) {
    .campuslifeSection .careerCarouselNav .owl-prev,
    .campuslifeSection .careerCarouselNav .owl-next,
    .campuslifeSection .owl-dots .owl-dot {
        min-width: 44px;
        min-height: 44px;
    }

    .campuslifeSection .owl-dots .owl-dot {
        display: grid;
        place-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .campusSlider .campusCard,
    .campusSlider .campusCard__media img,
    .campuslifeSection .careerCarouselNav .owl-prev,
    .campuslifeSection .careerCarouselNav .owl-next {
        transition: none;
    }

        .campusSlider .campusCard:hover {
            transform: none;
        }

        .campusSlider .campusCard:hover .campusSlider .campusCard__media img {
            transform: none;
        }
}


/* ████████████████████████████████████████████████████████████████████
   PLACEMENT HIGHLIGHTS — the mobile fallback now carries all three
   panels of the infographic, not just the CTC summary.

   The artwork is one wide image, so on a phone it sits behind a
   horizontal scrollbar and most readers never reach the sector split or
   the function-wise pinnacle. Those are rendered as markup here, which
   also means the figures are selectable and readable to a screen reader
   rather than locked inside a picture.
   ████████████████████████████████████████████████████████████████████ */

.placementSubhead {
    margin: clamp(22px, 5vw, 30px) 0 12px;
    color: #fff;
    font-size: clamp(13px, 3.4vw, 15px);
    font-weight: 700 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
}

    .placementSubhead::after {
        content: "";
        display: block;
        width: 34px;
        height: 3px;
        margin-top: 8px;
        border-radius: 3px;
        background: var(--fore-gold);
    }

/* ---------- sector split ---------- */
.placementSectors {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.placementSector {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 10px;
}

/* the bar spans both columns, so auto-placement pushed the percentage
   onto a third row instead of keeping it beside the name */
.placementSector__name {
    grid-column: 1;
    grid-row: 1;
    color: #dce8f6 !important;
    font-size: clamp(11.5px, 3vw, 13px) !important;
    line-height: 1.35 !important;
}

.placementSector__pct {
    grid-column: 2;
    grid-row: 1;
    color: var(--fore-gold);
    font-size: clamp(13px, 3.6vw, 15px);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.placementSector__bar {
    grid-column: 1 / -1;
    grid-row: 2;
    display: block;
    height: 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}

    .placementSector__bar i {
        display: block;
        height: 100%;
        border-radius: 6px;
        background: linear-gradient(90deg, #2f8fd8, #6fc0f5);
    }

/* ---------- function-wise pinnacle ---------- */
.placementPinnacle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.placementPin {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
}

.placementPin__value {
    color: var(--fore-gold);
    font-size: clamp(16px, 4.6vw, 20px);
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

    .placementPin__value small {
        font-size: .55em;
        font-weight: 700;
        letter-spacing: .04em;
    }

.placementPin__name {
    color: #c3d6ea;
    font-size: clamp(10px, 2.8vw, 11.5px);
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.3;
    text-transform: uppercase;
}

/* very narrow phones: one pinnacle card per row rather than cramped pairs */
@media (max-width: 359px) {
    .placementPinnacle {
        grid-template-columns: 1fr;
    }
}


/* ████████████████████████████████████████████████████████████████████
   APPLICATION FEE — rebuilt to the supplied reference.

   A programme picker on the left, the fee structure on the right, and a
   summary strip beneath. The reference draws checkboxes, so they are
   live: ticking programmes recalculates the strip. With nothing ticked
   it shows the reference's own EXAMPLE.

   The table becomes a list of rows rather than a <table>, because each
   row carries a number, an icon, a title, a description and three
   figures -- a grid handles that, and it collapses cleanly on phones
   where a four-column table cannot.
   ████████████████████████████████████████████████████████████████████ */

.feePanel {
    --fee-gold: #f5b301;
    --fee-line: #e3ebf4;
}

.feePanel__head {
    margin-bottom: clamp(18px, 2vw, 28px);
    text-align: center;
}

    .feePanel__title {
        margin: 0 0 6px;
        color: var(--fore-navy);
        font-size: clamp(22px, 2.6vw, 34px);
        font-weight: 700 !important;
        letter-spacing: -.02em;
        line-height: 1.15;
    }

        .feePanel__title span {
            color: var(--fore-blue);
        }

    .feePanel__sub {
        margin: 0 !important;
        color: var(--fore-muted) !important;
        font-size: clamp(12.5px, 1.1vw, 15px) !important;
    }

        .feePanel__sub strong {
            color: var(--fore-navy);
            font-weight: 700;
        }

/* ---------- the two cards ---------- */
.feeGrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
    /* stretch, not start: the picker runs ~96px taller than the summary,
       and two cards of different heights sitting side by side is what
       made the row look unfinished */
    align-items: stretch;
    gap: clamp(14px, 1.6vw, 24px);
}

.feeCard {
    display: flex;
    flex-direction: column;
    padding: clamp(16px, 1.7vw, 24px);
    border: 1px solid var(--fee-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(16, 35, 63, .07);
}

.feeCard__head {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: clamp(14px, 1.5vw, 20px);
}

.feeCard__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--fore-blue-soft);
    color: var(--fore-blue);
}

    .feeCard--summary .feeCard__icon {
        background: var(--fore-gold-soft);
        color: var(--fore-gold-text);
    }

    .feeCard__icon svg {
        width: 23px;
        height: 23px;
    }

.feeCard__head h4 {
    margin: 0 0 3px;
    color: var(--fore-navy);
    font-size: clamp(15px, 1.4vw, 19px);
    font-weight: 700 !important;
    letter-spacing: -.01em;
}

.feeCard__head p {
    margin: 0 !important;
    color: var(--fore-muted) !important;
    font-size: clamp(11.5px, 1vw, 13px) !important;
    line-height: 1.45 !important;
}

/* ---------- programme groups ---------- */
.feeGroup {
    padding: clamp(12px, 1.3vw, 16px);
    border: 1px solid #dceaf6;
    border-radius: 14px;
    background: #f4f9fd;
}

    .feeGroup + .feeGroup {
        margin-top: 14px;
    }

    .feeGroup--addon {
        border-color: #f2e3bd;
        background: #fdf8ec;
    }

.feeGroup__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

    .feeGroup__head strong {
        display: block;
        color: var(--fore-navy);
        font-size: clamp(13px, 1.15vw, 15px);
        font-weight: 700;
    }

    .feeGroup__head small {
        display: block;
        margin-top: 2px;
        color: var(--fore-muted);
        font-size: clamp(10.5px, .95vw, 12px);
        line-height: 1.4;
    }

.feeGroup__badge {
    flex: none;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--fore-gold);
    color: var(--fore-navy);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- a programme row ---------- */
.feeOptions {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.feeOption {
    display: grid;
    grid-template-columns: 20px minmax(72px, auto) 34px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-height: 44px;
    padding: 10px 13px;
    border: 1px solid #dfe9f3;
    border-radius: 11px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .feeOption:hover {
        border-color: rgba(15, 126, 195, .5);
    }

    .feeOption:has(input:checked) {
        border-color: var(--fore-blue-cta);
        background: #f2f9ff;
        box-shadow: 0 0 0 1px var(--fore-blue-cta) inset;
    }

    .feeOption:has(input:focus-visible) {
        outline: 3px solid var(--fore-navy);
        outline-offset: 2px;
    }

    /* the native box is hidden but still focusable and announced */
    .feeOption input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

.feeOption__box {
    width: 19px;
    height: 19px;
    border: 2px solid #c2d3e4;
    border-radius: 5px;
    background: #fff;
    transition: border-color .2s ease, background .2s ease;
}

    .feeOption:has(input:checked) .feeOption__box {
        border-color: var(--fore-blue-cta);
        background: var(--fore-blue-cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6L19 7.4'/%3E%3C/svg%3E") center / 13px no-repeat;
    }

.feeOption__code {
    color: var(--fore-navy);
    font-size: clamp(12px, 1.05vw, 13.5px);
    font-weight: 700;
    white-space: nowrap;
}

.feeOption__icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--fore-blue-soft);
    color: var(--fore-blue);
}

    .feeGroup--addon .feeOption__icon {
        background: var(--fore-gold-soft);
        color: var(--fore-gold-text);
    }

    .feeOption__icon svg {
        width: 17px;
        height: 17px;
    }

.feeOption__name {
    color: var(--fore-muted);
    font-size: clamp(10.5px, .95vw, 12px);
    line-height: 1.35;
}

/* ---------- fee rows ---------- */
.feeTableHead {
    display: grid;
    grid-template-columns: 26px 38px minmax(0, 1fr) 78px 82px 112px;
    gap: 11px;
    padding: 0 14px 8px;
    color: var(--fore-muted);
    font-size: 11px;
    font-weight: 700;
}

    .feeTableHead span:nth-child(1) { grid-column: 4; text-align: right; }
    .feeTableHead span:nth-child(2) { grid-column: 5; text-align: right; }
    .feeTableHead span:nth-child(3) { grid-column: 6; text-align: right; }

.feeRows {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.feeRow {
    display: grid;
    grid-template-columns: 26px 38px minmax(0, 1fr) 78px 82px 112px;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid var(--fee-line);
    border-radius: 12px;
    background: #fff;
}

    .feeRow.is-featured {
        border-color: var(--fee-gold);
        background: #fffaef;
        box-shadow: 0 0 0 1px var(--fee-gold) inset;
    }

.feeRow__num {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--fore-blue-soft);
    color: var(--fore-blue-text);
    font-size: 12px;
    font-weight: 800;
}

    .feeRow.is-featured .feeRow__num {
        background: var(--fee-gold);
        color: var(--fore-navy);
    }

.feeRow__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--fore-blue);
}

    .feeRow.is-featured .feeRow__icon {
        color: var(--fore-gold-text);
    }

    .feeRow__icon svg {
        width: 22px;
        height: 22px;
    }

.feeRow__body {
    min-width: 0;
}

.feeRow__title {
    display: block;
    color: var(--fore-navy);
    font-size: clamp(12.5px, 1.1vw, 14.5px);
    font-weight: 700;
    line-height: 1.3;
}

.feeRow__badge {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--fee-gold);
    color: var(--fore-navy);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    vertical-align: 2px;
}

.feeRow__desc {
    display: block;
    margin-top: 2px;
    color: var(--fore-muted);
    font-size: clamp(10.5px, .95vw, 12px);
    line-height: 1.4;
}

.feeRow__fee,
.feeRow__gst,
.feeRow__pay {
    text-align: right;
    color: var(--fore-navy);
    font-size: clamp(11.5px, 1.05vw, 13.5px);
    font-variant-numeric: tabular-nums;
}

    /* the column labels repeat inside each row, hidden until the header
       row is dropped on narrow screens */
    .feeRow__fee i,
    .feeRow__gst i,
    .feeRow__pay i {
        display: none;
    }

.feeRow__pay b {
    display: block;
    padding: 8px 10px;
    border-radius: 9px;
    background: var(--fore-blue-soft);
    color: var(--fore-blue-text);
    font-size: clamp(12.5px, 1.15vw, 15px);
    font-weight: 800;
}

    .feeRow.is-featured .feeRow__pay b {
        background: var(--fee-gold);
        color: var(--fore-navy);
    }

/* ---------- the summary strip ---------- */
.feeExample {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.4vw, 22px);
    /* auto pushes the strip to the foot of the card, so the height the
       summary gains from stretching lands above it rather than as a gap
       between the strip and the last fee row */
    margin-top: auto;
    padding: clamp(14px, 1.5vw, 20px);
    border-radius: 14px;
    background: linear-gradient(110deg, #0b2450 0%, #123a6b 100%);
}

.feeExample__chip {
    flex: none;
    align-self: flex-start;
    padding: 5px 11px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.feeExample__body {
    flex: 1;
    min-width: 0;
}

    .feeExample__body strong {
        display: block;
        color: #fff;
        font-size: clamp(12.5px, 1.15vw, 15px);
        font-weight: 700;
        line-height: 1.35;
    }

    .feeExample__body small {
        display: block;
        margin-top: 4px;
        color: #b9cde6;
        font-size: clamp(11px, 1vw, 13px);
        font-variant-numeric: tabular-nums;
    }

.feeExample__total {
    flex: none;
    text-align: right;
}

    .feeExample__total small {
        display: block;
        color: #b9cde6;
        font-size: clamp(10px, .95vw, 12px);
    }

    .feeExample__total b {
        display: block;
        margin-top: 2px;
        color: var(--fee-gold);
        font-size: clamp(24px, 2.8vw, 38px);
        font-weight: 800;
        letter-spacing: -.02em;
        line-height: 1.05;
        font-variant-numeric: tabular-nums;
    }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
    .feeGrid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    /* the six-column row cannot hold; stack the figures and bring back
       the per-row labels the header was carrying */
    .feeTableHead {
        display: none;
    }

    .feeRow {
        grid-template-columns: 26px 34px minmax(0, 1fr);
        row-gap: 10px;
    }

        .feeRow__body { grid-column: 3; }

        .feeRow__fee,
        .feeRow__gst,
        .feeRow__pay {
            grid-column: span 1;
            text-align: left;
        }

        .feeRow__fee { grid-column: 1 / 2; }

        .feeRow__fee i,
        .feeRow__gst i,
        .feeRow__pay i {
            display: block;
            color: var(--fore-muted);
            font-size: 9.5px;
            font-style: normal;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .feeRow__pay b {
            display: inline-block;
            margin-top: 3px;
        }

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

        .feeOption__icon { display: none; }

        .feeOption__name {
            grid-column: 2;
        }

    .feeExample {
        flex-wrap: wrap;
    }

        .feeExample__total {
            flex: 1 1 100%;
            text-align: left;
        }
}

@media (prefers-reduced-motion: reduce) {
    .feeOption {
        transition: none;
    }
}


/* ████████████████████████████████████████████████████████████████████
   APPLY NOW BUTTONS + WHATSAPP FLASH

   Measured on the Apply buttons: they do not wrap at any width down to
   320px, so the label is safe -- but both sit at 42px tall on phones,
   under the 44px minimum for a touch target (WCAG 2.5.8), and the
   header CTA is the page's primary action. Both get the floor on coarse
   pointers, plus nowrap so a longer label can never break the pill.

   The WhatsApp button already carries a slow pulse ring on ::before.
   The flash is a separate double-blink glow on the button itself --
   box-shadow and brightness rather than another pseudo-element, so
   nothing has to be clipped and the ring keeps working.
   ████████████████████████████████████████████████████████████████████ */

.headerApplyCta,
.apply-button {
    white-space: nowrap;
}

@media (pointer: coarse) {
    /* `header.foreReferenceHeader .headerApplyCta` pins height AND
       min-height to 42px below 767px at (0,2,1), so a plain class rule
       cannot raise it. (0,3,0) clears that; `height: auto` is needed too,
       because a fixed height would otherwise win over the floor. */
    .headerApplyCta:is(.headerApplyCta):is(.headerApplyCta),
    .apply-button:is(.apply-button):is(.apply-button) {
        height: auto;
        min-height: 44px;
    }
}

/* ---------- the flash ---------- */
@keyframes whatsappFlash {
    0%, 66%, 100% {
        filter: brightness(1);
        box-shadow: 0 12px 30px rgba(5, 72, 37, .28);
    }

    73% {
        filter: brightness(1.3);
        box-shadow: 0 12px 30px rgba(5, 72, 37, .28),
                    0 0 0 5px rgba(37, 211, 102, .3),
                    0 0 24px 7px rgba(37, 211, 102, .5);
    }

    80% {
        filter: brightness(1);
        box-shadow: 0 12px 30px rgba(5, 72, 37, .28);
    }

    87% {
        filter: brightness(1.3);
        box-shadow: 0 12px 30px rgba(5, 72, 37, .28),
                    0 0 0 5px rgba(37, 211, 102, .3),
                    0 0 24px 7px rgba(37, 211, 102, .5);
    }
}

.whatsappFloat {
    animation: whatsappFlash 4.5s ease-in-out infinite;
}

    /* hover already lifts the button; let it settle rather than blink
       under the pointer */
    .whatsappFloat:hover,
    .whatsappFloat:focus-visible {
        animation-play-state: paused;
    }

@media (prefers-reduced-motion: reduce) {
    .whatsappFloat {
        animation: none;
    }
}


/* ---- programme dialog: restore centring ----
   A native <dialog> centres itself because the UA stylesheet gives it
   `margin: auto` against `inset: 0`. This sheet's `* { margin: 0 }`
   reset overrides that, so the box resolved hard against top-left --
   measured at 0,0 in a 1440x900 viewport. Putting the auto margin back
   is all that is needed; the max-height keeps it inside short windows
   rather than letting a long body run off-screen. */
.fore-programme-dialog {
    margin: auto;
    max-height: calc(100dvh - 40px);
    overflow: auto;
    overscroll-behavior: contain;
}


/* ---- Explore Placements: hold the label white on hover ----
   The declared hover rule only swaps the background to --fore-blue-deep
   and leaves the colour alone, so by this sheet's own cascade the label
   should stay white. It renders black in the browser, and the reason is
   not visible to a CSSOM scan: the ExtraaEdge widget stylesheets are
   cross-origin, so their rules apply but cannot be read (the same sheet
   already forces font-weight on bare h3 elsewhere on this page). A bare
   `a:hover { color: ... }` there would land on this button.

   Pinning the colour for every interactive state closes that off
   regardless of what a third-party sheet declares. White on #0b4a75 is
   9.2:1. */
.recruiters-section .placement-cta a:link,
.recruiters-section .placement-cta a:visited,
.recruiters-section .placement-cta a:hover,
.recruiters-section .placement-cta a:focus,
.recruiters-section .placement-cta a:focus-visible,
.recruiters-section .placement-cta a:active {
    color: #fff !important;
}

    .recruiters-section .placement-cta a:hover .arrow,
    .recruiters-section .placement-cta a:focus-visible .arrow,
    .recruiters-section .placement-cta a:active .arrow {
        color: #fff !important;
    }


/* ████████████████████████████████████████████████████████████████████
   BUTTON-STYLED LINKS — hold their own colour on hover.

   Measured on the Application Process CTA: the settled hover state was
   rgb(0,0,0) on rgb(16,35,63) with text-decoration: underline -- 1.33:1,
   effectively unreadable -- despite this sheet declaring `color: #fff`
   for that state. The same thing was reported on Explore Placements.

   The override is not visible to a CSSOM scan because the ExtraaEdge
   widget stylesheets are cross-origin: their rules apply but cannot be
   read (that sheet already forces font-weight on bare h3 elsewhere on
   this page). A bare `a:hover { color: ...; text-decoration: ... }`
   carrying !important there lands on every anchor styled as a button.

   There are exactly four such links on the page, so each is pinned
   across all interactive states. !important is warranted here: the rule
   being answered cannot be read or edited.

   Contrast at each hover state, white on the hover background:
     headerApplyCta / fore-why-cta / placement-cta  ->  8.6-9.3:1
     apply-button (navy)                            ->  15.7:1
   ████████████████████████████████████████████████████████████████████ */

.headerApplyCta:link,
.headerApplyCta:visited,
.headerApplyCta:hover,
.headerApplyCta:focus,
.headerApplyCta:focus-visible,
.headerApplyCta:active,
.fore-why-cta:link,
.fore-why-cta:visited,
.fore-why-cta:hover,
.fore-why-cta:focus,
.fore-why-cta:focus-visible,
.fore-why-cta:active,
.apply-cta .apply-button:link,
.apply-cta .apply-button:visited,
.apply-cta .apply-button:hover,
.apply-cta .apply-button:focus,
.apply-cta .apply-button:focus-visible,
.apply-cta .apply-button:active {
    text-decoration: none !important;
}

/* white-on-blue buttons */
.headerApplyCta:link,
.headerApplyCta:visited,
.headerApplyCta:hover,
.headerApplyCta:focus,
.headerApplyCta:focus-visible,
.headerApplyCta:active,
.fore-why-cta:link,
.fore-why-cta:visited,
.fore-why-cta:hover,
.fore-why-cta:focus,
.fore-why-cta:focus-visible,
.fore-why-cta:active {
    color: #fff !important;
}

/* the CTA-bar button: navy on gold at rest, white on navy on hover */
.apply-cta .apply-button:link,
.apply-cta .apply-button:visited {
    color: var(--fore-navy) !important;
}

.apply-cta .apply-button:hover,
.apply-cta .apply-button:focus,
.apply-cta .apply-button:focus-visible,
.apply-cta .apply-button:active {
    color: #fff !important;
}

/* arrows and glyphs inside follow the label rather than the link colour */
.headerApplyCta :is(i, span, svg),
.fore-why-cta :is(i, span, svg),
.apply-cta .apply-button :is(i, span, svg),
.recruiters-section .placement-cta a :is(i, span, svg) {
    color: inherit !important;
}

.recruiters-section .placement-cta a:link,
.recruiters-section .placement-cta a:visited,
.recruiters-section .placement-cta a:hover,
.recruiters-section .placement-cta a:focus,
.recruiters-section .placement-cta a:focus-visible,
.recruiters-section .placement-cta a:active {
    text-decoration: none !important;
}


/* ████████████████████████████████████████████████████████████████████
   WHY CHOOSE FORE (Key Highlights)  +  PROGRAMMES OFFERED
   Imported from the two supplied files.

   Layout, structure, copy and behaviour follow the sources: the 4-up
   card grid with its gold top line and icon tile, the compact stats
   strip, the campus blocks with the hairline heading, the tag / title /
   gold bar / two fact boxes card, and the closing note.

   Three things are deliberately NOT taken from the sources, for the
   same reason each time -- the rest of the page:

     * Typeface. The sources set Segoe UI; these use the page font.
     * Palette. The sources carry their own navy (#12385d) and a bronze
       gold (#b27a1d / #c18a25). Left as-is, these two sections would be
       the only ones on the page in a different navy and a different
       gold, so they are mapped onto the page tokens.
     * The section h2. Every section title on this page was standardised
       (centred, straight gold rule); these keep that treatment.

   One colour could not be mapped literally: the sources set the
   bracketed half of a programme title in gold on white. The page gold
   on white is 1.9:1, so that span takes the page's blue accent instead.

   Everything is scoped under .key-highlights / .programmes-panel. The
   sources' class names are generic, and two of them (.programme-details,
   .section-header) already carry 22 rules between them on this page; the
   first is renamed to .programme-facts and the second is not used.
   ████████████████████████████████████████████████████████████████████ */


/* =====================================================================
   WHY CHOOSE FORE
   ===================================================================== */

.key-highlights .highlights-container {
    width: 100%;
    max-width: var(--fore-measure);
    margin-inline: auto;
    padding-inline: var(--fore-gutter);
    font-family: "jiotyperegular", Arial, sans-serif;
}

/* ---------- the card grid ---------- */
.key-highlights .highlight-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.key-highlights .highlight-card {
    position: relative;
    overflow: hidden;
    min-height: 170px;
    margin: 0;
    padding: 18px 22px;
    border: 1px solid var(--fore-border);
    border-radius: 14px;
    background: #fff;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

    /* gold top line, drawn in on hover */
    .key-highlights .highlight-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--fore-gold);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .3s ease;
    }

    .key-highlights .highlight-card:hover {
        transform: translateY(-6px);
        border-color: #cfdbe7;
        box-shadow: 0 14px 30px rgba(16, 35, 63, .11);
    }

        .key-highlights .highlight-card:hover::before {
            transform: scaleX(1);
        }

.key-highlights .highlight-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin-bottom: 14px;
    border-radius: 13px;
    background: var(--fore-blue-soft);
    font-size: 18px;
    line-height: 1;
    transition: background .3s ease, transform .3s ease;
}

    .key-highlights .highlight-card:hover .highlight-icon {
        background: var(--fore-navy);
        transform: scale(1.06);
    }

.key-highlights .highlight-card h3 {
    margin: 0 0 7px;
    color: var(--fore-navy);
    font-size: 16px;
    font-weight: 700 !important;   /* a third-party sheet forces 600 on bare h3 */
    line-height: 1.3;
}

.key-highlights .highlight-card p {
    margin: 0;
    color: var(--fore-muted);
    font-size: 13px;
    line-height: 1.55;
}

/* ---------- compact statistics strip ---------- */
.key-highlights .stats-bar {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    margin: 25px 0 0;
    padding: 11px 20px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--fore-navy), #1a3a66);
    box-shadow: 0 8px 22px rgba(16, 35, 63, .14);
    list-style: none;
}

    /* gold accent on the leading edge */
    .key-highlights .stats-bar::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--fore-gold);
    }

.key-highlights .stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 38px;
    margin: 0;
    padding: 3px 18px;
    border-right: 1px solid rgba(255, 255, 255, .18);
    transition: transform .25s ease;
}

    .key-highlights .stat:last-child {
        border-right: 0;
    }

    .key-highlights .stat:hover {
        transform: translateY(-2px);
    }

    .key-highlights .stat strong {
        display: inline-block;
        color: var(--fore-gold);
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    .key-highlights .stat span {
        display: inline-block;
        color: rgba(255, 255, 255, .88);
        font-size: 10px;
        line-height: 1.2;
        letter-spacing: .6px;
        text-transform: uppercase;
        white-space: nowrap;
    }

/* ---------- footnote ---------- */
.key-highlights .application-note {
    margin: 20px 0 0;
    color: var(--fore-muted);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

    .key-highlights .application-note strong {
        color: var(--fore-navy);
    }

/* ---------- tablet ---------- */
@media (max-width: 1050px) {
    .key-highlights .highlight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .key-highlights .stats-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 6px;
    }

    .key-highlights .stat:nth-child(2) {
        border-right: 0;
    }

    .key-highlights .stat:nth-child(1),
    .key-highlights .stat:nth-child(2) {
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
    }

    .key-highlights .stat:nth-child(3),
    .key-highlights .stat:nth-child(4) {
        padding-top: 8px;
    }
}

/* ---------- mobile ---------- */
@media (max-width: 650px) {
    .key-highlights .highlight-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .key-highlights .highlight-card {
        min-height: 0;
        padding: 20px;
    }

    .key-highlights .stats-bar {
        grid-template-columns: 1fr;
        padding: 8px 15px;
    }

    .key-highlights .stat,
    .key-highlights .stat:nth-child(1),
    .key-highlights .stat:nth-child(2),
    .key-highlights .stat:nth-child(3),
    .key-highlights .stat:nth-child(4) {
        min-height: 34px;
        padding: 7px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
    }

        .key-highlights .stat:last-child {
            border-bottom: 0;
        }

    .key-highlights .stat strong {
        font-size: 17px;
    }
}


/* =====================================================================
   PROGRAMMES OFFERED
   ===================================================================== */

.programmes-panel {
    font-family: "jiotyperegular", Arial, sans-serif;
}

.programmes-panel .programmes-lede {
    max-width: 850px;
    margin: 0 auto 38px;
    color: var(--fore-muted);
    font-size: 16px;
    line-height: 1.7;
    text-align: center;
}

/* ---------- campus block ---------- */
.programmes-panel .campus-block {
    margin: 0 0 48px;
}

    .programmes-panel .campus-block.secondary {
        margin-top: 10px;
    }

.programmes-panel .campus-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 22px;
}

    /* the hairline that runs out to the right edge */
    .programmes-panel .campus-heading::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--fore-border);
    }

    .programmes-panel .campus-heading h3 {
        margin: 0;
        color: var(--fore-navy);
        font-size: 18px;
        font-weight: 700 !important;
        line-height: 1.3;
        white-space: nowrap;
    }

    .programmes-panel .campus-heading span {
        padding: 6px 11px;
        border: 1px solid #ecd9a6;
        border-radius: 20px;
        background: var(--fore-gold-soft);
        color: var(--fore-gold-text);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        white-space: nowrap;
    }

/* ---------- grid ---------- */
.programmes-panel .programme-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

/* ---------- card ---------- */
.programmes-panel .programme-card {
    position: relative;
    overflow: hidden;
    padding: 0 25px 15px;
    border: 1px solid var(--fore-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(16, 35, 63, .06);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

    .programmes-panel .programme-card:hover {
        transform: translateY(-7px);
        border-color: var(--fore-gold);
        box-shadow: 0 15px 35px rgba(16, 35, 63, .13);
    }

    /* top gold strip */
    .programmes-panel .programme-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(90deg, #d99a00, var(--fore-gold), #d99a00);
    }

.programmes-panel .programme-tag {
    display: inline-block;
    margin: 24px 0 12px;
    padding: 5px 11px;
    border-radius: 4px;
    background: var(--fore-navy);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.programmes-panel .programme-card h4 {
    min-height: 55px;
    margin: 0 0 20px;
    color: var(--fore-navy);
    font-size: 20px;
    font-weight: 700 !important;
    line-height: 1.35;
}

    /* gold on white would be 1.9:1; the page's blue accent is used */
    .programmes-panel .programme-card h4 span {
        color: var(--fore-blue-text);
    }

.programmes-panel .card-line {
    width: 42px;
    height: 3px;
    margin-bottom: 20px;
    border-radius: 4px;
    background: var(--fore-gold);
}

/* ---------- the two fact boxes ---------- */
.programmes-panel .programme-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.programmes-panel .detail-box {
    padding: 10px;
    border: 1px solid #e3ebf4;
    border-radius: 8px;
    background: var(--fore-cream);
}

.programmes-panel .detail-label {
    display: block;
    margin-bottom: 5px;
    color: var(--fore-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.programmes-panel .detail-value {
    color: var(--fore-navy);
    font-size: 12px;
    font-weight: 700;
}

/* ---------- closing note ---------- */
.programmes-panel .programme-note {
    margin: 12px 0 0;
    padding: 15px 20px;
    border-radius: 9px;
    background: var(--fore-navy);
    color: #fff;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

    .programmes-panel .programme-note strong {
        color: var(--fore-gold);
    }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
    .programmes-panel .programme-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .programmes-panel .programmes-lede {
        margin-bottom: 28px;
        font-size: 14px;
    }

    .programmes-panel .programme-grid {
        grid-template-columns: 1fr;
    }

    .programmes-panel .campus-heading {
        flex-wrap: wrap;
    }

        .programmes-panel .campus-heading::after {
            display: none;
        }

    .programmes-panel .programme-card h4 {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .key-highlights .highlight-card,
    .key-highlights .highlight-card::before,
    .key-highlights .highlight-icon,
    .key-highlights .stat,
    .programmes-panel .programme-card {
        transition: none;
    }

        .key-highlights .highlight-card:hover,
        .key-highlights .stat:hover,
        .programmes-panel .programme-card:hover {
            transform: none;
        }

        .key-highlights .highlight-card:hover .highlight-icon {
            transform: none;
        }
}


/* ---- Campus Life: four across, shallower frame ----
   Four slides are visible from 1200px (set in custom.js), which alone
   takes the cards from 446x344 to about 330 wide. The frame also goes
   from 4:3 to 3:2, so the row is ~220px tall instead of 344 and the
   section loses roughly 120px of height. */
.campusSlider .campusCard__media {
    aspect-ratio: 3 / 2;
}

.campusSlider .campusCard__caption {
    padding: 13px 15px;
}


/* ---- Selection Process: reference panel ----
   Same five-step flow, restyled to the supplied design: a soft blue
   panel, every disc navy with a gold icon (the gold final disc is gone,
   so all five steps read as one sequence), and the larger type scale.
   Sizes are the reference's at ~1920 and scale down with the viewport. */
.fore-elig-process {
    padding: clamp(20px, 1.9vw, 36px);
    border-color: #d8e5ef;
    border-radius: 20px;
    background: #e8f4fb;
}

    .fore-elig-process > h3 {
        margin: 0 0 clamp(5px, .42vw, 8px);
        color: var(--fore-navy);
        font-size: clamp(20px, 1.42vw, 27px);
        line-height: 1.2;
    }

.fore-elig-process-sub {
    margin: 0 0 clamp(24px, 2.15vw, 41px);
    color: #5a6573;
    font-size: clamp(13px, .84vw, 16px);
    line-height: 1.4;
}

.fore-elig-steps {
    --disc: clamp(50px, 4.3vw, 82px);
}

.fore-elig-step-icon {
    margin-bottom: clamp(16px, 1.42vw, 27px);
    background: #123a6b;
    color: #f5b301;
}

.fore-elig-step h4 {
    margin: 0 0 clamp(6px, .47vw, 9px);
    font-size: clamp(13.5px, .9vw, 17.25px);
}

.fore-elig-step p {
    font-size: clamp(12.5px, .8vw, 15.3px);
    line-height: 1.57;
}

.fore-elig-arrow {
    padding-inline: clamp(4px, .4vw, 7px);
}

.fore-elig-arrow-line {
    height: 3px;
    /* reference: 9px dash, 7px gap */
    background-image: repeating-linear-gradient(90deg,
        var(--elig-dash) 0 9px, transparent 9px 16px);
}

@media (max-width: 720px) {
    .fore-elig-steps {
        --disc: 56px;
    }
}

@media (max-width: 460px) {
    /* One step per row: disc on the left, title over description on the
       right. As a flex row the three children became three columns, so
       the title and its description sat side by side. */
    .fore-elig-step {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 0 14px;   /* the older rule's 14px gap would also open up the rows */
        align-items: start;
        padding-inline: 0;
        text-align: left;
    }

    .fore-elig-step-icon {
        grid-row: 1 / span 2;
        margin-bottom: 0;
    }

    .fore-elig-step h4 {
        margin: 3px 0 3px;
        font-size: 15px;
    }

    .fore-elig-step p {
        font-size: 13.5px;
    }
}


/* ████████████████████████████████████████████████████████████████████
   DOWNLOAD BROCHURE

   Secondary action beside Apply Now: outlined, so the filled Apply Now
   stays the one primary button in the row. It opens the enquiry
   widget's brochure popup (see the script in the page).

   Colours are pinned across link states for the same reason as the
   other button-styled links: the widget's stylesheet carries an
   a:hover rule that cannot be read or edited from here.
   Contrast: #0b5f94 on #fff 6.9:1, on the #e8f4fb hover fill 6.1:1.
   ████████████████████████████████████████████████████████████████████ */

.headerBrochureCta {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 9px;
    min-height: 50px;
    padding: 0 22px;
    border: 1.5px solid var(--fore-blue);
    border-radius: 999px;
    background: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

    .headerBrochureCta i {
        font-size: 16px;
        line-height: 1;
    }

.headerBrochureCta:link,
.headerBrochureCta:visited,
.headerBrochureCta:hover,
.headerBrochureCta:focus,
.headerBrochureCta:focus-visible,
.headerBrochureCta:active,
.offcanvasBrochure:link,
.offcanvasBrochure:visited,
.offcanvasBrochure:hover,
.offcanvasBrochure:focus,
.offcanvasBrochure:focus-visible,
.offcanvasBrochure:active {
    color: var(--fore-blue-text) !important;
    text-decoration: none !important;
}

.headerBrochureCta :is(i, span),
.offcanvasBrochure i {
    color: inherit !important;
}

.headerBrochureCta:hover,
.headerBrochureCta:focus-visible {
    border-color: var(--fore-blue-text);
    background: var(--fore-blue-soft);
    box-shadow: 0 6px 16px rgba(15, 126, 195, .16);
}

.headerBrochureCta:focus-visible,
.offcanvasBrochure:focus-visible {
    outline: 3px solid var(--fore-navy);
    outline-offset: 2px;
}

@media (min-width: 1251px) and (max-width: 1650px) {
    .headerBrochureCta {
        padding: 0 16px;
        font-size: 15px;
    }
}

/* Between 1251px and 1350px the button ran into the last nav link
   (measured at 1280px: 38px of overlap), the same squeeze the batch
   pill had. Two causes, both answered here:

   1. the template's responsive.css gives .top-left `width: 22%` below
      1350px -- a 269px box around a 130px logo -- so the nav had 621px
      for 655px of links and spilled out of both ends. The logo box
      goes back to the logo's own width.
   2. the label shortens to "Brochure" (the download icon stays), which
      keeps a clear gap down to the 1251px edge of this range. The link
      keeps its full name through aria-label. */
@media (min-width: 1251px) and (max-width: 1350px) {
    header.foreReferenceHeader .top-left {
        width: auto;
    }

    .headerBrochureCta__long {
        display: none;
    }
}

/* On phones the row only has room for the logo, Apply Now and the menu
   button, so the brochure action lives in the menu there. */
@media (max-width: 1250px) {
    .headerBrochureCta {
        min-height: 44px;
        padding: 0 16px;
        font-size: 15px;
    }
}

/* Phones: the button stays in the header as a compact "Brochure" pill.
   The row is logo + Brochure + Apply Now + menu, so the gaps and the two
   buttons' padding tighten to make room; the full "Download Brochure"
   name stays on the link through aria-label and in the menu. */
@media (max-width: 640px) {
    header.foreReferenceHeader .top-flex {
        gap: 10px;
    }

    header.foreReferenceHeader .top-right {
        gap: 6px;
    }

    .headerBrochureCta {
        gap: 5px;
        padding: 0 10px;
        font-size: 13px;
    }

        .headerBrochureCta i {
            font-size: 14px;
        }

    .headerBrochureCta__long {
        display: none;
    }

    header.foreReferenceHeader .headerApplyCta {
        gap: 6px;
        padding: 0 11px;
    }
}

/* The row above needs exactly 390px. Narrower phones give something up
   in order of least loss, so the Brochure button itself stays visible:
   its icon first, then a slightly smaller logo, then Apply Now's icon.
   Only below 335px (very small, older phones) does the button move back
   into the menu. */
@media (max-width: 389px) {
    .headerBrochureCta i {
        display: none;
    }
}

@media (max-width: 374px) {
    header.foreReferenceHeader .fore-logo {
        width: 76px;
        height: 52px;
    }
}

@media (max-width: 359px) {
    /* the icon's own rule comes later in this file at the same weight,
       so this one names the header to outrank it */
    header.foreReferenceHeader .headerApplyCta i.headerApplyCta__icon {
        display: none;
    }
}

@media (max-width: 334px) {
    .headerBrochureCta {
        display: none;
    }
}

.offcanvasBrochure {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1.5px solid var(--fore-blue);
    border-radius: 13px;
    background: #fff;
    font-size: 16px;
    font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
    .headerBrochureCta {
        transition: none;
    }
}


/* ---------- the brochure popup (#ee-form-5) ----------
   The widget's own stylesheet is tuned for the enquiry form on the dark
   hero panel, so in a white popup its heading and its consent text came
   out white on white, and Bootstrap's default modal layer (1060) put the
   top of the popup, close button included, behind the sticky header
   (99999). Everything here is scoped to #ee-form-5, so the hero form is
   untouched. */
/* Only the popup's own backdrop, which Bootstrap appends to <body>. The
   mobile menu reuses the .modal-backdrop class for its backdrop inside
   the header; lifting that one too would lay it over the open menu. */
body > .modal-backdrop {
    z-index: 100000;
}

#ee-form-5-modal-swapper.modal {
    z-index: 100010;
    inset: 0;
    height: auto;
    padding: 16px !important;
    overflow-y: auto;
}

#ee-form-5 .modal-dialog {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 460px;
    min-height: 100%;
    margin: 0 auto;
}

#ee-form-5 .modal-content {
    width: 100%;
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(16, 35, 63, .28);
}

/* header */
#ee-form-5 .modal-header {
    position: relative;
    display: block;
    padding: 26px 56px 6px;
    border: 0;
}

#ee-form-5 .ee-form-heading,
#ee-form-5 .ee-form-heading center,
#ee-form-5 .ee-form-heading p {
    margin: 0;
    color: var(--fore-navy) !important;
    font-size: 22px;
    font-weight: 700 !important;
    line-height: 1.25;
    text-align: center;
}

    #ee-form-5 .ee-form-heading::after {
        content: "";
        display: block;
        width: 54px;
        height: 4px;
        margin: 12px auto 0;
        border-radius: 2px;
        background: var(--fore-gold);
    }

#ee-form-5 .ee-form-instruction:empty {
    display: none;
}

#ee-form-5 .modal-header .close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0 !important;   /* the widget pulls it 16px past the edge */
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--surface-b, #eef3f9);
    color: var(--fore-navy);
    font-size: 26px;
    line-height: 1;
    opacity: 1;
    cursor: pointer;
    transition: background-color .18s ease;
}

    #ee-form-5 .modal-header .close:hover {
        background: var(--fore-border);
    }

    #ee-form-5 .modal-header .close:focus-visible {
        outline: 3px solid var(--fore-navy);
        outline-offset: 2px;
    }

/* fields */
#ee-form-5 .ee-form-body {
    padding: 14px 24px 0;
}

#ee-form-5 .ee-form-body .ee-row {
    height: auto;
    margin: 0 0 12px;
    padding: 0;
}

#ee-form-5 .ee-form-body .col-75 {
    width: 100%;
    margin: 0;
    padding: 0;
}

#ee-form-5 .ee-form-body input:not([type="checkbox"]) {
    width: 100%;
    height: 46px;
    border: 1px solid #c3d2e0;
    border-radius: 9px;
    background: #fff;
    color: var(--fore-navy);
    font-size: 16px;   /* below 16px iOS zooms the page on focus */
}

#ee-form-5 .ee-form-body .col-75 > input:not([type="checkbox"]) {
    padding: 0 14px;
}

#ee-form-5 .ee-form-body .iti {
    display: block;
    width: 100%;
}

#ee-form-5 .ee-form-body .select2-container {
    width: 100% !important;
}

#ee-form-5 .ee-form-body .select2-selection--single {
    height: 46px;
    border: 1px solid #c3d2e0;
    border-radius: 9px;
}

    #ee-form-5 .ee-form-body .select2-selection--single .select2-selection__rendered {
        padding: 0 34px 0 14px;
        color: var(--fore-navy);
        font-size: 16px;
        line-height: 44px;
    }

    #ee-form-5 .ee-form-body .select2-selection--single .select2-selection__arrow {
        top: 0;
        right: 6px;
        height: 44px;
    }

#ee-form-5 .ee-form-body input:not([type="checkbox"]):focus,
#ee-form-5 .ee-form-body .select2-container--focus .select2-selection--single,
#ee-form-5 .ee-form-body .select2-container--open .select2-selection--single {
    border-color: var(--fore-blue);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(15, 126, 195, .22);
}

/* consent */
#ee-form-5 .check-box-field label {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 0;
    text-align: left !important;   /* the widget justifies it, leaving rivers */
    color: var(--fore-muted) !important;
    font-size: 13px;
    line-height: 1.45;
    text-transform: none;
    cursor: pointer;
}

    #ee-form-5 .check-box-field label input[type="checkbox"] {
        flex: none;
        width: 18px;
        height: 18px;
        margin: 1px 0 0 !important;   /* the widget sets margin-bottom inline */
        accent-color: var(--fore-blue);
    }

    #ee-form-5 .check-box-field label span {
        color: inherit !important;
    }

/* submit */
#ee-form-5 .ee-form-footer {
    display: block;
    height: auto;
    margin: 0;
    padding: 8px 24px 26px;
}

#ee-form-5 .ee-form-footer .btn-submit {
    width: 100%;
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    /* gold with navy text, like the hero form's buttons: 9.6:1 */
    background: var(--fore-gold) !important;
    color: var(--fore-navy) !important;
    font-size: 16px !important;
    font-weight: 700;
    transition: background-color .18s ease, color .18s ease;
}

    #ee-form-5 .ee-form-footer .btn-submit:hover,
    #ee-form-5 .ee-form-footer .btn-submit:focus-visible {
        background: var(--fore-navy) !important;
        color: #fff !important;
    }

    #ee-form-5 .ee-form-footer .btn-submit:focus-visible {
        outline: 3px solid var(--fore-navy);
        outline-offset: 2px;
    }

/* The widget's state/city lists and the country picker are attached to
   <body>, outside the popup, at Bootstrap-era layers -- lift them above
   the popup while it is open or they open behind it. */
body.modal-open > .select2-container--open,
body.modal-open > .iti--container {
    z-index: 100020;
}

@media (prefers-reduced-motion: reduce) {
    #ee-form-5 .modal-header .close,
    #ee-form-5 .ee-form-footer .btn-submit {
        transition: none;
    }
}


/* ---- Header menu: bold links ---- */
header.foreReferenceHeader.sticky .navbar-dark .navbar-nav .nav-link {
    font-weight: 700;
}


/* ---- Programmes Offered: no empty band under the programme name ----
   The title reserved two lines (min-height: 55px) and then added 20px,
   so a one-line name sat 48px above its gold rule. The reserve is gone
   and the rule follows the name directly.

   The reserve existed to keep the rules and fact boxes level across a
   row when one name wraps (narrower screens). The card is a column now
   and the rule takes the spare space above it instead, so a row still
   lines up -- only a card whose neighbour wrapped gets extra room. */
.programmes-panel .programme-card {
    display: flex;
    flex-direction: column;
}

.programmes-panel .programme-tag {
    align-self: flex-start;
}

.programmes-panel .programme-card h4 {
    min-height: 0;
    margin-bottom: 12px;
}

.programmes-panel .card-line {
    flex: none;
    margin-top: auto;
}


/* ---- Header Apply Now: notes icon in place of the arrow ----
   Yellow as supplied (#ffd000). The button's other glyphs are told to
   inherit the label colour with !important, so this needs the extra
   class to keep its own. It carries the same sideways nudge the arrow
   had (foreArrowNudge), speeding up on hover like the arrow did. */
.headerApplyCta i.headerApplyCta__icon {
    flex: none;
    display: block;   /* transforms do nothing on an inline box */
    color: #ffd000 !important;
    font-size: 18px;
    line-height: 1;
    animation: foreArrowNudge 1.35s ease-in-out infinite;
    will-change: transform;
}

.headerApplyCta:hover i.headerApplyCta__icon,
.headerApplyCta:focus-visible i.headerApplyCta__icon {
    animation-duration: .62s;
}

@media (prefers-reduced-motion: reduce) {
    .headerApplyCta i.headerApplyCta__icon {
        animation: none;
    }
}


/* ---- top strip: landlines + mobile ----
   One phone icon covers both landline numbers, each of which is its own
   tel: link. The links inside the group go back to inline: the strip's
   links are flex (icon + label), which would stack two numbers that are
   meant to read as one line. */
.admissionsStrip__phones {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    white-space: nowrap;
}

    .admissionsStrip__phones a {
        display: inline;
    }

    .admissionsStrip__phones i {
        display: block;
        line-height: 1;
    }

/* Phones: the second landline pushed the row 5px past a 390px screen.
   It and the separator dot step aside there; the first landline, the
   mobile number and the Caution Notice stay. Inline padding on the
   landline link grows its tap area to 44px without moving anything. */
@media (max-width: 767px) {
    .admissionsStrip__phoneExtra,
    .admissionsStrip__contacts > span[aria-hidden] {
        display: none;
    }

    .admissionsStrip__phones a {
        padding: 14px 0;
    }
}


/* ████████████████████████████████████████████████████████████████████
   PAGE AUDIT, 2026-10-06 — spacing, type and theme brought to one rule

   Measured at 1440px before this block:
     section top space     37 / 43 / 48 / 49 / 51 / 63 / 73 / 80 px
     section bottom space  26 / 36 / 56 / 65 / 66 / 72 / 76 / 79 / 80 / 84 px
     text below 12px       18 kinds, down to 8.5px
     panel headings        21 / 20.4 / 17 px inside one section
     heading colours       #10233f, plus #1e293b and #172033 strays
   ████████████████████████████████████████████████████████████████████ */

/* ---------- 1. one space above and below every section ---------- */
:root {
    --fore-section-space: clamp(36px, 3.9vw, 60px);
    --fore-section-space-mobile: 36px;
}

#why-fore,
#accreditation,
#application,
#eligibility,
#academics,
#international-outreach,
#placement,
#rec,
#alumni,
#global,
#campuslife {
    margin-block: 0 !important;
    padding-top: var(--fore-section-space) !important;
    padding-bottom: var(--fore-section-space) !important;
}

/* Three sections end on an element that carries its own empty space
   underneath (8px under the logo rows, 16px under the trust strip), so
   their padding gives that back and the visible gap matches the rest. */
#accreditation,
#international-outreach {
    padding-bottom: calc(var(--fore-section-space) - 8px) !important;
}

#application {
    padding-bottom: calc(var(--fore-section-space) - 16px) !important;
}

/* An earlier rule trimmed this one to 26px at a higher weight
   (.internshipSection#placement); matched here so the dark panel
   closes with the same space as every other section. */
.internshipSection#placement {
    padding-bottom: var(--fore-section-space) !important;
}

/* ---------- 2. section titles: one weight, one navy ---------- */
#campuses-title.campusesTitle {
    font-weight: 700 !important;   /* was 600; every other title is 700 */
}

#accreditation-title,
#outreach-title,
#recruiters-title {
    color: var(--fore-navy) !important;   /* were #1e293b / #172033 */
}

/* 60%-alpha slate on white measured 4.1:1; the page's muted grey is 5.9:1 */
.accreditationStrip .accreditationSubhead {
    color: var(--fore-muted);
}

/* ---------- 3. the three panel headings in Eligibility ---------- */
.fore-elig-criteria > h3,
.fore-elig-process > h3,
.fore-elig-centres-head h3 {
    font-size: clamp(20px, 1.42vw, 27px);
    line-height: 1.2;
}

/* ---------- 4. intro paragraphs under a heading: 16px ---------- */
.mba-apply-section .section-heading > p,
#global .campusesLede {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* ---------- 5. no text below the floor ----------
   Sentence text: 12px minimum. Capitalised, letter-spaced micro-labels:
   11px, where the capitals keep them as readable as 13px lower-case. */
.key-highlights .stats-bar .stat span,
#application .date-label,
.programmes-panel .programme-tag,
.programmes-panel .detail-label,
.feePanel .feeGroup__badge,
.feePanel .feeRow__badge,
.feePanel .feeExample__chip,
.placementPin__value small,
.cautionModal .byOrder span {
    font-size: 11px;
}

/* both are pinned by older !important rules, hence the flag */
#application .date-content p {
    font-size: 12.5px !important;
}

#application .horizontal-step .step-info p {
    font-size: 13px !important;
}

.feePanel .feeTableHead span,
.offcanvasCall small {
    font-size: 12px;
}

/* Fee table: these four scale with the viewport and bottomed out at
   10-10.5px on phones (9.5px for the per-row column labels), and the
   notice label in the caution popup sat at 10px. */
.feePanel .feeGroup__head small,
.feePanel .feeOption__name,
.feePanel .feeRow__desc,
.feePanel .feeExample__total small {
    font-size: 12px;
}

.feePanel .feeRow__fee i,
.feePanel .feeRow__gst i,
.feePanel .feeRow__pay i {
    font-size: 11px !important;
}

.cautionModal .cautionModal__label {
    font-size: 14px !important;
}


/* ████████████████████████████████████████████████████████████████████
   WHY FORE — stats bar motion

   Four things, each small:
     1. the four stats rise in one after another when the bar scrolls
        into view, and the gold edge draws down
     2. "1981" and "4" count up to their value (script in the page)
     3. each value gives one short pop as it lands
     4. a soft band of light crosses the bar every six seconds

   The hidden starting state hangs off .stats-ready, a class the script
   adds. No script, or a reduced-motion preference, means that class is
   never added and the bar simply shows as it always did.

   The entrance uses `animation-fill-mode: backwards`, not `both`: a
   finished animation that keeps its end state would hold `transform`
   and switch off the hover lift for good.
   ████████████████████████████████████████████████████████████████████ */

.key-highlights .stat {
    position: relative;
    z-index: 1;              /* text stays above the light band */
}

    .key-highlights .stat strong {
        font-variant-numeric: tabular-nums;   /* digits hold their width while counting */
        transition: transform .25s ease, text-shadow .25s ease;
    }

    .key-highlights .stat span {
        transition: color .25s ease;
    }

    .key-highlights .stat:hover strong {
        transform: scale(1.1);
        text-shadow: 0 0 14px rgba(245, 179, 1, .45);
    }

    .key-highlights .stat:hover span {
        color: #fff;
    }

/* 1. entrance */
.key-highlights .stats-bar.stats-ready:not(.is-in) .stat {
    opacity: 0;
    transform: translateY(14px);
}

.key-highlights .stats-bar.stats-ready:not(.is-in)::before {
    transform: scaleY(0);
}

.key-highlights .stats-bar::before {
    transform-origin: top;
}

.key-highlights .stats-bar.is-in::before {
    animation: foreStatsEdge .7s cubic-bezier(.22, 1, .36, 1) backwards;
}

.key-highlights .stats-bar.is-in .stat {
    animation: foreStatIn .65s cubic-bezier(.22, 1, .36, 1) backwards;
}

    .key-highlights .stats-bar.is-in .stat:nth-child(2) { animation-delay: .12s; }
    .key-highlights .stats-bar.is-in .stat:nth-child(3) { animation-delay: .24s; }
    .key-highlights .stats-bar.is-in .stat:nth-child(4) { animation-delay: .36s; }

@keyframes foreStatIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes foreStatsEdge {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}

/* 3. the value lands */
.key-highlights .stat strong.is-landed {
    animation: foreStatPop .5s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes foreStatPop {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.22);
        text-shadow: 0 0 18px rgba(245, 179, 1, .6);
    }

    100% {
        transform: scale(1);
    }
}

/* 4. light band */
.key-highlights .stats-bar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 34%;
    background: linear-gradient(100deg,
        transparent 0%,
        rgba(255, 255, 255, .09) 42%,
        rgba(245, 179, 1, .13) 56%,
        transparent 100%);
    transform: translateX(-130%) skewX(-18deg);
    pointer-events: none;
    animation: foreStatsSheen 6s ease-in-out 1.6s infinite;
}

@keyframes foreStatsSheen {
    0% {
        transform: translateX(-130%) skewX(-18deg);
    }

    34%, 100% {
        transform: translateX(330%) skewX(-18deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .key-highlights .stats-bar::after,
    .key-highlights .stats-bar.is-in::before,
    .key-highlights .stats-bar.is-in .stat,
    .key-highlights .stat strong.is-landed {
        animation: none;
    }

    .key-highlights .stats-bar::after {
        display: none;
    }

    .key-highlights .stat strong,
    .key-highlights .stat span {
        transition: none;
    }

    .key-highlights .stat:hover strong {
        transform: none;
    }
}


/* ████████████████████████████████████████████████████████████████████
   CAMPUS LIFE — light band

   The navy panel sat directly on the navy footer, so the page closed on
   one long dark block and the photos lost against it. The section now
   takes the page's tinted-light surface (the one Why FORE, Programmes
   and Alumni use), which also keeps the white / tint alternation going
   after the white "One Institute. Two Campuses." above it.

   Captions stay white: they sit on the photo's own dark gradient foot,
   not on the section background.
   ████████████████████████████████████████████████████████████████████ */
.campuslifeSection {
    border-top: 1px solid var(--surface-edge, #e3ebf4);
    background: linear-gradient(180deg, #59cdff70 0%, var(--surface-b, #eef3f9) 55%) !important;
}

    /* title: blue lead + navy, as on every other light section
       (gold text on this surface would be 1.7:1) */
    .campuslifeSection .foreSectionTitle {
        color: var(--fore-navy) !important;
    }

/* cards: white frame instead of the glass-on-navy one */
.campusSlider .campusCard {
    border-color: var(--fore-border);
    background: #fff;
    box-shadow: 0 8px 26px rgba(16, 35, 63, .09);
}

    .campusSlider .campusCard:hover {
        border-color: var(--fore-gold);
        box-shadow: 0 16px 38px rgba(16, 35, 63, .16);
    }

/* arrows: white discs, the arrow drawn dark as the SVG ships */
.campuslifeSection .careerCarouselNav .owl-prev,
.campuslifeSection .careerCarouselNav .owl-next {
    border-color: var(--fore-border);
    background: #fff;
    backdrop-filter: none;
    box-shadow: 0 6px 18px rgba(16, 35, 63, .14);
}

    .campuslifeSection .careerCarouselNav img {
        filter: none;
    }

/* dots: 50% navy is 3.1:1 on this surface, the blue pill 3.9:1 */
.campuslifeSection .owl-dots .owl-dot span {
    background: rgba(16, 35, 63, .5);
}

.campuslifeSection .owl-dots .owl-dot.active span {
    background: var(--fore-blue);
}

.campuslifeSection .owl-dots .owl-dot:focus-visible {
    outline-color: var(--fore-navy);
}

/* The caption is pinned to the card, not the photo, so with the card's
   14/14/16px frame its text ran along the photo's very bottom edge --
   harmless on the navy frame, but white-on-white here. Inset by the
   frame so it sits inside the photo, on the dark gradient foot. */
.campusSlider .campusCard__caption {
    left: 14px;
    right: 14px;
    bottom: 16px;
}


/* ████████████████████████████████████████████████████████████████████
   PLACEMENT HIGHLIGHTS — the infographic on phones

   Below 768px the wide infographic was replaced by a text version
   (stat cards, sector bars, a function list). The artwork itself now
   shows there instead, as three panel images cut from the same file:
   CTC summary, sector-wise offers, placement pinnacle. The text version
   stays in the markup but is switched off, so it can be brought back by
   removing the first rule below.
   ████████████████████████████████████████████████████████████████████ */
.placementPanelsMobile {
    display: none;
}

@media (max-width: 767px) {
    .internshipSection .placementStatsMobile {
        display: none;
    }

    .internshipSection .placementPanelsMobile {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
    }

        .internshipSection .placementPanelsMobile img {
            display: block;
            width: 100%;
            height: auto;
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 14px;
            box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
        }

        /* the CTC panel is a narrow column in the artwork; at full width
           its numbers would be far larger than the other two panels' */
        .internshipSection .placementPanelsMobile img:first-child {
            width: 70%;
            justify-self: center;
        }
}


/* ████████████████████████████████████████████████████████████████████
   HERO: Admissions Open 2027 banners (2026-10-08)

   The three banners are 16:9 artwork with type and photos out to every
   edge, so the hero now takes the artwork's shape instead of the
   window's. Before, .banner was min-height: 100vh and the artwork was
   fitted inside it, which left a tall empty navy band under a banner
   that ends in yellow shapes and photographs -- it read as a gap.

     above 1200px   the enquiry panel floats over the hero's right edge
                    (360px + 36px offset), so the artwork gets the width
                    left of it and the hero is that width x 9/16. 520px is
                    the floor: the panel itself needs that much.
     768-1200px     the panel drops below the banner; the artwork is full
                    width and the hero is exactly 16:9.
     below 768px    the same 16:9, plus the 60px strip the arrows and dots
                    already had. There is no portrait version of these
                    banners, so a phone shows the whole landscape banner
                    small rather than a cropped one.

   (0,3,0) on .banner because `body .banner { min-height: 100vh
   !important }` earlier in this file outranks a plain .banner rule.
   The bands, where any show, take the artwork's own blue (#0a6193 since
   the 2026-10-12 recolour; it was navy #1b2f4f).
   ████████████████████████████████████████████████████████████████████ */
.banner:is(.banner):is(.banner) {
    height: max(520px, calc((100vw - 404px) * 9 / 16)) !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    background: #0a6193 !important;
}

.admissionHeroCarousel,
.admissionHeroSlide--art {
    background: #0a6193;
}

@media (max-width: 1200px) {
    .banner:is(.banner):is(.banner) {
        height: calc(100vw * 9 / 16) !important;
    }
}

@media (max-width: 767px) {
    .banner:is(.banner):is(.banner) {
        height: calc(100vw * 9 / 16 + 60px) !important;
    }

    .admissionHeroSlide--art img {
        object-fit: contain !important;
        object-position: center !important;
    }
}

/* Arrows and dots. They used to sit bottom-left, which on these banners
   is the programme pills and the APPLY NOW line. All three banners end
   in a plain navy wedge at the bottom-right corner, so the controls go
   there: against the artwork's right edge, which above 1200px is 404px
   in from the hero's edge (the enquiry panel's column). On phones they
   keep their own strip under the banner. */
.banner .admissionHeroControls {
    left: auto;
    right: 420px;
    bottom: 18px;
    transform: none;
}

@media (max-width: 1200px) {
    .banner .admissionHeroControls {
        right: 16px;
        bottom: 14px;
    }
}

@media (max-width: 767px) {
    .banner .admissionHeroControls {
        right: 50%;
        bottom: 9px;
        transform: translateX(50%);
    }
}

/* ---- phones: three things the new banners and cards exposed ---- */
@media (max-width: 767px) {
    /* The fixed header is 166px tall on phones but the banner started at
       145px, so the header covered the banner's top 21px. That was a strip
       of plain navy on the old portrait banners; on these it cut through
       the "ADMISSIONS" headline. */
    body:has(.foreReferenceHeader) .banner:is(.banner) {
        margin-top: 166px !important;
    }

    /* The enquiry widget is 388px wide by its own rule, 26px wider than
       the space it has on a 390px phone, so its right edge was cut off. */
    .frm #ee-form-2,
    .frm #ee-form-2-modal-swapper {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Programme cards now carry three fact boxes. On a phone each is about
   96px wide and the single word "PROGRAMME" did not fit its box. */
@media (max-width: 480px) {
    .programmes-panel .detail-box {
        padding: 10px 7px;
    }

    .programmes-panel .detail-label {
        letter-spacing: .2px;
    }
}

@media (max-width: 380px) {
    .programmes-panel .detail-box {
        padding: 10px 5px;
    }

    .programmes-panel .detail-label {
        letter-spacing: 0;
    }
}