/* ============================================================
   FiraGO, subset to Georgian and Latin.
   bBox Type for Mozilla, SIL Open Font License (assets/fonts/OFL.txt).
   Self-hosted, so there is no third-party font request. The same family
   is used on the social posters, so site and campaign now match.
   Subsetting cut each weight from about 250KB to about 39KB.
   ============================================================ */
@font-face{font-family:'FiraGO';src:url('fonts/firago-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'FiraGO';src:url('fonts/firago-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'FiraGO';src:url('fonts/firago-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'FiraGO';src:url('fonts/firago-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* ============================================
   DESIGN TOKENS
   Navy ramp is built on the brand hue (h~205) so that the three
   social-poster blues (#104473 #115E92 #328FCD) are members of the
   scale rather than a parallel palette. Surfaces run warm, ink runs
   cool: gold reads as pigment on warm paper instead of as glow.
   ============================================ */
:root {
    /* Navy / brand blue -- #104473 is the brand navy and theme-color */
    --navy-950: #06192B;
    --navy-900: #0A2743;
    --navy-800: #0D3459;
    --navy-700: #104473;
    --navy-600: #115E92;
    --navy-500: #1A76B8;
    --navy-400: #328FCD;
    --navy-300: #6CAFE0;
    --navy-200: #A8CFEB;
    --navy-100: #D6E8F5;
    --navy-50:  #EFF6FB;

    /* Gold -- the logo. The single accent. */
    --gold-700: #8A6414;
    --gold-600: #A87D1F;
    --gold-500: #C89830;
    --gold-400: #EEBF36;
    --gold-300: #F7D569;
    --gold-200: #FBE9B0;
    --gold-100: #FDF4DC;

    /* Emerald -- semantic only: verified / accredited. Nothing else. */
    --emerald-700: #0A5C44;
    --emerald-600: #0F7A5A;
    --emerald-100: #DCF2E9;

    /* Paper (warm) -- backgrounds and surfaces only */
    --paper-50:  #FCFAF7;
    --paper-100: #F6F3EE;
    --paper-200: #EFEAE2;
    --paper-300: #E4DED4;

    /* Ink (cool) -- text, borders, dividers, icons only */
    --ink-900: #0F1B2A;
    --ink-800: #1B2A3D;
    --ink-700: #2C3D52;
    --ink-600: #48586D;
    --ink-500: #6B7A8D;
    --ink-300: #C6CFD9;
    --ink-200: #E2E8F0;
    --ink-100: #EDF1F5;

    /* Semantic aliases -- components use these, never raw ramps */
    --bg-page:       var(--paper-100);
    --bg-surface:    var(--paper-50);
    --bg-recessed:   var(--paper-200);
    --bg-inverted:   var(--navy-900);

    --text-primary:   var(--ink-700);
    --text-secondary: var(--ink-600);
    --text-muted:     var(--ink-500);   /* large text only: 3.7-4.2:1 */
    --text-heading:   var(--navy-700);
    --text-on-dark:   #F2F6FA;
    --text-on-dark-2: var(--navy-200);
    --accent-text:    var(--gold-700);  /* never gold-400 as text on light */

    --border:               #D8DFE8;
    --border-subtle:        var(--ink-200);
    --border-strong:        #C0CBD8;
    --border-on-dark:       rgba(255, 255, 255, .10);
    --border-on-dark-strong: rgba(255, 255, 255, .18);
    --focus:                var(--navy-500);

    /* Radius -- 8 to 12px */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Elevation -- hairline first, shadow as a whisper. Never black. */
    --elev-0: inset 0 0 0 1px var(--border);
    --elev-1: 0 1px 2px rgba(6, 25, 43, .05), inset 0 0 0 1px var(--border);
    --elev-2: 0 4px 12px -4px rgba(6, 25, 43, .08), inset 0 0 0 1px var(--border);
    --elev-3: 0 12px 28px -12px rgba(6, 25, 43, .14), inset 0 0 0 1px var(--border-strong);
    --elev-dark-0: inset 0 0 0 1px var(--border-on-dark);
    --elev-dark-1: inset 0 0 0 1px var(--border-on-dark-strong);
    --elev-dark-2: inset 0 0 0 1px var(--border-on-dark-strong), 0 16px 40px -20px rgba(0, 0, 0, .55);

    /* Type */
    --font-display: 'FiraGO', 'Noto Sans Georgian', Sylfaen, sans-serif;
    --font-sans: 'FiraGO', 'Noto Sans Georgian', Sylfaen, system-ui, sans-serif;
    --fs-2xs: 0.75rem;
    --fs-xs: 0.8125rem;
    --fs-sm: 0.9375rem;
    --fs-base: 1.0625rem;
    --fs-md: 1.1875rem;
    --fs-lg: 1.375rem;
    --fs-xl: 1.625rem;
    --fs-2xl: clamp(1.75rem, 1.40rem + 1.5vw, 2.125rem);
    --fs-3xl: clamp(2.125rem, 1.60rem + 2.4vw, 3rem);
    --fs-display: clamp(2.5rem, 1.80rem + 3.4vw, 3.75rem);
    --lh-tight: 1.25;
    --lh-snug: 1.35;
    --lh-normal: 1.50;
    --lh-relaxed: 1.75;
    --measure: 66ch;

    /* Space -- 4px base */
    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
    --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
    --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
    --section-y: clamp(64px, 8vw, 112px);
    --gutter: clamp(20px, 4vw, 32px);
    --container: 1200px;

    /* Motion -- 150-200ms ease-in-out */
    --dur-fast: 150ms;
    --dur: 175ms;
    --dur-slow: 200ms;
    --ease: ease-in-out;

    /* Depth order */
    --z-raised: 10;
    --z-sticky: 100;
    --z-nav: 200;
    --z-overlay: 300;
    --z-float: 400;
    --z-modal: 500;

    /* The only two surviving gradients. Both single-hue, vertical. */
    --grad-inverted: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-800) 100%);
    --grad-gold: linear-gradient(180deg, var(--gold-400) 0%, var(--gold-500) 100%);

    /* ---- Legacy aliases -------------------------------------------
       The pre-existing stylesheet references these names throughout.
       Mapping them onto the new scale re-skins every component at
       once, so migration can proceed section by section without a
       flag-day rewrite. Removed as each component is migrated. */
    --blue-dark: var(--navy-700);
    --blue-medium: var(--navy-400);
    --blue-light: var(--navy-600);
    --gold: var(--gold-400);
    --gold-dark: var(--gold-500);
    --gold-light: var(--gold-300);
    --white: var(--paper-50);
    --off-white: var(--paper-100);
    --dark: var(--ink-700);
    --gray: var(--ink-600);
    --gray-light: var(--ink-200);
    --shadow: var(--elev-1);
    --shadow-lg: var(--elev-2);
    --radius: var(--radius-lg);
    --transition: var(--dur) var(--ease);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    color: var(--text-primary);
    background: var(--bg-page);
    line-height: var(--lh-relaxed);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--lh-snug);
    letter-spacing: 0;   /* Georgian must never be tracked negative */
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img, svg { max-width: 100%; display: block; }

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: var(--space-4); top: var(--space-4);
    z-index: var(--z-modal);
    padding: var(--space-3) var(--space-5);
    background: var(--navy-700); color: var(--text-on-dark);
    border-radius: var(--radius-md);
    transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Respect the user's motion preference. The file previously had no
   such rule at all, while running four infinite animations. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
}
    html { scroll-behavior: auto; }
    .reveal, .reveal-left, .reveal-right, .reveal-scale {
        opacity: 1 !important;
        transform: none !important;
}
}
/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}
.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}
.reveal-scale {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}

/* Stagger children */
.stagger > * { transition-delay: calc(var(--i, 0) * 0.12s); }

/* ============================================
   NAVIGATION
   ============================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    border-bottom: 1px solid rgba(16, 68, 115, 0.08);
    transition: var(--transition);
}
.navbar.scrolled {
    box-shadow: 0 4px 30px rgba(16, 68, 115, 0.1);
}
.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.nav-brand svg, .nav-brand img {
    width: 44px;
    height: 44px;
}
.nav-brand span {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--blue-dark);
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}
.nav-links a {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--dark);
    position: relative;
    transition: color 0.3s;
}
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: width 0.3s;
    border-radius: 2px;
}
.nav-links a:hover { color: var(--navy-600); }
.nav-links a:hover::after { width: 100%; }

.nav-cta {
    background: var(--grad-gold);
    color: var(--navy-950) !important;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--fs-sm);
    border: 1px solid var(--gold-500);
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.nav-cta::after { display: none !important; }
.nav-cta:hover {
    background: var(--gold-500);
    border-color: var(--gold-600);
    color: var(--navy-950) !important;
}

/* Hamburger */
.hamburger {
    background: none;
    border: 0;
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}
.hamburger span {
    width: 26px;
    height: 2.5px;
    background: var(--blue-dark);
    border-radius: 3px;
    transition: 0.3s;
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-surface);
    z-index: 999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    opacity: 0;
    transition: opacity 0.3s;
}
.mobile-menu.active {
    display: flex;
    opacity: 1;
}
.mobile-menu a {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--blue-dark);
    transition: color 0.3s;
}
.mobile-menu a:hover { color: var(--gold-700); }

@media (max-width: 1240px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: var(--grad-inverted);
    overflow: hidden;
    padding-top: 76px;
}

/* Animated background particles */

/* Geometric shapes */

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

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

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(238, 191, 54, 0.15);
    border: 1px solid rgba(238, 191, 54, 0.3);
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gold-light);
    margin-bottom: 24px;
    animation: fadeInDown 0.8s ease 0.2s both;
}
.hero-badge::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M22 10v6M2 10l10-5 10 5-10 5z'/%3E%3Cpath d='M6 12v5c0 2 4 3 6 3s6-1 6-3v-5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M22 10v6M2 10l10-5 10 5-10 5z'/%3E%3Cpath d='M6 12v5c0 2 4 3 6 3s6-1 6-3v-5'/%3E%3C/svg%3E") center/contain no-repeat;
}


.hero-title {
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}
.hero-title .highlight {
    color: var(--gold);
    position: relative;
}

.hero-subtitle {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 36px;
    max-width: 520px;
    animation: fadeIn 0.8s ease 1s both;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    animation: fadeIn 0.8s ease 1.2s both;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}

.btn-primary {
    background: var(--grad-gold);
    color: var(--navy-950);
    border-color: var(--gold-500);
}
.btn-primary:hover {
    background: var(--gold-500);
    border-color: var(--gold-600);
}

.btn-outline {
    background: transparent;
    color: var(--white);
    border: 2px solid rgba(255, 255, 255, 0.4);
}
.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.7);
}

/* Hero 3D Floating Cards */




@media (max-width: 900px) {
    .hero .container { grid-template-columns: 1fr; text-align: center; }
    .hero-subtitle { margin-left: auto; margin-right: auto; }
    .hero-buttons { justify-content: center; }
}

