/*==================================================
    GERMAINE TRAINING INSTITUTE
    MAIN STYLESHEET
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Open+Sans:wght@400;500;600;700&family=Montserrat:wght@500;600;700&display=swap');

/*==================================================
    GERMAINE TRAINING INSTITUTE — BRAND SYSTEM
    Colours sourced exclusively from the official
    Germaine Training Institute logo palette.
==================================================*/

:root{
    /* ---- Germaine signature brand system (sourced from the logo) ---- */
    --primary:#EC4899;          /* Magenta Pink — primary accent */
    --primary-dark:#102A5C;     /* Deep Navy — primary brand color */
    --primary-light:#EC4899;    /* Secondary Accent — interactive magenta */
    --pink:#EC4899;             /* Signature Magenta */
    --accent:#EC4899;           /* Luxury Gold — premium accent */
    --accent-dark:#EC4899;
    --accent-light:#EC4899;

    /* legacy alias so any un-migrated component still resolves to the gold accent */
    --secondary:var(--accent);
    --secondary-dark:var(--accent-dark);

    /* ---- Canonical Germaine brand palette (single source of truth) ----
       Pink-first: pink carries the brand, navy provides contrast and
       structure, white provides clarity. No other accent hues are used
       anywhere on the site — depth comes from shades and opacities of
       pink rather than from additional colours. */
    --pink-brand:#EC4899;       /* primary brand pink */
    --pink-light:#F472B6;       /* secondary pink — gradients, hovers */
    --pink-soft:#FBCFE8;        /* light pink — tints, labels on dark */
    --pink-accent:#DB2777;      /* deep accent pink — pressed/active states */
    --navy-brand:#102A5C;       /* deep navy — contrast and foundations */

    --primary-pink:var(--pink-brand);
    --secondary-pink:var(--pink-light);
    --primary-navy:var(--navy-brand);
    --secondary-navy:#1E3A8A;   /* navy shade for layered surfaces */
    --soft-pink-glow:rgba(236, 72, 153, .25);
    /* retained alias: previously cyan, now resolves to the pink shade so
       older rules referencing it stay on-brand */
    --accent-cyan:var(--pink-light);
    --text-primary:#F8FAFC;
    --text-secondary:#CBD5E1;

    --white:#FFFFFF;
    --surface:#FFFFFF;
    /* soft pink page canvas — replaces flat white so the whole site reads
       warmer and pink-led rather than navy-dominant */
    --bg-page:#FFF7FB;
    --bg-soft:#FFF7FB;
    --light:#FFF7FB;
    --light-2:#FFFFFF;
    --gray:#102A5C;             /* Muted body copy — darkened for readability */
    --gray-light:#102A5C;
    --dark:#102A5C;

    /* ---- Global readable typography colors ---- */
    --text-heading:#102A5C;
    --text-body:#102A5C;
    --text-muted:#102A5C;

    /* ---- Global premium glass theme (use everywhere for cards/panels) ----
       Glass now carries a warm pink tint and a pink-tinted border so cards
       read as part of the pink-led identity rather than neutral white. */
    --glass-bg:rgba(255, 250, 252, .55);
    --glass-blur:16px;
    --glass-border:1px solid rgba(244, 114, 182, .28);
    --glass-bg-pink:rgba(236, 72, 153, .08);
    --glass-border-pink:1px solid rgba(244, 114, 182, .28);
    --glass-radius:20px;
    --glass-shadow:0 12px 32px rgba(16, 42, 92, .06), 0 0 22px rgba(236, 72, 153, .16);
    --glass-shadow-hover:0 0 34px rgba(236, 72, 153, .32), 0 15px 45px rgba(16, 42, 92, .14);

    /* dark-surface glass tokens (nav / footer / hero panels / modals) */
    --glass-bg-dark:rgba(16, 42, 92, .75);
    --glass-border-dark:rgba(255, 255, 255, .15);

    /* ---- Compact global spacing ---- */
    --section-pad-y:1.5rem;
    --gap-sm:.5rem;

    /* Germaine signature animated gradient — use sparingly (hero highlights,
       buttons, borders, travelling lights, CTA cards, hover, key headings) */
    --pt-gradient:linear-gradient(135deg, #EC4899, #EC4899, #102A5C, #EC4899, #FFFFFF);

    --shadow:0 10px 26px rgba(16, 42, 92, .06), 0 0 16px rgba(236, 72, 153, .1);
    --shadow-hover:0 0 32px rgba(236, 72, 153, .3), 0 18px 45px rgba(16, 42, 92, .14);

    --radius-sm:8px;
    --radius:18px;
    --radius-lg:26px;

    --transition:.35s cubic-bezier(.25,.8,.25,1);

    --container:1220px;

    --font-heading:'Poppins',sans-serif;
    --font-body:'Open Sans',sans-serif;
    --font-button:'Montserrat',sans-serif;
}

/*==========================
    DARK THEME
==========================*/

[data-theme="dark"]{
    --surface:#102A5C;
    --bg-page:#102A5C;
    --light:#102A5C;
    --light-2:#102A5C;
    --dark:#FFFFFF;
    --gray:rgba(255, 255, 255, .65);
    --gray-light:rgba(255, 255, 255, .45);

    --accent:#EC4899;
    --accent-dark:#EC4899;

    --primary-light:#EC4899;

    --shadow:0 10px 30px rgba(16, 42, 92, .45);
    --shadow-hover:0 20px 45px rgba(16, 42, 92, .55);
}

[data-theme="dark"] body{
    background:var(--bg-page);
}

[data-theme="dark"] .why-card,
[data-theme="dark"] .school-card,
[data-theme="dark"] .school-info div,
[data-theme="dark"] .testimonial-compact,
[data-theme="dark"] .value-card,
[data-theme="dark"] .team-card,
[data-theme="dark"] .news-card,
[data-theme="dark"] .contact-info-card,
[data-theme="dark"] .course-card-mini,
[data-theme="dark"] .category-card,
[data-theme="dark"] .form-card,
[data-theme="dark"] .step-item,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .logo-item{
    background:var(--light);
    border-color:rgba(255, 255, 255, .08);
}

[data-theme="dark"] .catalog-toolbar,
[data-theme="dark"] .school-list-toolbar,
[data-theme="dark"] .side-nav,
[data-theme="dark"] .industry-recognition{
    background:var(--surface);
    border-color:rgba(255, 255, 255, .08);
}

[data-theme="dark"] .welcome-section,
[data-theme="dark"] .content-section.alt{
    background:var(--light);
}

[data-theme="dark"] .catalog-search,
[data-theme="dark"] .category-intro-search,
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea{
    background:var(--light-2);
    color:var(--dark);
    border-color:rgba(255, 255, 255, .1);
}

[data-theme="dark"] .filter-pill{
    background:var(--light-2);
}

[data-theme="dark"] .partner-logo{
    background:var(--light-2);
}

[data-theme="dark"] .portal-btn{
    color:var(--dark);
    border-color:rgba(255, 255, 255, .18);
}

[data-theme="dark"] .footer-map iframe{
    filter:grayscale(.3) invert(.92) contrast(.9);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6{
    color:var(--dark);
}

[data-theme="dark"] .theme-toggle .fa-sun{ display:none; }
[data-theme="dark"] .theme-toggle .fa-moon{ display:inline-block; }
.theme-toggle .fa-moon{ display:none; }
.theme-toggle .fa-sun{ display:inline-block; }

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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--font-body);
    background:var(--bg-page);
    color:var(--dark);
    line-height:1.7;
    overflow-x:hidden;
    font-size:16px;
}

img{
    max-width:100%;
    /* height:auto is what makes the width/height attributes now present on
       every <img> safe. Those attributes exist purely so the browser can
       reserve the correct box from the intrinsic aspect ratio before the
       file arrives — without this rule, max-width:100% would shrink the
       width while the height attribute held, distorting every image.
       Components that deliberately set their own height (slideshow slides,
       fixed-ratio cards, object-fit:cover media) use class selectors, which
       outrank this one, so they are unaffected. */
    height:auto;
    display:block;
}

ul{ list-style:none; }

a{
    text-decoration:none;
    color:inherit;
}

button{
    border:none;
    background:none;
    font:inherit;
    cursor:pointer;
}

input, textarea, select{
    font:inherit;
    border:none;
    outline:none;
}

h1,h2,h3,h4,h5,h6{
    font-family:var(--font-heading);
    color:var(--primary-dark);
    line-height:1.25;
    font-weight:700;
}

p{ color:var(--gray); }

/*==================================================
    GLOBAL GLASS CARD — the single default glass
    treatment for the whole site. Apply .glass-card
    to any panel/card that should use the premium
    glassmorphism look consistently.
==================================================*/
.glass-card{
    background:var(--glass-bg);
    backdrop-filter:blur(var(--glass-blur));
    -webkit-backdrop-filter:blur(var(--glass-blur));
    border:var(--glass-border);
    border-radius:var(--glass-radius);
    box-shadow:var(--glass-shadow);
}

.container{
    width:100%;
    max-width:var(--container);
    margin:0 auto;
    padding:0 24px;
}

:focus-visible{
    outline:3px solid var(--accent);
    outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
    *{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
        scroll-behavior:auto !important;
    }
}

/*==========================
    SHARED / UTILITY
==========================*/

.section-heading{
    max-width:680px;
    margin:0 auto 56px;
    text-align:center;
}

.section-tag{
    display:inline-block;
    padding:8px 20px;
    background:rgba(236, 72, 153, .10);
    color:var(--secondary-dark);
    border:1px solid rgba(236, 72, 153, .25);
    border-radius:50px;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.section-heading h2{
    font-size:clamp(1.8rem, 3.2vw, 2.6rem);
    margin-bottom:16px;
}

.section-heading p{
    font-size:1.02rem;
}

.btn-primary,
.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:16px 34px;
    border-radius:50px;
    font-family:var(--font-button);
    font-weight:600;
    font-size:.95rem;
    letter-spacing:.2px;
    transition:var(--transition);
    white-space:nowrap;
}

.btn-primary{
    background:linear-gradient(135deg, var(--primary-pink), var(--secondary-pink));
    color:var(--white);
    box-shadow:0 12px 26px rgba(236, 72, 153, .30);
}

.btn-primary:hover{
    background:linear-gradient(135deg, var(--secondary-pink), var(--primary-pink));
    color:var(--white);
    transform:translateY(-3px);
    box-shadow:0 0 30px rgba(236, 72, 153, .4), 0 16px 32px rgba(236, 72, 153, .28);
}

.btn-secondary{
    background:var(--accent);
    color:var(--white);
    border:1.5px solid transparent;
}

.btn-secondary:hover{
    background:var(--primary);
    color:var(--white);
    border-color:var(--primary);
    transform:translateY(-3px);
}

/* Secondary buttons used on light backgrounds (internal pages) */
.on-light .btn-secondary,
.btn-secondary.on-light{
    color:var(--white);
    border-color:transparent;
}
.on-light .btn-secondary:hover,
.btn-secondary.on-light:hover{
    background:var(--primary-dark);
    color:var(--white);
}

/*==========================
    PRELOADER — REMOVED
    .preloader / .preloader.loader-hidden / .loader and the
    spin keyframes lived here. The overlay is gone from the
    markup and from main.js; these rules had no other
    consumer anywhere in the project (verified by grep), so
    they are removed rather than left as dead weight in the
    render-blocking stylesheet.
==========================*/

/*==========================
    WHATSAPP FLOAT
==========================*/

.whatsapp{
    position:fixed;
    right:24px;
    bottom:24px;
    width:58px;
    height:58px;
    background:#25D366;
    color:#FFFFFF;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.6rem;
    box-shadow:0 12px 28px rgba(37, 211, 102, .4);
    z-index:998;
    transition:var(--transition);
}

.whatsapp:hover,
.whatsapp:focus-visible{
    background:#20BA5A;
    transform:scale(1.1);
    box-shadow:0 14px 32px rgba(37, 211, 102, .5);
}

/* WhatsApp hover/focus tooltip — pseudo-element so it never affects layout */
.whatsapp::before{
    content:"Chat with us on WhatsApp";
    position:absolute;
    right:calc(100% + 14px);
    top:50%;
    transform:translate(8px,-50%);
    white-space:nowrap;
    background:var(--white);
    color:#333333;
    font-size:.82rem;
    font-weight:600;
    letter-spacing:.01em;
    padding:9px 16px;
    border-radius:22px;
    box-shadow:0 10px 24px rgba(16,42,92,.18);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .28s ease, transform .28s ease, visibility .28s;
    z-index:999;
}

.whatsapp:hover::before,
.whatsapp:focus-visible::before{
    opacity:1;
    visibility:visible;
    transform:translate(0,-50%);
}

@media (max-width:640px){
    .whatsapp::before{
        display:none;
    }
}

/*==================================================
    PREMIUM THREE-LEVEL HEADER
    Level 1  — Utility Bar
    Level 2  — Branding Bar
    Level 3  — Main Navigation (mega menu)
==================================================*/

:root{
    /* Branding bar + main nav only. The announcement banner is now a fixed
       popup and no longer occupies space in the top stack, so this no longer
       reserves height for it — which is what left an empty gap beneath the
       header. assets/js/main.js remeasures the real stack height on load,
       resize and font-ready and overwrites this fallback.
       Values below are a real live measurement of #fixedTopStack /
       #utilityBar at 1280px (desktop), not a placeholder: header-height
       150.7px, utility-bar 37.1px, so content-offset = 150.7 - 37.1 =
       113.6px. This replaces a stale 100px fallback that caused a ~14px
       layout shift (CLS ~1.0) on every first paint, before JS overwrote it.
       .utility-bar-inner/.branding-inner have no width-specific padding or
       font-size overrides anywhere in this stylesheet (checked: the only
       <=992px header rule swaps .nav-links for the hamburger icon, which
       does not change bar height), so this single value should hold across
       breakpoints; it has not been confirmed on a real mobile device. */
    --header-height:151px;
    --content-offset:114px;
    --sidenav-width:340px;
    --utility-height:40px;
}

/* PAGE-FAMILY HEADER OFFSETS — the two values above are correct only for
   the standard full nav-links header. Two other real page templates exist
   and were measured live in production; a single global value would cause
   a visible shift on both after JS corrects them, exactly what this block
   prevents. assets/js/main.js still remeasures and overwrites these on
   load/resize/fonts.ready — this only fixes what paints before it runs.

   Reduced-nav header (shorter nav-links list => one row less height).
   Measured live at 1280px: #fixedTopStack 135.1px, #utilityBar 37.1px,
   offset 135.1 - 37.1 = 98px. Confirmed identical on corporate-training.html,
   graduate-hire.html and partner-with-us.html. */
body.ct-page,
body.ghire-page,
body.partner-page{
    --header-height:135px;
    --content-offset:98px;
}

/* AI Bootcamp family (hub page + every ai-course-*.html detail page): these
   render their own compact in-flow navbar instead of the fixed
   branding/utility stack, so #fixedTopStack is display:none and measures
   0 in production — .page-shell needs no top offset at all here. This
   matches what the JS already converges to; it only removes the incorrect
   ~100-114px value that used to flash before JS ran. */
body.aic-family-page{
    --header-height:0px;
    --content-offset:0px;
}

/*==========================
    LEVEL 1 — UTILITY BAR
==========================*/

.utility-bar{
    position:relative;
    z-index:1001;
    background:var(--primary-dark);
    color:rgba(255, 255, 255, .85);
    font-size:.8rem;
    max-height:60px;
    overflow:hidden;
    opacity:1;
    transition:max-height .3s ease, opacity .25s ease;
}

.utility-bar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:9px 24px;
    gap:20px;
}

/* COLLAPSING HEADER — once scrolled past ~70px, the utility bar folds
   away (max-height + opacity, not display:none, so the collapse itself
   animates) leaving the slim branding/nav bar pinned at the top. The
   branding-bar/logo/contact shrink rules that pair with this already
   live under header#header.sticky below. Reversible: scrolling back to
   the top removes .sticky and the utility bar smoothly restores. */
.utility-bar.sticky{
    max-height:0;
    opacity:0;
    pointer-events:none;
}

.utility-left,
.utility-right{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
}

.utility-left::-webkit-scrollbar,
.utility-right::-webkit-scrollbar{
    display:none;
}

.utility-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:6px 14px;
    white-space:nowrap;
    color:rgba(255, 255, 255, .85);
    font-weight:500;
    letter-spacing:.2px;
    border-right:1px solid rgba(255, 255, 255, .14);
    transition:var(--transition);
}

.utility-right .utility-link:last-child,
.utility-left .utility-link:last-child{
    border-right:none;
}

.utility-link i{
    color:var(--accent);
    font-size:.82rem;
    transition:var(--transition);
}

.utility-link:hover{
    color:var(--accent-light);
}

/* Scholarship messaging — replaces the old "Hire our Graduates" item.
   The "Apply Now" action reads as a small pink pill so it stands out
   as the utility bar's call to action. */
.utility-scholarship{
    font-weight:700;
    color:#FFFFFF;
}
.utility-apply-now{
    background:rgba(236, 72, 153, .22);
    border-radius:50px;
    padding:5px 14px;
    font-weight:700;
    color:#FFFFFF;
}
.utility-apply-now:hover{
    background:rgba(236, 72, 153, .4);
    color:#FFFFFF;
}
.utility-apply-now i{
    font-size:.72rem;
}