/* ============================================
   SECTION COMMON STYLES
   ============================================ */
section {
    padding: 100px 0;
}
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--navy-50);
    color: var(--navy-700);
    padding: 6px 14px;
    border-radius: var(--radius-md);
    font-size: var(--fs-xs);
    font-weight: 600;
    margin-bottom: 16px;
}
.section-title {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 800;
    color: var(--blue-dark);
    margin-bottom: 16px;
    line-height: 1.25;
}
.section-subtitle {
    font-size: 1.05rem;
    color: var(--gray);
    max-width: 600px;
    line-height: 1.8;
    margin-bottom: 50px;
}
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ============================================
   ABOUT / USP SECTION
   ============================================ */

.usp-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 36px 28px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.4s, box-shadow 0.4s;
    perspective: 600px;
    cursor: default;
    position: relative;
    overflow: hidden;
}
.usp-card:hover {
    
    box-shadow: var(--elev-2);
}
.usp-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, rgba(50, 143, 205, 0.1), rgba(16, 68, 115, 0.08));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 20px;
    transition: transform 0.4s;
}
.usp-card:hover .usp-icon {
    transform: none;
}
.usp-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--blue-dark);
    margin-bottom: 10px;
}
.usp-card p {
    font-size: 0.9rem;
    color: var(--gray);
    line-height: 1.7;
}

@media (max-width: 900px) {
}
@media (max-width: 550px) {
}

/* ============================================
   PROGRAMS SECTION
   ============================================ */



.programs-note {
    text-align: center;
    font-size: 1rem;
    color: var(--gray);
    padding: 20px 28px;
    background: var(--off-white);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.programs-note strong { color: var(--blue-dark); }

@media (max-width: 900px) {
}

/* ============================================
   TRUST / ACCREDITATION SECTION
   ============================================ */
.credential-rail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.credential {
    background: var(--white);
    border-radius: var(--radius);
    padding: 40px 32px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.4s, box-shadow 0.4s;
    position: relative;
    overflow: hidden;
}
.trust-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--blue-dark), var(--blue-medium));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 20px;
    color: var(--white);
    box-shadow: 0 8px 25px rgba(16, 68, 115, 0.2);
}

@media (max-width: 768px) {
}

/* ============================================
   ADMISSION TIMELINE SECTION
   ============================================ */
.admission-timeline {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    padding-left: 60px;
}
.admission-timeline::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--border);
    border-radius: 3px;
}
.timeline-step {
    position: relative;
    margin-bottom: 48px;
    padding: 28px 32px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform 0.4s, box-shadow 0.4s;
}
.timeline-step:hover {
    
    box-shadow: var(--elev-2);
}
.timeline-step:last-child { margin-bottom: 0; }

.step-number {
    position: absolute;
    left: -48px;
    top: 28px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--blue-dark), var(--blue-medium));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 700;
    font-size: 1rem;
    border: 4px solid var(--white);
    box-shadow: 0 4px 15px rgba(16, 68, 115, 0.2);
}
.timeline-step h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--blue-dark);
    margin-bottom: 8px;
}
.timeline-step p {
    font-size: 0.92rem;
    color: var(--gray);
    line-height: 1.7;
}

.admission-cta {
    text-align: center;
    margin-top: 50px;
}

/* ============================================
   FAQ SECTION
   ============================================ */
.faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.faq-item {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(16, 68, 115, 0.06);
    overflow: hidden;
    transition: box-shadow 0.3s;
}
.faq-item.active {
    box-shadow: 0 8px 30px rgba(16, 68, 115, 0.12);
}
.faq-question {
    width: 100%;
    background: none;
    border: 0;
    font-family: inherit;
    text-align: start;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    color: var(--blue-dark);
    transition: color 0.3s;
    gap: 16px;
    user-select: none;
}
.faq-question:hover { color: var(--navy-600); }
.faq-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(50, 143, 205, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.4s, background 0.3s;
}
.faq-item.active .faq-arrow {
    transform: rotate(180deg);
    background: var(--gold);
}
.faq-arrow svg {
    width: 14px;
    height: 14px;
    stroke: var(--blue-dark);
    stroke-width: 2.5;
    fill: none;
}
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-slow) var(--ease);
}
.faq-answer-inner {
    padding: 0 28px 24px;
    font-size: 0.93rem;
    color: var(--gray);
    line-height: 1.8;
}
.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}

.faq-answer > * {
    overflow: hidden;
}

/* ============================================
   CONTACT SECTION
   ============================================ */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}
.contact-info-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.contact-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    background: var(--off-white);
    border-radius: var(--radius);
    transition: transform 0.3s, box-shadow 0.3s;
}
.contact-card:hover {
    
    box-shadow: var(--shadow);
}
.contact-card-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--blue-dark), var(--blue-medium));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-card-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--white);
    stroke-width: 2;
    fill: none;
}
.contact-card h4 {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gray);
    margin-bottom: 2px;
}
.contact-card p, .contact-card a {
    font-size: 1rem;
    font-weight: 600;
    color: var(--blue-dark);
}
.contact-card a:hover { color: var(--navy-600); }

.social-links {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}
.social-link {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--blue-dark), var(--blue-medium));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s, box-shadow 0.3s;
}
.social-link:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 20px rgba(16, 68, 115, 0.25);
}
.social-link svg {
    width: 22px;
    height: 22px;
    fill: var(--white);
}

/* Contact Form */
.contact-form {
    background: var(--white);
    padding: 36px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.contact-form h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--blue-dark);
    margin-bottom: 24px;
}
.form-group {
    margin-bottom: 18px;
}
.form-group label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 13px 18px;
    border: 2px solid var(--gray-light);
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--dark);
    transition: border-color 0.3s, box-shadow 0.3s;
    background: var(--white);
    outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--navy-600);
    box-shadow: 0 0 0 4px rgba(50, 143, 205, 0.1);
}
.form-group textarea { resize: vertical; min-height: 100px; }
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-form .btn {
    width: 100%;
    justify-content: center;
    padding: 15px;
    font-size: 1rem;
}

.map-container {
    margin-top: 24px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.map-container iframe {
    width: 100%;
    height: 220px;
    border: none;
}

@media (max-width: 900px) {
    .contact-wrapper { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    background: var(--blue-dark);
    color: rgba(255, 255, 255, 0.8);
    padding: 60px 0 0;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-brand img, .footer-brand svg {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
}
.footer-brand p {
    font-size: 0.9rem;
    line-height: 1.7;
    max-width: 300px;
}
.footer h4 {
    color: var(--white);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 18px;
}
.footer-links a {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    padding: 5px 0;
    transition: color 0.3s, padding-left 0.3s;
}
.footer-links a:hover {
    color: var(--gold);
    padding-left: 6px;
}
.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    margin-bottom: 12px;
}
.footer-contact-item svg {
    width: 18px;
    height: 18px;
    stroke: var(--gold);
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
}
.footer-bottom {
    padding: 20px 0;
    text-align: center;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 550px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================
   SCROLL TO TOP BUTTON
   ============================================ */
.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--blue-dark), var(--blue-medium));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    box-shadow: 0 8px 25px rgba(16, 68, 115, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: 0.3s;
    z-index: 99;
}
.scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.scroll-top:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(16, 68, 115, 0.4);
}
.scroll-top svg {
    width: 20px;
    height: 20px;
    stroke: var(--white);
    stroke-width: 2.5;
    fill: none;
}

/* ============================================
   LOADING ANIMATION
   ============================================ */

/* ============================================
   URGENCY COUNTDOWN BANNER
   ============================================ */

/* Shift navbar and hero when banner is visible */
body .navbar { transition: top 0.4s ease; }
body .hero { transition: padding-top 0.4s ease; }

@media (max-width: 600px) {
}

/* ============================================
   WHATSAPP FLOATING BUTTON
   ============================================ */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 98;
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
    border: none;
        }
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(37, 211, 102, 0.55);
    animation: none;
}
.whatsapp-float svg {
    width: 32px;
    height: 32px;
    fill: white;
}
.whatsapp-tooltip {
    position: absolute;
    left: 72px;
    bottom: 50%;
    transform: translateY(50%);
    background: var(--white);
    color: var(--dark);
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    transform: translateY(50%) translateX(-8px);
}
.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    transform: translateY(50%) translateX(0);
}

@media (max-width: 600px) {
    .whatsapp-float { width: 52px; height: 52px; bottom: 20px; left: 20px; }
    .whatsapp-float svg { width: 28px; height: 28px; }
    .whatsapp-tooltip { display: none; }
}

/* ============================================
   PRICING COMPARISON SECTION
   ============================================ */
.pricing-comparison {
    background: var(--grad-inverted);
    color: var(--white);
    position: relative;
    overflow: hidden;
}
.pricing-comparison .section-label {
    background: rgba(238, 191, 54, 0.15);
    color: var(--gold-light);
}
.pricing-comparison .section-title { color: var(--white); }
.pricing-comparison .section-subtitle { color: rgba(255,255,255,0.7); }

.pricing-table-wrapper {
    max-width: 800px;
    margin: 0 auto;
}
.pricing-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.pricing-table thead th {
    padding: 20px 24px;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
}
.pricing-table thead th:first-child {
    background: rgba(255,255,255,0.05);
    text-align: left;
}
.pricing-table thead th:nth-child(2) {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
}
.pricing-table thead th:nth-child(3) {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: var(--dark);
}
.pricing-table tbody td {
    padding: 16px 24px;
    font-size: 0.92rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pricing-table tbody td:first-child {
    background: rgba(255,255,255,0.03);
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}
.pricing-table tbody td:nth-child(2) {
    background: rgba(255,255,255,0.02);
    text-align: center;
    color: rgba(255,255,255,0.6);
}
.pricing-table tbody td:nth-child(3) {
    background: rgba(238, 191, 54, 0.06);
    text-align: center;
    font-weight: 700;
    color: var(--gold);
}
.pricing-table tbody tr:last-child td {
    border-bottom: none;
}
.pricing-table tfoot td {
    padding: 20px 24px;
    font-weight: 800;
    font-size: 1.05rem;
}
.pricing-table tfoot td:first-child {
    background: rgba(255,255,255,0.05);
}
.pricing-table tfoot td:nth-child(2) {
    background: rgba(255,255,255,0.05);
    text-align: center;
    color: rgba(255,255,255,0.5);
}
.pricing-table tfoot td:nth-child(3) {
    background: linear-gradient(135deg, rgba(238,191,54,0.15), rgba(238,191,54,0.08));
    text-align: center;
    color: var(--gold);
    font-size: 1.2rem;
}

.pricing-note {
    text-align: center;
    margin-top: 28px;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.7);
}
.pricing-note strong { color: var(--gold); }


@media (max-width: 600px) {
    .pricing-table thead th, .pricing-table tbody td, .pricing-table tfoot td {
        padding: 12px 14px;
        font-size: 0.82rem;
}
}