.utility-link:hover i{
    color:var(--accent-light);
    transform:translateY(-1px);
}

.utility-divider{
    width:1px;
    height:16px;
    background:rgba(255, 255, 255, .18);
    margin:0 6px;
    flex-shrink:0;
}

/*==========================
    FIXED TOP STACK
    (branding bar + main nav + announcement, pinned as one unit)
==========================*/

.fixed-top-stack{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    /* Consolidated from 3 separate backdrop-filter:blur(18px) layers (one
       each on .utility-bar/.branding-bar/.navbar below) into a single blur
       on the shared fixed parent. The three rows are directly stacked with
       no gaps, so blurring the whole stack once and letting each row paint
       its own translucent background on top produces the same visual
       result for roughly a third of the compositor cost — this element is
       on screen and blurring live page content behind it for the entire
       time any page is open. */
    backdrop-filter:blur(18px) saturate(120%);
    -webkit-backdrop-filter:blur(18px) saturate(120%);
}

header#header{
    position:static;
    background:var(--surface);
    box-shadow:var(--shadow);
    transition:var(--transition);
}

[data-theme="dark"] header#header{
    background:var(--surface);
}

/*==========================
    LEVEL 2 — BRANDING BAR
==========================*/

.branding-bar{
    background:var(--surface);
    transition:var(--transition);
}

.branding-inner{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:24px;
    padding:22px 24px;
    transition:var(--transition);
}

header#header.sticky .branding-bar{
    padding:0;
}

header#header.sticky .branding-inner{
    padding:12px 24px;
}

.brand-logo-group{
    display:flex;
    align-items:center;
    gap:14px;
    justify-self:center;
    text-align:left;
}

.brand-logo-img{
    height:64px;
    width:auto;
    display:block;
    border-radius:10px;
    transition:var(--transition);
}

header#header.sticky .brand-logo-img{
    height:46px;
}

.brand-text{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.brand-name{
    font-family:var(--font-heading);
    font-weight:700;
    font-size:1.32rem;
    color:var(--primary);
    line-height:1.15;
    letter-spacing:.2px;
    transition:var(--transition);
}

header#header.sticky .brand-name{
    font-size:1.08rem;
}

.brand-tagline{
    font-size:.8rem;
    font-weight:500;
    color:var(--gray);
    letter-spacing:.3px;
}

header#header.sticky .brand-tagline{
    display:none;
}

.branding-contact{
    display:flex;
    flex-direction:column;
    gap:8px;
    justify-self:start;
}

.branding-contact a{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:.88rem;
    font-weight:600;
    color:var(--dark);
    transition:var(--transition);
}

.branding-contact a i{
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--light-2);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.85rem;
    flex-shrink:0;
    transition:var(--transition);
}

.branding-contact a:hover{
    color:var(--primary);
}

.branding-contact a:hover i{
    background:var(--accent);
    color:var(--primary-dark);
}

header#header.sticky .branding-contact{
    display:none;
}

.branding-right{
    display:flex;
    align-items:center;
    gap:18px;
    justify-self:end;
}

.branding-location{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:.84rem;
    font-weight:600;
    color:var(--gray);
    max-width:200px;
}

.branding-location i{
    color:var(--accent);
    flex-shrink:0;
}

header#header.sticky .branding-location{
    display:none;
}

/*==========================
    LEVEL 3 — MAIN NAVIGATION
==========================*/

.navbar{
    background:var(--primary);
    background:linear-gradient(90deg, var(--primary-dark), var(--primary));
    border-top:1px solid rgba(255, 255, 255, .08);
    transition:var(--transition);
}

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

.logo{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.logo img{
    height:48px;
    width:auto;
    display:block;
}

.nav-links{
    display:flex;
    align-items:stretch;
    gap:2px;
    flex:1;
    justify-content:center;
}

.nav-links > li{
    position:relative;
    display:flex;
    align-items:center;
}

.nav-links > li > a{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-weight:600;
    font-size:.92rem;
    letter-spacing:.2px;
    color:rgba(255, 255, 255, .92);
    padding:17px 16px;
    transition:var(--transition);
}

.nav-links > li > a i{
    font-size:.68rem;
    color:var(--accent-light);
    transition:transform .3s ease;
}

.nav-links > li > a::after{
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    bottom:9px;
    height:2px;
    background:var(--accent);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .35s cubic-bezier(.25,.8,.25,1);
}

.nav-links > li > a:hover,
.nav-links > li > a.active,
.nav-links > li.dropdown.open > a{
    color:var(--accent-light);
}

.nav-links > li > a:hover::after,
.nav-links > li > a.active::after,
.nav-links > li.dropdown.open > a::after{
    transform:scaleX(1);
}

.nav-links > li.dropdown.open > a i{
    transform:rotate(180deg);
}

/*-- Dropdown panels --*/

.dropdown-menu{
    position:absolute;
    top:100%;
    left:0;
    min-width:200px;
    background:var(--surface);
    border-radius:0 0 var(--radius-sm) var(--radius-sm);
    box-shadow:var(--shadow-hover);
    padding:6px;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
    z-index:50;
}

.dropdown.open > .dropdown-menu,
.dropdown:focus-within > .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.dropdown-menu a{
    display:block;
    padding:6px 12px;
    border-radius:8px;
    font-size:.82rem;
    font-weight:600;
    line-height:1.2;
    color:var(--dark);
    white-space:nowrap;
    transition:var(--transition);
}

.dropdown-menu a:hover{
    background:rgba(16, 42, 92, .06);
    color:var(--accent-dark);
    padding-left:16px;
}

/*-- Mega menu (Academic Schools) --*/

.nav-links > li.mega-dropdown{
    position:static;
}

.mega-menu{
    left:50%;
    transform:translate(-50%,10px);
    width:min(820px, calc(100vw - 48px));
    max-width:1040px;
    border-radius:var(--radius-sm);
    padding:18px;
    display:grid;
    grid-template-columns:repeat(3,1fr) 1.1fr;
    gap:4px 20px;
}

.mega-dropdown.open > .mega-menu,
.mega-dropdown:focus-within > .mega-menu{
    transform:translate(-50%,0);
}

.mega-menu-col{
    display:flex;
    flex-direction:column;
    gap:1px;
}

.mega-menu-col-title{
    font-family:var(--font-heading);
    font-size:.7rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.6px;
    color:var(--accent-dark);
    padding:6px 10px 7px;
}

.mega-menu-col a{
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:8px;
    font-size:.8rem;
    font-weight:600;
    line-height:1.2;
    color:var(--dark);
    white-space:nowrap;
    transition:var(--transition);
}

.mega-menu-col a i{
    color:var(--primary);
    font-size:14px;
    width:14px;
    flex-shrink:0;
    transition:var(--transition);
}

.mega-menu-col a:hover{
    background:rgba(236, 72, 153, .08);
    color:var(--primary);
    padding-left:14px;
}

.mega-menu-col a:hover i{
    color:var(--accent-dark);
}

.mega-menu-feature{
    background:linear-gradient(150deg, var(--primary-dark), var(--primary));
    border-radius:var(--radius-sm);
    padding:16px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:10px;
    color:var(--white);
}

.mega-menu-feature h4{
    font-family:var(--font-heading);
    font-size:.92rem;
    font-weight:700;
    line-height:1.25;
}

.mega-menu-feature p{
    font-size:.76rem;
    color:rgba(255, 255, 255, .8);
    line-height:1.4;
}

.mega-menu-feature a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--accent);
    color:var(--primary-dark);
    font-weight:700;
    font-size:.78rem;
    padding:8px 14px;
    border-radius:50px;
    align-self:flex-start;
    transition:var(--transition);
}

.mega-menu-feature a:hover{
    background:var(--accent-light);
    transform:translateY(-2px);
}

.nav-buttons{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
}

.search-btn{
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(255, 255, 255, .12);
    color:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
}

.search-btn:hover{
    background:var(--accent);
    color:var(--primary-dark);
}

.theme-toggle{
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(255, 255, 255, .12);
    color:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.02rem;
    transition:var(--transition);
    flex-shrink:0;
}

.theme-toggle:hover{
    background:var(--accent);
    color:var(--primary-dark);
}

.apply-btn{
    padding:13px 26px;
    border-radius:50px;
    font-family:var(--font-button);
    font-weight:600;
    font-size:.86rem;
    letter-spacing:.2px;
    background:var(--accent);
    color:var(--primary-dark);
    box-shadow:0 10px 22px rgba(236, 72, 153, .35);
    transition:var(--transition);
}

.apply-btn:hover{
    background:var(--primary);
    color:var(--white);
    transform:translateY(-2px);
    box-shadow:0 14px 28px rgba(236, 72, 153, .30);
}

.hamburger{
    display:none;
    width:42px;
    height:42px;
    border-radius:50%;
    background:rgba(255, 255, 255, .12);
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    flex-direction:column;
    gap:5px;
}

.hamburger span{
    display:block;
    width:18px;
    height:2px;
    border-radius:2px;
    background:var(--white);
    transition:transform .3s cubic-bezier(.25,1,.5,1), opacity .3s ease, background .3s ease;
}

.hamburger[aria-expanded="true"] span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.hamburger[aria-expanded="true"] span:nth-child(2){
    opacity:0;
}

.hamburger[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

@media(min-width:993px){

    header#header.sticky .utility-bar{
        backdrop-filter:blur(22px) saturate(125%);
        -webkit-backdrop-filter:blur(22px) saturate(125%);
    }

    /*==================================================
        COLLAPSED HEADER — SINGLE MERGED BAR
        Past ~70px of scroll, the branding row and the nav
        row stop rendering as two separate bars and merge
        into one slim horizontal bar: logo (left), nav menu
        (centre), search/theme + Apply button (right). No
        DOM changes — display:contents lets the inner wrapper
        boxes disappear while their real children (the actual
        links, logo, button — same markup, same JS, same
        dropdowns) become direct flex items of the header
        itself, so this is purely a visual re-flow.
    ==================================================*/
    header#header.sticky{
        display:flex;
        align-items:center;
        gap:22px;
        width:100%;
        max-width:var(--container);
        margin:0 auto;
        padding:0 24px;
        background:linear-gradient(180deg, var(--gnav-bg-blue, rgba(16, 42, 92, .82)), var(--gnav-bg-blue-2, rgba(16, 42, 92, .84)));
        backdrop-filter:blur(22px) saturate(125%);
        -webkit-backdrop-filter:blur(22px) saturate(125%);
        border-bottom:1px solid var(--gnav-bd, rgba(255, 255, 255, .1));
        box-shadow:0 16px 34px rgba(16, 42, 92, .22), 0 0 26px rgba(236, 72, 153, .16);
    }

    /* the wrapper boxes (both the row itself and its inner container)
       disappear; their real children join the flex row above. Every
       ancestor between the header and the visible pieces (logo, nav
       links, buttons) must be display:contents for the flex/order rules
       below to reach them directly. */
    header#header.sticky .branding-bar,
    header#header.sticky .branding-inner,
    header#header.sticky .navbar,
    header#header.sticky .navbar-inner{
        display:contents;
    }

    /* left → centre → right order for the three pieces users actually see */
    header#header.sticky .brand-logo-group{ order:1; flex-shrink:0; }
    header#header.sticky .nav-links{ order:2; }
    header#header.sticky .nav-buttons{ order:3; }
    header#header.sticky .branding-right{ order:4; flex-shrink:0; padding:0; }

}

/*==========================
    ANNOUNCEMENT BAR
==========================*/

/* Scholarship announcement — a compact premium popup banner rather than a
   full-bleed strip. Taken out of normal flow so the fixed top stack no
   longer reserves height for it (which is what left the gap beneath the
   header); --header-height is measured from the stack, so it self-corrects. */
.announcement-bar{
    position:fixed;
    left:50%;
    bottom:26px;
    z-index:1200;
    width:calc(100% - 32px);
    max-width:850px;
    padding:0;
    color:var(--white);
    /* hidden resting state — slides up into view when .is-visible is set */
    opacity:0;
    visibility:hidden;
    transform:translateX(-50%) translateY(140%);
    transition:transform .55s cubic-bezier(.25,.8,.25,1), opacity .45s ease, visibility .45s;
}

.announcement-bar.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}

.announcement-bar .announcement-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin:0 auto;
    padding:11px 14px 11px 22px;
    flex-wrap:wrap;
    background:linear-gradient(135deg, var(--primary-pink), var(--secondary-pink));
    border:1px solid rgba(255, 255, 255, .28);
    border-radius:999px;
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    box-shadow:0 12px 34px rgba(236, 72, 153, .34), 0 0 24px rgba(236, 72, 153, .2);
}

/* dismiss control */
.announcement-close{
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; flex-shrink:0;
    border:1px solid rgba(255, 255, 255, .35);
    background:rgba(255, 255, 255, .16);
    color:var(--white); border-radius:50%;
    cursor:pointer; font-size:.75rem;
    transition:var(--transition);
}
.announcement-close:hover{ background:rgba(255, 255, 255, .32); transform:rotate(90deg); }

@media(max-width:640px){
    .announcement-bar{ bottom:16px; }
    .announcement-bar .announcement-container{ border-radius:22px; padding:12px 14px; }
}
@media (prefers-reduced-motion: reduce){
    .announcement-bar{ transition:opacity .3s ease, visibility .3s; transform:translateX(-50%); }
    .announcement-bar.is-visible{ transform:translateX(-50%); }
}

.announcement-left{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:.92rem;
    font-weight:500;
}

.announcement-left i{
    color:var(--primary-dark);
}

.announcement-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    font-size:.9rem;
    padding:6px 16px;
    border-radius:50px;
    background:rgba(255, 255, 255, .22);
    transition:var(--transition);
}

.announcement-link:hover{
    background:var(--surface);
    color:var(--primary);
    gap:12px;
}

/*==========================
    PAGE SHELL + SIDE NAV
    (split-view: main content + right push panel)
==========================*/

/* The utility bar sits in normal flow at the very top while .fixed-top-stack
   is position:fixed at top:0 overlaying it. Reserving the full stack height
   here would therefore double-count the utility bar's height and leave an
   empty gap between the header and the hero. --content-offset is the stack
   height minus the utility bar height (set in assets/js/main.js); the
   --header-height fallback keeps this correct before the script runs and on
   pages that have no utility bar. */
.page-shell{
    display:flex;
    align-items:flex-start;
    padding-top:var(--content-offset, var(--header-height));
    min-height:100vh;
}
/* the hero is the first thing inside main — never let it add its own gap */
.page-shell > main > section:first-of-type{ margin-top:0; }

.page-shell > main{
    flex:1 1 auto;
    min-width:0;
    transition:flex .3s cubic-bezier(.25,1,.5,1);
}

.side-nav{
    /* Navy theme: the panel now uses the same deep-navy brand colour as
       the rest of the site (var(--primary-dark)) instead of a white
       surface, with light text throughout (see the colour overrides
       below). This is scoped entirely to .side-nav and its children —
       nothing else on the page uses these variables' overrides. */
    display:none;
    flex-shrink:0;
    width:0;
    overflow:hidden;
    overflow-y:auto;
    height:calc(100vh - var(--header-height));
    position:sticky;
    top:var(--header-height);
    background:var(--primary-dark);
    border-left:1px solid rgba(236, 72, 153, .12);
    transition:width .3s cubic-bezier(.25,1,.5,1);
}

.side-nav-links{
    padding:18px 14px;
}

.side-nav-links li + li{
    margin-top:2px;
}

.side-nav-links a{
    display:block;
    padding:13px 16px;
    border-radius:12px;
    font-weight:600;
    font-size:.96rem;
    color:#FFFFFF;
    white-space:nowrap;
    transition:var(--transition);
}

.side-nav-links a:hover,
.side-nav-links a.active{
    background:rgba(236, 72, 153, .22);
    color:#FFFFFF;
}

/*-- Accordion submenus (mobile mega menu) --*/

.side-nav-group{
    display:flex;
    flex-direction:column;
}

.side-nav-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:13px 16px;
    border-radius:12px;
    font-weight:600;
    font-size:.96rem;
    color:#FFFFFF;
    background:transparent;
    text-align:left;
    transition:var(--transition);
}

.side-nav-toggle:hover,
.side-nav-toggle.active{
    background:rgba(236, 72, 153, .22);
    color:#FFFFFF;
}

.side-nav-toggle i{
    font-size:.78rem;
    color:rgba(255, 255, 255, .55);
    transition:transform .3s ease;
}

.side-nav-toggle[aria-expanded="true"] i{
    transform:rotate(180deg);
    color:var(--accent);
}

.side-nav-submenu{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s cubic-bezier(.25,.8,.25,1);
    padding-left:12px;
    border-left:2px solid rgba(255, 255, 255, .14);
    margin:0 0 0 18px;
}

.side-nav-submenu a{
    display:block;
    padding:8px 12px;
    border-radius:8px;
    font-weight:500;
    font-size:.82rem;
    line-height:1.25;
    color:rgba(255, 255, 255, .72);
    white-space:normal;
    transition:var(--transition);
}

.side-nav-submenu a i{
    color:var(--accent);
    width:14px;
    font-size:14px;
    margin-right:6px;
}

.side-nav-submenu a:hover{
    background:rgba(236, 72, 153, .16);
    color:#FFFFFF;
}