/* ============================================
   PARTNER UNIVERSITIES
   ============================================ */
.universities {
    padding: 110px 0;
    background: var(--off-white);
}

.uni-benefits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 32px auto 0;
    max-width: 900px;
}

.uni-benefits li {
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--white);
    border: 1px solid rgba(238, 191, 54, 0.45);
    color: var(--blue-dark);
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(16, 68, 115, 0.06);
}

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

.uni-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

.uni-card:hover {
    
    box-shadow: var(--elev-2);
}

.uni-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: rgba(16, 68, 115, 0.08);
}

.uni-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.uni-card:hover .uni-media img {
    transform: scale(1.06);
}

.uni-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px;
}

.uni-place {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    font-feature-settings: 'case' 1;
    color: var(--navy-600);
}

.uni-body h3 {
    margin-top: 10px;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--blue-dark);
}

.uni-body > p {
    margin-top: 12px;
    color: var(--gray);
    font-size: 0.97rem;
}

.uni-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.uni-tags li {
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(16, 68, 115, 0.07);
    color: var(--blue-dark);
    font-size: 0.78rem;
    font-weight: 600;
}

.uni-specs {
    margin-top: 20px;
    border: 1px solid var(--gray-light);
    border-radius: 12px;
    overflow: hidden;
}

.uni-specs summary {
    position: relative;
    padding: 14px 46px 14px 16px;
    font-weight: 700;
    font-size: 0.94rem;
    color: var(--blue-dark);
    cursor: pointer;
    list-style: none;
    transition: background var(--transition);
}

.uni-specs summary::-webkit-details-marker { display: none; }

.uni-specs summary:hover { background: rgba(16, 68, 115, 0.04); }

.uni-specs summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    font-size: 1.3rem;
    line-height: 1;
    font-weight: 700;
    color: var(--gold-700);
}

.uni-specs[open] summary::after { content: "\2212"; }

.uni-specs-body {
    padding: 4px 16px 18px;
    border-top: 1px solid var(--gray-light);
}

.uni-spec-title {
    margin: 14px 0 8px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-feature-settings: 'case' 1;
    color: var(--gold-700);
}

.uni-list li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 7px;
    font-size: 0.92rem;
    color: var(--gray);
    line-height: 1.55;
}

.uni-list li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
}

.uni-link {
    margin-top: auto;
    padding-top: 22px;
    font-weight: 700;
    font-size: 0.94rem;
    color: var(--navy-600);
    transition: color var(--transition);
}



.uni-link:hover { color: var(--blue-dark); }

/* ============================================
   STUDENT PHOTO GALLERY
   ============================================ */
.gallery {
    padding: 110px 0;
    background: var(--white);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 215px;
    gap: 16px;
    margin-top: 48px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: rgba(16, 68, 115, 0.08);
    box-shadow: var(--shadow);
}

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

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

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

.gallery-item figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 30px 16px 14px;
    background: linear-gradient(180deg, transparent, rgba(16, 68, 115, 0.9));
    color: var(--white);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.35;
}

.gallery-note {
    margin-top: 28px;
    text-align: center;
    color: var(--gray);
    font-size: 0.95rem;
}

/* ============================================
   REQUIRED DOCUMENTS
   ============================================ */
.docs-panel {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 40px;
    margin-top: 64px;
    padding: 44px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.docs-panel h3 {
    margin-top: 10px;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--blue-dark);
}

.docs-intro p {
    margin-top: 14px;
    color: var(--gray);
}

.docs-list {
    counter-reset: docs;
}

.docs-list li {
    position: relative;
    padding-left: 46px;
    margin-bottom: 16px;
    counter-increment: docs;
    color: var(--gray);
    line-height: 1.6;
}

.docs-list li::before {
    content: counter(docs);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 800;
}

.docs-note {
    grid-column: 1 / -1;
    padding-top: 24px;
    border-top: 1px solid var(--gray-light);
    color: var(--gray);
    font-size: 0.95rem;
}

/* ============================================
   NEWS AND REGULATIONS
   ============================================ */
.news {
    padding: 110px 0;
    background: var(--off-white);
}




.news-tag {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-feature-settings: 'case' 1;
    color: var(--gold-700);
}

.news-card h3 {
    margin-top: 12px;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.4;
    color: var(--blue-dark);
}

.news-card p {
    margin-top: 14px;
    color: var(--gray);
    font-size: 0.95rem;
}

.news-link {
    margin-top: auto;
    padding-top: 22px;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--navy-600);
}



.news-note {
    margin-top: 32px;
    padding: 22px 26px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--gray);
    font-size: 0.94rem;
    box-shadow: var(--shadow);
}

@media (max-width: 1024px) {
    .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 190px; }
    .docs-panel { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 768px) {
    .universities,
    .gallery,
    .news { padding: 80px 0; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
    .docs-panel { padding: 28px; }
}
/* ============================================
   PROGRAMME TABS
   Replaces three hover-flip cards. The flip was unreachable by
   keyboard, unfired immediately on touch, and hid six facts per
   programme behind a gesture.
   ============================================ */
.tabs { margin-top: 48px; }

.tablist {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--space-3);
}

.tab {
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-5);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.tab:hover { background: var(--navy-50); color: var(--navy-700); }
.tab[aria-selected="true"] {
    background: var(--navy-700);
    border-color: var(--navy-700);
    color: var(--text-on-dark);
}

.tabpanel { padding-top: var(--space-8); }
.tabpanel[hidden] { display: none; }

.panel-body {
    max-width: 64ch;
    margin-inline: auto;
}

.panel-copy h3 {
    font-size: var(--fs-xl);
    color: var(--text-heading);
    margin-bottom: var(--space-3);
}
.panel-copy > p { color: var(--text-secondary); }

/* Definition list, not a checkmark bullet list */
.spec {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-5);
    margin: var(--space-6) 0;
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
    font-size: var(--fs-sm);
}
.spec dt { color: var(--text-secondary); }
.spec dd { color: var(--text-primary); font-weight: 600; }

.panel-unis {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
}
.panel-unis a { color: var(--navy-600); font-weight: 600; }
.panel-unis a:hover { text-decoration: underline; }


@media (max-width: 900px) {
    .tablist {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
}
    .tab { flex: none; scroll-snap-align: start; }
}

/* ============================================
   HERO SPEC + STUDENT PORTAL
   Replaces three floating glass cards. The portal is the platform's
   own chrome: no traffic lights, no URL bar, no monospace.
   ============================================ */
.hero-spec {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-on-dark);
}
.hero-spec dt {
    font-size: var(--fs-xs);
    color: var(--text-on-dark-2);
    margin-bottom: var(--space-1);
}
.hero-spec dd {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--gold-300);
}

.hero-visual { position: relative; }

/* Depth from a layered offset panel, not an orb and not a glow. */
.portal {
    position: relative;
    border-radius: var(--radius-lg);
    background: var(--navy-900);
    box-shadow: var(--elev-dark-2);
    overflow: hidden;
}
.portal::before {
    content: "";
    position: absolute;
    inset: 0;
    translate: 14px 14px;
    border-radius: var(--radius-lg);
    background: var(--navy-800);
    box-shadow: var(--elev-dark-0);
    z-index: -1;
}
.portal-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 44px;
    padding: 0 var(--space-4);
    background: rgba(13, 52, 89, .72);
    /* The entire frosted-glass budget for the site, spent once. */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-bottom: 1px solid var(--border-on-dark);
}
.portal-crest {
    width: 18px; height: 18px; flex: none;
    border-radius: var(--radius-xs);
    background: var(--gold-400);
}
.portal-crumb {
    font-size: var(--fs-xs);
    color: var(--text-on-dark-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.portal-avatar {
    width: 22px; height: 22px; flex: none;
    margin-left: auto;
    border-radius: var(--radius-full);
    background: var(--navy-500);
}
.portal-body {
    display: grid;
    grid-template-columns: 120px 1fr 132px;
    gap: var(--space-4);
    padding: var(--space-4);
}
.portal-rail { display: grid; gap: var(--space-1); align-content: start; }
.portal-rail span {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--fs-2xs);
    color: var(--text-on-dark-2);
}
/* Active state is a filled pill, not a coloured left stripe. */
.portal-rail .is-current {
    background: var(--navy-700);
    color: var(--text-on-dark);
    font-weight: 600;
}
.portal-main { display: grid; gap: var(--space-3); align-content: start; }
.portal-course {
    display: grid;
    grid-template-columns: 1fr 64px 34px;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--navy-800);
    border: 1px solid var(--border-on-dark);
    font-size: var(--fs-2xs);
    color: var(--text-on-dark);
}
.portal-meter {
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--navy-950);
    overflow: hidden;
}
.portal-meter i { display: block; height: 100%; background: var(--navy-400); }
.portal-pct {
    text-align: right;
    color: var(--text-on-dark-2);
    font-variant-numeric: tabular-nums;
}
.portal-side { display: grid; gap: var(--space-2); align-content: start; }
.portal-side-title {
    font-size: var(--fs-2xs);
    color: var(--text-on-dark-2);
}
.portal-side-main {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--gold-300);
    font-variant-numeric: tabular-nums;
}
.portal-side ul { display: grid; gap: var(--space-2); }
.portal-side li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--fs-2xs);
    color: var(--text-on-dark-2);
    font-variant-numeric: tabular-nums;
}


/* ============================================
   BENTO: the four points are not equal in weight
   ============================================ */
.bento {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: var(--space-4);
    margin-top: var(--space-12);
}
.bento-lead {
    grid-row: 1 / 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.bento-lead h3 { font-size: var(--fs-xl); }

/* ============================================
   NEWS: a stacked list, not a fourth card triptych
   ============================================ */
.news-list {
    margin-top: var(--space-12);
    border-top: 1px solid var(--border);
}
.news-row {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) auto;
    column-gap: var(--space-8);
    row-gap: var(--space-2);
    align-items: start;
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--border);
    transition: background-color var(--dur) var(--ease);
}
.news-row .news-tag { grid-column: 1; grid-row: 1 / span 2; }
.news-row h3 { grid-column: 2; grid-row: 1; }
.news-row p { grid-column: 2; grid-row: 2; }
.news-row .news-link { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.news-row:hover { background: var(--paper-50); }
.news-row h3 {
    font-size: var(--fs-md);
    color: var(--text-heading);
    margin-bottom: var(--space-2);
}
.news-row p { font-size: var(--fs-sm); color: var(--text-secondary); }
.news-row .news-link { white-space: nowrap; padding-top: 0; margin-top: 0; }

@media (max-width: 900px) {
    .portal-body { grid-template-columns: 1fr 120px; }
    .portal-rail { display: none; }
    .bento { grid-template-columns: 1fr; }
    .bento-lead { grid-row: auto; }
    .news-row { grid-template-columns: 1fr; }
    .news-row .news-tag,
    .news-row h3,
    .news-row p,
    .news-row .news-link { grid-column: 1; grid-row: auto; align-self: start; }
}
@media (max-width: 600px) {
    .portal-body { grid-template-columns: 1fr; }
    .portal-side { display: none; }
    .hero-spec { gap: var(--space-6); }
}

/* ============================================
   SECTION GROUNDS
   No two adjacent sections may share a background. Previously
   #universities and #trust were both off-white, as were #news
   and #faq, so each pair read as one long band.
   ============================================ */
.about { background: var(--paper-100); }
.programs { background: var(--paper-50); }
.universities { background: var(--paper-100); }
.trust { background: var(--paper-50); }
.gallery { background: var(--paper-100); }
.admission { background: var(--paper-50); }
.news { background: var(--paper-100); }
.faq { background: var(--paper-50); }
.contact { background: var(--paper-100); }


.bento-lead { text-align: left; align-items: flex-start; }
.bento-lead .usp-icon { margin-left: 0; }
.bento-path {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
    width: 100%;
}
.bento-path li {
    display: flex; align-items: center; gap: var(--space-3);
    font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary);
}
.bento-path span {
    display: grid; place-items: center; flex: none;
    width: 26px; height: 26px; border-radius: var(--radius-full);
    background: var(--navy-50); color: var(--navy-700);
    font-size: var(--fs-2xs); font-weight: 700;
}
/* ============================================================
   TEMPLATE DESIGN LANGUAGE
   Reproduces the layout language of the Education City template
   (top strip, centred rule headings, boxed tabs, course cards with
   an overlapping circular icon) on the Leader Education palette and
   on Noto Georgian, because neither Lato nor Roboto Condensed has
   Georgian glyph coverage.
   ============================================================ */

/* ---- top contact strip ---- */
.topbar {
    background: var(--paper-50);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}
.topbar .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}
.topbar-contact { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.topbar a { color: var(--text-secondary); }
.topbar a:hover { color: var(--navy-700); }
.topbar-hours { color: var(--text-muted); }

/* ---- section heading: centred, accent word, 100px rule under ---- */
.section-label {
    display: inline-block;
    background: none;
    padding: 0;
    margin-bottom: var(--space-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--gold-700);
}
.section-title {
    position: relative;
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.25rem);
    font-weight: 700;
    color: var(--navy-700);
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-4);
}
.section-title::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    margin: auto;
    width: 100px;
    height: 2px;
    background: var(--gold-500);
}
.text-left .section-title::after,
.section-title.is-left::after { right: auto; }
.section-title span { color: var(--gold-700); }
.section-subtitle {
    max-width: 60ch;
    margin-inline: auto;
    color: var(--text-secondary);
}

/* ---- photographic hero ---- */
.hero {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: center;
    background:
        linear-gradient(180deg, rgba(6,25,43,.86), rgba(6,25,43,.72)),
        var(--hero-photo) center / cover no-repeat;
}
.hero-content { max-width: 44rem; }
.hero-badge {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-on-dark-strong);
    border-radius: var(--radius-md);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--gold-300);
    margin-bottom: var(--space-5);
}
.hero-title { color: #fff; }
.hero-title .highlight { color: var(--gold-300); }
.hero-subtitle { color: rgba(255,255,255,.86); max-width: 40rem; }

/* ---- boxed tab menu ---- */
.tablist {
    justify-content: center;
    border-bottom: 0;
    gap: var(--space-3);
    padding-bottom: 0;
    margin-bottom: var(--space-10);
}
.tab {
    border: 1px solid var(--border-strong);
    border-radius: 0;
    padding: var(--space-3) var(--space-6);
    font-size: var(--fs-base);
    color: var(--text-secondary);
    background: var(--bg-surface);
}
.tab:hover { background: var(--gold-100); color: var(--navy-700); border-color: var(--gold-500); }
.tab[aria-selected="true"] {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: var(--navy-950);
}

/* ---- course card: figure with accent rule, circular icon straddling ---- */
.uni-card {
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    background: var(--bg-surface);
    text-align: center;
    overflow: visible;
}
.uni-card:hover { box-shadow: 0 6px 24px -10px rgba(6,25,43,.18); }
.uni-media {
    border-bottom: 5px solid var(--gold-500);
    border-radius: 0;
    aspect-ratio: 16 / 10;
}
.uni-body {
    position: relative;
    padding: 62px var(--space-5) var(--space-5);
    align-items: center;
}
.uni-badge {
    position: absolute;
    top: -41px; left: 0; right: 0; margin: auto;
    width: 77px; height: 77px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--navy-700);
    box-shadow: 0 3px 20px 0 rgba(6, 25, 43, .12);
}
.uni-badge svg { width: 34px; height: 34px; }
.uni-place { color: var(--gold-700); }
.uni-body h3 { font-size: 1.375rem; margin-top: var(--space-2); }
.uni-tags { justify-content: center; }
.uni-link { text-align: center; }

/* ---- gallery filter chips (template pattern) ---- */
.gallery-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
}
.gallery-filter button {
    font-family: inherit;
    font-size: var(--fs-sm);
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--border-strong);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}
.gallery-filter button:hover { border-color: var(--gold-500); color: var(--navy-700); }
.gallery-filter button[aria-pressed="true"] {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: var(--navy-950);
}
.gallery-grid { gap: 0; }
.gallery-item { border-radius: 0; border: 0; box-shadow: none; }

/* ---- buttons take the template's square, uppercase-free form ---- */
.btn { border-radius: 0; padding: var(--space-4) var(--space-8); }

@media (max-width: 900px) {
    .hero { min-height: 0; padding-block: var(--space-20); }
    .topbar .container { justify-content: center; text-align: center; }
}


/* The top strip sits above a sticky nav, so the nav must not be fixed
   over it. Sticky also removes the need for the hero offset. */
.navbar { position: sticky; z-index: var(--z-nav); }
.hero { padding-top: 0; }
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255, 255, 255, .06);
    border-color: var(--border-on-dark-strong);
}

/* Long unbreakable Georgian compounds blow out 1fr tracks, whose auto
   minimum is min-content. minmax(0,...) plus auto-fit lets them shrink. */
.uni-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-10) var(--space-8);
}
.uni-media--placeholder {
    display: grid;
    place-items: center;
    background: var(--navy-800);
    color: var(--text-on-dark-2);
    font-family: var(--font-display);
    font-size: var(--fs-md);
    text-align: center;
    padding: var(--space-6);
}
.uni-note {
    margin-top: var(--space-4);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
@media (max-width: 760px) {
    .uni-grid { grid-template-columns: 1fr; }
}
.uni-card, .uni-body, .uni-body h3, .uni-body > p { min-width: 0; overflow-wrap: anywhere; }
.tabs { max-width: 100%; overflow: hidden; }
.tablist { max-width: 100%; }

/* Credentials read as one continuous statement, not three cards. */
.credential-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--space-12);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.credential {
    padding: var(--space-10) var(--space-8);
    border-inline-start: 1px solid var(--border);
    background: none;
    box-shadow: none;
    text-align: start;
}
.credential:first-child { border-inline-start: 0; }
.credential:hover { background: var(--paper-50); box-shadow: none; }
.credential h3 {
    font-size: var(--fs-lg);
    color: var(--text-heading);
    margin: var(--space-4) 0 var(--space-3);
}
.credential p { color: var(--text-secondary); font-size: var(--fs-sm); }
.credential .trust-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    background: var(--navy-50);
    color: var(--navy-700);
    display: grid; place-items: center;
    margin: 0;
}
.credential .trust-icon svg { width: 24px; height: 24px; }
.trust-source { margin-top: var(--space-4); font-size: var(--fs-xs); color: var(--text-muted); }
.trust-source a { color: var(--navy-600); font-weight: 600; }
@media (max-width: 900px) {
    .credential-rail { grid-template-columns: 1fr; }
    .credential { border-inline-start: 0; border-top: 1px solid var(--border); }
    .credential:first-child { border-top: 0; }
}

/* ============================================================
   MULTI-PAGE CHROME
   Page banner, breadcrumbs, and the reusable call-to-action band,
   following the template's habit of separating card grids with a
   full-width tinted band.
   ============================================================ */

.page-banner {
    background: var(--grad-inverted);
    padding: var(--space-16) 0 var(--space-12);
    text-align: center;
}

.page-banner h1 {
    color: #fff;
    font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.5rem);
    margin-bottom: var(--space-4);
}

.crumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--text-on-dark-2);
}

.crumbs a { color: var(--gold-300); font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }

.cta-band {
    background: var(--grad-inverted);
    padding: var(--space-16) 0;
}

.cta-band .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.cta-copy { max-width: 46ch; }

.cta-copy h2 {
    color: #fff;
    font-size: var(--fs-xl);
    margin-bottom: var(--space-3);
}

.cta-copy p { color: rgba(255, 255, 255, .82); }

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.btn-on-dark {
    color: #fff;
    border-color: var(--border-on-dark-strong);
    background: transparent;
}

.btn-on-dark:hover {
    background: rgba(255, 255, 255, .08);
    border-color: #fff;
}

/* FAQ answers used to hand-draw lists with a bullet character and <br>.
   These are real lists now. */
.faq-points {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.faq-points li {
    position: relative;
    padding-inline-start: var(--space-5);
    color: var(--text-secondary);
}

.faq-points li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .7em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-500);
}

.footer-title {
    font-family: var(--font-display);
    font-size: var(--fs-base);
    color: #fff;
    margin-bottom: var(--space-4);
}