.side-nav-utility-heading{
    padding:16px 16px 6px;
    font-family:var(--font-heading);
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.6px;
    color:rgba(255, 255, 255, .5);
}

.side-nav-utility{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:8px 14px 0;
}

.side-nav-utility-btn{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    padding:13px 16px;
    border-radius:12px;
    font-weight:600;
    font-size:.9rem;
    color:#FFFFFF;
    background:transparent;
    text-align:left;
    transition:var(--transition);
}

.side-nav-utility-btn:hover{
    background:rgba(236, 72, 153, .22);
    color:#FFFFFF;
}

.side-nav-utility-btn i{
    color:var(--accent);
    width:16px;
    flex-shrink:0;
}

.side-nav-utility-btn.theme-toggle .fa-moon{ display:none; }
.side-nav-utility-btn.theme-toggle .fa-sun{ display:inline-block; }
[data-theme="dark"] .side-nav-utility-btn.theme-toggle .fa-sun{ display:none; }
[data-theme="dark"] .side-nav-utility-btn.theme-toggle .fa-moon{ display:inline-block; }

.side-nav-footer{
    padding:16px 20px 28px;
    border-top:1px solid rgba(255, 255, 255, .14);
    margin-top:8px;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.side-nav-footer .btn-primary{
    width:100%;
    color:var(--white);
}

.side-nav-contact{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.side-nav-contact a{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:.82rem;
    color:rgba(255, 255, 255, .78);
    white-space:nowrap;
}

.side-nav-contact i{
    color:var(--accent);
    width:16px;
    flex-shrink:0;
}

.side-nav-backdrop{
    display:none;
}

@media(max-width:992px){

    .nav-links{ display:none; }
    .hamburger{ display:flex; }
    .side-nav{ display:block; }

    .page-shell.menu-open .side-nav{
        width:var(--sidenav-width);
    }

}

@media(max-width:576px){

    .side-nav{
        position:fixed;
        top:var(--header-height);
        right:0;
        z-index:999;
        /* Narrower panel (was 85vw/340px cap) — reads as more compact on
           phones without shrinking touch targets. */
        width:min(85vw, 300px);
        height:calc(100vh - var(--header-height));
        box-shadow:-14px 0 40px rgba(16, 42, 92, .18);
        /* Transform instead of animating width: sliding a fixed-width
           panel in/out via translateX is compositor-only work, so open/
           close is immediate even on slower phones. The previous
           width:0 -> 85vw animation forced a layout recalculation on every
           frame of the 300ms transition. */
        transform:translateX(100%);
        transition:transform .2s cubic-bezier(.25,1,.5,1);
    }

    .page-shell.menu-open .side-nav{
        transform:translateX(0);
    }

    .side-nav-backdrop{
        display:block;
        position:fixed;
        inset:var(--header-height) 0 0 0;
        background:rgba(16, 42, 92, .45);
        opacity:0;
        visibility:hidden;
        transition:opacity .2s ease, visibility .2s ease;
        z-index:998;
    }

    .page-shell.menu-open .side-nav-backdrop{
        opacity:1;
        visibility:visible;
    }

}

/*==========================
    SEARCH MODAL
==========================*/

.search-modal{
    position:fixed;
    inset:0;
    background:rgba(16, 42, 92, .92);
    z-index:1200;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top:14vh;
    opacity:0;
    visibility:hidden;
    transition:var(--transition);
}

.search-modal.active{
    opacity:1;
    visibility:visible;
}

.search-box{
    width:100%;
    max-width:600px;
    margin:0 24px;
    display:flex;
    align-items:center;
    background:var(--surface);
    border-radius:50px;
    padding:6px 6px 6px 26px;
    box-shadow:0 25px 60px rgba(16, 42, 92, .35);
}

.search-box input{
    flex:1;
    padding:14px 0;
    font-size:1rem;
    color:var(--dark);
}

.search-box button{
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--secondary);
    color:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

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

.hero{
    position:relative;
    min-height:92vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:linear-gradient(135deg, var(--primary-dark), var(--primary) 60%, var(--primary-light));
    overflow:hidden;
    padding:70px 0 0;
}

.hero-slider{
    position:absolute;
    inset:0;
    z-index:0;
}

.hero-slider .slide{
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, var(--primary-dark), var(--primary) 60%, var(--primary-light));
    opacity:0;
    transition:opacity 1.2s ease;
}

.hero-slider .slide:nth-child(2){ background:linear-gradient(135deg, var(--primary), var(--secondary-dark)); }
.hero-slider .slide:nth-child(3){ background:linear-gradient(135deg, var(--primary-dark), var(--primary-light)); }
.hero-slider .slide:nth-child(4){ background:linear-gradient(135deg, var(--secondary-dark), var(--primary-dark)); }

.hero-slider .slide.active{
    opacity:1;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .08), transparent 45%),
               radial-gradient(circle at 85% 80%, rgba(236, 72, 153, .20), transparent 50%);
    z-index:1;
}

.hero-shape{
    position:absolute;
    border-radius:50%;
    filter:blur(10px);
    z-index:1;
    opacity:.5;
}

.hero-shape-1{
    width:280px; height:280px;
    background:rgba(236, 72, 153, .18);
    top:-60px; right:8%;
}

.hero-shape-2{
    width:180px; height:180px;
    background:rgba(236, 72, 153, .25);
    bottom:10%; left:4%;
}

.hero-shape-3{
    width:120px; height:120px;
    background:rgba(255, 255, 255, .10);
    top:40%; right:30%;
}

.hero-container{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:50px;
    align-items:center;
    padding-top:40px;
    padding-bottom:60px;
}

.hero-content{
    color:var(--white);
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:9px 20px;
    border-radius:50px;
    background:rgba(255, 255, 255, .12);
    border:1px solid rgba(255, 255, 255, .22);
    font-size:.82rem;
    font-weight:600;
    letter-spacing:.4px;
    margin-bottom:26px;
}

.hero-badge i{
    color:var(--accent);
}

.hero-content h1{
    color:var(--white);
    font-size:clamp(2.3rem, 4.4vw, 3.6rem);
    font-weight:800;
    line-height:1.18;
    margin-bottom:22px;
}

.hero-content h1 span{
    display:inline;
    color:var(--accent);
}

.hero-content > p{
    color:rgba(255, 255, 255, .82);
    font-size:1.08rem;
    max-width:520px;
    margin-bottom:34px;
}

.hero-buttons{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:40px;
}

.hero-features{
    display:flex;
    flex-wrap:wrap;
    gap:22px 30px;
}

.feature-item{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:.92rem;
    font-weight:500;
    color:rgba(255, 255, 255, .9);
}

.feature-item i{
    color:var(--secondary);
    font-size:1.05rem;
}

.hero-image{

    position: relative;

    width: 100%;

    max-width: 700px;

    margin: 0 auto;

}
.hero-image-slider{

    position: relative;

    width: 100%;

    height: 540px;

    overflow: hidden;

    border-radius: 28px;

    box-shadow: 0 25px 60px rgba(16, 42, 92, .25);

}

.hero-slide{

    position:absolute;

    width:100%;

    height:100%;

    opacity:0;

    transition:opacity .8s ease;

}

.hero-slide.active{

    opacity:1;

}

.hero-slide img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 28px;

}

.slider-dots{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:18px;

}

.slider-dots .dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#102A5C;

    cursor:pointer;

    transition:.3s;

}

.slider-dots .dot.active{

    width:34px;

    border-radius:20px;

    background:var(--secondary);

}

.hero-info-card{

    position: absolute;

    left: -55px;

    bottom: 45px;

    width: 280px;

    background: white;

    padding: 28px;

    border-radius: 18px;

    box-shadow: 0 20px 50px rgba(16, 42, 92, .18);

}

.hero-info-card h3{

    color:var(--primary);

    margin-bottom:8px;

    font-size:1.15rem;

}

.hero-info-card p{

    font-size:.9rem;

    margin-bottom:16px;

}

.hero-info-card a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--secondary-dark);

    font-weight:700;

}


@keyframes float{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-14px); }
}

.hero-stats{
    position:relative;
    z-index:2;
    background:rgba(16, 42, 92, .55);
    backdrop-filter:blur(6px);
    border-top:1px solid rgba(255, 255, 255, .12);
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    text-align:center;
    padding:30px 24px;
}

.stat-card{
    padding:10px;
    border-right:1px solid rgba(255, 255, 255, .14);
}

.stat-card:last-child{ border-right:none; }

.stat-card h2{
    color:var(--accent);
    font-family:var(--font-heading);
    font-size:clamp(1.6rem,3vw,2.3rem);
    margin-bottom:4px;
}

.stat-card span{
    color:rgba(255, 255, 255, .75);
    font-size:.85rem;
    font-weight:500;
    letter-spacing:.3px;
}

.scroll-indicator{
    position:absolute;
    left:50%;
    bottom:14px;
    transform:translateX(-50%);
    width:26px;
    height:42px;
    border:2px solid rgba(255, 255, 255, .5);
    border-radius:20px;
    z-index:3;
    display:none;
}

.scroll-indicator span{
    position:absolute;
    top:8px;
    left:50%;
    transform:translate(-50%, 0);
    width:5px;
    height:5px;
    background:var(--accent);
    border-radius:50%;
    animation:scrollDot 1.6s ease infinite;
}

/* Was animating `top` (8px -> 24px) directly: a layout-triggering property,
   forcing a reflow on every frame of an infinite animation for as long as
   this indicator is on screen. Same 16px motion, now via transform, which
   is compositor-only and never touches layout. */
@keyframes scrollDot{
    0%{ opacity:1; transform:translate(-50%, 0); }
    100%{ opacity:0; transform:translate(-50%, 16px); }
}

/*==========================
    HIGHLIGHTS SECTION
==========================*/

.highlights-section{
    padding:100px 0 60px;
}

/*==========================
    GLANCE ACCORDION
    (Interactive Hover-Reveal)
==========================*/

.glance-accordion{
    display:flex;
    height:420px;
    max-height:60vh;
    gap:6px;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-hover);
}

.glance-panel{
    position:relative;
    flex:1;
    min-width:0;
    cursor:pointer;
    overflow:hidden;
    outline:none;
    transition:flex 0.6s cubic-bezier(.25,.85,.3,1);
}

.glance-panel:hover,
.glance-panel:focus-visible,
.glance-panel.active{
    flex:3.4;
}

.glance-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(.55) brightness(.55);
    transform:scale(1.08);
    transition:filter .6s ease, transform .8s ease;
}

.glance-panel:hover .glance-bg,
.glance-panel:focus-visible .glance-bg,
.glance-panel.active .glance-bg{
    filter:grayscale(0) brightness(.62);
    transform:scale(1);
}

.glance-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(0deg, rgba(16, 42, 92, .92) 0%, rgba(16, 42, 92, .55) 55%, rgba(16, 42, 92, .35) 100%);
    transition:var(--transition);
}

.glance-panel:hover .glance-overlay,
.glance-panel:focus-visible .glance-overlay,
.glance-panel.active .glance-overlay{
    background:
        linear-gradient(0deg, rgba(16, 42, 92, .88) 0%, rgba(16, 42, 92, .42) 60%, rgba(16, 42, 92, .18) 100%);
}

.glance-icon{
    position:absolute;
    top:24px;
    left:24px;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:rgba(255, 255, 255, .08);
    border:1px solid rgba(236, 72, 153, .35);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    color:var(--accent);
    transition:var(--transition);
    z-index:2;
}

.glance-icon svg{
    width:22px;
    height:22px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.glance-panel:hover .glance-icon,
.glance-panel:focus-visible .glance-icon,
.glance-panel.active .glance-icon{
    background:var(--accent);
    color:var(--primary-dark);
    border-color:var(--accent);
}

.glance-body{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
    padding:22px 20px;
    background:rgba(236, 72, 153, .28);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-top:1px solid rgba(255, 255, 255, .10);
}

.glance-title{
    color:var(--white);
    font-size:.92rem;
    font-weight:700;
    letter-spacing:.2px;
    white-space:nowrap;
    margin:0;

    /* collapsed = vertical reading */
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    transition:opacity .25s ease;
}

.glance-panel:hover .glance-title,
.glance-panel:focus-visible .glance-title,
.glance-panel.active .glance-title{
    writing-mode:horizontal-tb;
    transform:none;
    white-space:normal;
    font-size:1.05rem;
    margin-bottom:8px;
}

.glance-desc{
    color:rgba(255, 255, 255, .78);
    font-size:.86rem;
    line-height:1.6;
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height .5s ease, opacity .4s ease .1s;
}

.glance-panel:hover .glance-desc,
.glance-panel:focus-visible .glance-desc,
.glance-panel.active .glance-desc{
    max-height:120px;
    opacity:1;
}

.glance-panel:not(:hover):not(:focus-visible):not(.active) .glance-body{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    height:150px;
}

@media(max-width:900px){

    .glance-accordion{
        flex-direction:column;
        height:auto;
        max-height:none;
        gap:8px;
    }

    .glance-panel{
        flex:none;
        height:64px;
        transition:height .5s cubic-bezier(.25,.85,.3,1);
    }

    .glance-panel:hover,
    .glance-panel:focus-visible,
    .glance-panel.active{
        flex:none;
        height:168px;
    }

    .glance-panel:not(:hover):not(:focus-visible):not(.active) .glance-body{
        height:100%;
        align-items:center;
        justify-content:flex-start;
        flex-direction:row;
        gap:14px;
        padding:0 18px 0 78px;
    }

    .glance-title{
        writing-mode:horizontal-tb !important;
        transform:none !important;
        font-size:1rem !important;
        margin-bottom:0 !important;
        white-space:nowrap;
    }

    .glance-panel:hover .glance-title,
    .glance-panel:focus-visible .glance-title,
    .glance-panel.active .glance-title{
        margin-bottom:6px !important;
    }

    .glance-panel.active .glance-body,
    .glance-panel:hover .glance-body,
    .glance-panel:focus-visible .glance-body{
        display:block;
        padding:16px 20px;
    }

    .glance-icon{
        top:14px;
        left:18px;
        width:36px;
        height:36px;
    }

}

[data-theme="dark"] .glance-body{
    background:rgba(16, 42, 92, .32);
}

/*==========================
    QUICK FACTS
==========================*/

.quick-facts{
    padding:50px 0;
    background:var(--primary-dark);
}

.facts-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    text-align:center;
}

.fact-box i{
    font-size:1.8rem;
    color:var(--accent);
    margin-bottom:14px;
}

.fact-box h3{
    color:var(--white);
    font-size:2rem;
    margin-bottom:4px;
}

.fact-box span{
    color:rgba(255, 255, 255, .72);
    font-size:.88rem;
    font-weight:500;
    letter-spacing:.3px;
}


/*==========================
    WELCOME SECTION
==========================*/
/*==========================
        NEW WELCOME
==========================*/

.welcome-section{

    padding:70px 0;

    background:#FFFFFF;

}

.welcome-grid{

    display:grid;

    grid-template-columns:45% 55%;

    align-items:center;

    gap:60px;

}

.welcome-image{

    position:relative;

}
.welcome-image img{

    width:100%;

    height:600px;

    object-fit:cover;

    object-position:center;

    border-radius:22px;

    display:block;

    box-shadow:0 25px 55px rgba(16, 42, 92, .18);

}


  
.experience-card{

    position:absolute;

    bottom:25px;

    left:25px;

    background:var(--accent);

    color:var(--primary-dark);

    padding:18px 28px;

    border-radius:18px;

}

.experience-card h2{

    color:#FFFFFF;

    font-size:36px;

}

.experience-card span{

    font-size:15px;

}

.welcome-content h2{

    font-size:42px;

    margin:20px 0;

    line-height:1.25;

}

.welcome-content p{

    margin-bottom:30px;

    font-size:17px;

}

.welcome-features{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-bottom:35px;

}

.welcome-feature{

    display:flex;

    align-items:flex-start;

    gap:15px;

    background:#FFFFFF;

    padding:18px;

    border-radius:15px;

    box-shadow:0 8px 30px rgba(16, 42, 92, .08);

    transition:.4s;

}

.welcome-feature:hover{

    transform:translateY(-6px);

}

.welcome-feature img{

    width:50px;

    height:50px;

    object-fit:contain;

}

.welcome-feature h4{

    margin-bottom:6px;

    font-size:18px;

}

.welcome-feature p{

    margin:0;

    font-size:14px;

}


/*==========================
    JOURNEY / TIMELINE
==========================*/

.journey-section{
    padding:90px 0;
    background:var(--light);
}

.journey-timeline{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:0;
    align-items:start;
}

.journey-card{
    background:var(--surface);
    border-radius:var(--radius);
    padding:30px 18px 24px;
    text-align:center;
    box-shadow:var(--shadow);
    position:relative;
    transition:var(--transition);
}

.journey-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-hover);
}

.journey-card.featured{
    background:var(--primary-dark);
}

.journey-card.featured h3,
.journey-card.featured p{
    color:var(--white);
}

.journey-card.featured p{
    color:rgba(255, 255, 255, .75);
}

.journey-circle{
    position:absolute;
    top:-16px;
    left:50%;
    transform:translateX(-50%);
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--accent);
    color:var(--primary-dark);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.78rem;
    font-weight:700;
}

.journey-icon{
    width:52px;
    height:52px;
    margin:14px auto 16px;
    border-radius:50%;
    background:rgba(236, 72, 153, .12);
    color:var(--secondary-dark);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
}

.journey-card.featured .journey-icon{
    background:rgba(236, 72, 153, .18);
    color:var(--accent);
}

.journey-card h3{
    font-size:1rem;
    margin-bottom:8px;
}

.journey-card p{
    font-size:.82rem;
}

.journey-arrow{
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gray-light);
    font-size:1rem;
}

/*=========================================
    WHY CHOOSE GERMAINE
==========================================*/

/*====================================
 WHY CHOOSE GERMAINE
====================================*/

.why-germaine{
    position:relative;
    padding:90px 0;
    background:
        linear-gradient(rgba(236, 72, 153, .90), rgba(236, 72, 153, .90)),
        url("../images/campus/graduation.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.why-germaine .section-heading{
    text-align:center;
    margin-bottom:50px;
}

.why-germaine .section-badge{
    display:inline-block;
    padding:8px 20px;
    background:rgba(236, 72, 153, .08);
    color:#EC4899;
    border:1px solid rgba(236, 72, 153, .28);
    border-radius:50px;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.why-germaine .section-heading h2{
    font-size:clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight:800;
    margin-bottom:14px;
    color:#102A5C;
    text-shadow:0 0 30px rgba(16, 42, 92, .12);
}

.why-germaine .section-heading h2 span{
    background:linear-gradient(100deg, #EC4899 0%, #102A5C 55%, #102A5C 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

.why-germaine .section-heading p{
    max-width:640px;
    margin:0 auto;
    font-size:1rem;
    line-height:1.7;
    color:#1A1A1A;
    font-weight:500;
}

.why-container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

/* IMAGE */
.why-image{
    position:relative;
}

.why-image img{
    width:100%;
    height:460px;
    object-fit:cover;
    border-radius:var(--radius-lg);
    box-shadow:0 35px 80px rgba(16, 42, 92, .30);
}

/* Floating Badge */
.floating-badge{
    position:absolute;
    bottom:26px;
    left:26px;
    background:var(--surface);
    padding:18px 24px;
    border-radius:var(--radius);
    box-shadow:var(--shadow-hover);
}

.floating-badge h3{
    color:var(--primary);
    font-size:1.8rem;
    margin-bottom:4px;
}

.floating-badge p{
    font-size:.85rem;
    color:var(--gray);
    max-width:150px;
}

/* FEATURES */
.why-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:13px;
}

/* Card footprint trimmed ~20-30% (padding/gap/icon/heading) per the
   site-wide "compact Why Choose Germaine" pass — colours, glass, border,
   radius, hover lift and layout are all unchanged. */
.feature-box{
    display:flex;
    align-items:flex-start;
    gap:10px;
    background:rgba(255, 255, 255, .08);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255, 255, 255, .16);
    border-radius:var(--radius);
    padding:13px;
    transition:var(--transition);
}

.feature-box:hover{
    transform:translateY(-6px);
    background:rgba(255, 255, 255, .14);
    border-color:rgba(236, 72, 153, .4);
}

.feature-icon{
    width:38px;
    height:38px;
    border-radius:12px;
    background:var(--accent);
    color:var(--primary-dark);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.98rem;
    flex-shrink:0;
}

.feature-box h3{
    color:var(--white);
    font-size:.9rem;
    margin-bottom:4px;
}

.feature-box p{
    font-size:.8rem;
    color:rgba(255, 255, 255, .7);
    line-height:1.45;
}

/* RESPONSIVE */
@media(max-width:991px){

    .why-container{
        grid-template-columns:1fr;
    }

    .why-content{
        grid-template-columns:1fr;
    }

    .why-image img{
        height:380px;
    }

}

@media(max-width:600px){

    .why-germaine .section-heading h2{
        font-size:1.6rem;
    }

    .why-germaine{
        padding:60px 0;
    }

}
/*==========================
    TESTIMONIALS (compact premium slideshow)
==========================*/

.testimonial-section.tst-premium{
    position:relative;
    padding:50px 0;
    overflow:hidden;
    background:
        radial-gradient(900px 560px at 12% 0%, rgba(236, 72, 153, .09), transparent 58%),
        radial-gradient(820px 560px at 90% 100%, rgba(16, 42, 92, .08), transparent 55%),
        radial-gradient(700px 500px at 50% 50%, rgba(16, 42, 92, .05), transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 55%, #FFFFFF 100%);
}
.tst-premium::before{  /* faint futuristic grid + drifting light streak */
    content:"";
    position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.6;
    background:
        linear-gradient(rgba(16, 42, 92, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 42, 92, .03) 1px, transparent 1px),
        linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .6) 49%, transparent 56%);
    background-size:44px 44px, 44px 44px, 200% 200%;
    animation:tstStreak 16s ease-in-out infinite;
}
@keyframes tstStreak{ 0%,100%{ background-position:0 0,0 0,0% 0%; } 50%{ background-position:0 0,0 0,100% 30%; } }
.tst-premium .container{ position:relative; z-index:1; }

/* heading */
.tst-heading{ text-align:center; max-width:640px; margin:0 auto 24px; }
.tst-badge{
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 16px; border-radius:50px; margin-bottom:14px;
    background:rgba(236, 72, 153, .08); border:1px solid rgba(236, 72, 153, .28);
    backdrop-filter:blur(10px);
    font-family:var(--font-button,'Montserrat',sans-serif); font-weight:700; font-size:.72rem;
    letter-spacing:1.4px; text-transform:uppercase; color:#EC4899;
}
.tst-title{
    font-family:var(--font-heading,'Poppins',sans-serif); font-weight:800;
    font-size:clamp(1.7rem,3.4vw,2.3rem); line-height:1.2; color:#102A5C; margin:0 0 10px;
    position:relative; display:inline-block;
}
.tst-title::after{
    content:""; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%) scaleX(1);
    width:64px; height:3px; border-radius:3px;
    background:linear-gradient(90deg,#EC4899,#EC4899 70%,#102A5C);
    animation:tstUnderline 3s ease-in-out infinite;
}
/* Was animating `width` (64px -> 96px) directly: layout-triggering, forced
   reflow every frame, infinite loop. Same 64px->96px growth, now via
   scaleX (1 -> 1.5) composited with the existing centering translateX, so
   it's transform-only. Percentage translate values resolve against the
   element's static (unscaled) box, so the centering stays correct at every
   scale step. */
@keyframes tstUnderline{ 0%,100%{ transform:translateX(-50%) scaleX(1); } 50%{ transform:translateX(-50%) scaleX(1.5); } }
.tst-grad{
    background:linear-gradient(100deg,#EC4899,#102A5C 60%,#102A5C);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.tst-sub{ font-size:.94rem; line-height:1.6; color:#102A5C; margin:0; }

/* stats row */
.tst-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:900px; margin:0 auto 28px; }
.tst-stat{
    display:flex; align-items:center; gap:10px; padding:14px 14px; border-radius:20px;
    background:rgba(255, 255, 255, .55); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
    border:1px solid rgba(255, 255, 255, .65); box-shadow:0 14px 34px rgba(16, 42, 92, .06);
    transition:transform .3s ease, box-shadow .3s ease;
}
.tst-stat:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(236, 72, 153, .14); }
.tst-stat i{ font-size:1.05rem; color:#EC4899; flex-shrink:0; }
.tst-stat strong{
    display:block; font-family:var(--font-heading,'Poppins',sans-serif); font-weight:800; font-size:1.3rem; line-height:1.1; color:#EC4899;
}
.tst-stat span{ font-size:.7rem; color:#102A5C; font-weight:600; }

/* carousel shell */
.testimonial-compact{
    position:relative; max-width:1080px; margin:0 auto; padding:0 52px;
}
.tst-viewport{ overflow:hidden; border-radius:24px; }
.testimonial-track{
    display:flex; align-items:stretch;
    transition:transform .5s cubic-bezier(.25,.8,.25,1);
}

/* individual card */
.testimonial-slide{
    flex:0 0 33.333%; box-sizing:border-box; padding:8px;
}
.testimonial-slide > *{ position:relative; }
.testimonial-slide{
    position:relative;
}
.testimonial-slide::before{  /* the actual glass card surface */
    content:""; position:absolute; inset:8px; z-index:0; border-radius:24px;
    background:rgba(255, 255, 255, .6);
    backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);
    border:1px solid rgba(255, 255, 255, .7);
    box-shadow:0 20px 50px rgba(16, 42, 92, .08);
    transition:transform .35s ease, box-shadow .35s ease, background .35s ease;
}
.testimonial-slide:hover::before{
    transform:translateY(-4px);
    background:rgba(255, 255, 255, .8);
    box-shadow:0 26px 60px rgba(16, 42, 92, .12), 0 0 30px rgba(236, 72, 153, .16);
}
/* travelling neon border removed — cards now stay static, keeping only
   the elevation + shadow hover effect above */
.testimonial-slide > .testimonial-quote-mark,
.testimonial-slide > .testimonial-stars,
.testimonial-slide > p,
.testimonial-slide > .testimonial-author{ position:relative; z-index:2; }

.testimonial-quote-mark{
    display:block;
    font-family:var(--font-heading,'Poppins',sans-serif);
    font-size:3.6rem; line-height:1; color:#EC4899; opacity:.08; font-weight:800;
    user-select:none; margin:14px 0 -12px 18px;
}

.testimonial-stars{
    display:flex; align-items:center; gap:3px;
    padding:0 22px; margin-bottom:8px; color:#EC4899; font-size:.68rem;
    filter:drop-shadow(0 0 4px rgba(236, 72, 153, .35));
}

.testimonial-slide p{
    font-size:.86rem; line-height:1.55; color:#102A5C; font-weight:500;
    padding:0 22px; margin:0 0 14px;
    display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;
}

.testimonial-author{
    display:flex; align-items:center; gap:10px; padding:0 22px 20px;
}

.testimonial-avatar{
    width:34px; height:34px; border-radius:50%; object-fit:cover;
    border:2px solid #EC4899; flex-shrink:0;
}

.testimonial-avatar-initials{
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-heading,'Poppins',sans-serif); font-weight:700; font-size:.72rem;
    color:#EC4899; background:rgba(236, 72, 153, .12);
}

.testimonial-author > div{ text-align:left; min-width:0; }

.testimonial-name{ display:block; font-weight:700; color:#102A5C; font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.testimonial-role{ display:block; font-size:.68rem; color:#102A5C; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* dots */
.testimonial-dots{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:20px; }
.t-dot{
    width:8px; height:8px; border-radius:50px;
    background:rgba(255, 255, 255, .9); border:1px solid rgba(16, 42, 92, .12);
    box-shadow:0 2px 8px rgba(16, 42, 92, .08);
    transition:var(--transition); cursor:pointer;
}
.t-dot.active{ width:24px; background:linear-gradient(90deg,#EC4899,#102A5C); border-color:transparent; box-shadow:0 0 10px rgba(236, 72, 153, .45); }

/* glass nav buttons */
.testimonial-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:42px; height:42px; border-radius:50%;
    background:rgba(255, 255, 255, .6); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255, 255, 255, .7); box-shadow:0 10px 26px rgba(16, 42, 92, .1);
    color:#102A5C; display:flex; align-items:center; justify-content:center;
    font-size:.82rem; transition:var(--transition); z-index:3;
}
.testimonial-nav:hover{
    background:linear-gradient(135deg,#EC4899,#102A5C); color:#FFFFFF;
    box-shadow:0 0 22px rgba(236, 72, 153, .4); transform:translateY(-50%) scale(1.08);
}
.testimonial-nav.prev{ left:0; }
.testimonial-nav.next{ right:0; }

/* trusted partners strip */
.tst-partners{
    max-width:1080px; margin:32px auto 0; padding:22px 28px; border-radius:22px;
    background:rgba(255, 255, 255, .5); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255, 255, 255, .65); box-shadow:0 16px 40px rgba(16, 42, 92, .06);
    text-align:center;
}
.tst-partners-label{
    display:block; font-size:.7rem; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
    color:#102A5C; margin-bottom:14px;
}
.tst-partners-logos{ display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; }
.tst-partners-logos img{ height:26px; width:auto; object-fit:contain; opacity:.75; filter:grayscale(35%); transition:var(--transition); }
.tst-partners-logos img:hover{ opacity:1; filter:none; transform:translateY(-2px); }

@media(max-width:992px){
    .testimonial-slide{ flex-basis:50%; }
    .tst-stats{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:640px){
    .testimonial-slide{ flex-basis:100%; }
    .testimonial-compact{ padding:0 44px; }
    .testimonial-quote-mark{ font-size:2.8rem; }
    .tst-partners-logos{ gap:18px; }
    .tst-partners-logos img{ height:20px; }
}

@media (prefers-reduced-motion: reduce){
    .tst-premium::before, .tst-title::after, .testimonial-slide::after{ animation:none !important; }
}

/*==========================
    CTA SECTION
==========================*/

.cta-section{
    padding:70px 0;
}

.cta-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    flex-wrap:wrap;
    background:linear-gradient(120deg, var(--secondary-dark), var(--secondary));
    color:var(--white);
    padding:50px 56px;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-hover);
}

.cta-content span{
    display:inline-block;
    font-size:.8rem;
    font-weight:700;
    letter-spacing:1.6px;
    color:rgba(255, 255, 255, .85);
    margin-bottom:12px;
}

.cta-content h2{
    color:var(--white);
    font-size:clamp(1.5rem,2.6vw,2rem);
    margin-bottom:10px;
}

.cta-content p{
    color:rgba(255, 255, 255, .85);
    max-width:460px;
}

.cta-buttons{
    display:flex;
    gap:16px;
    flex-shrink:0;
    flex-wrap:wrap;
}

.cta-buttons .btn-primary{
    background:var(--surface);
    color:var(--secondary-dark);
    box-shadow:0 12px 26px rgba(16, 42, 92, .18);
}

.cta-buttons .btn-primary:hover{
    background:var(--primary-dark);
    color:var(--white);
}

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

.footer{
    background:var(--primary-dark);
    color:rgba(255, 255, 255, .75);
}

.newsletter{
    background:var(--primary);
    padding:40px 0;
}

.newsletter-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    flex-wrap:wrap;
}

.newsletter-text h2{
    color:var(--white);
    font-size:1.4rem;
    margin-bottom:6px;
}

.newsletter-text p{
    color:rgba(255, 255, 255, .75);
    font-size:.92rem;
}

.newsletter-form{
    display:flex;
    background:var(--surface);
    border-radius:50px;
    padding:5px;
    width:100%;
    max-width:420px;
}

.newsletter-form input{
    flex:1;
    padding:12px 20px;
    border-radius:50px;
    font-size:.92rem;
    color:var(--dark);
}

.newsletter-form button{
    padding:12px 26px;
    background:var(--secondary);
    color:var(--white);
    border-radius:50px;
    font-weight:600;
    font-size:.9rem;
    transition:var(--transition);
    flex-shrink:0;
}

.newsletter-form button:hover{
    background:var(--primary-dark);
    color:var(--white);
}

/* The .newsletter--section in-flow card variant was removed along with the
   homepage "Stay Updated" section. The base .newsletter component above is
   still used by the footer on every other page. */

.footer-main{
    padding:70px 0 40px;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr 1.1fr;
    gap:24px;
    align-items:start;
}

/* each footer column is its own glass card — travelling border-light
   removed, keeping only the static border + hover elevation/glow */
.footer-column{
    position:relative; isolation:isolate; overflow:hidden;
    background:rgba(255, 255, 255, .06);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255, 255, 255, .14);
    border-radius:26px;
    padding:28px 26px;
    transition:transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.footer-column:hover{
    transform:translateY(-6px);
    border-color:rgba(236, 72, 153, .4);
    box-shadow:0 0 32px rgba(236, 72, 153, .22);
}
.footer-column > *{ position:relative; z-index:1; }

.footer-logo{
    height:52px;
    width:auto;
    margin-bottom:18px;
}

.footer-column p{
    color:rgba(255, 255, 255, .65);
    font-size:.9rem;
    margin-bottom:20px;
}

.footer-column h3{
    color:var(--accent);
    font-family:var(--font-heading);
    font-size:1.02rem;
    margin-bottom:22px;
    position:relative;
    padding-bottom:12px;
}

.footer-column h3::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:34px;
    height:2px;
    background:var(--secondary);
}

.footer-column ul{ list-style:none; margin:0; padding:0; }
.footer-column ul li{
    margin-bottom:12px;
}

.footer-column ul li a{
    color:rgba(255, 255, 255, .65);
    font-size:.9rem;
    transition:var(--transition);
}

.footer-column ul li a:hover{
    color:var(--accent);
    padding-left:4px;
}

/* Quick Links — flowing pill row instead of a plain vertical list */
.footer-column:nth-of-type(2) ul{
    display:flex; flex-wrap:wrap; gap:10px;
}
.footer-column:nth-of-type(2) ul li{ margin-bottom:0; }
.footer-column:nth-of-type(2) ul li a{
    display:inline-block;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(255, 255, 255, .07);
    border:1px solid rgba(255, 255, 255, .12);
}
.footer-column:nth-of-type(2) ul li a:hover{
    background:var(--accent);
    color:#FFFFFF;
    padding-left:14px;
}

.footer-social{
    display:flex;
    gap:12px;
}

.footer-social a{
    width:44px;
    height:44px;
    border-radius:50%;
    background:rgba(255, 255, 255, .08);
    border:1px solid rgba(255, 255, 255, .14);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--white);
    transition:var(--transition);
}