@media (max-width: 760px) {
    .cta-band .container { flex-direction: column; align-items: flex-start; }
    .cta-actions { width: 100%; }
    .cta-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* The brand lockup must never wrap; it collided with the first nav item. */
.nav-brand { flex: none; white-space: nowrap; }
.nav-brand span { white-space: nowrap; }
.whatsapp-float svg { width: 30px; height: 30px; color: #fff; fill: currentColor; }

/* Floating action icons: the buttons set their own background, so the
   glyphs need an explicit colour and size. */
.whatsapp-float svg { width: 28px; height: 28px; color: #fff; fill: currentColor; }
.scroll-top svg { width: 20px; height: 20px; color: #fff; stroke: currentColor; }
.navbar .container { gap: var(--space-6); }
.nav-links { flex-wrap: nowrap; }
.nav-links a { white-space: nowrap; }

/* Hero photograph declared here rather than as an inline custom property,
   so the URL resolves against this stylesheet and the markup stays clean. */
.hero {
    background-image:
        linear-gradient(180deg, rgba(6, 25, 43, .82), rgba(6, 25, 43, .68)),
        url("img/gallery-1.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--navy-950);
}

/* 1fr resolves its minimum to min-content, and the form is wider than that
   allows once padding and inputs are counted. It overflowed at 768.*/
.contact-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact-form { min-width: 0; }
@media (max-width: 900px) {
    .contact-wrapper { grid-template-columns: 1fr; }
}

/* Horizontal reveal offsets push elements past the right edge until the
   observer fires, which body overflow-x:hidden only masks. All reveals are
   vertical, which also keeps the motion budget small. */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.active, .reveal-left.active, .reveal-right.active, .reveal-scale.active {
    opacity: 1;
    transform: none;
}

/* ============================================================
   EDITORIAL COLOUR-BLOCK LAYER
   ------------------------------------------------------------
   The design language Georgian universities actually use: hard
   colour blocks that butt against each other and bleed past the
   container, square corners, no shadows, no gradients, and big
   left-aligned Mtavruli headings. Depth comes from contrast
   alone. Driven by our navy and gold rather than a borrowed
   palette.
   ============================================================ */

:root {
    /* Square. Blocks, cards, photos, panels all lose their radius.
       --radius-full stays, because circular icons and pill buttons
       are part of the language, not a softening of it. */
    --radius-xs: 0;
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;

    /* No elevation. A hairline or a hard rule, never a blur. */
    --elev-0: inset 0 0 0 1px var(--border);
    --elev-1: inset 0 0 0 1px var(--border);
    --elev-2: inset 0 0 0 1px var(--border-strong);
    --elev-3: inset 0 0 0 2px var(--navy-900);
    --elev-dark-0: inset 0 0 0 1px var(--border-on-dark-strong);
    --elev-dark-1: inset 0 0 0 1px var(--border-on-dark-strong);
    --elev-dark-2: inset 0 0 0 1px var(--border-on-dark-strong);

    /* Flat fills where gradients used to be. */
    --grad-inverted: var(--navy-950);
    --grad-gold: var(--gold-400);

    /* Blocks sit on plain white so the colour reads as colour. */
    --bg-page: #FFFFFF;
    --bg-surface: #FFFFFF;
    --bg-recessed: var(--paper-100);

    --block-black: #111111;
    --rule: 2px;
}

body { background: var(--bg-page); }

/* ---- Display type -------------------------------------------------
   Georgian uppercased renders as Mtavruli: wide, even, architectural.
   That is the look, and it only works with real tracking and a tight
   leading, so the two are set together. ------------------------------ */

.section-title,
.page-banner h1,
.hero-title,
.cta-copy h2 {
    text-transform: uppercase;
    font-feature-settings: 'case' 1;
    letter-spacing: .015em;
    line-height: 1.12;
    font-weight: 700;
}

.section-title {
    font-size: clamp(1.875rem, 1.1rem + 3vw, 3rem);
    color: var(--navy-800);
    padding-bottom: 0;
    margin-bottom: var(--space-8);
}

/* The centred gold underline was decoration. A heading this size does
   not need underlining; the asterisk marks it instead. */
.section-title::after { content: none; }

.section-title::before {
    content: "\2731";
    font-feature-settings: normal;
    letter-spacing: 0;
    display: inline-block;
    margin-inline-end: .35em;
    color: var(--gold-400);
    font-size: .62em;
    vertical-align: .18em;
    line-height: 1;
}

.section-title span { color: var(--gold-700); }

.section-label {
    letter-spacing: .16em;
    text-transform: uppercase;
    font-feature-settings: 'case' 1;
    color: var(--navy-600);
    font-weight: 700;
    margin-bottom: var(--space-3);
}

.section-subtitle {
    margin-inline: 0;
    max-width: 62ch;
    font-size: var(--fs-md);
}

/* Sections are left-aligned. Centred title-plus-subtitle stacks are
   the thing that made every section look identical. */
.text-center { text-align: start; }
.text-center .section-subtitle { margin-inline: 0; }

.hero-title { font-size: clamp(2.25rem, 1.4rem + 4vw, 4rem); }

/* ---- Colour blocks ------------------------------------------------
   Full-bleed bands of flat colour, stacked without breathing room so
   the edges do the work. ---------------------------------------------- */

.block-navy,
.block-gold,
.block-ink,
.block-paper { padding-block: var(--section-y); }

.block-navy { background: var(--navy-700); color: var(--text-on-dark); }
.block-ink { background: var(--block-black); color: var(--text-on-dark); }
.block-gold { background: var(--gold-400); color: var(--navy-950); }
.block-paper { background: var(--paper-100); }

.block-navy .section-title,
.block-ink .section-title { color: #fff; }
.block-navy .section-label,
.block-ink .section-label { color: var(--gold-300); }
.block-navy .section-subtitle,
.block-ink .section-subtitle { color: rgba(255, 255, 255, .78); }

.block-gold .section-title,
.block-gold .section-subtitle { color: var(--navy-950); }
.block-gold .section-label { color: var(--navy-700); }
.block-gold .section-title::before { color: var(--navy-950); }

/* A block that runs to the viewport edge on one side only. The
   asymmetry is the point: nothing on the page is centred twice. */
.bleed-end { position: relative; }

.bleed-end::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 55%;
    inset-inline-end: calc(50% - 50vw);
    background: var(--navy-700);
    z-index: 0;
}

.bleed-end > * { position: relative; z-index: 1; }

@media (max-width: 900px) {
    .bleed-end::before { content: none; }
}

/* ---- Buttons ------------------------------------------------------
   Two shapes only. A solid square block for the one primary action,
   an outline pill for everything else. Both uppercase. -------------- */

.btn {
    text-transform: uppercase;
    font-feature-settings: 'case' 1;
    letter-spacing: .08em;
    font-weight: 700;
    font-size: var(--fs-xs);
}

.btn-primary {
    background: var(--gold-400);
    border: var(--rule) solid var(--gold-400);
    color: var(--navy-950);
    border-radius: 0;
}

.btn-primary:hover {
    background: var(--navy-950);
    border-color: var(--navy-950);
    color: #fff;
}

.btn-outline {
    border-radius: var(--radius-full);
    border-width: var(--rule);
    background: transparent;
}

.btn-on-dark { border-color: rgba(255, 255, 255, .55); }
.btn-on-dark:hover { background: #fff; color: var(--navy-950); border-color: #fff; }

.block-gold .btn-outline { color: var(--navy-950); border-color: var(--navy-950); }
.block-gold .btn-outline:hover { background: var(--navy-950); color: var(--gold-400); }

.nav-cta {
    background: var(--gold-400);
    border-radius: 0;
    text-transform: uppercase;
    font-feature-settings: 'case' 1;
    letter-spacing: .07em;
    font-weight: 700;
    font-size: var(--fs-2xs);
}

.nav-cta:hover { background: var(--navy-950); color: #fff !important; }

/* ---- Chrome -------------------------------------------------------
   Black utility strip above a white menu bar, with the mark sitting
   in a block that overhangs both. ------------------------------------ */

.topbar {
    background: var(--block-black);
    color: rgba(255, 255, 255, .72);
    border-bottom: 0;
}

.topbar a { color: rgba(255, 255, 255, .72); }
.topbar a:hover { color: var(--gold-300); }

.navbar { background: #fff; border-bottom: var(--rule) solid var(--ink-900); }

.nav-links a {
    text-transform: uppercase;
    font-feature-settings: 'case' 1;
    letter-spacing: .07em;
    font-size: var(--fs-2xs);
    font-weight: 700;
}

/* ---- Page banner --------------------------------------------------- */

.page-banner {
    background: var(--block-black);
    text-align: start;
    padding-block: var(--space-20) var(--space-16);
    border-bottom: 8px solid var(--gold-400);
}

.crumbs { justify-content: flex-start; text-transform: uppercase;
 font-feature-settings: 'case' 1; letter-spacing: .1em; font-size: var(--fs-2xs); }

/* ---- Call-to-action band -------------------------------------------- */

.cta-band { background: var(--gold-400); }
.cta-copy h2 { color: var(--navy-950); font-size: var(--fs-2xl); }
.cta-copy p { color: rgba(6, 25, 43, .78); }
.cta-band .btn-primary { background: var(--navy-950); border-color: var(--navy-950); color: #fff; }
.cta-band .btn-primary:hover { background: #fff; border-color: #fff; color: var(--navy-950); }
.cta-band .btn-on-dark { color: var(--navy-950); border-color: rgba(6, 25, 43, .5); }
.cta-band .btn-on-dark:hover { background: var(--navy-950); color: var(--gold-400); border-color: var(--navy-950); }

/* ---- Cards and media ------------------------------------------------
   Photographs sit flush inside their block with no rounding and no
   shadow. Hover shifts colour, not depth. ----------------------------- */

.uni-card,
.news-card,
.gallery-item,
.contact-card,
.usp-card,
.faq-item,
.docs-panel,
.pricing-table-wrapper,
.contact-form {
    border-radius: 0;
    box-shadow: none;
    border: 1px solid var(--border);
}

.uni-card:hover,
.news-card:hover,
.contact-card:hover,
.usp-card:hover {
    box-shadow: none;
    border-color: var(--navy-700);
    transform: none;
}

.uni-media,
.gallery-item,
.gallery-item img,
.news-card img,
.uni-media img { border-radius: 0; }

.gallery-item:hover { transform: none; }

.gallery-filter .tab,
.tab {
    border-radius: 0;
    text-transform: uppercase;
    font-feature-settings: 'case' 1;
    letter-spacing: .08em;
    font-size: var(--fs-2xs);
    font-weight: 700;
}

/* ---- Numbers --------------------------------------------------------
   Set large in the accent with a small uppercase label under a rule. -- */

.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    border-top: var(--rule) solid currentColor;
    margin-top: var(--space-12);
}

.stat {
    padding: var(--space-8) var(--space-6) var(--space-6) 0;
    border-inline-start: 1px solid var(--border);
    padding-inline-start: var(--space-6);
}

.stat:first-child { border-inline-start: 0; padding-inline-start: 0; }

.stat-figure {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.25rem, 1.5rem + 3vw, 3.25rem);
    line-height: 1;
    color: var(--gold-600);
}

.stat-label {
    display: block;
    margin-top: var(--space-3);
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    font-feature-settings: 'case' 1;
    letter-spacing: .12em;
    font-weight: 700;
    color: var(--text-secondary);
}

.block-navy .stat-figure,
.block-ink .stat-figure { color: var(--gold-400); }
.block-navy .stat-label,
.block-ink .stat-label { color: rgba(255, 255, 255, .7); }
.block-navy .stat,
.block-ink .stat { border-inline-start-color: rgba(255, 255, 255, .18); }

/* ---- Credential rail, hero, footer ---------------------------------- */

.credential-rail { border-top-width: var(--rule); }
.credential:hover { background: var(--paper-100); }

.hero {
    background:
        linear-gradient(90deg, rgba(6, 25, 43, .93) 0%, rgba(6, 25, 43, .74) 62%, rgba(6, 25, 43, .55) 100%),
        url("img/gallery-1.jpg") center / cover no-repeat;
    border-bottom: 8px solid var(--gold-400);
}

.hero-badge {
    border-radius: 0;
    text-transform: uppercase;
    font-feature-settings: 'case' 1;
    letter-spacing: .12em;
    font-size: var(--fs-2xs);
    font-weight: 700;
}

.footer { background: var(--block-black); }
.footer-title { text-transform: uppercase;
 font-feature-settings: 'case' 1; letter-spacing: .12em; font-size: var(--fs-xs); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
.social-link { border-radius: 0; }

/* Focus stays square with the rest, and stays visible on every ground. */
:focus-visible { outline: 3px solid var(--gold-400); outline-offset: 2px; border-radius: 0; }

/* Gallery sits on black, so its controls and captions invert with it. */
.block-ink .tab,
.block-ink .gallery-filter .tab {
    color: rgba(255, 255, 255, .78);
    border-color: rgba(255, 255, 255, .28);
    background: transparent;
}

.block-ink .tab[aria-selected="true"],
.block-ink .tab.is-active {
    background: var(--gold-400);
    border-color: var(--gold-400);
    color: var(--navy-950);
}

.block-ink .gallery-item { border-color: rgba(255, 255, 255, .16); }
.block-ink .gallery-note { color: rgba(255, 255, 255, .62); }

/* ---- Inside a colour block ------------------------------------------
   Components read their colours from the semantic aliases, so a block
   only has to redefine the aliases. Enumerating every child selector
   would drift the moment a component is added. ------------------------- */

.block-navy,
.block-ink {
    --text-primary: rgba(255, 255, 255, .88);
    --text-secondary: rgba(255, 255, 255, .78);
    --text-muted: rgba(255, 255, 255, .62);
    --text-heading: #FFFFFF;
    --accent-text: var(--gold-300);
    --border: rgba(255, 255, 255, .20);
    --border-subtle: rgba(255, 255, 255, .14);
    --border-strong: rgba(255, 255, 255, .32);
    --bg-surface: transparent;
    --bg-recessed: rgba(255, 255, 255, .06);
    --focus: var(--gold-400);
}

.block-navy h2, .block-navy h3, .block-navy h4,
.block-ink h2, .block-ink h3, .block-ink h4 { color: #fff; }

.block-navy a:not(.btn):not(.nav-cta),
.block-ink a:not(.btn):not(.nav-cta) { color: var(--gold-300); }

.block-navy .tab[aria-selected="true"],
.block-navy .tab.is-active {
    background: var(--gold-400);
    border-color: var(--gold-400);
    color: var(--navy-950);
}

.block-navy .tab { background: transparent; }

/* The pale notice strip keeps its light ground, so its text stays dark. */
.block-navy .programs-note,
.block-ink .programs-note,
.block-navy .news-note,
.block-ink .news-note {
    background: #fff;
    color: var(--ink-700);
    border-radius: 0;
}

.block-navy .programs-note a,
.block-ink .programs-note a,
.block-navy .news-note a,
.block-ink .news-note a { color: var(--navy-600); }

/* Tabs and their panel align with the heading above them, not with the
   page centre. Centring them was what made every section read the same. */
.tablist { justify-content: flex-start; }
.panel-body { margin-inline: 0; }
.gallery-filter { justify-content: flex-start; }

/* ---- Legal pages ----------------------------------------------------
   Long-form prose, so it gets a narrow measure and nothing else. It
   shares the site chrome now instead of carrying its own stylesheet. -- */

.legal { padding-block: var(--section-y); }
.legal .container { max-width: 76ch; }
.legal h2 {
    font-size: var(--fs-lg);
    color: var(--navy-700);
    margin: var(--space-10) 0 var(--space-4);
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: var(--fs-base); color: var(--navy-800); margin: var(--space-6) 0 var(--space-2); }
.legal p, .legal li { color: var(--text-secondary); }
.legal p { margin-bottom: var(--space-4); }
.legal ul, .legal ol { margin: 0 0 var(--space-4) var(--space-5); display: grid; gap: var(--space-2); }
.legal a { color: var(--navy-600); font-weight: 600; }
.legal .updated { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-8); }

/* Placeholders the client still has to supply. Marked so they cannot be
   published by accident. */
.legal .todo {
    border-inline-start: 4px solid var(--gold-400);
    background: var(--gold-100);
    color: var(--gold-700);
    padding: var(--space-3) var(--space-5);
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* Georgian compounds run long and have no hyphenation rules to fall back
   on, so prose is allowed to break inside a word rather than paint past
   its container on a narrow screen. */
p, li, dd, dt, figcaption,
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* Every remaining pill that was not a button. Icons, avatars and social
   chips square off with the rest; only the outline buttons stay round. */
.contact-card-icon,
.footer .social-link,
.uni-badge,
.usp-icon,
.trust-icon,
.step-number,
.news-tag { border-radius: 0; }

/* ============================================================
   LAYOUT PORT
   ------------------------------------------------------------
   The structural half of the language, not just the palette:
   blocks that bleed past the container on one side, a media
   column that overhangs the block it started in, a stacked
   column of colour tiles running off the left edge, and
   bilingual title pairs. Nothing on the page is a centred
   title over a centred subtitle over a three-card row.
   ============================================================ */

/* ---- Section heads --------------------------------------------------
   Left-aligned, with the English line set as a wide-tracked outline
   under the Georgian. It is decorative, so it is hidden from assistive
   technology rather than read out twice. --------------------------- */

.section-head { max-width: 62ch; margin-bottom: var(--space-12); }

.title-en {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1rem, .7rem + 1.1vw, 1.5rem);
    letter-spacing: .14em;
    line-height: 1;
    margin: calc(var(--space-4) * -1) 0 var(--space-5);
    color: transparent;
    -webkit-text-stroke: 1px var(--ink-300);
}

.block-navy .title-en,
.block-ink .title-en,
.split-copy .title-en { -webkit-text-stroke-color: rgba(255, 255, 255, .38); }

.block-gold .title-en { -webkit-text-stroke-color: rgba(6, 25, 43, .38); }

/* ---- Hero -----------------------------------------------------------
   A black frame carrying the title on the left and the three directions
   on the right, a star breaking out of its bottom-left corner, and a
   gold strip beneath holding the English line and the key facts. ------ */

.hero {
    display: block;
    min-height: 0;
    padding: 0;
    border-bottom: 0;
    background: none;
}

.hero-frame {
    position: relative;
    padding-block: clamp(72px, 11vw, 148px) clamp(72px, 10vw, 132px);
    background:
        linear-gradient(90deg, rgba(6, 25, 43, .95) 0%, rgba(6, 25, 43, .80) 55%, rgba(6, 25, 43, .62) 100%),
        url("img/gallery-1.jpg") center / cover no-repeat;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
}

.hero-content { max-width: none; }

.hero-title {
    border-block: 1px dashed rgba(238, 191, 54, .55);
    padding-block: var(--space-6);
    margin-block: var(--space-6);
}

.hero-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-6);
}

.hero-list li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-4);
    font-family: var(--font-display);
    font-size: clamp(1.0625rem, .85rem + .8vw, 1.5rem);
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    text-transform: uppercase;
    font-feature-settings: 'case' 1;
    letter-spacing: .01em;
}

/* Three marks in three colours, the way the reference punctuates its
   list. Colour is decoration here; the text carries the meaning. */
.mark {
    width: 14px;
    height: 14px;
    margin-top: .45em;
    clip-path: polygon(43% 0, 57% 0, 57% 43%, 100% 43%, 100% 57%, 57% 57%, 57% 100%, 43% 100%, 43% 57%, 0 57%, 0 43%, 43% 43%);
    transform: rotate(22.5deg);
}

.mark-gold { background: var(--gold-400); }
.mark-sky { background: var(--navy-300); }
.mark-green { background: #4CC38A; }

.hero-star {
    position: absolute;
    left: calc(50% - 50vw + clamp(4px, 2vw, 40px));
    bottom: -.42em;
    font-size: clamp(120px, 16vw, 240px);
    line-height: 1;
    color: var(--gold-400);
    font-feature-settings: normal;
    pointer-events: none;
    z-index: 1;
}

.hero-strip {
    position: relative;
    z-index: 2;
    background: var(--gold-400);
    color: var(--navy-950);
    padding-block: var(--space-6);
}

.hero-strip-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6) var(--space-10);
}

.hero-strip-en {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.125rem, .85rem + 1.1vw, 1.75rem);
    letter-spacing: .12em;
    line-height: 1;
}

.hero-strip .hero-spec {
    margin: 0;
    border: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5) var(--space-8);
}

.hero-strip .hero-spec div { border-inline-start: 1px solid rgba(6, 25, 43, .28); padding-inline-start: var(--space-6); }
.hero-strip .hero-spec div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.hero-strip .hero-spec dt { color: rgba(6, 25, 43, .72); font-size: var(--fs-2xs); text-transform: uppercase; font-feature-settings: 'case' 1; letter-spacing: .1em; font-weight: 700; }
.hero-strip .hero-spec dd { color: var(--navy-950); font-weight: 700; margin: 2px 0 0; font-size: var(--fs-base); }

/* ---- Asymmetric split ------------------------------------------------
   A colour field covering the left of the row and running off that edge
   of the viewport, with the card column starting inside it and hanging
   past its bottom. The overhang is the whole point. ------------------- */

.split {
    position: relative;
    padding-block: var(--section-y);
}

.split::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: clamp(60px, 12vw, 160px);
    inset-inline-start: calc(50% - 50vw);
    inset-inline-end: 34%;
    background: var(--navy-700);
    z-index: 0;
}

.split-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

.split-copy {
    padding-block: clamp(32px, 5vw, 64px);
    padding-inline-end: var(--space-8);
    /* Sits on the colour field, so it takes the on-dark aliases. */
    --text-primary: rgba(255, 255, 255, .88);
    --text-secondary: rgba(255, 255, 255, .80);
    --text-muted: rgba(255, 255, 255, .64);
    --text-heading: #FFFFFF;
    --border: rgba(255, 255, 255, .22);
    --border-subtle: rgba(255, 255, 255, .14);
}

.split-copy .section-title { color: #fff; }
.split-copy .section-title span { color: var(--gold-300); }
.split-copy .section-label { color: var(--gold-300); }
.split-copy .section-subtitle { color: rgba(255, 255, 255, .80); }
.split-copy .section-head { margin-bottom: var(--space-8); }

.split-copy .bento-path {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, .22);
}

.split-copy .bento-path li {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-weight: 600;
}

.split-copy .bento-path span {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: var(--gold-400);
    color: var(--navy-950);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-sm);
}