.footer-social a:hover{
    background:var(--secondary);
    border-color:var(--secondary);
    transform:translateY(-4px);
    box-shadow:0 0 18px rgba(236, 72, 153, .4);
}

.contact-list li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    font-size:.9rem;
    color:rgba(255, 255, 255, .65);
    margin-bottom:18px;
}

.contact-list i{
    color:var(--secondary);
    margin-top:3px;
    flex-shrink:0;
}

@media(max-width:992px){
    .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:640px){
    .footer-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
    .footer-column::before{ animation:none; }
}

.footer-map{
    width:100%;
    height:260px;
    line-height:0;
    border-top:1px solid rgba(255, 255, 255, .08);
    border-bottom:1px solid rgba(255, 255, 255, .08);
}

.footer-map iframe{
    width:100%;
    height:100%;
    border:0;
    filter:grayscale(.3);
}

.footer-bottom{
    padding:22px 0;
}

.footer-bottom-content{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    font-size:.85rem;
    color:rgba(255, 255, 255, .55);
}

.footer-bottom-content strong{
    color:rgba(255, 255, 255, .8);
}

/*==========================
    BACK TO TOP
==========================*/

.back-to-top{
    position:fixed;
    right:24px;
    bottom:92px;
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--accent);
    color:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-hover);
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:var(--transition);
    z-index:997;
}

.back-to-top.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.back-to-top:hover{
    background:var(--pink-light, var(--accent));
    box-shadow:0 0 26px rgba(236, 72, 153, .5), var(--shadow-hover);
    transform:translateY(-3px);
}

/*==========================
    SCROLL REVEAL / MOTION HOOKS
==========================*/

[data-animate]{
    opacity:0;
    transform:translateY(12px);
    transition:opacity .32s ease, transform .32s ease;
}

[data-animate].show{
    opacity:1;
    transform:translateY(0);
}

.ripple{
    position:absolute;
    border-radius:50%;
    background:rgba(255, 255, 255, .5);
    transform:scale(0);
    animation:rippleAnim .6s linear;
    pointer-events:none;
}

@keyframes rippleAnim{
    to{
        transform:scale(3);
        opacity:0;
    }
}

.btn-primary,
.btn-secondary,
.apply-btn,
.announcement-link{
    position:relative;
    overflow:hidden;
}

/*==========================
    FORMS (contact / admissions)
==========================*/

.input-error{
    outline:2px solid #EC4899 !important;
}

.form-card{
    background:var(--surface);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-hover);
    padding:44px;
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:20px;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:20px;
}

.form-group label{
    font-size:.88rem;
    font-weight:600;
    color:var(--primary-dark);
}

.form-group input,
.form-group select,
.form-group textarea{
    padding:14px 16px;
    border:1.5px solid rgba(236, 72, 153, .15);
    border-radius:var(--radius-sm);
    font-size:.94rem;
    color:var(--dark);
    background:var(--light);
    transition:var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:var(--secondary);
    background:var(--surface);
    outline:none;
    box-shadow:0 0 18px rgba(236, 72, 153, .25);
}

.form-group textarea{
    resize:vertical;
    min-height:130px;
}

.form-submit{
    width:100%;
    justify-content:center;
    border:none;
}

.form-note{
    font-size:.82rem;
    color:var(--gray-light);
    margin-top:14px;
    text-align:center;
}

/*==========================
    INTERNAL PAGE HEADER (banner)
==========================*/

.page-header{
    position:relative;
    background:linear-gradient(135deg, var(--primary-dark), var(--primary) 65%, var(--primary-light));
    color:var(--white);
    padding:36px 0 50px;
    overflow:hidden;
}

.page-header::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 85% 20%, rgba(236, 72, 153, .22), transparent 50%),
               radial-gradient(circle at 10% 90%, rgba(236, 72, 153, .14), transparent 45%);
}

.page-header-content{
    position:relative;
    z-index:1;
    text-align:center;
}

.page-header .section-tag{
    background:rgba(255, 255, 255, .12);
    border-color:rgba(255, 255, 255, .25);
    color:var(--white);
}

.page-header h1{
    color:var(--white);
    font-size:clamp(2rem,4vw,2.8rem);
    margin:16px 0 14px;
}

.page-header p{
    color:rgba(255, 255, 255, .8);
    max-width:600px;
    margin:0 auto;
}

.breadcrumb{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:20px;
    font-size:.88rem;
    color:rgba(255, 255, 255, .7);
}

.breadcrumb a{
    color:rgba(255, 255, 255, .9);
    font-weight:500;
}

.breadcrumb a:hover{ color:var(--accent); }

/*==========================
    GENERIC CONTENT SECTION
==========================*/

.content-section{
    padding:64px 0;
}

.content-section.alt{
    background:var(--light);
}

.two-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.two-col img{
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-hover);
    aspect-ratio:4/3;
    object-fit:cover;
}

.two-col h2{
    font-size:clamp(1.6rem,2.8vw,2.2rem);
    margin-bottom:18px;
}

.two-col p{
    margin-bottom:16px;
}

/*==========================
    VALUES / MVV CARDS (about page)
==========================*/

.values-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}

.value-card{
    background:var(--surface);
    border:1px solid rgba(236, 72, 153, .08);
    border-radius:var(--radius);
    padding:34px 28px;
    text-align:center;
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.value-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-hover);
}

.value-card i{
    width:58px;
    height:58px;
    margin:0 auto 18px;
    border-radius:50%;
    background:rgba(236, 72, 153, .12);
    color:var(--secondary-dark);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4rem;
}

.value-card h3{
    font-size:1.08rem;
    margin-bottom:10px;
}

.value-card p{
    font-size:.92rem;
}

/*==========================
    TEAM
==========================*/

.team-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:26px;
}

.team-card{
    background:var(--surface);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    text-align:center;
    transition:var(--transition);
}

.team-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-hover);
}

.team-card img{
    aspect-ratio:1/1;
    object-fit:cover;
}

.team-card-content{
    padding:20px;
}

.team-card-content h4{
    font-size:1rem;
    margin-bottom:4px;
}

.team-card-content span{
    font-size:.82rem;
    color:var(--secondary-dark);
    font-weight:600;
}

/*==========================
    PROCESS STEPS (admissions)
==========================*/

.steps-list{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.step-item{
    display:flex;
    gap:20px;
    align-items:flex-start;
    background:var(--surface);
    border:1px solid rgba(236, 72, 153, .08);
    border-radius:var(--radius);
    padding:26px;
    box-shadow:var(--shadow);
}

.step-num{
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--secondary);
    color:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    flex-shrink:0;
}

.step-item h4{
    font-size:1.02rem;
    margin-bottom:6px;
}

.step-item p{
    font-size:.92rem;
}

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

.requirements-list li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:12px 0;
    border-bottom:1px dashed rgba(236, 72, 153, .12);
    font-size:.94rem;
    color:var(--dark);
}

.requirements-list li:last-child{ border-bottom:none; }

.requirements-list i{
    color:var(--secondary);
    margin-top:3px;
}

.faq-item{
    background:var(--surface);
    border:1px solid rgba(236, 72, 153, .08);
    border-radius:var(--radius);
    margin-bottom:14px;
    overflow:hidden;
}

.faq-question{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:20px 24px;
    font-weight:600;
    font-size:.96rem;
    color:var(--primary-dark);
    cursor:pointer;
}

.faq-question i{
    color:var(--secondary);
    transition:var(--transition);
}

.faq-item.open .faq-question i{
    transform:rotate(180deg);
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
    padding:0 24px;
}

.faq-item.open .faq-answer{
    max-height:240px;
    padding:0 24px 20px;
}

.faq-answer p{
    font-size:.9rem;
}

/*==========================
    GALLERY (campus page)
==========================*/

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:200px;
    gap:18px;
}

.gallery-item{
    position:relative;
    border-radius:var(--radius);
    overflow:hidden;
}

.gallery-item.tall{ grid-row:span 2; }
.gallery-item.wide{ grid-column:span 2; }

.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:var(--transition);
}

.gallery-item:hover img{
    transform:scale(1.08);
}

.gallery-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(0deg, rgba(16, 42, 92, .85), transparent 55%);
    display:flex;
    align-items:flex-end;
    padding:18px;
    opacity:0;
    transition:var(--transition);
}

.gallery-item:hover .gallery-overlay{
    opacity:1;
}

.gallery-overlay span{
    color:var(--white);
    font-weight:600;
    font-size:.92rem;
}

/*==========================
    NEWS CARDS
==========================*/

.news-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.news-card{
    background:var(--surface);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.news-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-hover);
}

.news-image{
    height:200px;
    overflow:hidden;
}

.news-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:var(--transition);
}

.news-card:hover .news-image img{
    transform:scale(1.08);
}

.news-content{
    padding:24px 24px 28px;
}

.news-date{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:.78rem;
    font-weight:700;
    color:var(--secondary-dark);
    letter-spacing:.4px;
    margin-bottom:12px;
    text-transform:uppercase;
}

.news-content h3{
    font-size:1.08rem;
    margin-bottom:10px;
}

.news-content p{
    font-size:.9rem;
    margin-bottom:16px;
}

.news-link{
    font-size:.88rem;
    font-weight:600;
    color:var(--primary-dark);
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:var(--transition);
}

.news-link:hover{
    gap:12px;
    color:var(--secondary-dark);
}

/*==========================
    CONTACT PAGE INFO CARDS
==========================*/

.contact-info-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
    margin-bottom:70px;
}

.contact-info-card{
    background:var(--surface);
    border:1px solid rgba(236, 72, 153, .08);
    border-radius:var(--radius);
    padding:32px 26px;
    text-align:center;
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.contact-info-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-hover);
}

.contact-info-card i{
    width:56px;
    height:56px;
    margin:0 auto 18px;
    border-radius:50%;
    background:rgba(236, 72, 153, .12);
    color:var(--secondary-dark);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
}

.contact-info-card h3{
    font-size:1.02rem;
    margin-bottom:8px;
}

.contact-info-card p{
    font-size:.9rem;
}

.contact-map{
    width:100%;
    height:420px;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-hover);
    line-height:0;
}

.contact-map iframe{
    width:100%;
    height:100%;
    border:0;
}

/*==========================
    COURSE CATALOG (filterable)
==========================*/

.catalog-toolbar{
    background:var(--surface);
    border-bottom:1px solid rgba(236, 72, 153, .08);
    padding:22px 0;
    box-shadow:0 6px 20px rgba(236, 72, 153, .05);
}

.catalog-search{
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--light);
    border:1.5px solid rgba(236, 72, 153, .1);
    border-radius:50px;
    padding:12px 20px;
    margin-bottom:18px;
    max-width:520px;
}

.catalog-search i{
    color:var(--gray-light);
}

.catalog-search input{
    flex:1;
    background:transparent;
    font-size:.94rem;
    color:var(--dark);
}

.catalog-pills{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:16px;
}

.filter-pill{
    padding:9px 18px;
    border-radius:50px;
    background:var(--light-2);
    color:var(--primary-dark);
    font-size:.82rem;
    font-weight:600;
    border:1.5px solid transparent;
    transition:var(--transition);
    white-space:nowrap;
}

.filter-pill:hover{
    border-color:var(--secondary);
}

.filter-pill.active{
    background:var(--primary-dark);
    color:var(--white);
}

.catalog-level-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
}

.catalog-level-row span{
    font-size:.8rem;
    font-weight:700;
    color:var(--gray);
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-right:4px;
}

.level-pill{
    padding:7px 15px;
    border-radius:50px;
    font-size:.78rem;
    font-weight:600;
    background:transparent;
    color:var(--gray);
    border:1.5px solid rgba(236, 72, 153, .14);
    transition:var(--transition);
}

.level-pill:hover{
    border-color:var(--secondary);
    color:var(--secondary-dark);
}

.level-pill.active{
    background:var(--secondary);
    border-color:var(--secondary);
    color:var(--white);
}

.catalog-results{
    padding:40px 0 90px;
}

.catalog-count{
    font-size:.92rem;
    color:var(--gray);
    margin-bottom:26px;
}

.catalog-count strong{
    color:var(--primary-dark);
}

.catalog-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.course-card-mini{
    background:var(--surface);
    border:1px solid rgba(236, 72, 153, .08);
    border-radius:var(--radius);
    padding:24px 22px;
    box-shadow:var(--shadow);
    transition:var(--transition);
    display:flex;
    flex-direction:column;
    gap:14px;
}

.course-card-mini:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-hover);
    border-color:transparent;
}

.course-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.course-level-tag{
    display:inline-block;
    padding:4px 12px;
    border-radius:50px;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    flex-shrink:0;
    white-space:nowrap;
}

.course-level-tag.diploma{ background:rgba(236, 72, 153, .14); color:var(--secondary-dark); }
.course-level-tag.certificate{ background:rgba(236, 72, 153, .12); color:var(--primary-light); }
.course-level-tag.craft{ background:rgba(236, 72, 153, .18); color:#EC4899; }
.course-level-tag.artisan{ background:rgba(236, 72, 153, .10); color:var(--primary-dark); }
.course-level-tag.short{ background:rgba(16, 42, 92, .18); color:var(--gray); }

.course-card-mini h4{
    font-size:.98rem;
    line-height:1.4;
    color:var(--primary-dark);
}

.course-school-label{
    font-size:.76rem;
    color:var(--secondary-dark);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.3px;
}

.course-entry{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.82rem;
    color:var(--gray);
    margin-top:auto;
}

.course-entry i{
    color:var(--secondary);
    flex-shrink:0;
}

.course-apply-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 0;
    border-radius:50px;
    background:var(--light-2);
    color:var(--primary-dark);
    font-size:.84rem;
    font-weight:600;
    transition:var(--transition);
}

.course-apply-btn:hover{
    background:var(--secondary);
    color:var(--white);
}

.catalog-empty{
    text-align:center;
    padding:60px 20px;
    color:var(--gray);
    display:none;
}

.catalog-empty.show{
    display:block;
}

.catalog-empty i{
    font-size:2.4rem;
    color:var(--gray-light);
    margin-bottom:16px;
}

.load-more-wrap{
    text-align:center;
    margin-top:36px;
}

/*==========================
    COURSE CATEGORY OVERVIEW (FAEL-style)
==========================*/

.category-intro-search{
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--surface);
    border:1.5px solid rgba(236, 72, 153, .1);
    border-radius:50px;
    padding:14px 24px;
    max-width:560px;
    margin:0 auto 50px;
    box-shadow:var(--shadow);
}

.category-intro-search i{
    color:var(--gray-light);
}

.category-intro-search input{
    flex:1;
    background:transparent;
    font-size:.96rem;
    color:var(--dark);
}

.category-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.category-card{
    background:var(--surface);
    border:1px solid rgba(236, 72, 153, .08);
    border-radius:var(--radius);
    padding:30px 26px 26px;
    text-align:center;
    box-shadow:var(--shadow);
    transition:var(--transition);
    position:relative;
    display:flex;
    flex-direction:column;
    height:100%;
    overflow:hidden;
}

.category-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-hover);
    border-color:transparent;
}

.category-photo{
    width:84px;
    height:84px;
    margin:0 auto 18px;
    border-radius:16px;
    overflow:hidden;
    border:2.5px solid var(--accent);
    box-shadow:0 8px 18px rgba(236, 72, 153, .18);
    flex-shrink:0;
}

.category-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:var(--transition);
}

.category-card:hover .category-photo img{
    transform:scale(1.05);
}

.category-card h3{
    font-size:1rem;
    line-height:1.35;
    margin-bottom:4px;
    min-height:2.7em;
    position:relative;
    display:inline-block;
}

.category-card h3::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-6px;
    width:0;
    height:2px;
    background:var(--accent);
    transition:width .35s ease, left .35s ease;
}

.category-card:hover h3::after{
    width:46px;
    left:calc(50% - 23px);
}

.category-count{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.78rem;
    font-weight:700;
    color:var(--secondary-dark);
    background:rgba(236, 72, 153, .10);
    padding:5px 13px;
    border-radius:50px;
    margin:14px 0 12px;
}

.category-facts{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:.8rem;
    color:var(--gray);
    margin-bottom:20px;
    padding-top:12px;
    border-top:1px dashed rgba(236, 72, 153, .12);
}

.category-facts span{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
}

.category-facts i{
    color:var(--accent-dark);
    width:14px;
}

.category-facts .category-fee{
    font-weight:700;
    color:var(--primary-dark);
}

.category-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:.84rem;
    font-weight:700;
    color:var(--white);
    background:var(--primary);
    padding:11px 20px;
    border-radius:50px;
    transition:var(--transition);
    margin-top:auto;
}

.category-card:hover .category-link{
    gap:12px;
    background:var(--accent);
    color:var(--white);
}

.category-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:var(--radius);
}

@media(max-width:992px){
    .category-grid{ grid-template-columns:repeat(2,1fr); }
}

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

/*==========================
    SCHOOL COURSE LIST PAGE
==========================*/

/*==================================================
    PREMIUM SCHOOLS SECTION
==================================================*/

.schools-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}

.school-card{
    background:var(--surface);
    border:1px solid rgba(236, 72, 153, .08);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:var(--transition);
    display:flex;
    flex-direction:column;
}

.school-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-hover);
    border-color:transparent;
}

.school-top{
    padding:28px 20px 22px;
    text-align:center;
    color:var(--white);
    background:linear-gradient(135deg, var(--primary), var(--primary-light));
    position:relative;
}

.school-top-img{
    display:block;
    width:64px;
    height:64px;
    margin:0 auto 14px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid var(--accent);
    box-shadow:0 8px 20px rgba(16, 42, 92, .25);
}

.school-top h3{
    color:var(--white);
    font-size:1.2rem;
    margin:0;
}

.school-info{
    padding:20px 22px;
}

.school-info div{
    display:flex;
    justify-content:space-between;
    padding:10px 0;
    border-bottom:1px solid rgba(236, 72, 153, .08);
    font-size:.88rem;
}

.school-info div:last-child{
    border-bottom:none;
}

.school-info strong{
    color:var(--primary);
    font-weight:600;
}

.school-info span{
    color:var(--gray);
}

.school-btn{
    margin:6px 22px 22px;
    padding:12px;
    background:var(--accent);
    color:var(--primary-dark);
    text-align:center;
    border-radius:50px;
    text-decoration:none;
    font-weight:700;
    font-size:.9rem;
    transition:var(--transition);
}

.school-btn:hover{
    background:var(--primary);
    color:var(--white);
}

.explore-card{
    background:linear-gradient(135deg, var(--primary-dark), var(--primary));
    color:var(--white);
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:40px 30px;
}

.explore-card h3{
    color:var(--white);
    font-size:1.5rem;
    margin-bottom:14px;
}

.explore-card p{
    color:rgba(255, 255, 255, .8);
    margin-bottom:24px;
    font-size:.92rem;
}

.explore-btn,
.join-btn{
    display:block;
    margin:10px auto;
    padding:13px 28px;
    border-radius:50px;
    text-decoration:none;
    font-weight:700;
    font-size:.88rem;
    width:220px;
    transition:var(--transition);
}

.explore-btn{
    background:var(--surface);
    color:var(--primary-dark);
}

.explore-btn:hover{
    background:var(--accent);
    color:var(--primary-dark);
}

.join-btn{
    background:var(--accent);
    color:var(--primary-dark);
    border:1.5px solid rgba(255, 255, 255, .4);
}

.join-btn:hover{
    background:transparent;
    color:var(--white);
    border-color:var(--white);
}

@media(max-width:992px){
.schools-grid{
grid-template-columns:repeat(2,1fr);
}
}

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

/* ==========================
   INDUSTRY RECOGNITION (compact logo carousel)
   Blue theme per brief: deep Germaine blue background,
   pure-white high-contrast text, frosted glass logo cards,
   electric-blue/cyan travelling border light.
========================== */

.industry-recognition{
    position:relative;
    padding:44px 0;
    background:linear-gradient(155deg, #102A5C 0%, #102A5C 55%, #102A5C 100%);
    border-top:1px solid rgba(255, 255, 255, .14);
    border-bottom:1px solid rgba(255, 255, 255, .14);
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 70px rgba(16, 42, 92, .35);
    overflow:hidden;
    isolation:isolate;
}
/* premium background depth: large, very low-opacity floating glass
   rectangles + soft blue gradients (3-6% opacity, gentle movement) */
.industry-recognition::before{
    content:""; position:absolute; inset:-15%; z-index:-1; pointer-events:none;
    background:
        linear-gradient(120deg, transparent 28%, rgba(16, 42, 92, .05) 28%, rgba(16, 42, 92, .05) 42%, transparent 42%),
        linear-gradient(60deg, transparent 62%, rgba(16, 42, 92, .04) 62%, rgba(16, 42, 92, .04) 74%, transparent 74%),
        radial-gradient(circle at 15% 20%, rgba(16, 42, 92, .08), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(16, 42, 92, .06), transparent 45%);
    filter:blur(50px);
    animation:irDrift 42s ease-in-out infinite alternate;
}
@keyframes irDrift{
    0%{ transform:translate(0,0) scale(1); }
    100%{ transform:translate(2%,-2%) scale(1.04); }
}
@media (prefers-reduced-motion: reduce){
    .industry-recognition::before{ animation:none; }
}

.ir-heading{
    position:relative; z-index:1;
    text-align:center;
    margin-bottom:20px;
}

.ir-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 18px;
    background:rgba(255, 255, 255, .12);
    color:#FFFFFF;
    border:1px solid rgba(255, 255, 255, .32);
    border-radius:50px;
    font-size:.74rem;
    font-weight:700;
    letter-spacing:1.4px;
    text-transform:uppercase;
    margin-bottom:10px;
    backdrop-filter:blur(10px);
}

.ir-heading h2{
    font-size:1.15rem;
    color:#FFFFFF;
    font-weight:700;
}

.ir-carousel-wrap{
    position:relative; z-index:1;
    display:flex; align-items:center; gap:14px;
    max-width:1180px; margin:0 auto;
    padding:0 8px;
}
.ir-nav-btn{
    flex-shrink:0; width:46px; height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255, 255, 255, .1); border:1px solid rgba(255, 255, 255, .28);
    color:#FFFFFF; font-size:.95rem; cursor:pointer;
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    box-shadow:0 8px 22px rgba(16, 42, 92, .3);
    transition:var(--transition);
}
.ir-nav-btn:hover{
    background:linear-gradient(135deg,#102A5C,#102A5C);
    border-color:rgba(16, 42, 92, .6);
    box-shadow:0 10px 28px rgba(16, 42, 92, .4);
    transform:translateY(-2px) scale(1.05);
}
.ir-carousel-wrap .logo-carousel{ flex:1; min-width:0; }
.logo-track.manual{ animation-play-state:paused; transition:transform .5s cubic-bezier(.25,.8,.25,1); }

@media(max-width:600px){
    .ir-nav-btn{ width:38px; height:38px; font-size:.82rem; }
    .ir-carousel-wrap{ gap:8px; }
}

.logo-carousel{
    position:relative; z-index:1;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #102A5C 8%, #102A5C 92%, transparent);
    mask-image:linear-gradient(90deg, transparent, #102A5C 8%, #102A5C 92%, transparent);
}

.logo-track{
    display:flex;
    align-items:center;
    gap:16px;
    width:max-content;
    animation:logoScroll 28s linear infinite;
    cursor:grab;
}

.logo-track.dragging{
    animation-play-state:paused;
    cursor:grabbing;
}

.logo-carousel:hover .logo-track{
    animation-play-state:paused;
}

.logo-item{
    position:relative;
    isolation:isolate;
    flex-shrink:0;
    width:150px;
    height:90px;
    background:rgba(255, 255, 255, .14);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    border:1.5px solid rgba(255, 255, 255, .3);
    border-radius:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px 20px;
    transition:var(--transition);
    overflow:hidden;
}
/* travelling border light removed — hover now relies on the
   shadow/background change below only */
.logo-item:hover{
    border-color:rgba(255, 255, 255, .55);
    background:rgba(255, 255, 255, .22);
    box-shadow:0 10px 26px rgba(16, 42, 92, .3), 0 0 22px rgba(16, 42, 92, .35);
    transform:translateY(-4px);
}

.logo-item img{
    position:relative; z-index:1;
    max-width:100%;
    max-height:44px;
    width:auto;
    object-fit:contain;
    filter:grayscale(0) brightness(1.05);
    opacity:.94;
    transition:var(--transition);
}

.logo-item:hover img{
    filter:grayscale(0) brightness(1.1);
    opacity:1;
}

.logo-item::after{
    content:attr(data-tooltip);
    position:absolute;
    bottom:calc(100% + 10px);
    left:50%;
    transform:translateX(-50%) translateY(4px);
    background:#FFFFFF;
    color:var(--primary-dark);
    font-size:.72rem;
    font-weight:600;
    padding:7px 12px;
    border-radius:8px;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:var(--transition);
    z-index:5;
    box-shadow:0 8px 20px rgba(16, 42, 92, .25);
}

.logo-item:hover::after{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}

@keyframes logoScroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}

.ir-strip{
    position:relative; z-index:1;
    text-align:center;
    margin-top:20px;
    font-size:.82rem;
    font-weight:600;
    color:rgba(255, 255, 255, .85);
}

.ir-strip i{
    color:#102A5C;
    margin-right:5px;
}

.ir-strip .sep{
    margin:0 12px;
    color:rgba(255, 255, 255, .3);
}

@media(max-width:768px){

    .logo-item{
        width:120px;
        height:76px;
        padding:12px 16px;
    }

    .ir-strip .sep{
        display:none;
    }

    .ir-strip{
        display:flex;
        flex-direction:column;
        gap:6px;
    }

}

/*=========================================================
    PRINCIPAL'S REMARKS (COURSES PAGE)
=========================================================*/

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

.principal-card{
    display:grid;
    grid-template-columns:220px 1fr;
    align-items:center;
    gap:44px;
    background:var(--surface);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    padding:40px 48px;
    position:relative;
    overflow:hidden;
}

.principal-card::before{
    content:"";
    position:absolute;
    inset:0 auto auto 0;
    width:6px;
    height:100%;
    background:linear-gradient(180deg, var(--accent), var(--accent-dark));
}

.principal-portrait{
    position:relative;
    width:200px;
    height:200px;
    margin:0 auto;
}

.principal-portrait img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;
    border-radius:50%;
    border:4px solid var(--accent);
    box-shadow:0 14px 30px rgba(236, 72, 153, .18);
}

.principal-portrait::after{
    content:"";
    position:absolute;
    inset:-10px;
    border:1.5px solid rgba(236, 72, 153, .35);
    border-radius:50%;
    pointer-events:none;
}

.principal-message{
    position:relative;
}

.principal-quote-mark{
    display:block;
    font-family:var(--font-heading);
    font-size:3.6rem;
    line-height:1;
    color:var(--accent);
    opacity:.4;
    margin-bottom:-14px;
}

.principal-message p{
    font-size:1.02rem;
    line-height:1.85;
    color:var(--gray);
    max-width:700px;
}

.principal-signature{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid var(--light-2);
}

.principal-name{
    display:block;
    font-family:var(--font-heading);
    font-weight:700;
    color:var(--primary);
    font-size:1.05rem;
    font-style:italic;
}

.principal-title{
    display:block;
    font-size:.82rem;
    color:var(--accent-dark);
    font-weight:600;
    letter-spacing:.4px;
    text-transform:uppercase;
    margin-top:2px;
}

@media(max-width:992px){

    .principal-card{
        grid-template-columns:1fr;
        text-align:center;
        padding:36px 30px;
    }

    .principal-message p{
        max-width:100%;
    }

    .principal-signature{
        justify-content:center;
        text-align:left;
        max-width:280px;
        margin-left:auto;
        margin-right:auto;
    }

}

@media(max-width:480px){

    .principal-card{
        padding:30px 22px;
        border-radius:var(--radius);
    }

    .principal-portrait{
        width:150px;
        height:150px;
    }

}

/*=========================================================
    BROCHURE DOWNLOAD (COURSES PAGE)
=========================================================*/

.brochure-section{
    padding:80px 0;
    margin-top:10px;
    background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, var(--primary-light) 100%);
    position:relative;
    overflow:hidden;
}

.brochure-section::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(circle at 12% 20%, rgba(236, 72, 153, .16) 0, transparent 40%),
        radial-gradient(circle at 88% 82%, rgba(236, 72, 153, .14) 0, transparent 45%);
    pointer-events:none;
}

.brochure-container{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    align-items:center;
    gap:56px;
}

.brochure-content h2{
    color:var(--white);
    font-size:clamp(1.7rem,3vw,2.4rem);
    margin-bottom:16px;
}

.brochure-content p{
    color:rgba(255, 255, 255, .78);
    font-size:1rem;
    line-height:1.8;
    max-width:520px;
    margin-bottom:30px;
}

.brochure-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:30px;
}

.brochure-buttons .btn-primary{
    background:var(--accent);
    box-shadow:0 12px 26px rgba(236, 72, 153, .35);
}

.brochure-buttons .btn-primary:hover{
    background:var(--accent-dark);
}

.brochure-meta{
    display:flex;
    flex-wrap:wrap;
    gap:12px 26px;
}

.brochure-meta span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:.82rem;
    font-weight:600;
    color:rgba(255, 255, 255, .85);
    background:rgba(255, 255, 255, .08);
    border:1px solid rgba(255, 255, 255, .14);
    padding:8px 16px;
    border-radius:50px;
    backdrop-filter:blur(6px);
}

.brochure-meta i{
    color:var(--accent);
}

/* ---- Mockup ---- */

.brochure-mockup{
    display:flex;
    align-items:center;
    justify-content:center;
    perspective:1400px;
}

.brochure-mockup-stack{
    position:relative;
    width:250px;
    height:340px;
    transform:rotateY(-18deg) rotateX(4deg) rotate(-3deg);
    transform-style:preserve-3d;
    animation:brochureFloat 5s ease-in-out infinite;
}

.brochure-page{
    position:absolute;
    inset:0;
    border-radius:10px;
}

.brochure-page-back{
    background:var(--light-2);
    transform:translate(14px,14px) rotate(2deg);
    box-shadow:0 20px 40px rgba(16, 42, 92, .25);
}

.brochure-page-front{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:26px;
    background:linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
    border:1.5px solid rgba(236, 72, 153, .55);
    box-shadow:0 26px 50px rgba(16, 42, 92, .35);
}

.brochure-page-front::before{
    content:"";
    position:absolute;
    inset:10px;
    border:1px solid rgba(255, 255, 255, .18);
    border-radius:6px;
    pointer-events:none;
}

.brochure-cover-logo{
    width:64px;
    height:auto;
    opacity:.95;
}

.brochure-cover-label{
    font-family:var(--font-heading);
    color:var(--white);
    font-weight:700;
    font-size:1.15rem;
    text-align:center;
    letter-spacing:.3px;
}

.brochure-cover-year{
    font-size:.8rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--accent);
    font-weight:600;
}

@keyframes brochureFloat{
    0%,100%{ transform:rotateY(-18deg) rotateX(4deg) rotate(-3deg) translateY(0); }
    50%{ transform:rotateY(-18deg) rotateX(4deg) rotate(-3deg) translateY(-14px); }
}

@media(max-width:992px){

    .brochure-container{
        grid-template-columns:1fr;
        text-align:center;
        gap:40px;
    }

    .brochure-content p{
        margin-left:auto;
        margin-right:auto;
    }

    .brochure-buttons,
    .brochure-meta{
        justify-content:center;
    }

    .brochure-mockup{
        order:-1;
    }

}

@media(max-width:480px){

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

    .brochure-buttons{
        flex-direction:column;
        width:100%;
    }

    .brochure-buttons .btn-primary,
    .brochure-buttons .btn-secondary{
        width:100%;
    }

    .brochure-mockup-stack{
        width:200px;
        height:270px;
    }

}

/*=========================================================
    FEATURED PROGRAMMES (HOMEPAGE)
=========================================================*/

.programmes-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:26px;
}

.programme-card{
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    height:100%;
    transition:var(--transition);
}

.programme-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-hover);
}

.programme-card-image{
    position:relative;
    height:160px;
    overflow:hidden;
}

.programme-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:var(--transition);
}

.programme-card:hover .programme-card-image img{
    transform:scale(1.08);
}

.programme-card-image .course-level-tag{
    position:absolute;
    top:12px;
    left:12px;
}

.programme-card-body{
    padding:20px 20px 22px;
    display:flex;
    flex-direction:column;
    flex-grow:1;
}

.programme-school{
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:var(--accent-dark);
    margin-bottom:6px;
}

.programme-card-body h4{
    font-size:1rem;
    line-height:1.4;
    color:var(--primary-dark);
    margin-bottom:10px;
    min-height:44px;
}

.programme-meta-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;
    font-size:.78rem;
    color:var(--gray);
    margin-bottom:10px;
}

.programme-meta-row span{
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.programme-meta-row i{
    color:var(--accent);
}

.programme-summary{
    font-size:.84rem;
    color:var(--gray);
    line-height:1.6;
    margin-bottom:16px;
    flex-grow:1;
}

.programme-card-buttons{
    display:flex;
    gap:10px;
}

.programme-card-buttons a{
    flex:1;
    text-align:center;
    padding:10px 12px;
    border-radius:50px;
    font-size:.8rem;
    font-weight:600;
    transition:var(--transition);
    white-space:nowrap;
}

.programme-apply{
    background:var(--primary);
    color:var(--white);
}

.programme-apply:hover{
    background:var(--primary-dark);
}

.programme-explore{
    background:var(--light-2);
    color:var(--primary-dark);
}

.programme-explore:hover{
    background:var(--accent);
    color:var(--white);
}

.programmes-view-all{
    text-align:center;
    margin-top:40px;
}

@media(max-width:1200px){
    .programmes-grid{ grid-template-columns:repeat(2,1fr); }
}

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

/*=========================================================
    COURSE DETAIL PAGE
=========================================================*/

.course-hero{
    position:relative;
    padding:40px 0 70px;
    background:var(--primary-dark);
    color:var(--white);
    overflow:hidden;
}

.course-hero-bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:.32;
    transform:scale(1.03);
}

.course-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, var(--primary-dark) 10%, rgba(16, 42, 92, .88) 55%, rgba(16, 42, 92, .72) 100%);
}

.course-hero-overlay{
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 88% 15%, rgba(236, 72, 153, .20), transparent 45%),
               radial-gradient(circle at 8% 90%, rgba(236, 72, 153, .14), transparent 45%);
    pointer-events:none;
}