.split-panel {
    display: grid;
    gap: 0;
    background: #fff;
    border: 1px solid var(--border);
}

.split-panel .usp-card {
    border: 0;
    border-top: 1px solid var(--border);
    padding: var(--space-8);
    background: #fff;
}

.split-panel .usp-card:first-child { border-top: 0; }
.split-panel .usp-card:hover { background: var(--paper-50); }
.split-panel .usp-icon { color: var(--navy-700); width: 40px; height: 40px; background: none; margin-bottom: var(--space-4); }
.split-panel .usp-card h3 { font-size: var(--fs-md); color: var(--navy-800); margin-bottom: var(--space-2); }

/* ---- Programme tiles -------------------------------------------------
   A stacked column of colour tiles running off the left edge, against a
   wide panel. The tiles are the tablist, so choosing a direction is the
   same control it always was. ---------------------------------------- */

.prog-layout {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
}

.prog-tiles {
    display: grid;
    align-content: start;
    gap: 0;
    overflow: visible;
    justify-content: stretch;
}

.prog-tile {
    position: relative;
    display: grid;
    gap: var(--space-5);
    align-content: space-between;
    min-height: clamp(140px, 15vw, 190px);
    padding: var(--space-8);
    border: 0;
    border-radius: 0;
    text-align: start;
    cursor: pointer;
    font-family: var(--font-display);
    transition: filter var(--dur) var(--ease);
}