.course-hero-content{
    position:relative;
    z-index:1;
    max-width:820px;
}

.course-hero .breadcrumb{
    justify-content:flex-start;
    margin-top:0;
    margin-bottom:18px;
}

.course-hero h1{
    color:var(--white);
    font-size:clamp(1.9rem,3.6vw,2.7rem);
    margin:14px 0 10px;
}

.course-hero-school{
    color:var(--accent);
    font-weight:600;
    font-size:1rem;
    margin-bottom:22px;
}

.course-hero-tags{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:30px;
}

.hero-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:.82rem;
    font-weight:600;
    color:rgba(255, 255, 255, .9);
    background:rgba(255, 255, 255, .08);
    border:1px solid rgba(255, 255, 255, .16);
    padding:9px 16px;
    border-radius:50px;
    backdrop-filter:blur(6px);
}

.hero-tag i{ color:var(--accent); }

.course-hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
}

/* ---- Overview ---- */

.two-col.reverse{
    grid-template-columns:.85fr 1.15fr;
}

.mini-heading{
    font-size:1.05rem;
    color:var(--primary-dark);
    margin:22px 0 12px;
}

.check-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.check-list li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:.92rem;
    color:var(--gray);
    line-height:1.5;
}

.check-list i{
    color:var(--accent);
    margin-top:3px;
    flex-shrink:0;
}

/* ---- Learning Outcomes (premium checklist cards) ---- */

.outcomes-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    max-width:900px;
    margin:0 auto;
}

.outcome-card{
    display:flex;
    align-items:flex-start;
    gap:14px;
    background:var(--surface);
    border-radius:var(--radius);
    padding:18px 20px;
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.outcome-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-hover);
}

.outcome-card i{
    color:var(--accent);
    font-size:1.1rem;
    margin-top:2px;
    flex-shrink:0;
}

.outcome-card span{
    font-size:.92rem;
    color:var(--primary-dark);
    font-weight:600;
    line-height:1.5;
}

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

/* ---- Fee Structure: one-time / recurring split ---- */

.fee-tables-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px;
    max-width:900px;
    margin:0 auto;
}

.fee-tables-grid .info-table-wrap{
    min-width:0;
}

.fee-tables-grid .info-table-wrap table{
    min-width:0;
    width:100%;
}

.fee-tables-grid .fee-table thead tr th{
    background:var(--primary);
    color:var(--white);
    text-align:left;
    font-size:.86rem;
}

.fee-total-highlight{
    max-width:900px;
    margin:30px auto 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:linear-gradient(135deg, var(--accent), var(--accent-dark));
    color:var(--white);
    border-radius:var(--radius);
    padding:20px 28px;
    box-shadow:var(--shadow);
    font-weight:700;
}

.fee-total-highlight span{
    font-size:.92rem;
    text-transform:uppercase;
    letter-spacing:.4px;
}

.fee-total-highlight strong{
    font-size:1.3rem;
    font-family:var(--font-heading);
}

@media(max-width:768px){
    .fee-tables-grid{ grid-template-columns:1fr; }
    .fee-total-highlight{ flex-direction:column; gap:8px; text-align:center; }
}

.info-table-wrap{
    max-width:900px;
    margin:0 auto;
    border-radius:var(--radius);
    overflow-x:auto;
    box-shadow:var(--shadow);
}

.info-table-wrap table{
    min-width:520px;
}

/* Compact section rhythm — scoped to the course detail page only */
.course-detail-page .content-section{
    padding:58px 0;
}

.course-detail-page .section-heading{
    margin-bottom:36px;
}

.course-detail-page .principal-section{
    padding:44px 0;
}

.info-table,
.units-table,
.fee-table{
    width:100%;
    border-collapse:collapse;
    background:var(--surface);
}

.info-table td,
.units-table td, .units-table th,
.fee-table td, .fee-table th{
    padding:16px 24px;
    text-align:left;
    font-size:.92rem;
}

.info-table td:first-child{
    font-weight:700;
    color:var(--primary-dark);
    width:38%;
}

.info-table td:last-child{
    color:var(--gray);
}

.info-table tr:nth-child(odd),
.units-table tbody tr:nth-child(odd),
.fee-table tbody tr:nth-child(odd){
    background:var(--light);
}

.units-table thead tr,
.fee-table thead tr{
    background:var(--primary);
}

.units-table thead th,
.fee-table thead th{
    color:var(--white);
    font-weight:600;
    letter-spacing:.3px;
}

.units-table td:first-child{
    font-weight:600;
    color:var(--accent-dark);
    white-space:nowrap;
    width:26%;
}

.units-table td:nth-child(2){
    font-family:var(--font-heading);
    font-weight:700;
    color:var(--primary);
    white-space:nowrap;
    width:16%;
}

.fee-table td:last-child{
    text-align:right;
    font-weight:600;
    color:var(--primary-dark);
}

.fee-total-row td{
    background:var(--primary);
    color:var(--white) !important;
    font-weight:700;
    font-size:1rem;
}

/* ---- Career Grid ---- */

.career-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.career-card{
    display:flex;
    align-items:center;
    gap:14px;
    background:var(--surface);
    border-radius:var(--radius);
    padding:20px 22px;
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.career-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
}

.career-card i{
    width:44px;
    height:44px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(236, 72, 153, .12);
    color:var(--accent-dark);
    font-size:1.1rem;
}

.career-card span{
    font-weight:600;
    color:var(--primary-dark);
    font-size:.94rem;
}

/* ---- Entry Requirements Card ---- */

.requirements-card{
    max-width:900px;
    margin:0 auto;
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:flex-start;
    gap:30px;
    background:var(--surface);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    padding:40px 44px;
}

.requirements-icon{
    width:64px;
    height:64px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--accent), var(--accent-dark));
    color:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
    flex-shrink:0;
}

/* ---- Feature Grid ---- */

.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.feature-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:12px;
    background:var(--surface);
    border-radius:var(--radius);
    padding:30px 20px;
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.feature-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
    background:var(--primary);
}

.feature-card:hover span{ color:var(--white); }
.feature-card:hover i{ color:var(--accent); }

.feature-card i{
    font-size:1.6rem;
    color:var(--primary);
    transition:var(--transition);
}

.feature-card span{
    font-weight:600;
    color:var(--primary-dark);
    font-size:.92rem;
    transition:var(--transition);
}

/* ---- Apply Timeline ---- */

.apply-timeline{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:0;
    position:relative;
}

.apply-timeline::before{
    content:"";
    position:absolute;
    top:24px;
    left:8%;
    right:8%;
    height:2px;
    background:repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 18px);
    z-index:0;
}

.apply-step{
    position:relative;
    z-index:1;
    text-align:center;
    padding:0 12px;
}

.apply-step-number{
    width:52px;
    height:52px;
    margin:0 auto 12px;
    border-radius:50%;
    background:var(--primary);
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.15rem;
    box-shadow:0 10px 20px rgba(236, 72, 153, .25);
    border:3px solid var(--accent);
}

.apply-step-index{
    display:block;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.6px;
    text-transform:uppercase;
    color:var(--accent-dark);
    margin-bottom:4px;
}

.apply-step h4{
    font-size:.92rem;
    color:var(--primary-dark);
    margin-bottom:6px;
}

.apply-step p{
    font-size:.78rem;
    color:var(--gray);
    line-height:1.5;
}

.apply-timeline-cta{
    text-align:center;
    margin-top:44px;
}

@media(max-width:992px){

    .apply-timeline{
        grid-template-columns:repeat(3,1fr);
        gap:30px 0;
    }

    .apply-timeline::before{ display:none; }

}

@media(max-width:576px){

    .apply-timeline{ grid-template-columns:1fr 1fr; }

}

/* ---- Course Summary Cards ---- */

.summary-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    max-width:1000px;
    margin:0 auto;
}

.summary-card{
    display:flex;
    align-items:center;
    gap:16px;
    background:var(--surface);
    border-radius:var(--radius);
    padding:20px 22px;
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.summary-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
}

.summary-card > i{
    width:46px;
    height:46px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(236, 72, 153, .12);
    color:var(--accent-dark);
    font-size:1.15rem;
}

.summary-card > div{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}

.summary-label{
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:var(--gray-light);
}

.summary-value{
    font-size:.92rem;
    font-weight:600;
    color:var(--primary-dark);
    line-height:1.35;
}

@media(max-width:992px){
    .summary-grid{ grid-template-columns:repeat(2,1fr); }
}

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

/* ---- Related Courses ---- */

.related-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.related-card{
    display:block;
    background:var(--surface);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.related-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-hover);
}

.related-card-img{
    height:140px;
    overflow:hidden;
}

.related-card-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:var(--transition);
}

.related-card:hover .related-card-img img{
    transform:scale(1.08);
}

.related-card-body{
    padding:18px 20px 20px;
}

.related-card-body h4{
    font-size:.94rem;
    color:var(--primary-dark);
    margin:10px 0 8px;
    line-height:1.4;
}