/* Each tile carries its colour off the left edge of the viewport. */
.prog-tile::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 100%;
    width: 50vw;
    background: inherit;
}

.prog-tile-name {
    font-size: clamp(1.0625rem, .9rem + .5vw, 1.375rem);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    font-feature-settings: 'case' 1;
    letter-spacing: .01em;
}

.prog-tile-cue {
    justify-self: start;
    border: 2px solid currentColor;
    border-radius: var(--radius-full);
    padding: 6px 20px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-feature-settings: 'case' 1;
}

.prog-tile--navy { background: var(--navy-700); color: #fff; }
.prog-tile--gold { background: var(--gold-400); color: var(--navy-950); }
.prog-tile--ink { background: var(--block-black); color: #fff; }

.prog-tile:hover { filter: brightness(1.12); }

/* The chosen tile steps forward and points into its panel. */
.prog-tile[aria-selected="true"] { z-index: 2; }

.prog-tile[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset-inline-start: 100%;
    top: 50%;
    width: 18px;
    height: 18px;
    background: inherit;
    transform: translate(-50%, -50%) rotate(45deg);
}

.prog-tile:not([aria-selected="true"]) { filter: brightness(.82); }
.prog-tile:not([aria-selected="true"]):hover { filter: brightness(1); }

.prog-panels {
    background: var(--paper-100);
    padding: clamp(28px, 4vw, 56px);
    border: 1px solid var(--border);
    border-inline-start: 0;
}

.prog-panels .tabpanel { padding-top: 0; }
.prog-panels .panel-body { max-width: 68ch; margin-inline: 0; }
.prog-panels .panel-copy h3 { color: var(--navy-800); }

/* ---- Promo band -----------------------------------------------------
   One black full-width band with the title in Georgian over its English
   line, closed by a grey rule. ---------------------------------------- */

.promo-band {
    background: var(--block-black);
    color: #fff;
    padding-block: clamp(56px, 8vw, 104px) 0;
    text-align: center;
}

.promo-ka {
    font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
    font-weight: 700;
    text-transform: uppercase;
    font-feature-settings: 'case' 1;
    letter-spacing: .015em;
    line-height: 1.12;
    color: #fff;
    margin: 0;
}

.promo-en {
    font-family: var(--font-display);
    font-size: clamp(1.125rem, .8rem + 1.4vw, 2rem);
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1;
    margin: var(--space-4) 0 0;
    color: var(--gold-400);
}

.promo-copy {
    max-width: 58ch;
    margin: var(--space-6) auto 0;
    color: rgba(255, 255, 255, .78);
}

.promo-band .cta-actions {
    justify-content: center;
    margin: var(--space-8) 0 clamp(48px, 6vw, 80px);
}

.promo-band .btn-primary { background: var(--gold-400); border-color: var(--gold-400); color: var(--navy-950); }
.promo-band .btn-primary:hover { background: #fff; border-color: #fff; }
.promo-band .btn-on-dark { color: #fff; border-color: rgba(255, 255, 255, .5); }

.promo-rule { height: 14px; background: var(--ink-700); }

/* ---- Partner cards --------------------------------------------------
   Flush against each other with shared hairlines, and the row runs past
   the right edge of the container. ------------------------------------ */

.universities .uni-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-inline-end: calc(50% - 50vw);
    border-block: 1px solid var(--border);
}

.universities .uni-card {
    border: 0;
    border-inline-start: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: #fff;
}

.universities .uni-card:nth-child(odd) { border-inline-start: 0; }
.universities .uni-card:nth-last-child(-n+2) { border-bottom: 0; }
.universities .uni-body { padding: var(--space-8); }

/* ---- Gallery runs edge to edge --------------------------------------- */

.gallery .gallery-grid {
    margin-inline: calc(50% - 50vw);
    padding-inline: 0;
    gap: 0;
}

.gallery .gallery-item { border: 0; outline: 1px solid rgba(255, 255, 255, .14); outline-offset: -1px; }

/* ---- Narrow screens -------------------------------------------------
   The bleeds and overhangs are a wide-viewport device. Below 900px
   everything stacks and the colour fields go full width. ------------- */

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr); }
    .hero-list { border-top: 1px solid rgba(255, 255, 255, .22); padding-top: var(--space-8); }
    .hero-star { font-size: 96px; left: -8px; }

    .split::before { inset-inline-end: calc(50% - 50vw); bottom: auto; height: 100%; }
    .split-grid { grid-template-columns: minmax(0, 1fr); }
    .split-copy { padding-inline-end: 0; }

    .prog-layout { grid-template-columns: minmax(0, 1fr); }
    .prog-tile { min-height: 0; }
    .prog-tile::before { content: none; }
    .prog-tile[aria-selected="true"]::after { inset-inline-start: 50%; top: 100%; }
    .prog-panels { border-inline-start: 1px solid var(--border); border-top: 0; }

    .universities .uni-grid { grid-template-columns: minmax(0, 1fr); margin-inline-end: 0; }
    .universities .uni-card { border-inline-start: 0; border-bottom: 1px solid var(--border); }
    .universities .uni-card:last-child { border-bottom: 0; }

    .gallery .gallery-grid { margin-inline: 0; }
}

/* The base .tab[aria-selected] rule is more specific than a single tile
   class, so the tile colours are stated at matching specificity. */
.prog-tile.prog-tile--navy { background: var(--navy-700); color: #fff; }
.prog-tile.prog-tile--gold { background: var(--gold-400); color: var(--navy-950); }
.prog-tile.prog-tile--ink { background: var(--block-black); color: #fff; }
.prog-tile.prog-tile--navy:hover,
.prog-tile.prog-tile--gold:hover,
.prog-tile.prog-tile--ink:hover { color: inherit; }

/* Cards in the split panel align with everything else on the page. */
.split-panel .usp-card { text-align: start; }
.split-panel .usp-icon { margin-inline: 0; }

/* .tabs clips its children; the tile bleed has to escape it. */
.prog-layout { overflow: visible; }

/* Partner cards read left to right like the rest of the page. The badge
   moves out of the centre with them. */
.universities .uni-body { align-items: flex-start; text-align: start; padding-top: var(--space-10); }
.universities .uni-badge { inset-inline: var(--space-8) auto; margin: 0; top: -30px; width: 60px; height: 60px; }
.universities .uni-tags,
.universities .uni-benefits { justify-content: flex-start; }
.universities .uni-specs { align-self: stretch; }

/* The benefit list is a row of square chips, not a centred cloud of pills. */
.uni-benefits {
    justify-content: flex-start;
    margin-inline: 0;
    max-width: none;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}
.uni-benefits li {
    border-radius: 0;
    background: #fff;
    margin: 0;
    padding: var(--space-3) var(--space-5);
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    font-feature-settings: 'case' 1;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--navy-700);
    flex: 1 1 auto;
    text-align: center;
}
.uni-tags li { border-radius: 0; }

/* An underline carries the link; the arrow was decoration. */
.uni-link, .news-link { text-decoration: underline; text-underline-offset: 4px; }

/* The mobile hero centres its copy, but the direction list has its mark
   on the left, so its text stays left too. */
@media (max-width: 900px) {
    .hero-list, .hero-list li { text-align: start; }
    .hero-strip-inner { justify-content: flex-start; }
}

/* ============================================================
   CONTRAST CORRECTIONS
   Component colours written for one ground do not survive being
   moved to another. These are the pairs an automated sweep of
   every rendered element found below WCAG AA.
   ============================================================ */

/* ink-500 was 3.96:1 on the paper ground, and it is used for small
   text, not just large. */
:root { --text-muted: #5F6E81; }

.topbar,
.topbar a,
.topbar-hours { color: rgba(255, 255, 255, .85); }

/* The English line is decorative, but it still has to be seen. */
.title-en { -webkit-text-stroke: 1.2px #48586D; }
.block-navy .title-en,
.block-ink .title-en,
.split-copy .title-en { -webkit-text-stroke-color: rgba(255, 255, 255, .62); }
.block-gold .title-en { -webkit-text-stroke-color: rgba(6, 25, 43, .6); }

/* A gold fill is only 1.73:1 against a white ground, so on light the
   primary button carries a dark edge to define its boundary. On a dark
   ground the fill already does that, and the edge disappears. */
.btn-primary,
.nav-cta {
    border: var(--rule) solid var(--navy-950);
}

.hero .btn-primary,
.promo-band .btn-primary,
.block-navy .btn-primary,
.block-ink .btn-primary,
.cta-band .btn-primary { border-color: transparent; }

/* Same problem at the edge of the gold tile: it meets the paper panel
   with almost no step, so the column is separated by a hard rule. */
.prog-tiles { border-inline-end: var(--rule) solid var(--ink-900); }

/* The colour field behind the split was a pseudo-element, which means
   nothing that inspects the page, including a contrast sweep, can see
   what the text is actually sitting on. It is a real element now. */
.split::before { content: none; }

.split-field {
    position: absolute;
    top: 0;
    bottom: clamp(60px, 12vw, 160px);
    inset-inline-start: calc(50% - 50vw);
    inset-inline-end: 34%;
    background: var(--navy-700);
    z-index: 0;
}

/* The tiles need a boundary of their own where they meet the paper, and
   the bleed strip carries the same rules so the line runs unbroken. */
.prog-tile { border-block: 1px solid var(--ink-900); }
.prog-tile::before { border-block: 1px solid var(--ink-900); box-sizing: border-box; }

@media (max-width: 900px) {
    .split-field { inset-inline-end: calc(50% - 50vw); bottom: auto; height: 100%; }
}

/* Form fields were outlined in ink-200, 1.2:1 against the page. A control
   boundary has to reach 3:1 to be seen at all. */
.contact-form input,
.contact-form select,
.contact-form textarea,
.form-group input,
.form-group select,
.form-group textarea {
    border-color: var(--ink-500);
}

/* ============================================================
   MOBILE ERGONOMICS
   ------------------------------------------------------------
   Measured at 390px rather than assumed: every control the
   finger has to hit is brought to 48x48, the drawer becomes a
   real slide-out with a backdrop, form fields stop triggering
   iOS zoom, and the two actions that matter move into the
   thumb zone at the bottom of the screen.
   ============================================================ */

:root {
    --tap: 48px;
    --bar-h: 60px;
    --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---- Slide-out drawer ------------------------------------------------
   It used to drop in from the top. A panel that comes in from the edge
   the thumb is already on is easier to reach and easier to dismiss. --- */

.menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 25, 43, .55);
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease);
    z-index: calc(var(--z-nav) + 1);
}

.menu-backdrop.active { opacity: 1; }

.mobile-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    inset-inline-start: auto;
    width: min(86vw, 380px);
    height: 100%;
    max-height: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--space-6) var(--space-6) calc(var(--space-8) + var(--safe-b));
    background: #fff;
    border-inline-start: var(--rule) solid var(--ink-900);
    transform: translateX(101%);
    transition: transform var(--dur-slow) var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: calc(var(--z-nav) + 2);
    visibility: hidden;
}