.related-card-meta{
    font-size:.78rem;
    color:var(--gray);
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.related-card-meta i{ color:var(--accent); }

/* ---- Course detail responsive ---- */

@media(max-width:992px){

    .two-col.reverse{
        grid-template-columns:1fr;
    }

    .two-col.reverse img{
        order:-1;
    }

    .career-grid,
    .feature-grid{
        grid-template-columns:repeat(2,1fr);
    }

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

    .requirements-card{
        grid-template-columns:1fr;
        text-align:center;
        padding:34px 26px;
    }

    .requirements-icon{
        margin:0 auto;
    }

}

@media(max-width:576px){

    .course-hero{ padding:28px 0 40px; }

    .career-grid,
    .feature-grid,
    .related-grid{
        grid-template-columns:1fr;
    }

    .info-table td,
    .units-table td, .units-table th,
    .fee-table td, .fee-table th{
        padding:12px 16px;
        font-size:.85rem;
    }

    .requirements-card{
        padding:28px 20px;
    }

}

/*==================================================
    SCHOOL PAGES — DESCRIPTION + PREMIUM PROGRAMME TABLES
    (replaces the old course-card grid)
==================================================*/

.school-overview{
    padding:54px 0 10px;
}

.school-intro{
    max-width:920px;
    font-size:1.03rem;
    line-height:1.85;
    color:var(--gray);
    margin-bottom:22px;
}

.school-intro strong{ color:var(--dark); }

.school-entry-note{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:8px;
}

.entry-chip{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:9px 16px;
    border-radius:50px;
    background:rgba(236, 72, 153, .07);
    border:1px solid rgba(236, 72, 153, .16);
    font-size:.86rem;
    font-weight:600;
    color:var(--primary);
}

.entry-chip i{ color:var(--accent); }

/* Department / group block */
.dept-block{
    padding:30px 0 6px;
}

.dept-head{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:10px;
}

.dept-head .dept-icon{
    width:46px;
    height:46px;
    border-radius:13px;
    background:linear-gradient(150deg, var(--primary), var(--primary-dark));
    color:#FFFFFF;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.15rem;
    flex-shrink:0;
    box-shadow:0 10px 22px rgba(236, 72, 153, .25);
}

.dept-head h2{
    font-size:1.5rem;
    color:var(--primary-dark);
    line-height:1.2;
}

.dept-desc{
    max-width:900px;
    font-size:.97rem;
    line-height:1.8;
    color:var(--gray);
    margin-bottom:20px;
}

/* Premium programme table */
.prog-table-wrap{
    overflow-x:auto;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    border:1px solid rgba(236, 72, 153, .10);
    margin-bottom:14px;
    background:var(--surface);
}

.prog-table{
    width:100%;
    border-collapse:collapse;
    min-width:640px;
}

.prog-table thead th{
    background:linear-gradient(120deg, var(--primary-dark), var(--primary));
    color:#FFFFFF;
    font-family:var(--font-heading);
    font-weight:600;
    font-size:.82rem;
    letter-spacing:.4px;
    text-transform:uppercase;
    text-align:left;
    padding:15px 18px;
    white-space:nowrap;
}

.prog-table thead th:first-child{ border-top-left-radius:0; width:46px; text-align:center; }

.prog-table tbody td{
    padding:14px 18px;
    font-size:.92rem;
    color:var(--dark);
    border-bottom:1px solid rgba(236, 72, 153, .08);
    vertical-align:middle;
}

.prog-table tbody tr:nth-child(even){ background:rgba(236, 72, 153, .028); }

.prog-table tbody tr:hover{ background:rgba(16, 42, 92, .05); }

.prog-table tbody tr:last-child td{ border-bottom:none; }

.prog-num{
    text-align:center;
    color:var(--gray-light);
    font-weight:700;
    font-size:.82rem;
}

.prog-name{ font-weight:600; }

.lvl-badge{
    display:inline-block;
    padding:4px 12px;
    border-radius:50px;
    font-size:.74rem;
    font-weight:700;
    letter-spacing:.3px;
    white-space:nowrap;
}

.lvl-diploma{ background:rgba(236, 72, 153, .12); color:var(--primary); }
.lvl-craft{ background:rgba(236, 72, 153, .16); color:#EC4899; }
.lvl-artisan{ background:rgba(236, 72, 153, .12); color:var(--primary-light); }
.lvl-short{ background:rgba(16, 42, 92, .14); color:#102A5C; }
.lvl-prof{ background:rgba(16, 42, 92, .12); color:#102A5C; }

.prog-req{ color:var(--gray); font-size:.88rem; white-space:nowrap; }
.prog-fee{ font-weight:700; color:var(--primary-dark); white-space:nowrap; }
.prog-fee.muted{ font-weight:600; color:var(--gray); font-style:italic; }
.prog-dur{ color:var(--gray); font-size:.88rem; white-space:nowrap; }

.school-cta-row{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    align-items:center;
    margin:26px 0 6px;
}

.school-note{
    font-size:.88rem;
    color:var(--gray);
    margin-top:6px;
}

[data-theme="dark"] .prog-table-wrap,
[data-theme="dark"] .school-intro{ color:var(--gray); }
[data-theme="dark"] .prog-table-wrap{ background:var(--surface); border-color:rgba(255, 255, 255, .08); }
[data-theme="dark"] .prog-table tbody td{ color:var(--dark); border-color:rgba(255, 255, 255, .06); }
[data-theme="dark"] .prog-table tbody tr:nth-child(even){ background:rgba(255, 255, 255, .03); }

@media(max-width:768px){
    .school-overview{ padding:40px 0 6px; }
    .dept-head h2{ font-size:1.28rem; }
}

/*==================================================
    ORGANIC BLOB MEDIA — GLASSY FUTURISTIC FRAME
    (Welcome + Why Choose section images)
==================================================*/

.blob-media{
    position:relative;
    isolation:isolate;
    padding:16px;
}

/* colored offset blob sitting behind the photo (peeks out) */
.blob-media::before{
    content:"";
    position:absolute;
    z-index:-2;
    inset:-5% -7% -9% -11%;
    background:linear-gradient(135deg, var(--primary) 0%, #EC4899 55%, var(--primary-light) 100%);
    border-radius:44% 56% 62% 38% / 42% 46% 54% 58%;
    opacity:.95;
    animation:blobMorphA 17s ease-in-out infinite;
}

/* soft outer holographic glow */
.blob-media::after{
    content:"";
    position:absolute;
    z-index:-3;
    inset:0% 2% -2% -6%;
    background:
        radial-gradient(circle at 38% 42%, rgba(236, 72, 153, .55), transparent 62%),
        radial-gradient(circle at 78% 76%, rgba(236, 72, 153, .35), transparent 60%);
    filter:blur(34px);
    border-radius:50%;
    opacity:.9;
}

/* the photo — organic blob shape with glassy border ring */
.blob-media img{
    position:relative;
    z-index:1;
    width:100% !important;
    height:auto !important;
    aspect-ratio:1 / .84;
    object-fit:cover;
    object-position:center;
    display:block;
    border-radius:54% 46% 57% 43% / 48% 44% 56% 52% !important;
    border:3px solid rgba(255, 255, 255, .6) !important;
    box-shadow:
        0 34px 70px rgba(16, 42, 92, .4),
        0 0 0 10px rgba(255, 255, 255, .12),
        0 0 46px rgba(236, 72, 153, .35),
        inset 0 0 46px rgba(255, 255, 255, .16) !important;
    backdrop-filter:blur(2px);
    animation:blobMorphB 17s ease-in-out infinite, blobFloat 8s ease-in-out infinite;
}

/* thin gold gradient accent arc following the blob */
.blob-media .blob-ring{
    position:absolute;
    inset:4px;
    z-index:2;
    border-radius:54% 46% 57% 43% / 48% 44% 56% 52%;
    border:2px solid rgba(236, 72, 153, .75);
    box-shadow:0 0 22px rgba(236, 72, 153, .35);
    background:transparent;
    animation:blobMorphB 17s ease-in-out infinite;
    pointer-events:none;
}

@keyframes blobMorphA{
    0%,100%{ border-radius:44% 56% 62% 38% / 42% 46% 54% 58%; }
    50%{ border-radius:57% 43% 42% 58% / 56% 49% 51% 44%; }
}
@keyframes blobMorphB{
    0%,100%{ border-radius:54% 46% 57% 43% / 48% 44% 56% 52%; }
    50%{ border-radius:46% 54% 47% 53% / 57% 53% 47% 43%; }
}
@keyframes blobFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-12px); }
}

/* keep the floating stat cards legible & glassy over the blob */
.blob-media .experience-card,
.blob-media .floating-badge{
    z-index:3;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255, 255, 255, .4);
}

@media (prefers-reduced-motion: reduce){
    .blob-media::before,
    .blob-media img,
    .blob-media .blob-ring{ animation:none !important; }
}

@media(max-width:768px){
    .blob-media{ padding:12px; max-width:460px; margin:0 auto; }
    .blob-media img{ aspect-ratio:1 / .9; }
}

/*==================================================
    PREMIUM GLASS NAVIGATION — VISUAL ENHANCEMENT
    (glassmorphism + animated border light + compact
     height). Structure/order/links unchanged.
==================================================*/

:root{
    --gnav-accent:#EC4899;
    --gnav-accent2:#EC4899;
    --gnav-gold:#EC4899;
    --gnav-text:#FFFFFF;
    --gnav-mut:rgba(255, 255, 255, .7);
    --gnav-bd:rgba(255, 255, 255, .10);

    /* Premium Germaine blue — nav bar backgrounds + hover/active glow.
       Replaces the previous very-dark navy (rgba(16, 42, 92, ...)) which
       read as near-black; based on the brand blue #102A5C. */
    --gnav-blue:#102A5C;
    --gnav-blue-2:#102A5C;
    --gnav-bg-blue:rgba(16, 42, 92, .72);
    --gnav-bg-blue-2:rgba(16, 42, 92, .74);
    --gnav-hover-blue:#EC4899;
    --gnav-hover-glow:rgba(236, 72, 153, .55);
}

/* smooth angle prop for the travelling border light (progressive enhancement) */
@property --gnav-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

@keyframes gnavSpin{ to{ --gnav-angle:360deg; } }

/* travelling neon light ring shared by all 3 nav containers */
.utility-bar::before,
.branding-bar::before,
.navbar::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    padding:1px;
    border-radius:inherit;
    background:conic-gradient(from var(--gnav-angle),
        transparent 0deg, transparent 72%,
        rgba(236, 72, 153, .15) 80%,
        var(--gnav-accent) 88%,
        #EC4899 91%,
        var(--gnav-accent) 94%,
        transparent 100%);
    -webkit-mask:linear-gradient(#102A5C 0 0) content-box, linear-gradient(#102A5C 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    animation:gnavSpin 9s linear infinite;
    pointer-events:none;
    opacity:.85;
}
.branding-bar::before{
    animation-duration:10s; animation-direction:reverse;
    background:conic-gradient(from var(--gnav-angle),
        transparent 0deg, transparent 72%,
        rgba(236, 72, 153, .15) 80%,
        var(--gnav-gold) 89%,
        #EC4899 92%,
        var(--gnav-gold) 95%,
        transparent 100%);
}
.navbar::before{ animation-duration:8s; }

/* Below the same 992px breakpoint the site already uses to switch to the
   mobile hamburger nav (see main.js initMobileMenu), the three header rows
   collapse into a single compact bar. The travelling conic-gradient ring is
   a continuous, indefinite repaint on 3 fixed-position elements that are
   on-screen for the entire time the page is open — real, ongoing compositor
   work regardless of whether the user is scrolling. Freezing it on mobile
   (where main-thread budget is tightest and the effect is smallest/least
   visible on a compact bar) removes that continuous cost; the gradient
   still renders, just as a static accent instead of an animated one, so the
   visual identity is preserved rather than removed. Desktop is untouched. */
@media (max-width:992px){
    .utility-bar::before,
    .branding-bar::before,
    .navbar::before{
        animation:none;
    }
}

/* ---------- LEVEL 1: UTILITY BAR ---------- */
.utility-bar{
    position:relative;
    background:var(--gnav-bg-blue);
    /* backdrop-filter moved to the shared .fixed-top-stack parent — see
       comment there. This row keeps only its own translucent background. */
    border-bottom:1px solid var(--gnav-bd);
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, .05);
}
.utility-bar-inner{ padding:4px 24px; }          /* compact */
.utility-link{ color:var(--gnav-mut); font-size:.76rem; padding:5px 12px; }
.utility-link i{ color:var(--gnav-accent); }
.utility-link:hover{ color:#FFFFFF; text-shadow:0 0 10px rgba(236, 72, 153, .5); }
.utility-link:hover i{ color:#EC4899; }

/* ---------- STACK / HEADER ---------- */
header#header{ background:transparent; box-shadow:none; }
[data-theme="dark"] header#header{ background:transparent; }

/* ---------- LEVEL 2: BRANDING BAR ---------- */
.branding-bar{
    position:relative;
    background:var(--gnav-bg-blue-2);
    /* backdrop-filter moved to the shared .fixed-top-stack parent — see
       comment there. This row keeps only its own translucent background. */
    border-bottom:1px solid var(--gnav-bd);
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, .06);
}
.branding-inner{ padding:9px 24px; }             /* compact */
header#header.sticky .branding-inner{ padding:6px 24px; }
.brand-logo-img{ height:46px; }                  /* trimmed, still legible */
header#header.sticky .brand-logo-img{ height:38px; }
.brand-name{ color:#FFFFFF; }                        /* was primary blue */
.brand-tagline{ color:var(--gnav-mut); }

/* contact — inside a subtle glass pill */
.branding-contact{
    background:rgba(255, 255, 255, .05);
    border:1px solid rgba(255, 255, 255, .09);
    border-radius:14px;
    padding:6px 13px;
    margin-top:7px;                 /* sits a touch lower, nearer the nav bar */
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.branding-contact a{ color:var(--gnav-mut); }
.branding-contact a:hover{ color:#FFFFFF; }
.branding-contact a i{ background:rgba(236, 72, 153, .16); color:var(--gnav-accent); }
.branding-contact a:hover i{ background:var(--gnav-accent); color:#FFFFFF; }
.branding-location{ color:var(--gnav-mut); }
.branding-location i{ color:var(--gnav-gold); }

/* ---------- LEVEL 3: MAIN NAVIGATION ---------- */
.navbar{
    position:relative;
    background:var(--gnav-bg-blue);
    background:linear-gradient(180deg, var(--gnav-bg-blue), var(--gnav-bg-blue-2));
    /* backdrop-filter moved to the shared .fixed-top-stack parent — see
       comment there. This row keeps only its own translucent background. */
    border-top:1px solid var(--gnav-bd);
}
.nav-links > li > a{ color:#FFFFFF; padding:10px 15px; }   /* compact, still centred */
.nav-links > li > a i{ color:var(--gnav-hover-blue); }
.nav-links > li > a::after{ background:var(--gnav-hover-blue); box-shadow:0 0 10px var(--gnav-hover-glow); }
.nav-links > li > a:hover,
.nav-links > li > a.active,
.nav-links > li.dropdown.open > a{
    color:var(--gnav-hover-blue);
    text-shadow:0 0 12px var(--gnav-hover-glow);
}

/* dropdown + mega panels stay readable as light glass */
.dropdown-menu{
    background:rgba(16, 42, 92, .94);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--gnav-bd);
}
.dropdown-menu a{ color:var(--gnav-mut); }
.dropdown-menu a:hover{ background:rgba(255, 255, 255, .08); border-color:rgba(255, 255, 255, .16); color:#FFFFFF; }
.mega-menu-col-title{ color:var(--gnav-hover-blue); }
.mega-menu-col a{ color:var(--gnav-mut); }
.mega-menu-col a i{ color:var(--gnav-hover-blue); }
.mega-menu-col a:hover{ background:rgba(255, 255, 255, .08); border-color:rgba(255, 255, 255, .16); color:#FFFFFF; }
.mega-menu-col a:hover i{ color:#FFFFFF; }

/* search + theme toggle chips */
.search-btn, .theme-toggle{ background:rgba(255, 255, 255, .08); color:#FFFFFF; }
.search-btn:hover, .theme-toggle:hover{ background:var(--gnav-hover-blue); color:#FFFFFF; }

/* hamburger bars on dark glass */
.hamburger{ background:rgba(255, 255, 255, .08); }
.hamburger span{ background:#FFFFFF; }

/* ---------- APPLY BUTTON (glass blue gradient + light sweep) ---------- */
.apply-btn{
    position:relative;
    overflow:hidden;
    padding:10px 22px;              /* smaller, proportional */
    font-size:.82rem;
    background:linear-gradient(135deg, var(--gnav-accent), var(--gnav-accent2));
    color:#FFFFFF;
    border-radius:14px;
    box-shadow:0 8px 22px rgba(236, 72, 153, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.apply-btn::after{
    content:"";
    position:absolute;
    top:0; left:-70%;
    width:45%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform:skewX(-20deg);
    translate:0;
    animation:gnavSweep 4.5s ease-in-out infinite;
    will-change:translate;
    pointer-events:none;
}
@keyframes gnavSweep{ 0%{ translate:0; } 55%,100%{ translate:444% 0; } }
.apply-btn:hover{
    background:linear-gradient(135deg, var(--gnav-accent2), var(--gnav-accent));
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(236, 72, 153, .5);
    color:#FFFFFF;
}

@media (prefers-reduced-motion: reduce){
    .utility-bar::before,
    .branding-bar::before,
    .navbar::before,
    .apply-btn::after{ animation:none !important; }
}

/* logo reads cleanly on the dark glass branding bar (round badge, same image) */
.brand-logo-img{
    border-radius:50%;
    box-shadow:0 0 0 2px rgba(255, 255, 255, .2), 0 0 16px rgba(236, 72, 153, .28);
}

/*==================================================
    ACADEMIC SCHOOLS DROPDOWN — SINGLE COLUMN (9 schools)
    Additive-only variant of .mega-menu: same glass card,
    same colors/typography/travelling-light treatment,
    just a single vertical list instead of 3 grouped
    columns, to match the simplified 9-school structure.
    Does not alter .mega-menu / .mega-menu-col for any
    other dropdown still using the base classes.
==================================================*/
.mega-menu.mega-menu-schools{
    grid-template-columns: minmax(260px, 320px);
    width:min(340px, calc(100vw - 48px));
}

@media(max-width:1100px){
    .mega-menu.mega-menu-schools{
        width:min(320px, 90vw);
        grid-template-columns:1fr;
    }
}

/*==================================================
    MOBILE SIDE NAVIGATION — COMPACT PASS
    The slide-out panel was tall enough that Quick Links
    and Contact Us sat far below the fold, so the panel
    had to be scrolled to reach them. This pass tightens
    the vertical rhythm only: paddings, gaps and the
    submenu indent. Font sizes, radii, icons and behaviour
    are otherwise unchanged, and every tappable row stays
    at/above ~44px so touch targets remain comfortable.
    Scoped to the mobile panel, so the desktop header is
    untouched.

    .side-nav-search / .side-nav-search-btn rules that used
    to live here were removed along with the markup in
    site-nav.js — search is no longer duplicated inside this
    panel (see buildNavHTML()'s comment for why).
==================================================*/

/* Tighten the primary link list. 13px -> 10px vertical
   padding keeps a ~44px row at the existing .96rem size. */
.side-nav-links{
    padding:6px 14px 4px;
}

.side-nav-links a,
.side-nav-toggle{
    padding:10px 14px;
}

.side-nav-links li + li{
    margin-top:1px;
}

/* Submenus: shallower indent and tighter rows so an open
   accordion no longer pushes the rest of the panel far
   down the screen. */
.side-nav-submenu{
    margin-left:12px;
    padding-left:10px;
}

.side-nav-submenu a{
    padding:7px 10px;
}

/* Pull Quick Links up against the link list, and keep the
   heading close to the links it labels. */
.side-nav-utility-heading{
    padding:12px 16px 4px;
}

.side-nav-utility{
    padding:0 14px;
    gap:1px;
}

.side-nav-utility-btn{
    padding:10px 14px;
}

/* Quick Links now sits directly under the Contact Us / Apply
   block (see site-nav.js's buildNavHTML for the DOM order)
   instead of being separated by a large gap. */
.side-nav-footer{
    padding:14px 16px 22px;
    margin-top:6px;
    gap:12px;
}

.side-nav-contact{
    gap:8px;
}

/* Long utility labels wrap instead of forcing the panel
   wider, which was a source of horizontal overflow on
   narrow phones. */
.side-nav-utility-btn,
.side-nav-links a{
    white-space:normal;
}

/*==================================================
    SCROLL-REVEAL — MOBILE + REDUCED-MOTION TUNING

    Every page-specific reveal family is defined in its own
    stylesheet, all of which load after this file. The rules
    below are therefore prefixed with `html` purely to raise
    specificity (0,0,1,1 vs 0,0,1,0) so they win regardless of
    stylesheet order — no !important needed.

    On phones the translate is dropped and the fade shortened.
    A transform on a large section forces the compositor to
    allocate and repaint a full-width layer for the duration of
    the animation; during a fast flick several of those overlap
    and that is what produces the stutter. Fading opacity alone
    is materially cheaper and, at this speed, visually
    indistinguishable.

    Reduced-motion users get the content with no animation at
    all, which is also the correct accessibility behaviour.
==================================================*/

@media(max-width:768px){
    html .ab-reveal,
    html .ct-reveal,
    html .sp-reveal,
    html .pw-reveal,
    html .gh-reveal,
    html .sc-reveal,
    html .sl-reveal,
    html .cu-reveal,
    html [data-animate]{
        transform:none;
        transition:opacity .22s ease;
    }

    /* Staggered delays make the last card in a row wait noticeably
       longer than the first. That reads as "still loading" on a
       phone, so the stagger is dropped at this width. */
    html .cu-reveal[data-d],
    html .sl-reveal[data-d],
    html .pw-reveal[data-d],
    html .gh-reveal[data-delay],
    html .sc-reveal[data-delay]{
        transition-delay:0s;
    }
}

@media(max-width:768px){
    /* SLIDESHOW KEN-BURNS — MOBILE GUARD
       Slideshows crossfade with a scale: .tpl-slide 1.06 over 1.4s,
       .ab-who-slide 1.06 over 5s, .ct-bento-slide 1.07 over 6.5s,
       .ai-exp-slide 1.04 over 1.2s. Scaling a full-bleed photo is not a free
       compositor transform — the image is re-rasterised at the new scale, and
       these run for seconds after every slide change on some of the largest
       images on the site, repeating on a timer for as long as the page is
       open. On a phone that lands on the thread the user scrolls with.
       The crossfade is kept; only the scale is dropped. Desktop unchanged. */
    .tpl-slide,
    .ab-who-slide,
    .ct-bento-slide,
    .ai-exp-slide{
        transform:none !important;
        transition:opacity .3s ease !important;
    }
    .tpl-slide.active,
    .ab-who-slide.is-active,
    .ct-bento-slide.is-active,
    .ai-exp-slide.is-active{
        transform:none !important;
    }

    .afp-card::before, .afp-cta-glass::before,
    #aicFaqs .aic-faq-cta-outer::after,
    .alu-hero-panel::before, .alu-card::after, .alu-form-panel::after,
    .alu-adv-card::after, .alu-stats::after,
    .ap-card::before, .ap-help-panel::before, .ap-connect-strip::before,
    .cu-glass::before, .cu-glass::after, .cu-btn::after,
    .ct-hero-card::before, .ct-badge::before,
    .ct-solution-card::before, .ct-industry-card::before,
    .gwf-glass::before,
    .gh-glass::before, .gh-hero-panel.gh-glass::before,
    .gh-btn-neon::after, .gh-hero::after, .ghc-card::before,
    body.lsc-page .lsc-catcard.is-active::before,
    body.lsc-page .lsc-switch-card.active::before,
    .pw-hero-text::before, .pw-panel::before,
    .pw-testimonial::before, .pw-inquiry-panel::before,
    .fx-frame,
    .welcome-image.fx-media .experience-card::after,
    .why-germaine .feature-box::before,
    .welcome-image .fx-glass::before, .why-image .fx-glass::before,
    .sc-glass::before, .sc-btn-primary::after,
    .sc-hero-frame, .sc-faq-item.open::before,
    .sp-hv-line-1, .sp-hv-line-2,
    .sp-hv-frame-wrap::before, .sp-badge::before,
    .sp-hv-about-card::before, .sp-about-frame::before,
    .sp-prog-shell::before, .sp-search::after,
    .sp-filter-btn.active::before, .sp-sidebar-inner::before,
    .sp-nav-item.active::before, .sp-track-card.active::before,
    .sp-mini-card::before, .sp-reqfees-card::before,
    .sd-panel::before,
    .gss-card::before,
    .sl-glass::before, .sl-glass::after, .sl-btn::after, .sl-cap::before,
    .vac-search::after, .vac-card::after,
    .vac-why-card::after, .vac-stats::after{
        /* Conic-gradient rings cannot be composited: each frame repaints its
           element on the main thread, continuously, on and off screen. That
           competes with scrolling on a phone. The ring still renders with its
           gradient here — it simply stops sweeping. Desktop is untouched. */
        animation:none !important;
    }
}

@media(prefers-reduced-motion:reduce){
    html .ab-reveal,
    html .ct-reveal,
    html .sp-reveal,
    html .pw-reveal,
    html .gh-reveal,
    html .sc-reveal,
    html .sl-reveal,
    html .cu-reveal,
    html [data-animate]{
        opacity:1;
        transform:none;
        transition:none;
    }
}