.mobile-menu.active {
    transform: translateX(0);
    visibility: visible;
}

/* While it is sliding, it must not be reachable by tab or by the
   screen reader. */
.mobile-menu:not(.active) { pointer-events: none; }

.mobile-menu a {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: var(--navy-800);
}

.mobile-menu a:last-of-type { border-bottom: 0; }
.mobile-menu a:active { background: var(--paper-100); }

/* ---- Touch targets ---------------------------------------------------
   Anything the finger aims at gets 48x48. Links inside a sentence are
   deliberately left alone: WCAG exempts them, and padding them out would
   wreck the line rhythm of the prose they sit in. ---------------------- */

@media (max-width: 900px) {
    .hamburger {
        width: var(--tap);
        height: var(--tap);
        display: grid;
        place-content: center;
        gap: 5px;
        padding: 0;
    }

    .nav-brand { min-height: var(--tap); display: flex; align-items: center; }

    .topbar a,
    .topbar-contact a {
        display: inline-flex;
        align-items: center;
        min-height: var(--tap);
    }

    .btn,
    .nav-cta,
    .tab,
    .social-link,
    .gallery-filter .tab,
    .faq-question,
    .uni-specs summary,
    .map-container a,
    .scroll-top {
        min-height: var(--tap);
    }

    .btn, .nav-cta { display: inline-flex; align-items: center; justify-content: center; }
    .social-link { min-width: var(--tap); }

    /* Comfortable vertical rhythm once the grids have stacked. */
    .hero-buttons,
    .cta-actions,
    .admission-cta { gap: var(--space-4); }

    .hero-buttons .btn,
    .cta-actions .btn { width: 100%; }
}

/* ---- Forms -----------------------------------------------------------
   Under 16px, iOS zooms the page on focus and the reader has to pinch
   back out. Single column, generous fields, full-width submit. -------- */

@media (max-width: 900px) {
    .contact-form input,
    .contact-form select,
    .contact-form textarea,
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px;
        min-height: var(--tap);
        padding: var(--space-3) var(--space-4);
    }

    .contact-form textarea { min-height: 120px; }
    .form-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    .contact-form button[type="submit"],
    .contact-form .btn { width: 100%; }
    .form-group label { font-size: var(--fs-sm); }
}

/* ---- Thumb-zone action bar -------------------------------------------
   The two things a visitor actually wants to do sit within reach of the
   thumb instead of at the top of a long page. ------------------------- */

.action-bar { display: none; }

@media (max-width: 900px) {
    .action-bar {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        align-items: stretch;
        background: #fff;
        border-top: var(--rule) solid var(--ink-900);
        padding-bottom: var(--safe-b);
        z-index: var(--z-float);
    }

    .action-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: var(--bar-h);
        padding: var(--space-2) var(--space-4);
        font-size: var(--fs-2xs);
        font-weight: 700;
        color: var(--navy-800);
        border-inline-end: 1px solid var(--border);
    }

    .action-item:active { background: var(--paper-100); }

    .action-item--primary {
        background: var(--gold-400);
        color: var(--navy-950);
        border-inline-end: 0;
        text-transform: uppercase;
        font-feature-settings: 'case' 1;
        letter-spacing: .06em;
        font-size: var(--fs-xs);
    }

    /* The bar floats over the page, so the page ends above it. */
    body { padding-bottom: calc(var(--bar-h) + var(--safe-b)); }

    /* Its jobs are covered by the bar now. */
    .whatsapp-float { display: none; }
    .scroll-top { bottom: calc(var(--bar-h) + var(--safe-b) + var(--space-4)); }
}

/* ---- Swipeable partner cards -----------------------------------------
   Four stacked cards is a long scroll on a phone. They become one
   swipeable rail with snap points and a dot for each card. Native
   momentum and drag come from the scroll container itself, so there is
   no gesture library and no jank. -------------------------------------- */

@media (max-width: 768px) {
    .universities .uni-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 84%;
        grid-template-columns: none;
        gap: var(--space-4);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        padding-bottom: var(--space-4);
        border-block: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .universities .uni-grid::-webkit-scrollbar { display: none; }

    .universities .uni-card {
        scroll-snap-align: start;
        border: 1px solid var(--border);
        height: auto;
    }

    .universities .uni-card:nth-child(odd) { border-inline-start: 1px solid var(--border); }
}

/* The dots are built by the script only when the rail is active, so they
   never appear as dead decoration on a desktop grid. */
.rail-dots {
    display: none;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.rail-dots.is-on { display: flex; }

.rail-dot {
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    border: 0;
    background: none;
    display: grid;
    place-content: center;
    cursor: pointer;
}

.rail-dot::before {
    content: "";
    width: 9px;
    height: 9px;
    background: var(--ink-300);
    transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}

.rail-dot[aria-current="true"]::before { background: var(--navy-700); width: 26px; }

/* ---- Tablet ----------------------------------------------------------
   Between 768 and 1024 the split and the tile column still work, but
   they need room, and the partner grid reads better as two. ----------- */

@media (min-width: 769px) and (max-width: 1024px) {
    .split-grid { gap: var(--space-8); }
    .prog-layout { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
    .prog-tile { padding: var(--space-6); }
    .hero-grid { gap: var(--space-8); }
}

/* ---- Motion ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .mobile-menu,
    .menu-backdrop { transition: none; }
    .universities .uni-grid { scroll-behavior: auto; }
}

/* Footer and breadcrumb links are navigation, so they get a real target
   too. Links inside a sentence stay as they are: WCAG exempts them, and
   padding them out would break the line rhythm of the prose. */
@media (max-width: 900px) {
    .footer-links a,
    .crumbs a,
    .crumbs {
        display: inline-flex;
        align-items: center;
        min-height: var(--tap);
    }

    .footer-links { gap: 0; }
    .footer-links a { width: 100%; }
}

/* Two more real targets: the gallery filter buttons carry no class of
   their own, and the source link ends each news item as its own block
   rather than sitting inside a sentence. */
@media (max-width: 900px) {
    .gallery-filter button,
    .news-link,
    .uni-link {
        min-height: var(--tap);
        display: inline-flex;
        align-items: center;
    }
}

/* The drawer has to cover the action bar, or the bar stays lit and
   tappable underneath an open menu. */
.menu-backdrop { z-index: calc(var(--z-float) + 1); }
.mobile-menu { z-index: calc(var(--z-float) + 2); }

/* On a phone the utility strip repeated the phone number, the address
   and the email that the action bar and footer already carry, and cost
   about 170px of the first screen to do it. */
@media (max-width: 900px) {
    .topbar { display: none; }
}

/* ---- University heritage --------------------------------------------
   The story sits behind a disclosure so the card stays scannable, with
   the verifiable numbers pulled out as a strip and the source named, the
   way the rest of the site cites its claims. -------------------------- */

.uni-heritage p {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    margin: var(--space-4) 0 0;
}

.uni-facts {
    display: grid;
    /* minmax(0, ...) rather than auto-fit: the labels are long enough that
       their min-content width collapses an auto-fit track to one column. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
    background: var(--border);
    border: 1px solid var(--border);
}

.uni-facts li {
    display: grid;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    background: #fff;
}

.uni-facts b {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.1;
    color: var(--navy-700);
}

.uni-facts span {
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    font-feature-settings: 'case' 1;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--text-muted);
}

.uni-source {
    margin: var(--space-4) 0 0;
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

.uni-source a { color: var(--navy-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* The source attribution sits directly above the official-site link, so
   on a phone it needs its own target and a gap between the two. */
@media (max-width: 900px) {
    .uni-source { margin-bottom: var(--space-3); }
    .uni-source a { display: inline-flex; align-items: center; min-height: var(--tap); }
}

/* ---- Faculty showcase ------------------------------------------------
   Each card leads with its media slot. Until a real photograph arrives
   the slot is a labelled placeholder that reserves the exact aspect
   ratio the final image will occupy, so nothing reflows when the picture
   is dropped in. ------------------------------------------------------- */

.faculty-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.faculty-card {
    display: flex;
    flex-direction: column;
    background: #fff;
}

.faculty-media {
    position: relative;
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    background:
        repeating-linear-gradient(135deg, var(--paper-200) 0 10px, var(--paper-100) 10px 20px);
    border-bottom: 1px solid var(--border);
}

.faculty-media img { width: 100%; height: 100%; object-fit: cover; }

.faculty-media-note {
    text-align: center;
    font-size: var(--fs-2xs);
    line-height: 1.5;
    color: var(--ink-600);
    text-transform: uppercase;
    font-feature-settings: 'case' 1;
    letter-spacing: .08em;
    font-weight: 700;
    padding: var(--space-4);
}

.faculty-media-note b {
    display: inline-block;
    margin-top: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    color: var(--navy-700);
    letter-spacing: .04em;
}

.faculty-body { padding: var(--space-8); display: grid; align-content: start; gap: var(--space-3); }
.faculty-body h3 { font-size: var(--fs-lg); color: var(--navy-800); margin: 0; }

.faculty-where {
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    font-feature-settings: 'case' 1;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--navy-600);
    margin: 0;
}

.faculty-body p { color: var(--text-secondary); font-size: var(--fs-sm); margin: 0; }

.faculty-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-2); }

.faculty-list li {
    position: relative;
    padding-inline-start: var(--space-5);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.faculty-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .62em;
    width: 7px;
    height: 7px;
    background: var(--gold-500);
}

.faculty-note {
    margin-top: var(--space-8);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.faculty-note a { color: var(--navy-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.uni-facts li { min-width: 0; }
.uni-facts b, .uni-facts span { overflow-wrap: break-word; }

@media (max-width: 560px) {
    .uni-facts { grid-template-columns: minmax(0, 1fr); }
}

/* The details toggle and the official-site link are both full-width
   targets stacked directly on top of each other on a phone. */
@media (max-width: 900px) {
    .uni-specs { margin-bottom: var(--space-4); }
}