.overview-collage-wrapper {
    margin-top: 3rem;
}

.overview-collage-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--navy-blue);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.overview-collage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.overview-collage .collage-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(14, 25, 44, 0.55);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
    min-height: 360px;
}

.overview-collage .collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease, opacity 0.45s ease;
}

.overview-collage .collage-item:hover img {
    transform: scale(1.02);
    opacity: 0.98;
}

.collage-item-a,
.collage-item-b,
.collage-item-c,
.collage-item-d,
.collage-item-e {
    grid-column: auto;
    grid-row: auto;
}

.overview-collage .collage-item-e {
    grid-column: 1 / -1;
    min-height: clamp(320px, 45vw, 520px);
}

@media (max-width: 768px) {
    .overview-collage {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .overview-collage .collage-item {
        min-height: 300px;
    }
}

@media (max-width: 520px) {
    .overview-collage {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .overview-collage .collage-item {
        min-height: 260px;
    }
}

.subjects-accordion {
    margin-top: 1.75rem;
    display: grid;
    gap: 1rem;
}

.subject-item {
    background: rgba(9, 19, 36, 0.75);
    border: 1px solid rgba(253, 210, 110, 0.3);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.subject-item summary {
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--navy-blue);
    background: rgba(253, 210, 110, 0.85);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.subject-item summary::-webkit-details-marker {
    display: none;
}

.subject-item summary::after {
    content: "+";
    font-size: 1.25rem;
    color: var(--navy-blue);
    transition: transform 0.3s ease;
}

.subject-item[open] summary::after {
    transform: rotate(45deg);
}

.subject-item p {
    padding: 0 1.25rem 1.1rem;
    margin: 0;
    line-height: 1.65;
    color: #fdd26e;
}

.subject-item[open] {
    border-color: rgba(253, 210, 110, 0.55);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
}

@media (max-width: 768px) {
    .subjects-accordion {
        gap: 0.85rem;
    }

    .subject-item summary {
        padding: 0.9rem 1rem;
        font-size: 0.95rem;
    }

    .subject-item p {
        padding: 0 1rem 1rem;
    }
}


.stats {
    padding: calc(var(--spacing-5xl) * 1.5) 0;
}

/* Academic Overview compact layout */
#academic-overview.page-section {
    padding: 1.5rem 0;
    /* reduce vertical padding more */
}

#academic-overview .container {
    max-width: 1200px;
    /* allow 4-up grid on desktop */
    padding: 0 0.5rem !important;
    /* minimal side padding */
}

#academic-overview .sports-nav-container {
    gap: 0.75rem;
    /* tighter gap between nav and content */
    padding: 0;
    /* remove inner horizontal padding */
    max-width: 100%;
    /* use full width of container */
    margin-left: 0;
    /* align further left */
}

#academic-overview .sports-nav-panel {
    flex: 0 0 160px;
    /* narrower nav panel */
    padding: var(--spacing-sm);
    top: 92px;
    /* bring sticky start higher */
}

#academic-overview .sports-content {
    padding-right: 0;
    /* remove extra right padding */
}

#academic-overview .section-header {
    margin-bottom: 0.75rem;
    /* reduce header spacing */
}

#academic-overview .content p {
    margin-bottom: 0.5rem;
    /* tighter paragraph spacing */
}

/* Compact the class photo grid on Academic Overview */
#academic-overview .facilities-grid {
    gap: 0.75rem;
    /* tighter grid gap */
    grid-template-columns: repeat(4, 1fr);
    /* 4 per row on desktop */
}

#academic-overview .facility-tile {
    aspect-ratio: 4 / 3;
    /* less tall cards */
}

/* Decorative mascot background for ALL Academic Overview tabs - using pseudo-element to avoid clipping */
#academic-overview #sports-overview::before,
#academic-overview #sports-subjects::before,
#academic-overview #sports-grade1-4::before,
#academic-overview #sports-grade5-7::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 1000px;
    background-image: url('../images/School Mascot/M3.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    z-index: 0;
    pointer-events: none;
    opacity: 0.3;
}

#academic-overview #sports-overview,
#academic-overview #sports-subjects,
#academic-overview #sports-grade1-4,
#academic-overview #sports-grade5-7 {
    position: relative;
    min-height: 900px;
    padding: 4rem 3rem;
    overflow: visible !important;
}

/* Ensure content stays above mascot */
#academic-overview #sports-overview .section-header,
#academic-overview #sports-overview .content,
#academic-overview #sports-subjects .section-header,
#academic-overview #sports-subjects .content,
#academic-overview #sports-grade1-4 .section-header,
#academic-overview #sports-grade1-4 .content,
#academic-overview #sports-grade5-7 .section-header,
#academic-overview #sports-grade5-7 .content {
    position: relative;
    z-index: 1;
}

/* Ensure ALL parent containers don't clip */
#academic-overview .sports-nav-container {
    overflow: visible !important;
    max-width: 100% !important;
}

#academic-overview .sports-content {
    overflow: visible !important;
    position: relative;
}

#academic-overview .sports-section {
    overflow: visible !important;
    position: relative;
}

/* Remove any max-width restrictions on the section */
#academic-overview .history-section,
#academic-overview .page-section {
    overflow: visible !important;
}

#academic-overview .container {
    overflow: visible !important;
}

/* Ensure content remains readable over background for all tabs */
#academic-overview #sports-overview .content,
#academic-overview #sports-subjects .content,
#academic-overview #sports-grade1-4 .content,
#academic-overview #sports-grade5-7 .content {
    background: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    padding: 1rem;
    backdrop-filter: blur(1px);
}

/* When space is limited, move nav panel above content (under header visually) */
@media (max-width: 1200px) {
    #academic-overview .sports-nav-container {
        flex-direction: column;
    }

    #academic-overview .sports-nav-panel {
        position: static;
        /* disable sticky */
        width: 100%;
        flex: 0 0 auto;
        margin-bottom: 0.75rem;
    }
}

/* Responsive grid: gracefully reduce columns */
@media (max-width: 992px) {
    #academic-overview .facilities-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    #academic-overview .facilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 440px) {
    #academic-overview .facilities-grid {
        grid-template-columns: 1fr;
    }
}

html {
    background-color: #ffffff;
}

body,
header,
main,
section,
footer {
    position: relative;
}

/* Section-level mascot placement */
.ecd-content-section {
    position: relative;
}

.mascot-fixed {
    position: absolute;
    width: 120px;
    height: auto;
    pointer-events: none;
    z-index: 3;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 20px rgba(255, 215, 0, 0.4));
    animation: mascotFloat 3s ease-in-out infinite;
    transform-origin: center;
}

/* Floating animation for mascots */
@keyframes mascotFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }

    25% {
        transform: translateY(-8px) rotate(-2deg) scale(1.05);
    }

    50% {
        transform: translateY(-12px) rotate(0deg) scale(1.08);
    }

    75% {
        transform: translateY(-8px) rotate(2deg) scale(1.05);
    }
}

/* Pulse glow effect */
@keyframes mascotPulse {

    0%,
    100% {
        filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 20px rgba(255, 215, 0, 0.4));
    }

    50% {
        filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 30px rgba(255, 215, 0, 0.6));
    }
}

.mascot-fixed:hover {
    animation: mascotFloat 0.5s ease-in-out infinite, mascotPulse 1.5s ease-in-out infinite;
    transform: scale(1.15);
}

.mascot-top-right {
    top: -10px;
    right: -10px;
}

.mascot-top-left {
    top: -10px;
    left: -10px;
}

.mascot-bottom-right {
    bottom: -10px;
    right: -10px;
}

.mascot-bottom-left {
    bottom: -10px;
    left: -10px;
}

/* Philosophy grid blank spot mascot (occupies a grid cell) */
.philosophy-grid .philosophy-mascot-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.philosophy-grid .philosophy-mascot-cell img {
    width: 140px;
    height: auto;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 20px rgba(255, 215, 0, 0.4));
    animation: mascotFloat 3s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.philosophy-grid .philosophy-mascot-cell:hover img {
    transform: scale(1.2) rotate(5deg);
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 30px rgba(255, 215, 0, 0.7));
}

/* Under-navigation mascots (shown per tab via JS) */
.nav-mascot {
    display: none;
    position: relative;
    margin-top: var(--spacing-lg);
    z-index: 5;
    pointer-events: auto;
    width: 220px;
    align-self: center;
}

.nav-mascot img {
    width: 210px;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 25px rgba(255, 215, 0, 0.5));
    animation: mascotFloat 3s ease-in-out infinite;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.nav-mascot:hover img {
    transform: translateY(-6px) scale(1.05);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 35px rgba(255, 215, 0, 0.7));
}

/* Home page Instagram widget wrapper */
.ig-widget-box {
    background: #f3f4f6;
    /* light gray */
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: var(--spacing-xl);
    padding-top: 3rem;
    /* Extra padding at top to create gap */
    box-shadow: var(--shadow-md);
}

/* Increase gap between follow button and posts in Instagram widget */
.ig-widget-box .lightwidget-widget {
    margin-top: 2rem;
    display: block;
}

/* Transparent spacer that reveals the page background */
.spacer-transparent {
    height: 200px;
    background: transparent !important;
}

/* Image spacer to mirror the banner image below stats */
.spacer-image {
    height: 160px;
    background: url('../images/about/DJI_0300.webp') center / cover no-repeat fixed;
}

.spacer-between-video-stats {
    height: var(--spacing-2xl);
}

/* Make Instagram section background transparent so spacer image shows above */
.instagram-feed {
    background-color: rgba(255, 255, 255, 0.95);
    background-image: linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)), url('../images/School Mascot/M3.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover, clamp(360px, 55vw, 900px);
    background-attachment: scroll, fixed;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.about-overlay>*,
.stats>*,
.instagram-feed>* {
    position: relative;
    z-index: 1;
}

/* Staff section mascot sizing (match indicated box) */
#navMascotStaff {
    width: 280px;
    height: 380px;
    position: relative;
    margin: var(--spacing-xl) auto 0;
    z-index: 10;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

#navMascotStaff img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 30px rgba(255, 215, 0, 0.6));
    animation: mascotFloatWave 4s ease-in-out infinite;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Combined float and wave animation for staff mascot */
@keyframes mascotFloatWave {

    0%,
    100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }

    12.5% {
        transform: translateY(-6px) rotate(-2deg) scale(1.03);
    }

    25% {
        transform: translateY(-10px) rotate(-3deg) scale(1.05);
    }

    37.5% {
        transform: translateY(-12px) rotate(0deg) scale(1.06);
    }

    50% {
        transform: translateY(-10px) rotate(3deg) scale(1.05);
    }

    62.5% {
        transform: translateY(-6px) rotate(2deg) scale(1.03);
    }

    75% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
}

#navMascotStaff:hover img {
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.8));
}

/* Programmes mascot bigger */
#navMascotPrograms {
    width: 220px;
    height: 300px;
    position: relative;
    margin: var(--spacing-xl) auto 0;
    z-index: 10;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

#navMascotPrograms img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 30px rgba(255, 215, 0, 0.6));
    animation: mascotFloat 3s ease-in-out infinite;
    transition: transform 0.3s ease, filter 0.3s ease;
}

#navMascotPrograms:hover img {
    transform: scale(1.15) rotate(-5deg);
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.8));
}

/* Ensure under-nav mascot stays under the left navigation column */
.ecd-content-layout {
    display: grid !important;
    grid-template-columns: 320px minmax(0, 1fr);
    align-items: stretch;
    column-gap: var(--spacing-2xl);
    position: relative;
}

.ecd-navigation-column {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    gap: var(--spacing-md);
    align-self: start;
}

.ecd-navigation-column .ecd-navigation {
    width: 100%;
}

.ecd-content-layout .ecd-navigation {
    position: sticky;
    top: 20px;
    align-self: flex-start;
    overflow: visible;
}

.ecd-content-layout .ecd-main-content {
    grid-column: 2;
    margin-top: 0;
    align-self: start;
}

.ecd-navigation {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    height: auto;
    justify-content: flex-start;
}

@media (max-width: 968px) {
    .mascot-fixed {
        width: 90px;
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 15px rgba(255, 215, 0, 0.4));
    }

    .philosophy-grid .philosophy-mascot-cell img {
        width: 110px;
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 15px rgba(255, 215, 0, 0.4));
    }

    .ecd-content-layout .ecd-navigation {
        padding-bottom: var(--spacing-lg);
    }

    .nav-mascot {
        margin-top: var(--spacing-md);
    }

    .nav-mascot img {
        width: 180px;
        filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));
    }
}

/* ECD dynamic mascot */
.ecd-content-layout {
    position: relative;
}

/* mascot removed */
/* ============================= */
/* ECD PAGE – FUN COLOR THEME    */
/* ============================= */
.ecd-page {
    --ecd-red: #FF3B30;
    --ecd-orange: #FF9500;
    --ecd-yellow: #FFD60A;
    --ecd-green: #34C759;
    --ecd-teal: #00C7BE;
    --ecd-blue: #0A84FF;
    --ecd-indigo: #5856D6;
    --ecd-violet: #AF52DE;
    --ecd-pink: #FF2D55;
    background: radial-gradient(1600px 800px at -10% -10%, #fff6e6 0%, #ffffff 40%), radial-gradient(1200px 600px at 110% 10%, #e6f7ff 0%, rgba(255, 255, 255, 0) 50%);
}

.ecd-page .ecd-hero {
    position: relative;
}

.ecd-page .ecd-hero .ecd-overlay {
    background: linear-gradient(180deg, rgba(10, 132, 255, 0.25) 0%, rgba(255, 45, 85, 0.25) 40%, rgba(255, 214, 10, 0.25) 100%);
}

/* Section headers get colorful underline */
.ecd-page .section-header h2,
.ecd-page .ecd-content-section h3 {
    position: relative;
    padding-bottom: 1.25rem;
}

.ecd-page .section-header h2::after,
.ecd-page .ecd-content-section h3::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0.25rem;
    width: 120px;
    height: 6px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--ecd-red), var(--ecd-orange), var(--ecd-yellow), var(--ecd-green), var(--ecd-blue), var(--ecd-indigo), var(--ecd-violet));
}

/* Cards/sections use soft pastel gradients with playful borders */
.ecd-page .ecd-content-section {
    background: linear-gradient(180deg, #ffffff 0%, #fff9f0 40%, #f3fbff 100%);
    border: 2px dashed rgba(10, 132, 255, 0.15);
}

/* ECD nav – alternate pastel backgrounds for items; hover already rainbowed */
.ecd-page .ecd-navigation {
    background: #ffffff;
    position: relative;
}

.ecd-page .ecd-nav-item:nth-child(odd) a {
    background: #fff6e6;
}

.ecd-page .ecd-nav-item:nth-child(even) a {
    background: #e6f7ff;
}

.ecd-page .ecd-nav-item a {
    border-left: 5px solid transparent;
}

.ecd-page .ecd-nav-item:nth-child(1) a {
    border-left-color: var(--ecd-red);
}

.ecd-page .ecd-nav-item:nth-child(2) a {
    border-left-color: var(--ecd-orange);
}

.ecd-page .ecd-nav-item:nth-child(3) a {
    border-left-color: var(--ecd-yellow);
}

.ecd-page .ecd-nav-item:nth-child(4) a {
    border-left-color: var(--ecd-green);
}

.ecd-page .ecd-nav-item:nth-child(5) a {
    border-left-color: var(--ecd-teal);
}

.ecd-page .ecd-nav-item:nth-child(6) a {
    border-left-color: var(--ecd-blue);
}

.ecd-page .ecd-nav-item:nth-child(7) a {
    border-left-color: var(--ecd-indigo);
}

.ecd-page .ecd-nav-item:nth-child(8) a {
    border-left-color: var(--ecd-violet);
}

/* Stats inside ECD */
.ecd-page .ecd-stats .stat-item {
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    border-top: 5px solid var(--ecd-yellow);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Facilities tiles – brighter borders and subtle confetti shadow */
.ecd-page .facilities-grid .facility-tile,
.ecd-page .sports-grid .sport-tile {
    border: 3px solid rgba(255, 149, 0, 0.25);
    box-shadow: 0 10px 24px rgba(255, 149, 0, 0.08), 0 6px 16px rgba(10, 132, 255, 0.06);
}

.ecd-page .facilities-grid .facility-tile:hover,
.ecd-page .sports-grid .sport-tile:hover {
    border-color: rgba(10, 132, 255, 0.35);
}

/* Fun badges for small titles */
.ecd-page .facility-title {
    background: linear-gradient(180deg, rgba(255, 214, 10, 0) 0%, rgba(255, 214, 10, 0.9) 90%);
}

/* Responsive tweaks */
@media (max-width: 968px) {
    .ecd-page {
        background: radial-gradient(1000px 500px at -20% -10%, #fff6e6 0%, #ffffff 50%), radial-gradient(900px 500px at 120% 10%, #e6f7ff 0%, rgba(255, 255, 255, 0) 60%);
    }
}

/*
===========================================
WESTRIDGE PRIMARY SCHOOL WEBSITE STYLES
===========================================

This stylesheet contains all the styling for the Westridge Primary School website.
It includes responsive design, animations, and mobile-first approach.

Key Features:
- Responsive design for desktop, tablet, and mobile
- Golden yellow and navy blue color scheme
- Modern typography with Inter font family
- Interactive animations and transitions
- Mobile navigation with hamburger menu
- Dynamic content styling

Structure:
1. CSS Reset and Base Styles
2. CSS Custom Properties (Variables)
3. Typography and Base Elements
4. Layout Components (Header, Footer, Navigation)
5. Page-Specific Styles
6. Interactive Elements
7. Responsive Design (Mobile First)
8. Utility Classes

Author: Westridge Primary School
Version: 1.0.0
Last Updated: 2024
*/

/* =========================================== */
/* CSS RESET AND BASE STYLES */
/* =========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========================================== */
/* CSS CUSTOM PROPERTIES (VARIABLES) */
/* =========================================== */
:root {
    /* Color Scheme - Golden Yellow and Navy Blue Theme */
    --primary-gold: #FFD700;
    /* Main golden yellow */
    --secondary-gold: #FFA500;
    /* Secondary golden yellow */
    --dark-gold: #B8860B;
    /* Dark golden yellow */
    --navy-blue: #1e3a8a;
    /* Main navy blue */
    --dark-navy: #1e1b4b;
    /* Dark navy blue */
    --light-navy: #3b82f6;
    /* Light navy blue */
    --white: #ffffff;
    /* Pure white */
    --light-gray: #f8fafc;
    /* Light gray background */
    --gray: #64748b;
    /* Medium gray */
    --dark-gray: #334155;
    /* Dark gray */
    --text-dark: #1e293b;
    /* Dark text color */

    /* Typography - Inter Font Family */
    --font-primary: 'Inter', sans-serif;
    /* Main font family */
    --font-size-xs: 0.75rem;
    /* Extra small text */
    --font-size-sm: 0.875rem;
    /* Small text */
    --font-size-base: 1rem;
    /* Base text size */
    --font-size-lg: 1.125rem;
    /* Large text */
    --font-size-xl: 1.25rem;
    /* Extra large text */
    --font-size-2xl: 1.5rem;
    /* 2x large text */
    --font-size-3xl: 1.875rem;
    /* 3x large text */
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;
    --spacing-4xl: 8rem;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --gradient-gold: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    --gradient-navy: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);

    /* Transitions */
    --transition-fast: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Header height for fixed positioning offset */
    --header-height: 90px;
}

html,
body {
    font-family: var(--font-primary);
    line-height: 1.7;
    color: var(--text-dark);
    background-color: var(--white);
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    height: auto;
    min-height: 100vh;
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    padding-top: var(--header-height);
}

/* Ensure all sections are properly sized */
section {
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

/* Header Styles */
.header {
    background: var(--white);
    color: var(--text-dark);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-bottom: 4px solid var(--primary-gold);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: var(--transition-smooth);
    height: auto;
    min-height: 80px;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--light-gray);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.logo-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 8px;
    flex-shrink: 0;
    max-width: 60px;
    max-height: 60px;
}

.logo-text h1 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--navy-blue);
    margin-bottom: 0;
}

.logo-text p {
    font-size: var(--font-size-sm);
    color: var(--gray);
    margin: 0;
}


/* Navigation Styles */
.main-nav {
    position: relative;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    flex-wrap: wrap;
}

.nav-link {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs);
    border-radius: 6px;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
    background-color: var(--primary-gold);
    color: var(--navy-blue);
}

/* Special hover for ECD tab (fun, colorful) */
.main-nav .nav-list a[href="ecd.html"]:hover {
    background: linear-gradient(135deg, #FF3B30, #FF9500, #FFD60A, #34C759, #0A84FF, #5856D6, #AF52DE);
    background-size: 400% 400%;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(10, 132, 255, 0.25);
    animation: ecdRainbow 3s ease infinite;
}

@keyframes ecdRainbow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ECD Blast Animation */
.ecd-blast-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 4000;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
    animation: ecdBlastOverlayFade 1400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ecd-blast-rings {
    position: relative;
    width: clamp(220px, 32vw, 420px);
    aspect-ratio: 1;
}

.ecd-blast-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    mix-blend-mode: screen;
}

.ecd-blast-ring.ring-one {
    background: radial-gradient(circle, rgba(255, 59, 48, 0.9), rgba(255, 149, 0, 0));
    animation: ecdBlastExpand 1200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ecd-blast-ring.ring-two {
    background: radial-gradient(circle, rgba(10, 132, 255, 0.85), rgba(90, 200, 250, 0));
    animation: ecdBlastExpand 1300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 80ms;
}

.ecd-blast-ring.ring-three {
    background: radial-gradient(circle, rgba(88, 86, 214, 0.85), rgba(175, 82, 222, 0));
    animation: ecdBlastExpand 1400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 160ms;
}

@keyframes ecdBlastExpand {
    0% {
        transform: scale(0.15);
        opacity: 1;
    }

    60% {
        opacity: 0.92;
    }

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

@keyframes ecdBlastOverlayFade {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    65% {
        opacity: 0.9;
    }

    100% {
        opacity: 0;
    }
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    min-width: 200px;
    box-shadow: var(--shadow-lg);
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition-normal);
    z-index: 100;
    list-style: none;
    padding: var(--spacing-xs) 0;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-dark);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: var(--transition-fast);
}

.dropdown-menu a:hover {
    background-color: var(--light-gray);
    color: var(--navy-blue);
}

/* Simple Mobile Navigation Button */
.mobile-nav-btn {
    display: none;
    position: fixed;
    right: 20px;
    top: 20px;
    background: var(--primary-gold);
    border: 2px solid var(--navy-blue);
    border-radius: 8px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 1001;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 4px;
}

.mobile-nav-btn span {
    width: 25px;
    height: 3px;
    background: var(--navy-blue);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-nav-btn.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.mobile-nav-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-nav-btn.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Mobile Navigation */
.mobile-nav {
    display: none;
}

/* Mobile Navigation Menu */
.mobile-nav-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    height: 100vh;
    background: var(--white);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 999;
    transition: left 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
}

.mobile-nav-menu.active {
    left: 0;
}

.mobile-nav-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-header {
    padding: 1.5rem 1rem;
    background: var(--navy-blue);
    color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 60px;
    box-sizing: border-box;
    position: sticky;
    /* keep header on top of scroll */
    top: 0;
    z-index: 2;
    margin-bottom: 0;
    border-bottom: none;
    flex-shrink: 0;
}

.mobile-nav-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.mobile-nav-close {
    background: none;
    border: none;
    color: var(--white);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-nav-list {
    list-style: none;
    padding: 1.25rem 0 1rem 0;
    /* extra top padding to clear sticky header */
    margin: 0;
    flex: 1;
    min-height: 0;
}

.mobile-nav-list li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0;
}

.mobile-nav-list li:first-child .mobile-nav-link {
    padding-top: 1.5rem;
    /* ensure HOME is fully below header */
}

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

.mobile-nav-link {
    display: block;
    padding: 1.25rem 1rem;
    color: var(--navy-blue);
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s ease;
    line-height: 1.2;
    min-height: 50px;
    box-sizing: border-box;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
    background: var(--light-gray);
    color: var(--primary-gold);
}

.mobile-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: var(--light-gray);
}

.mobile-dropdown.active {
    max-height: 70vh;
    /* Allow enough space for all items */
    overflow-y: auto;
    /* Scroll if content exceeds viewport */
}

.mobile-dropdown a {
    display: block;
    padding: 0.75rem 1rem 0.75rem 2rem;
    color: var(--text-gray);
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-dropdown a:last-child {
    border-bottom: none;
}

.mobile-dropdown a:hover {
    background: rgba(255, 215, 0, 0.1);
    color: var(--navy-blue);
}


/* Hero Section with Video Background */
.hero {
    position: relative;
    min-height: clamp(560px, 85vh, 960px);
    height: clamp(560px, 85vh, 960px);
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    border-top: 6px solid var(--primary-gold);
    border-bottom: 6px solid var(--navy-blue);
}

@media (max-width: 768px) {
    .hero {
        height: clamp(420px, 80vh, 860px);
        min-height: 420px;
    }

    .hero-center-heading {
        font-size: clamp(2.1rem, 8vw, 3.2rem);
        letter-spacing: 0.08em;
    }

    .hero-center-overline {
        font-size: clamp(0.75rem, 3vw, 0.95rem);
        letter-spacing: 0.24em;
    }
}

@media (max-width: 640px) {
    .hero-center {
        padding: 0 var(--spacing-md);
    }

    .hero-center-heading {
        font-size: clamp(1.9rem, 9vw, 2.8rem);
        letter-spacing: 0.07em;
    }

    .hero-center-overline {
        letter-spacing: 0.2em;
    }
}

@media (max-width: 480px) {
    .hero-center-heading {
        font-size: clamp(1.7rem, 10vw, 2.4rem);
        letter-spacing: 0.06em;
    }

    .hero-center-overline {
        font-size: clamp(0.7rem, 3.5vw, 0.9rem);
        letter-spacing: 0.18em;
    }
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 0;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
    z-index: 1;
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    color: var(--navy-blue);
    border: none;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: 50px;
    font-size: var(--font-size-base);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    box-shadow: var(--shadow-xl);
    transition: var(--transition-smooth);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.video-play-btn:hover {
    background: linear-gradient(135deg, var(--secondary-gold), var(--primary-gold));
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: var(--shadow-2xl);
}

.video-play-btn i {
    font-size: var(--font-size-lg);
}

.video-play-btn:active {
    transform: translate(-50%, -50%) scale(0.95);
}

/* Video Modal */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 1200px;
    background: var(--navy-blue);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    border: 4px solid var(--primary-gold);
}

.video-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--primary-gold);
    color: var(--navy-blue);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: var(--font-size-xl);
    cursor: pointer;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-lg);
}

.video-close-btn:hover {
    background: var(--navy-blue);
    color: var(--primary-gold);
    transform: rotate(90deg);
}

.modal-video {
    width: 100%;
    height: auto;
    display: block;
    max-height: 80vh;
}

.experience-video {
    position: relative;
    padding: 0;
    min-height: clamp(560px, 85vh, 960px);
    height: clamp(560px, 85vh, 960px);
    display: flex;
    align-items: stretch;
    background: linear-gradient(180deg, rgba(0, 35, 79, 0.9) 0%, rgba(0, 35, 79, 0.75) 100%);
    border-top: 6px solid var(--primary-gold);
    border-bottom: 6px solid var(--primary-gold);
    overflow: hidden;
}

.experience-video-container {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.experience-video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
    min-height: clamp(560px, 85vh, 960px);
    box-shadow: none;
}

.stats {
    padding: var(--spacing-3xl) 0;
}

.experience-video-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.experience-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, rgba(11, 37, 69, 0.85) 20%, rgba(11, 37, 69, 0.55) 60%, rgba(11, 37, 69, 0.25) 100%);
    z-index: 1;
}

.experience-video-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: var(--spacing-3xl) 5%;
    color: #fff;
}

.experience-video-content h2 {
    font-size: var(--font-size-4xl);
    color: var(--primary-gold);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.experience-video-content p {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    margin-bottom: var(--spacing-xl);
    max-width: 540px;
}

.experience-video-action {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.experience-video .video-play-btn {
    position: static;
    transform: none;
}

@media (max-width: 1024px) {
    .experience-video {
        min-height: clamp(520px, 80vh, 900px);
        height: clamp(520px, 80vh, 900px);
    }

    .experience-video-wrapper {
        min-height: clamp(520px, 80vh, 900px);
    }
}

@media (max-width: 768px) {
    .experience-video-container {
        padding: 0;
        /* Remove padding to ensure video fills container properly */
    }

    .experience-video {
        min-height: clamp(420px, 80vh, 860px);
        height: clamp(420px, 80vh, 860px);
    }

    .experience-video-wrapper {
        min-height: clamp(420px, 80vh, 860px);
        width: 100%;
        height: 100%;
    }

    .experience-video-background {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .experience-video-content {
        padding: var(--spacing-3xl);
        align-items: center;
        text-align: center;
    }

    .experience-video-action {
        justify-content: center;
    }
}

.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    z-index: 2;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transform: translateX(100%);
    transition: var(--transition-slow);
    overflow: hidden;
}

.hero-slide.active {
    opacity: 1;
    transform: translateX(0);
}

.hero-slide-video,
.hero-slide-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}


.hero-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(11, 37, 69, 0.7) 10%, rgba(11, 37, 69, 0.4) 55%, rgba(11, 37, 69, 0.05) 100%);
    z-index: 1;
}

.hero-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--spacing-xs);
    padding: 0 var(--spacing-lg);
    z-index: 3;
    pointer-events: none;
}

.hero-center-heading {
    font-family: 'Playfair Display', var(--font-primary);
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--navy-blue) 0%, var(--primary-gold) 50%, var(--navy-blue) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.9);
    text-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.hero-center-overline {
    font-family: var(--font-primary);
    font-size: clamp(0.8rem, 2.2vw, 1rem);
    font-weight: 500;
    color: var(--white);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

.hero-content {
    padding: var(--spacing-lg) var(--spacing-xl);
    color: var(--text-dark);
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 215, 0, 0.4);
    max-width: 550px;
    margin: 0;
    display: inline-block;
    position: relative;
    z-index: 2;
}

.school-intro {
    margin-bottom: var(--spacing-xs);
}

.school-intro h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: 0;
    color: var(--navy-blue);
}

.hero-content h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    color: var(--navy-blue);
}

.hero-content p {
    font-size: var(--font-size-base);
    margin: 0;
    color: var(--text-dark);
}

.hero-tagline {
    color: var(--primary-gold);
    font-weight: 600;
}

.tagline-panel {
    background: var(--navy-blue);
    padding: var(--spacing-sm) var(--spacing-xl);
    display: inline-block;
    margin-bottom: var(--spacing-lg);
    position: relative;
    box-shadow: var(--shadow-md);
    border-radius: 0 0 8px 8px;
}

.tagline-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid var(--navy-blue);
    border-top: 20px solid var(--navy-blue);
}

.tagline-panel::after {
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid var(--navy-blue);
    border-right: 10px solid transparent;
    border-top: 20px solid var(--navy-blue);
}

.tagline-panel p {
    color: var(--primary-gold);
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
}

/* Full-width hero ribbon section, like the reference */
.hero-ribbon {
    background: var(--navy-blue);
    width: 100%;
    padding: 14px 0;
    margin: 0;
    border-top: 4px solid var(--primary-gold);
    border-bottom: 4px solid var(--primary-gold);
}

.hero-ribbon .container {
    text-align: center;
    padding: 0 var(--spacing-lg);
}

.hero-ribbon-text {
    color: var(--primary-gold);
    font-size: var(--font-size-2xl);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0;
}

@media (max-width: 768px) {

    /* Widen content area: minimal side gutters site-wide */
    .container {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
        max-width: 100% !important;
    }

    .hero-ribbon {
        padding: 16px 0;
        text-align: center;
    }

    .hero-ribbon .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hero-ribbon-text {
        font-size: var(--font-size-xl);
        letter-spacing: 2px;
        text-align: center;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .hero-ribbon {
        padding: 12px 0;
    }

    .hero-ribbon-text {
        font-size: var(--font-size-lg);
        letter-spacing: 1px;
    }
}

.hero-content h2 {
    font-size: var(--font-size-5xl);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--navy-blue);
}

.hero-content h3 {
    font-size: var(--font-size-3xl);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--text-dark);
}

.hero-content p {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-xl);
    color: var(--gray);
    max-width: 600px;
}

.hero-buttons {
    display: flex;
    gap: var(--spacing-md);
}

.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-lg);
}

.hero-placeholder {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--navy-blue);
}

.hero-placeholder i {
    font-size: 8rem;
    color: var(--navy-blue);
}

.hero-navigation {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 var(--spacing-lg);
    pointer-events: none;
}

.hero-nav-btn {
    background: var(--primary-gold);
    border: none;
    color: var(--navy-blue);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: var(--font-size-lg);
    transition: var(--transition-fast);
    pointer-events: all;
}

.hero-nav-btn:hover {
    background: var(--navy-blue);
    color: var(--white);
}

.hero-dots {
    position: absolute;
    bottom: var(--spacing-xl);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--spacing-sm);
    z-index: 10;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--light-gray);
    cursor: pointer;
    transition: var(--transition-fast);
}

.dot.active {
    background: var(--navy-blue);
}

/* Stats Section */
.stats {
    padding: var(--spacing-2xl) 0;
    background-color: rgba(255, 255, 255, 0.95);
    background-image: linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)), url('../images/School Mascot/M3.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover, clamp(360px, 55vw, 900px);
    background-attachment: scroll, fixed;
    border-top: 4px solid var(--navy-blue);
    border-bottom: 4px solid var(--primary-gold);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
}

.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.stat-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy-blue);
    font-size: var(--font-size-2xl);
}

.stat-number {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--navy-blue);
    margin-bottom: var(--spacing-xs);
}

.stat-content p {
    color: var(--gray);
    font-weight: 500;
}

/* Section Styles */
.section-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.section-header h2 {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--navy-blue);
    margin-bottom: var(--spacing-sm);
}

.section-header p {
    font-size: var(--font-size-xl);
    color: var(--gray);
    max-width: 600px;
    margin: 0 auto;
}

/* About Section with Background Image */
.about {
    padding: var(--spacing-3xl) 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    min-height: 480px;
}

.about-overlay {
    position: relative;
    background-color: rgba(255, 255, 255, 0.95);
    background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)), url('../images/School Mascot/M3.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover, clamp(360px, 55vw, 900px);
    background-attachment: scroll, fixed;
    isolation: isolate;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: var(--spacing-2xl) 0;
    border-top: 4px solid var(--primary-gold);
    border-bottom: 4px solid var(--navy-blue);
}

.about-overlay>*,
.resources-section.page-section>*,
.management-section.page-section>*,
.why-westridge-section.page-section>*,
.about-westridge-section.page-section>*,
.page-section.about>*,
.history-section>*,
.vision-mission-section>*,
.sports-navigation-section>* {
    position: relative;
    z-index: 1;
}

/* Reset mascot background inside academic overview */
#academic-overview.history-section {
    background-image: none;
    background-color: transparent;
    overflow: visible;
    isolation: auto;
}

#academic-overview .about-overlay {
    background-image: none;
    background-color: rgba(255, 255, 255, 0.95);
    isolation: auto;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}

.headmaster-profile {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.headmaster-profile .about-photo {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(30, 58, 138, 0.25);
    border: 4px solid rgba(255, 215, 0, 0.4);
    max-width: 520px;
    margin: 0 auto;
}

.headmaster-profile .about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.headmaster-profile .about-text {
    color: var(--text-dark);
}

.headmaster-profile .about-text p {
    color: var(--text-dark);
    margin-bottom: 0;
}

.headmaster-signoff {
    font-weight: 600;
    color: var(--navy-blue);
    margin-top: var(--spacing-sm);
}

@media (max-width: 768px) {
    .headmaster-profile {
        text-align: center;
    }

    .headmaster-profile .about-text {
        padding: 0 var(--spacing-sm);
    }
}

.about-text h3 {
    font-size: var(--font-size-3xl);
    font-weight: 600;
    color: var(--navy-blue);
    margin-bottom: var(--spacing-md);
}

.about-text p {
    font-size: var(--font-size-lg);
    color: var(--gray);
    margin-bottom: var(--spacing-md);
    line-height: 1.7;
}

.about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.feature {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 500;
    color: var(--navy-blue);
}

.feature i {
    color: var(--primary-gold);
    font-size: var(--font-size-lg);
}

/* About image removed - using background instead */

.school-image-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-2xl);
    border: 4px solid var(--primary-gold);
    transition: var(--transition-smooth);
}

.school-image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.1), rgba(255, 215, 0, 0.1));
    z-index: 1;
    pointer-events: none;
}

.school-image-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(30, 58, 138, 0.3);
    border-color: var(--navy-blue);
}

.school-campus-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--transition-smooth);
}

.school-image-container:hover .school-campus-image {
    transform: scale(1.05);
}

/* Academics Section */
.academics {
    padding: var(--spacing-2xl) 0;
    background: var(--white);
    border-top: 4px solid var(--primary-gold);
    border-bottom: 4px solid var(--navy-blue);
}

.academics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-xl);
}

.academic-card {
    background: var(--white);
    padding: var(--spacing-xl);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
    text-align: center;
}

.academic-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl);
}

.card-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--navy-blue), var(--light-navy));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
    color: var(--white);
    font-size: var(--font-size-3xl);
}

.academic-card h3 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--navy-blue);
    margin-bottom: var(--spacing-md);
}

.academic-card p {
    color: var(--gray);
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
}

.academic-card ul {
    list-style: none;
    margin-bottom: var(--spacing-lg);
    text-align: left;
}

.academic-card li {
    padding: var(--spacing-xs) 0;
    color: var(--gray);
    position: relative;
    padding-left: var(--spacing-lg);
}

.academic-card li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary-gold);
    font-weight: bold;
}

/* Activities Section */
.activities {
    padding: var(--spacing-2xl) 0;
}

.activities-tabs {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
}

.tab-btn {
    background: transparent;
    border: 2px solid var(--navy-blue);
    color: var(--navy-blue);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 25px;
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition-fast);
}

.tab-btn.active,
.tab-btn:hover {
    background: var(--navy-blue);
    color: var(--white);
}

.tab-content {
    position: relative;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.activities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.activity-item {
    background: var(--white);
    padding: var(--spacing-lg);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: var(--transition-normal);
    border-top: 4px solid var(--primary-gold);
}

.activity-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.activity-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
    color: var(--navy-blue);
    font-size: var(--font-size-2xl);
}

.activity-item h4 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--navy-blue);
    margin-bottom: var(--spacing-sm);
}

.activity-item p {
    color: var(--gray);
    line-height: 1.6;
}

/* Admissions Section */
.admissions {
    padding: 80px 0;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    position: relative;
}

.admissions::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    z-index: 1;
}

.admissions .container {
    position: relative;
    z-index: 2;
}

.admission-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    margin-top: 50px;
}

.admission-steps h3,
.admission-contact h3 {
    color: var(--navy-blue);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
}

.steps-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.step-number {
    background: var(--golden-yellow);
    color: var(--navy-blue);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
}

.step-content h4 {
    color: var(--navy-blue);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.step-content p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
}

.admission-contact {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    height: fit-content;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Remove old conflicting contact styles */

/* Mobile Responsive for Admissions */
@media (max-width: 768px) {
    .admission-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .step-item {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .step-number {
        margin: 0 auto;
    }

    .admission-contact {
        padding: 30px 20px;
    }

    /* Mobile contact styles handled in main contact section */
}

/* Payment Structure Section Styles */
.payment-structure {
    padding: 80px 0;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    position: relative;
}

.payment-structure::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    z-index: 1;
}

.payment-structure .container {
    position: relative;
    z-index: 2;
}

.payment-content {
    margin-top: 50px;
}

.payment-info {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: 0 auto;
}

.payment-info h3 {
    color: var(--navy-blue);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
}

.payment-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.payment-method {
    text-align: center;
    padding: 30px 20px;
    background: var(--light-gray);
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.payment-method:hover {
    transform: translateY(-5px);
}

.payment-method i {
    font-size: 3rem;
    color: var(--golden-yellow);
    margin-bottom: 20px;
}

.payment-method h4 {
    color: var(--navy-blue);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.payment-method p {
    color: #666;
    line-height: 1.6;
}

/* Fee Structure Section Styles */
.fee-structure {
    padding: 80px 0;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    position: relative;
}

.fee-structure::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    z-index: 1;
}

.fee-structure .container {
    position: relative;
    z-index: 2;
}

.fee-content {
    margin-top: 50px;
}

.fee-info {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: 0 auto;
}

.fee-info h3 {
    color: var(--navy-blue);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
}

.fee-details {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 30px;
}

.fee-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: var(--light-gray);
    border-radius: 10px;
    border-left: 4px solid var(--golden-yellow);
}

.fee-item h4 {
    color: var(--navy-blue);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.fee-item p {
    color: #666;
    margin: 0;
}

.fee-note {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid var(--navy-blue);
}

.fee-note p {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.fee-note strong {
    color: var(--navy-blue);
}

/* Contact Page Styles */
.contact-section {
    padding: 120px 0;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    position: relative;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Contact Section - Clean Compact Design */
.contact-section {
    background: linear-gradient(135deg, var(--navy-blue) 0%, var(--dark-navy) 100%);
    position: relative;
    overflow: hidden;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.contact-item {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-left: 4px solid var(--primary-gold);
}

.contact-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    border-left-color: var(--secondary-gold);
}

.contact-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.contact-item:nth-child(1) .contact-icon {
    background: linear-gradient(135deg, var(--primary-gold) 0%, var(--secondary-gold) 100%);
}

.contact-item:nth-child(2) .contact-icon {
    background: linear-gradient(135deg, var(--navy-blue) 0%, var(--dark-navy) 100%);
}

.contact-item:nth-child(3) .contact-icon {
    background: linear-gradient(135deg, var(--primary-gold) 0%, var(--secondary-gold) 100%);
}

.contact-item:hover .contact-icon {
    transform: scale(1.05);
}

.contact-details {
    flex: 1;
}

.contact-details h4 {
    color: var(--navy-blue) !important;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    font-family: 'Inter', sans-serif;
    opacity: 1;
    visibility: visible;
}

.contact-details p {
    color: var(--navy-blue) !important;
    line-height: 1.4;
    margin: 0;
    font-weight: 500;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    opacity: 1;
    visibility: visible;
}

.map-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-left: 4px solid var(--primary-gold);
    position: relative;
}

.map-container h3 {
    color: var(--navy-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.map-wrapper {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

.map-wrapper iframe {
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.map-wrapper:hover iframe {
    transform: scale(1.02);
}

.map-info {
    background: rgba(255, 215, 0, 0.1);
    border-radius: 8px;
    padding: 1rem;
    border-left: 3px solid var(--primary-gold);
}

.map-info p {
    color: var(--navy-blue);
    margin: 0.5rem 0;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-form-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-left: 4px solid var(--primary-gold);
    position: relative;
}

.contact-form-container h3 {
    color: var(--navy-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input,
.form-group textarea {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    padding: 1rem;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
    width: 100%;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--primary-gold);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
    outline: none;
}

.form-submit .btn {
    background: linear-gradient(135deg, var(--primary-gold) 0%, var(--secondary-gold) 100%);
    color: var(--navy-blue);
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    width: 100%;
}

.form-submit .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.3);
    background: linear-gradient(135deg, var(--secondary-gold) 0%, var(--primary-gold) 100%);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    position: relative;
}

.form-group label {
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: var(--gray);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 1;
    background: rgba(255, 255, 255, 0.9);
    padding: 0 0.5rem;
    border-radius: 4px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1.5rem 1rem 1rem 1rem;
    border: 2px solid rgba(30, 58, 138, 0.1);
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    background: rgba(248, 250, 252, 0.8);
    color: var(--navy-blue);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    position: relative;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-gold);
    background: rgba(255, 255, 255, 0.95);
    box-shadow:
        0 0 0 4px rgba(255, 215, 0, 0.15),
        0 8px 25px rgba(255, 215, 0, 0.1);
    transform: translateY(-2px);
}

.form-group input:focus+label,
.form-group textarea:focus+label,
.form-group input:not(:placeholder-shown)+label,
.form-group textarea:not(:placeholder-shown)+label {
    top: -0.5rem;
    left: 0.75rem;
    font-size: 0.8rem;
    color: var(--primary-gold);
    font-weight: 600;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: transparent;
    transition: color 0.3s ease;
}

.form-group input:focus::placeholder,
.form-group textarea:focus::placeholder {
    color: rgba(148, 163, 184, 0.7);
}

.form-group textarea {
    resize: vertical;
    min-height: 140px;
    font-family: inherit;
    line-height: 1.6;
}

.form-submit {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.form-submit .btn {
    background: linear-gradient(135deg, var(--primary-gold) 0%, var(--secondary-gold) 100%);
    color: var(--navy-blue);
    padding: 1.2rem 3rem;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 8px 25px rgba(255, 215, 0, 0.3),
        0 0 0 1px rgba(255, 215, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.form-submit .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.form-submit .btn:hover {
    transform: translateY(-3px);
    box-shadow:
        0 15px 35px rgba(255, 215, 0, 0.4),
        0 0 0 1px rgba(255, 215, 0, 0.3);
    background: linear-gradient(135deg, var(--secondary-gold) 0%, var(--primary-gold) 100%);
}

.form-submit .btn:hover::before {
    left: 100%;
}

.form-submit .btn:active {
    transform: translateY(-1px);
    box-shadow:
        0 8px 25px rgba(255, 215, 0, 0.3),
        0 0 0 1px rgba(255, 215, 0, 0.2);
}

.form-submit .btn span {
    margin-right: 0.5rem;
}

.form-submit .btn i {
    transition: transform 0.3s ease;
}

.form-submit .btn:hover i {
    transform: translateX(3px);
}

/* Form Success and Error States */
.form-group.success input,
.form-group.success textarea {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.form-group.error input,
.form-group.error textarea {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.form-group .error-message {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    display: none;
}

.form-group.error .error-message {
    display: block;
}

.form-group.success .success-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #10b981;
    font-size: 1.2rem;
    display: none;
}

.form-group.success .success-icon {
    display: block;
}

/* Mobile Responsive for Contact Page */
@media (max-width: 768px) {

    /* Note: Contact page mobile styles are now handled in the main site-wide mobile section */
    /* This section is kept for backward compatibility but will be overridden by site-wide rules */
    .contact-content {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 !important;
    }

    .contact-form-container {
        padding: 0.5rem 0.25rem !important;
        margin: 0 0 1rem 0 !important;
        border-radius: 0 !important;
    }

    .contact-form-container h3 {
        font-size: 1.25rem !important;
        margin: 0 0 0.75rem 0 !important;
        text-align: center !important;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .form-group input,
    .form-group textarea {
        padding: 0.75rem !important;
        font-size: 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .form-group label {
        font-size: 0.85rem;
    }

    .form-group input:focus+label,
    .form-group textarea:focus+label,
    .form-group input:not(:placeholder-shown)+label,
    .form-group textarea:not(:placeholder-shown)+label {
        font-size: 0.75rem;
    }

    .form-submit .btn {
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
        width: 100% !important;
    }

    .map-container {
        padding: 0.5rem 0.25rem !important;
        margin: 0 0 1rem 0 !important;
        border-radius: 0 !important;
    }

    .map-container h3 {
        font-size: 1.25rem !important;
        margin: 0 0 0.75rem 0 !important;
        text-align: center !important;
    }

    .map-wrapper {
        margin: 0 0 1rem 0 !important;
        border-radius: 0 !important;
    }

    .map-wrapper iframe {
        height: 300px !important;
        border-radius: 0 !important;
    }

    .map-info {
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
    }

    .map-info p {
        font-size: 0.95rem !important;
        margin: 0 0 0.75rem 0 !important;
        text-align: left !important;
        display: block !important;
    }
}

/* Contact visibility handled in main contact section */

/* Refined Animations */
.contact-content {
    animation: slideInUp 0.8s ease-out;
}

/* Contact animations handled in main contact section */

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Additional Contact Form Enhancements */
.contact-form-container {
    animation: slideInUp 0.8s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Admissions Content Sections */
.admission-content-section {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

.admission-content-section h2 {
    color: var(--navy-blue);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
}

.admission-content-section h3 {
    color: var(--navy-blue);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    margin-top: 30px;
}

.admission-content-section h3:first-child {
    margin-top: 0;
}

.admission-process-list ol {
    color: #666;
    line-height: 1.8;
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.admission-process-list li {
    margin-bottom: 10px;
}

.download-form {
    text-align: center;
    margin: 30px 0;
}

.download-form .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    font-size: 1.1rem;
}

.contact-info ul {
    list-style: none;
    padding: 0;
    color: #000000;
    line-height: 1.8;
    font-size: 1.1rem;
}

.contact-info li {
    margin-bottom: 15px;
    padding-left: 20px;
    position: relative;
}

.contact-info li:before {
    content: "•";
    color: var(--golden-yellow);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.payment-info ul,
.fee-info ul {
    list-style: none;
    padding: 0;
    color: #666;
    line-height: 1.8;
    font-size: 1.1rem;
}

.payment-info li,
.fee-info li {
    margin-bottom: 15px;
    padding-left: 20px;
    position: relative;
}

.payment-info li:before,
.fee-info li:before {
    content: "•";
    color: var(--golden-yellow);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.fee-note {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid var(--navy-blue);
    margin-top: 30px;
}

.fee-note p {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.fee-note strong {
    color: var(--navy-blue);
}

/* Mobile Responsive for Admissions Content */
@media (max-width: 768px) {
    .admission-content-section {
        padding: 30px 20px;
    }

    .admission-content-section h2 {
        font-size: 1.5rem;
    }

    .admission-content-section h3 {
        font-size: 1.3rem;
    }

    .admission-process-list ol,
    .contact-info ul,
    .payment-info ul,
    .fee-info ul {
        font-size: 1rem;
    }
}

.admissions-form,
.contact-form {
    background: var(--white);
    padding: var(--spacing-xl);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

.admissions-form h3,
.contact-form h3 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--navy-blue);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

/* Admissions Contact Styles */
.admissions-contact {
    background: var(--white);
    padding: var(--spacing-xl);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

.admissions-contact h3 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--navy-blue);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.admissions-contact p {
    color: var(--gray);
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.admissions-highlights {
    margin-bottom: var(--spacing-xl);
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    color: var(--gray);
}

.highlight-item i {
    color: var(--primary-gold);
    font-size: var(--font-size-lg);
}

.admissions-cta {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
}

.ecd-contact-info {
    background: var(--white);
    padding: var(--spacing-xl);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

.ecd-contact-info h3 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--navy-blue);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.ecd-contact-info p {
    color: var(--gray);
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.ecd-highlights {
    margin-bottom: var(--spacing-xl);
}

.ecd-cta {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
}

/* Form Styles */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: var(--font-size-base);
    transition: var(--transition-fast);
    background: var(--white);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

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

/* Button Styles */
.btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--font-size-base);
    text-align: center;
    cursor: pointer;
    border: none;
    transition: var(--transition-fast);
    min-width: 140px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    color: var(--navy-blue);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--secondary-gold), var(--dark-gold));
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: transparent;
    color: var(--navy-blue);
    border: 2px solid var(--navy-blue);
}

.btn-secondary:hover {
    background: var(--navy-blue);
    color: var(--white);
}

.btn-outline {
    background: transparent;
    color: var(--navy-blue);
    border: 2px solid var(--navy-blue);
}

.btn-outline:hover {
    background: var(--navy-blue);
    color: var(--white);
}

/* Contact Section */
.contact {
    padding: var(--spacing-2xl) 0;
    background: var(--white);
    border-top: 4px solid var(--navy-blue);
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
}

/* Contact item styles handled in main contact section */

/* Contact icon and details styles handled in main contact section */

/* Footer */
.footer {
    background: var(--navy-blue);
    color: var(--white);
    padding: var(--spacing-2xl) 0 var(--spacing-lg);
    border-top: 6px solid var(--primary-gold);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.footer-top {
    width: 100%;
    display: flex;
    justify-content: center;
}

.footer-logo-hero {
    width: clamp(140px, 18vw, 200px);
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.footer-identity {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.footer-identity h3 {
    margin: 0;
    font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
    color: var(--primary-gold);
    letter-spacing: 0.08em;
}

.footer-identity p {
    margin: 0;
    font-size: var(--font-size-md);
    color: rgba(255, 255, 255, 0.85);
}

.footer-inline-content {
    align-items: stretch;
    gap: var(--spacing-xl);
}

.footer-inline-content .footer-primary-row {
    display: grid;
    grid-template-columns: minmax(280px, 1.2fr) repeat(3, minmax(200px, 1fr));
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(24px, 3vw, 40px);
}

.footer-inline-content .footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
}

.footer-inline-content .footer-logo-inline {
    width: clamp(110px, 10vw + 40px, 160px);
}

.footer-inline-content .footer-section h4 {
    margin: 0;
    margin-bottom: var(--spacing-sm);
}

.footer-inline-content .footer-section.quick-links ul,
.footer-inline-content .footer-section.follow-us .follow-links,
.footer-inline-content .footer-section.contact-info .footer-contact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    align-items: flex-start;
}

.footer-inline-content .footer-section.contact-info .footer-contact p {
    margin-bottom: 0;
}

.footer-inline-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--spacing-xs);
}

.footer-inline-content .footer-section.follow-us .follow-links {
    margin-top: 0;
}

.footer-inline-content .footer-section.contact-info .footer-contact {
    margin-top: 0;
}

@media screen and (max-width: 1024px) {
    .footer-inline-content .footer-primary-row {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media screen and (max-width: 768px) {
    .footer-inline-content {
        align-items: center;
        justify-content: center;
    }

    .footer-inline-content .footer-primary-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        justify-items: center;
        text-align: center;
    }

    .footer-inline-content .footer-brand {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
    }

    .footer-inline-content .footer-identity {
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .footer-inline-content .footer-section {
        text-align: center;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .footer-inline-content .footer-section h4 {
        text-align: center;
        justify-content: center;
    }

    .footer-inline-content .footer-section.quick-links ul,
    .footer-inline-content .footer-section.follow-us .follow-links {
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .footer-inline-content .footer-section.quick-links ul li {
        text-align: center;
        justify-content: center;
        display: flex;
        align-items: center;
    }

    .footer-inline-content .footer-section.quick-links ul li a {
        text-align: center;
        justify-content: center;
    }

    .footer-inline-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .footer-inline-content .footer-section.contact-info .footer-contact {
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .footer-inline-content .footer-section.contact-info .footer-contact p {
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    .footer-inline-content .footer-section.follow-us .follow-links .social-link {
        justify-content: center;
        align-items: center;
    }

    /* Keep affiliations as-is (not centered) */
    .footer-affiliations {
        justify-content: center;
        align-items: center;
    }
}

.footer-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-xl);
    width: 100%;
    align-items: flex-start;
}

.footer-main .footer-section {
    flex: 1 1 260px;
    text-align: left;
}

.footer-section h3,
.footer-section h4 {
    color: var(--primary-gold);
    margin-bottom: var(--spacing-md);
}

.footer-section p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

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

.footer-section li {
    margin-bottom: var(--spacing-xs);
    color: rgba(255, 255, 255, 0.8);
}

.footer-section a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: var(--transition-fast);
}

.footer-section a:hover {
    color: var(--primary-gold);
}

.footer-section.quick-links {
    text-align: left;
}

.footer-section.quick-links ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: flex-start;
}

.footer-section.quick-links li {
    margin-bottom: 0;
}

.footer-affiliations {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(12px, 1.6vw, 20px);
    width: 100%;
    margin-top: var(--spacing-lg);
}

.footer-site.footer-home .footer-affiliations,
.footer-site .footer-affiliations {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: clamp(16px, 1.8vw, 28px);
    overflow-x: auto;
}

.footer-site .footer-affiliations::-webkit-scrollbar {
    height: 0;
}

.footer-affiliations .affiliation-logo-wrapper {
    background: #ffffff;
    border: 2px solid rgba(253, 210, 110, 0.75);
    border-radius: 20px;
    width: clamp(170px, 14vw, 220px);
    height: clamp(120px, 10vw, 150px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(9, 19, 36, 0.18);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.footer-affiliations .affiliation-logo-wrapper:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(9, 19, 36, 0.35);
}

.footer-affiliations .affiliation-logo {
    height: clamp(60px, 5vw, 80px);
    max-width: clamp(140px, 12vw, 180px);
    width: auto;
    object-fit: contain;
    opacity: 0.92;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.footer-affiliations .affiliation-logo:hover {
    opacity: 1;
    transform: scale(1.04);
}

.footer-site .footer-logo-home {
    width: clamp(110px, 12vw + 40px, 160px);
}

.footer-site .footer-identity-home h3 {
    font-size: clamp(1.4rem, 1.2vw + 1.1rem, 2rem);
}

.footer-site .footer-identity-home p {
    font-size: clamp(0.9rem, 0.8vw + 0.6rem, 1.1rem);
}

.footer-site .footer-main {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    justify-content: center;
    align-items: flex-start;
    row-gap: var(--spacing-lg);
    column-gap: clamp(20px, 3.5vw, 48px);
    max-width: 720px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.footer-site .footer-section.quick-links {
    order: 1;
    text-align: left;
    justify-self: center;
    width: 100%;
}

.footer-site .footer-section.quick-links ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: flex-start;
}

.footer-site .footer-section.quick-links a {
    display: inline-block;
}

.footer-site .footer-section.follow-us {
    order: 2;
    text-align: left;
    justify-self: center;
    width: 100%;
}

.footer-site .footer-section.follow-us .follow-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: flex-start;
    width: 100%;
}

.footer-site .footer-section.follow-us .follow-links .social-link {
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.85);
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    justify-content: flex-start;
}

.footer-site .footer-section.follow-us .follow-links .social-link:hover {
    color: var(--primary-gold);
    transform: translateY(-2px);
}

.footer-site .footer-section.follow-us .follow-links .social-link i {
    font-size: 1.2rem;
}

.footer-site .footer-section.follow-us .follow-links .social-link span {
    font-size: var(--font-size-sm);
}

.footer-site .footer-section.contact-info {
    order: 3;
    text-align: left;
    justify-self: center;
    width: 100%;
}

.footer-site .footer-section.contact-info .footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
}

.footer-site .footer-section.contact-info .footer-contact p {
    margin-bottom: var(--spacing-xs);
    text-align: left;
    justify-content: flex-start;
}

.footer-contact p {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.footer-contact i {
    color: var(--primary-gold);
    width: 20px;
}

.social-links {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.footer-inline-content .footer-section.follow-us .follow-links {
    margin-top: 0;
}

.social-link {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-decoration: none;
    transition: var(--transition-fast);
}

.social-link:hover {
    background: var(--primary-gold);
    color: var(--navy-blue);
    transform: translateY(-2px);
}

.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 0 0.25rem !important;
    }

    .header-content {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }

    .video-play-btn {
        bottom: 20px;
        top: auto;
        right: 50%;
        transform: translateX(50%);
        font-size: var(--font-size-sm);
        padding: var(--spacing-sm) var(--spacing-lg);
    }

    .video-play-btn:hover {
        transform: translateX(50%) scale(1.05);
    }

    .video-modal-content {
        width: 95%;
    }

    .nav-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--navy-blue);
        flex-direction: column;
        padding: var(--spacing-md);
        box-shadow: var(--shadow-lg);
    }

    .nav-list.active {
        display: flex;
    }

    .mobile-nav-btn {
        display: flex !important;
    }

    .main-nav {
        display: none !important;
    }

    .nav-list {
        display: none !important;
    }

    .hero-content h2 {
        font-size: var(--font-size-3xl);
    }

    .hero-content h3 {
        font-size: var(--font-size-2xl);
    }

    .hero-content p {
        font-size: var(--font-size-lg);
    }

    .tagline-panel {
        padding: var(--spacing-xs) var(--spacing-md);
    }

    .tagline-panel p {
        font-size: var(--font-size-base);
        letter-spacing: 1px;
    }

    .tagline-panel::before,
    .tagline-panel::after {
        border-top-width: 15px;
    }

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

    .hero-image {
        display: none;
    }

    .hero-navigation {
        display: none;
    }

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

    .about {
        background-attachment: scroll;
        min-height: 400px;
    }

    .about-overlay {
        padding: var(--spacing-2xl) 0;
    }

    .about-content,
    .admissions-content,
    .contact-content {
        grid-template-columns: 1fr;
    }

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

    .activities-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .activities-tabs {
        flex-direction: column;
        align-items: center;
    }

    .about-features {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero-content {
        padding: 0 var(--spacing-md);
    }

    .hero-content h2 {
        font-size: var(--font-size-2xl);
    }

    .hero-content h3 {
        font-size: var(--font-size-xl);
    }

    .tagline-panel {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .tagline-panel p {
        font-size: var(--font-size-sm);
        letter-spacing: 0.5px;
    }

    .tagline-panel::before,
    .tagline-panel::after {
        border-top-width: 12px;
        border-left-width: 8px;
        border-right-width: 8px;
    }

    .section-header h2 {
        font-size: var(--font-size-3xl);
    }

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

/* Animations */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Scroll animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-in-out;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Loading states */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* ECD Page Specific Styles */
.ecd-hero {
    position: relative;
    padding: 160px 0 100px;
    color: var(--white);
    overflow: hidden;
    border-top: 6px solid var(--primary-gold);
    border-bottom: 6px solid var(--navy-blue);
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
    min-height: 600px;
    display: flex;
    align-items: center;
}

.ecd-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.ecd-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.ecd-slide.active {
    opacity: 1;
}

.ecd-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 58, 138, 0.5);
    z-index: 1;
}

/* Ensure all ECD sections have proper spacing */
section {
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

.ecd-hero-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
    min-height: auto;
    padding: var(--spacing-lg) 0;
    position: relative;
    z-index: 2;
}

.ecd-hero-text h1 {
    font-size: var(--font-size-5xl);
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--spacing-sm);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.ecd-hero-text h2 {
    font-size: var(--font-size-3xl);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--primary-gold);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.ecd-hero-text p {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-xl);
    color: var(--white);
    line-height: 1.7;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.ecd-hero-buttons {
    display: flex;
    gap: var(--spacing-md);
}

.ecd-hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ecd-placeholder {
    position: relative;
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--navy-blue);
}

.ecd-placeholder i:first-child {
    font-size: 6rem;
    color: var(--navy-blue);
}

.floating-icons {
    position: absolute;
    width: 100%;
    height: 100%;
}

.floating-icons i {
    position: absolute;
    font-size: 1.5rem;
    color: var(--navy-blue);
    animation: float 3s ease-in-out infinite;
}

.floating-icons i:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.floating-icons i:nth-child(2) {
    top: 15%;
    right: 15%;
    animation-delay: 0.5s;
}

.floating-icons i:nth-child(3) {
    bottom: 20%;
    left: 15%;
    animation-delay: 1s;
}

.floating-icons i:nth-child(4) {
    bottom: 15%;
    right: 10%;
    animation-delay: 1.5s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.ecd-overview {
    padding: var(--spacing-2xl) 0;
    background: var(--white);
    min-height: auto;
}

.ecd-overview-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-2xl);
    align-items: start;
}

.philosophy-points {
    margin-top: var(--spacing-lg);
}

.philosophy-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.philosophy-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy-blue);
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

.philosophy-content h4 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--navy-blue);
    margin-bottom: var(--spacing-xs);
}

.philosophy-content p {
    color: var(--gray);
    line-height: 1.6;
}

.overview-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.stat-card {
    background: var(--white);
    padding: var(--spacing-lg);
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--shadow-md);
    border-top: 4px solid var(--primary-gold);
}

.stat-number {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--navy-blue);
    margin-bottom: var(--spacing-xs);
}

.stat-label {
    color: var(--gray);
    font-weight: 500;
}

.ecd-programs {
    padding: var(--spacing-2xl) 0;
    background: var(--white);
    border-top: 4px solid var(--navy-blue);
    border-bottom: 4px solid var(--primary-gold);
}

.programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-xl);
}

.program-card {
    background: var(--white);
    padding: var(--spacing-xl);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
    position: relative;
}

.program-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl);
}

.program-card.featured {
    border: 3px solid var(--primary-gold);
    transform: scale(1.05);
}

.program-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: var(--primary-gold);
    color: var(--navy-blue);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 15px;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.program-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--navy-blue), var(--light-navy));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
    color: var(--white);
    font-size: var(--font-size-3xl);
}

.program-card h3 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--navy-blue);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.program-features h4,
.program-schedule h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--navy-blue);
    margin-bottom: var(--spacing-sm);
}

.program-features ul {
    list-style: none;
    margin-bottom: var(--spacing-lg);
}

.program-features li {
    padding: var(--spacing-xs) 0;
    color: var(--gray);
    position: relative;
    padding-left: var(--spacing-lg);
}

.program-features li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary-gold);
    font-weight: bold;
}

.program-schedule p {
    color: var(--gray);
    font-weight: 500;
}

.learning-areas {
    padding: var(--spacing-2xl) 0;
    background: var(--white);
}

.learning-areas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.learning-area {
    background: var(--white);
    padding: var(--spacing-lg);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: var(--transition-normal);
    border-top: 4px solid var(--primary-gold);
}

.learning-area:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.area-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
    color: var(--navy-blue);
    font-size: var(--font-size-2xl);
}

.learning-area h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--navy-blue);
    margin-bottom: var(--spacing-sm);
}

.learning-area p {
    color: var(--gray);
    line-height: 1.6;
}

.ecd-facilities {
    padding: var(--spacing-2xl) 0;
    background: var(--white);
    border-top: 4px solid var(--primary-gold);
    border-bottom: 4px solid var(--navy-blue);
}

.facilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.facility-item {
    background: var(--white);
    padding: var(--spacing-lg);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: var(--transition-normal);
}

.facility-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.facility-image {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--navy-blue), var(--light-navy));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
    color: var(--white);
    font-size: var(--font-size-2xl);
}

.facility-item h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--navy-blue);
    margin-bottom: var(--spacing-sm);
}

.facility-item p {
    color: var(--gray);
    line-height: 1.6;
}

.ecd-application {
    padding: var(--spacing-2xl) 0;
    background: var(--white);
}

.application-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
}

.requirements {
    margin-top: var(--spacing-md);
}

.requirement {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    color: var(--gray);
}

.requirement i {
    color: var(--primary-gold);
    font-size: var(--font-size-lg);
}

.application-form {
    background: var(--white);
    padding: var(--spacing-xl);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

.application-form h3 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--navy-blue);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.application-form .form-group {
    margin-bottom: var(--spacing-md);
}

.application-form label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
    color: var(--navy-blue);
}

.ecd-contact {
    padding: var(--spacing-2xl) 0;
    background: var(--white);
    border-top: 4px solid var(--navy-blue);
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
}

.quick-facts {
    background: var(--white);
    padding: var(--spacing-xl);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

.quick-facts h3 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--navy-blue);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.facts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.fact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--light-gray);
    border-radius: 8px;
    color: var(--gray);
}

.fact-item i {
    color: var(--primary-gold);
    font-size: var(--font-size-lg);
}

/* Responsive Design for ECD Page */
@media (max-width: 768px) {
    .ecd-hero {
        padding: 140px 0 80px;
    }

    .ecd-hero-content {
        min-height: 300px;
        padding: var(--spacing-md) 0;
    }

    .ecd-hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .ecd-hero-text h1 {
        font-size: var(--font-size-3xl);
    }

    .ecd-hero-text h2 {
        font-size: var(--font-size-2xl);
    }

    .ecd-hero-text p {
        font-size: var(--font-size-lg);
        padding: 0 var(--spacing-sm);
    }

    .ecd-hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .section-header {
        padding: 0 var(--spacing-sm);
        margin-bottom: var(--spacing-lg);
    }

    .section-header h2 {
        font-size: 1.8rem;
    }

    .section-header p {
        font-size: 0.95rem;
    }

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

    .overview-stats {
        grid-template-columns: 1fr 1fr;
    }

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

    .program-card.featured {
        transform: none;
    }

    .learning-areas-grid {
        grid-template-columns: 1fr;
    }

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

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

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

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

    .admissions-cta,
    .ecd-cta {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .ecd-hero {
        padding: 120px 0 60px;
    }

    .ecd-hero-content {
        min-height: 250px;
        padding: var(--spacing-sm) 0;
    }

    .ecd-hero-text h1 {
        font-size: var(--font-size-2xl);
    }

    .ecd-hero-text h2 {
        font-size: var(--font-size-xl);
    }

    .ecd-hero-text p {
        font-size: var(--font-size-base);
        padding: 0 var(--spacing-xs);
    }

    .section-header h2 {
        font-size: 1.5rem;
    }

    .section-header p {
        font-size: 0.9rem;
    }

    .ecd-placeholder {
        width: 250px;
        height: 250px;
    }

    .ecd-placeholder i:first-child {
        font-size: 4rem;
    }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--light-gray);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-gold);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-gold);
}

/* Premium Animations and Effects */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes pulse {

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

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

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Enhanced Typography */
.hero-content h2 {
    font-size: var(--font-size-6xl);
    font-weight: 800;
    margin-bottom: var(--spacing-md);
    color: var(--navy-blue);
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height: 1.1;
    text-shadow: 0 2px 4px rgba(30, 58, 138, 0.1);
    animation: slideInLeft 1s ease-out;
}

.hero-content h3 {
    font-size: var(--font-size-3xl);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--text-dark);
    animation: slideInLeft 1s ease-out 0.2s both;
}

.hero-content p {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    margin-bottom: var(--spacing-xl);
    color: var(--gray);
    animation: slideInLeft 1s ease-out 0.4s both;
}

/* Enhanced Buttons */
.btn {
    position: relative;
    overflow: hidden;
    transition: var(--transition-bounce);
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: var(--shadow-md);
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: var(--gradient-gold);
    color: var(--navy-blue);
    border: 2px solid transparent;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
    background: linear-gradient(135deg, #FFA500 0%, #FFD700 100%);
}

.btn-secondary {
    background: transparent;
    color: var(--navy-blue);
    border: 2px solid var(--navy-blue);
}

.btn-secondary:hover {
    background: var(--navy-blue);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
}

/* Enhanced Cards */
.academic-card,
.stat-item {
    transition: var(--transition-smooth);
    border-radius: 12px;
    overflow: hidden;
}

.academic-card:hover,
.stat-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-2xl);
}

.academic-card {
    background: var(--white);
    border: 1px solid rgba(30, 58, 138, 0.1);
}

.academic-card:hover {
    border-color: var(--primary-gold);
}

/* Enhanced Navigation */
.nav-link {
    position: relative;
    transition: var(--transition-fast);
    font-weight: 500;
    letter-spacing: 0.5px;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-gold);
    transition: var(--transition-fast);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* Enhanced Hero Ribbon */
.hero-ribbon {
    position: relative;
    overflow: hidden;
}

.hero-ribbon::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
    animation: shimmer 3s infinite;
}

.hero-ribbon-text {
    position: relative;
    z-index: 2;
    animation: slideInUp 1s ease-out;
}

/* Enhanced Logo */
.logo-img {
    transition: var(--transition-bounce);
    border-radius: 8px;
}

.logo:hover .logo-img {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

/* Enhanced Sections */
section {
    position: relative;
}

.section-header {
    animation: slideInUp 0.8s ease-out;
}

.section-header h2 {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
    padding-bottom: 1.25rem;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: 0.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--gradient-gold);
    border-radius: 2px;
}

/* Enhanced Stats */
.stat-number {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    background: var(--gradient-gold);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pulse 2s infinite;
}

/* Enhanced Form Elements */
.form-group input,
.form-group textarea {
    transition: var(--transition-fast);
    border: 2px solid rgba(30, 58, 138, 0.1);
    border-radius: 8px;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
    transform: translateY(-2px);
}

/* Instagram Feed Section */
.instagram-feed {
    padding: var(--spacing-4xl) 0;
    background: transparent !important;
    border-top: 4px solid var(--primary-gold);
    border-bottom: 4px solid var(--navy-blue);
}

.instagram-embed-container {
    margin: var(--spacing-3xl) 0;
    display: none;
    /* Hidden by default, can be enabled if widget is set up */
}

.manual-instagram {
    display: grid;
    /* Show manual grid by default */
}

.instagram-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--navy-blue);
    text-decoration: none;
    font-weight: 600;
    margin-top: var(--spacing-md);
    transition: var(--transition-fast);
}

.instagram-link:hover {
    color: var(--primary-gold);
    transform: translateY(-2px);
}

.instagram-link i {
    font-size: var(--font-size-lg);
    color: #E4405F;
}

.instagram-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-3xl);
}

.instagram-post {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
}

.post-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
    overflow: hidden;
}

.instagram-post:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.post-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
}

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

.post-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition-fast);
}

.instagram-post:hover .post-overlay {
    opacity: 1;
}

.instagram-post:hover .post-image {
    transform: scale(1.1);
}

.post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: var(--transition-smooth);
    display: block;
    background: var(--light-gray);
}

.instagram-post:hover .post-image {
    transform: scale(1.05);
}

.post-overlay {
    flex-direction: column;
    gap: var(--spacing-sm);
}

.post-overlay i {
    font-size: 2rem;
    color: var(--white);
}

.post-overlay span {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Loading and Error States */
.loading-spinner {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4xl);
    color: var(--gray);
}

.loading-spinner i {
    font-size: 2rem;
    margin-bottom: var(--spacing-md);
    color: var(--primary-gold);
}

.loading-spinner p {
    font-size: var(--font-size-lg);
    margin: 0;
}

.error-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4xl);
    text-align: center;
    color: var(--gray);
}

.error-state i {
    font-size: 3rem;
    margin-bottom: var(--spacing-lg);
    color: #ef4444;
}

.error-state p {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-lg);
}

.retry-btn {
    background: var(--primary-gold);
    color: var(--white);
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 6px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.retry-btn:hover {
    background: var(--navy-blue);
    transform: translateY(-2px);
}

/* Instagram post images now display the actual photos */

.instagram-cta {
    text-align: center;
    margin-top: var(--spacing-3xl);
    padding: var(--spacing-xl);
    background: var(--light-gray);
    border-radius: 12px;
}

.instagram-cta p {
    font-size: var(--font-size-lg);
    color: var(--gray);
    margin-bottom: var(--spacing-lg);
}

.instagram-cta .btn {
    background: linear-gradient(45deg, #E4405F, #C13584);
    color: var(--white);
    border: none;
}

.instagram-cta .btn:hover {
    background: linear-gradient(45deg, #C13584, #E4405F);
    transform: translateY(-3px);
}

/* Instagram Feed Responsive */
@media (max-width: 1200px) {
    .instagram-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .instagram-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
    }

    .instagram-cta {
        padding: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    .instagram-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .instagram-feed {
        padding: var(--spacing-3xl) 0;
    }

    .instagram-cta p {
        font-size: var(--font-size-base);
    }
}

/* Enhanced Footer */
.footer {
    background: var(--gradient-navy);
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-gold);
}

/* Responsive Enhancements */
@media (max-width: 768px) {
    .hero-content h2 {
        font-size: var(--font-size-4xl);
        letter-spacing: 2px;
    }

    .section-header h2 {
        font-size: var(--font-size-3xl);
    }

    .btn {
        padding: 12px 24px;
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 480px) {
    .hero-content h2 {
        font-size: var(--font-size-3xl);
        letter-spacing: 1px;
    }

    .section-header h2 {
        font-size: var(--font-size-2xl);
    }
}

/* Sports Page Styles */
/* NOTE: `html { scroll-behavior: smooth }` removed — on Chromium it
   interferes with continuous trackpad/wheel input, making the page feel
   unscrollable via gesture (while scrollbar drag still works). Anchor
   smoothing, if needed, is handled per-click in JS. */

body.sports-page {
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    position: relative;
    height: auto;
    min-height: 100vh;
}

/* Remove hero on sports page to match reference (grid only) */
.sports-hero {
    display: none;
}

.sports-hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    align-items: center;
    min-height: 400px;
}

.sports-hero-text h1 {
    font-size: var(--font-size-5xl);
    font-weight: 800;
    color: var(--navy-blue);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: var(--spacing-md);
    animation: slideInLeft 1s ease-out;
}

.sports-hero-text h2 {
    font-size: var(--font-size-3xl);
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--spacing-lg);
    animation: slideInLeft 1s ease-out 0.2s both;
}

.sports-hero-text p {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    color: var(--gray);
    animation: slideInLeft 1s ease-out 0.4s both;
}

.sports-hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: slideInRight 1s ease-out 0.6s both;
}

.sports-placeholder {
    width: 300px;
    height: 300px;
    background: var(--gradient-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-2xl);
    animation: float 3s ease-in-out infinite;
}

.sports-placeholder i {
    font-size: 6rem;
    color: var(--navy-blue);
}

.sports-grid-section {
    padding: 150px 0 var(--spacing-4xl);
    background: var(--white);
    margin-top: 0;
}

.sports-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2.25rem !important;
    margin-top: 2rem !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.sport-tile {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-radius: 18px;
    border: 1px solid rgba(30, 58, 138, 0.12);
    box-shadow: 0 18px 36px rgba(6, 12, 24, 0.14);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sport-tile:nth-child(even) {
    flex-direction: row-reverse;
}

.sport-tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 46px rgba(6, 12, 24, 0.18);
}

.sport-image {
    flex: 0 0 340px;
    min-height: 260px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.08), rgba(253, 210, 110, 0.15));
}

.sport-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.35s ease;
    position: absolute;
    top: 0;
    left: 0;
}

.sport-tile:hover .sport-img {
    transform: scale(1.06);
}

.resources-section .sport-tile {
    position: relative;
    display: block;
    min-height: clamp(360px, 42vw, 520px);
    border-radius: 22px;
    border: 4px solid rgba(253, 210, 110, 0.85);
    overflow: hidden;
}

.resources-section .sport-tile:nth-child(even) {
    flex-direction: unset;
}

.resources-section .sport-image {
    position: absolute;
    inset: 0;
    flex: none;
    min-height: 100%;
}

.resources-section .sport-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.resources-section .sport-info {
    position: absolute;
    inset: 0;
    padding: clamp(1.5rem, 2vw, 2.5rem);
    background: linear-gradient(180deg, rgba(9, 20, 40, 0.15) 0%, rgba(9, 20, 40, 0.68) 100%);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.resources-section .sport-info h3 {
    color: var(--white);
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sport-info {
    flex: 1 1 auto;
    padding: 2.25rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    text-align: left;
    color: var(--text-dark);
    background: rgba(255, 255, 255, 0.96);
}

.sport-info h3 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--navy-blue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sport-description {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(17, 41, 80, 0.82);
}

.sport-highlights {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

.sport-highlights li {
    background: rgba(30, 58, 138, 0.06);
    border-left: 4px solid rgba(253, 210, 110, 0.7);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(17, 41, 80, 0.8);
}

.sport-highlights li strong {
    color: var(--navy-blue);
    font-weight: 700;
    margin-right: 0.35rem;
}

@media (max-width: 1200px) {
    .sport-image {
        flex-basis: 300px;
    }
}

@media (max-width: 1024px) {

    .sport-tile,
    .sport-tile:nth-child(even) {
        flex-direction: column;
    }

    .sport-image {
        flex-basis: auto;
        width: 100%;
        position: relative;
    }

    .sport-info {
        padding: 2rem 1.85rem 2.2rem;
    }
}

@media (max-width: 768px) {
    .sports-grid-section {
        padding: 120px 0 var(--spacing-3xl);
    }

    .sport-info {
        padding: 1.8rem 1.6rem 2rem;
    }
}

@media (max-width: 640px) {
    .sport-info {
        padding: 1.6rem 1.35rem 1.85rem;
    }

    .sport-description {
        font-size: 0.95rem;
    }

    .sport-highlights li {
        font-size: 0.9rem;
        padding: 0.6rem 0.85rem;
    }
}


/* Clubs Grid Styles */
.clubs-grid-section {
    padding: 150px 0 var(--spacing-4xl);
    background: var(--white);
    margin-top: 0;
}

.clubs-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2.25rem !important;
    margin-top: 2rem !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Clubs grid within sports sections */
.sports-section .clubs-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.club-tile {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-radius: 18px;
    border: 1px solid rgba(30, 58, 138, 0.12);
    box-shadow: 0 18px 36px rgba(6, 12, 24, 0.14);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.club-tile:nth-child(even) {
    flex-direction: row-reverse;
}

.club-tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 46px rgba(6, 12, 24, 0.18);
}

.club-image {
    flex: 0 0 340px;
    min-height: 260px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.08), rgba(253, 210, 110, 0.15));
}

.club-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.35s ease;
    position: absolute;
    top: 0;
    left: 0;
}

.club-tile:hover .club-img {
    transform: scale(1.06);
}

.club-image span {
    color: rgba(30, 58, 138, 0.75);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.95rem;
}

.club-info {
    flex: 1 1 auto;
    padding: 2.25rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    text-align: left;
    color: var(--text-dark);
    background: rgba(255, 255, 255, 0.96);
}

.club-info h3 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--navy-blue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.club-description {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(17, 41, 80, 0.82);
}

.club-highlights {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

.club-highlights li {
    background: rgba(30, 58, 138, 0.06);
    border-left: 4px solid rgba(253, 210, 110, 0.7);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(17, 41, 80, 0.8);
}

.club-highlights li strong {
    color: var(--navy-blue);
    font-weight: 700;
    margin-right: 0.35rem;
}

@media (max-width: 1024px) {

    .club-tile,
    .club-tile:nth-child(even) {
        flex-direction: column;
    }

    .club-image {
        flex-basis: auto;
        width: 100%;
        position: relative;
    }

    .club-info {
        padding: 2rem 1.85rem 2.2rem;
    }
}

@media (max-width: 640px) {
    .club-info {
        padding: 1.6rem 1.35rem 1.85rem;
    }

    .club-description {
        font-size: 0.95rem;
    }

    .club-highlights li {
        font-size: 0.9rem;
        padding: 0.6rem 0.85rem;
    }
}

/* Sports Navigation Styles */
.sports-navigation-section {
    padding: 150px 0 var(--spacing-4xl);
    background-color: rgba(255, 255, 255, 0.95);
    background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)), url('../images/about/DJI_0300.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    min-height: 80vh;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.sports-nav-container {
    display: flex;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.sports-mobile-nav {
    display: none;
}

.sports-nav-panel.desktop-nav {
    display: block;
}

.sports-nav-panel {
    flex: 0 0 160px;
    background: var(--light-gray);
    padding: var(--spacing-md);
    border-radius: 8px;
    height: fit-content;
    position: sticky;
    top: 120px;
}

.sports-nav-panel h3 {
    color: var(--navy-blue);
    font-size: 1.3rem;
    margin-bottom: var(--spacing-lg);
    font-weight: 600;
    text-align: center;
}

.sports-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sports-nav-list li {
    margin-bottom: var(--spacing-sm);
}

.sports-nav-link {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-gray);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-weight: 500;
    border: 1px solid transparent;
    white-space: nowrap;
    font-size: 0.9rem;
}

.sports-nav-link:hover,
.sports-nav-link.active {
    background: var(--primary-gold);
    color: var(--navy-blue);
    border-color: var(--primary-gold);
}

.sports-content {
    flex: 1;
}

.sports-section {
    display: none;
}

.sports-section.active {
    display: block !important;
}

#sports-clubs.active {
    display: block !important;
}

.sports-overview-content p {
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
    color: var(--text-gray);
}

.sports-schedule,
.sports-policy {
    background: rgba(255, 255, 255, 0.7);
    padding: var(--spacing-lg);
    border-radius: 8px;
    margin: var(--spacing-lg) 0;
    border-left: 4px solid var(--primary-gold);
}

.sports-schedule h4,
.sports-policy h4 {
    color: var(--navy-blue);
    font-size: 1.2rem;
    margin-bottom: var(--spacing-md);
    font-weight: 600;
}

.sports-clubs-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
}

.sports-column,
.clubs-column {
    background: rgba(255, 255, 255, 0.5);
    padding: var(--spacing-lg);
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.sports-column h4,
.clubs-column h4 {
    color: var(--navy-blue);
    font-size: 1.1rem;
    margin-bottom: var(--spacing-md);
    font-weight: 600;
}

.sports-column ul,
.clubs-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sports-column li,
.clubs-column li {
    padding: var(--spacing-xs) 0;
    color: var(--text-gray);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.sports-column li:last-child,
.clubs-column li:last-child {
    border-bottom: none;
}

/* Magazine Style Layout for Sports & Club Honours */
@media (min-width: 1024px) {

    #sportsHonoursContent,
    #clubHonoursContent,
    #academicHonoursContent {
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
    }

    .magazine-honour-item {
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        padding: 0;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        position: relative;
        overflow: visible;
        border: none;
    }

    .magazine-honour-item::before,
    .magazine-honour-item::after {
        display: none;
    }

    .magazine-honour-image {
        position: relative;
        border-radius: 6px;
        overflow: hidden;
        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.1),
            0 1px 4px rgba(0, 0, 0, 0.06);
        margin-bottom: 0.4rem;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .magazine-honour-item:hover .magazine-honour-image {
        transform: translateY(-3px);
        box-shadow:
            0 12px 32px rgba(0, 0, 0, 0.15),
            0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .magazine-honour-image img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.3s ease;
    }

    .magazine-honour-item:hover .magazine-honour-image img {
        transform: scale(1.02);
    }

    .magazine-honour-content {
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 2;
        padding: 0;
    }

    .magazine-honour-title {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--navy-blue);
        margin-bottom: 0.5rem;
        margin-top: 0;
        line-height: 1.3;
        letter-spacing: 0.01em;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .magazine-honour-text-wrapper {
        margin-bottom: 0.75rem;
    }

    .magazine-honour-text {
        font-size: 0.9rem;
        line-height: 1.6;
        color: var(--text-gray);
        margin: 0;
        font-weight: 400;
    }

    .magazine-honour-tags {
        display: none;
    }

    .magazine-tag {
        display: inline-block;
        padding: 0.5rem 1rem;
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
        color: var(--navy-blue);
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        border: 1px solid rgba(255, 215, 0, 0.3);
        transition: all 0.3s ease;
    }

    .magazine-tag:hover {
        background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
        color: var(--navy-blue);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3);
    }

    /* Record display styling for achievements */
    .magazine-honour-records {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        margin: 0.5rem 0;
        padding: 0.75rem;
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.05), rgba(0, 0, 0, 0.02));
        border-radius: 6px;
        border: 1px solid rgba(255, 215, 0, 0.2);
    }

    .magazine-record-item {
        text-align: center;
    }

    .magazine-record-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--navy-blue);
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        position: relative;
        padding-bottom: 0.25rem;
    }

    .magazine-record-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 1px;
        background: var(--primary-gold);
    }

    .magazine-record-detail {
        margin-bottom: 0.4rem;
        font-size: 0.8rem;
    }

    .record-label {
        font-weight: 600;
        color: var(--text-gray);
        display: block;
        margin-bottom: 0.15rem;
        font-size: 0.75rem;
    }

    .record-time {
        font-size: 1rem;
        font-weight: 700;
        color: var(--navy-blue);
        display: block;
    }

    .record-time.new-record {
        color: var(--primary-gold);
        text-shadow: 0 1px 2px rgba(255, 215, 0, 0.3);
        position: relative;
    }

    .record-time.new-record::before {
        content: '🏆';
        margin-right: 0.3rem;
        font-size: 0.9rem;
    }

    /* All items follow same layout: image top, content bottom */

    /* Decorative elements for section headers */
    #sports-honours h2,
    #sports-club-honours h2 {
        position: relative;
        margin-bottom: 3rem;
        padding-bottom: 1.5rem;
    }

    #sports-honours h2::after,
    #sports-club-honours h2::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 4px;
        background: linear-gradient(90deg,
                transparent 0%,
                var(--primary-gold) 50%,
                transparent 100%);
    }
}

/* Mobile/Tablet styles for honours */
@media (max-width: 1023px) {

    #sportsHonoursContent,
    #clubHonoursContent,
    #academicHonoursContent {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .magazine-honour-item {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: 0;
        padding: 0;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        border: none;
    }

    .magazine-honour-image {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        margin-bottom: 0.5rem;
    }

    .magazine-honour-image img {
        width: 100%;
        height: auto;
        display: block;
    }

    .magazine-honour-title {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
        margin-top: 0;
    }

    .magazine-honour-text-wrapper {
        margin-bottom: 0.75rem;
    }

    .magazine-honour-text {
        font-size: 0.95rem;
        margin: 0;
    }

    .magazine-honour-tags {
        gap: 0.5rem;
        padding-top: 0.75rem;
        margin-top: 0.75rem;
    }

    .magazine-tag {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }

    .magazine-honour-records {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.25rem;
        margin: 0.75rem 0;
        padding: 1.25rem;
        background: rgba(255, 215, 0, 0.05);
        border-radius: 8px;
        border: 1px solid rgba(255, 215, 0, 0.2);
    }

    .magazine-record-title {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .magazine-record-detail {
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }

    .record-time {
        font-size: 1.2rem;
    }
}

/* Responsive Design for Sports Navigation */
@media (max-width: 968px) {
    .sports-nav-container {
        flex-direction: column;
        gap: 2rem;
        padding: 0 1rem;
    }

    .sports-nav-panel {
        flex: none;
        position: static;
        max-width: 300px;
        margin: 0 auto;
    }

    .sports-clubs-list {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
}

@media (max-width: 768px) {
    .sports-navigation-section {
        padding: 120px 0 var(--spacing-3xl);
    }

    .sports-nav-container {
        gap: 1.5rem;
        padding: 0 1rem;
    }

    .sports-nav-panel {
        padding: var(--spacing-md);
        max-width: 250px;
    }

    .sports-nav-link {
        font-size: 0.85rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* ECD Application Download Styles */
.download-section {
    background: rgba(255, 255, 255, 0.5);
    padding: var(--spacing-md);
    border-radius: 6px;
    margin-bottom: var(--spacing-lg);
    text-align: center;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.download-section h5 {
    color: var(--navy-blue);
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
}

.download-btn {
    background: transparent;
    color: var(--navy-blue);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: all 0.2s ease;
    border: 1px solid var(--primary-gold);
    font-size: 0.9rem;
}

.download-btn:hover {
    background: var(--primary-gold);
    color: var(--navy-blue);
    border-color: var(--primary-gold);
}

.download-btn i {
    font-size: 0.9rem;
}

.download-note {
    margin-top: var(--spacing-sm);
    font-size: 0.85rem;
    color: var(--text-gray);
    font-style: normal;
}

/* ECD Contact Section within Application CTA */
.ecd-content-section .contact-section {
    margin-top: var(--spacing-lg);
    background: transparent;
    padding: 0;
}

.ecd-content-section .contact-section h5 {
    color: var(--navy-blue);
    font-size: 1.1rem;
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
}

.ecd-content-section .contact-section p {
    color: var(--navy-blue);
}

.club-image {
    height: 100%;
    min-height: 220px;
    overflow: hidden;
    position: relative;
    grid-area: image;
}

@media (max-width: 480px) {
    .sports-hero {
        padding: 100px 0 60px;
    }

    .sports-hero-text h1 {
        font-size: var(--font-size-3xl);
        letter-spacing: 2px;
    }

    .sports-hero-text h2 {
        font-size: var(--font-size-xl);
    }

    .sports-placeholder {
        width: 200px;
        height: 200px;
    }

    .sports-placeholder i {
        font-size: 3rem;
    }

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

    .sport-image {
        height: 150px;
    }

    .sport-image i {
        font-size: 3rem;
    }
}

/* New About Us Sections Styles */

/* Historical Background Section */
.history-section {
    padding: var(--spacing-4xl) 0;
    background-color: rgba(255, 255, 255, 0.95);
    background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)), url('../images/School Mascot/M3.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover, clamp(360px, 55vw, 900px);
    background-attachment: scroll, fixed;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.history-content {
    max-width: 900px;
    margin: 0 auto;
}

.history-text p {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    color: var(--text-dark);
    margin-bottom: var(--spacing-lg);
}

.history-text h3 {
    font-size: var(--font-size-2xl);
    color: var(--navy-blue);
    margin: var(--spacing-2xl) 0 var(--spacing-lg);
    font-weight: 700;
}

/* Old facilities-list removed - now using facilities-grid */

/* Vision & Mission Section */
.vision-mission-section {
    padding: var(--spacing-4xl) 0;
    background-color: rgba(255, 255, 255, 0.95);
    background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)), url('../images/School Mascot/M3.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover, clamp(360px, 55vw, 900px);
    background-attachment: scroll, fixed;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.vision-mission-content {
    display: grid;
    gap: var(--spacing-3xl);
    margin-top: var(--spacing-3xl);
}

.vision-box,
.mission-box {
    background: var(--white);
    padding: var(--spacing-3xl);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    border-top: 4px solid var(--primary-gold);
}

.vision-mission-no-card .vision-box,
.vision-mission-no-card .mission-box {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    border-top: none;
    padding: 0;
}

.story-hero,
.vision-mission-hero {
    min-height: clamp(420px, 78vh, 860px);
    display: flex;
    align-items: center;
}

.story-hero {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    margin-top: var(--spacing-4xl);
    margin-bottom: var(--spacing-4xl);
    padding: var(--spacing-5xl) 0;
    background: url('../images/about/temple.webp') center / cover no-repeat;
    border-top: 6px solid var(--primary-gold);
    border-bottom: 6px solid var(--primary-gold);
    overflow: hidden;
}

.story-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(11, 37, 69, 0.85) 15%, rgba(11, 37, 69, 0.6) 60%, rgba(11, 37, 69, 0.35) 100%);
    z-index: 0;
}

.story-hero .container {
    position: relative;
    z-index: 1;
}

.story-hero .history-content {
    margin: 0 auto;
}

.story-hero .history-text h3 {
    color: var(--primary-gold);
    border-bottom: 3px solid var(--primary-gold);
    padding-bottom: var(--spacing-md);
    margin: 0 0 var(--spacing-xl);
}

.story-hero .history-text p {
    color: var(--white);
    font-size: var(--font-size-lg);
    line-height: 1.9;
    margin-bottom: var(--spacing-lg);
}

.story-hero .history-text p:last-of-type {
    margin-bottom: 0;
}

.vision-mission-hero {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    margin-top: var(--spacing-4xl);
    margin-bottom: var(--spacing-4xl);
    padding: var(--spacing-5xl) 0;
    background: url('../images/about/WPS Awards Assembly-1.webp') center / cover no-repeat;
    border-top: 6px solid var(--primary-gold);
    border-bottom: 6px solid var(--primary-gold);
    overflow: hidden;
}

.vision-mission-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, rgba(11, 37, 69, 0.85) 20%, rgba(11, 37, 69, 0.6) 65%, rgba(11, 37, 69, 0.35) 100%);
    z-index: 0;
}

.vision-mission-hero .container {
    position: relative;
    z-index: 1;
}

.vision-mission-hero .vision-mission-content {
    margin-top: var(--spacing-2xl);
}

.vision-mission-hero .vision-box h3,
.vision-mission-hero .mission-box h3,
.vision-mission-hero .core-values h3 {
    color: var(--primary-gold);
}

.vision-mission-hero .vision-box p,
.vision-mission-hero .mission-box p,
.vision-mission-hero .mission-list li {
    color: var(--white);
}

.core-values-section {
    margin: var(--spacing-4xl) auto;
}


.vm-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.vm-icon i {
    font-size: var(--font-size-3xl);
    color: var(--navy-blue);
}

.vision-box h3,
.mission-box h3 {
    font-size: var(--font-size-2xl);
    color: var(--navy-blue);
    margin-bottom: var(--spacing-md);
    font-weight: 700;
}

.vm-tagline {
    color: var(--primary-gold);
    font-weight: 600;
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-lg);
}

.mission-list {
    list-style: none;
    padding: 0;
}

.mission-list li {
    padding-left: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    position: relative;
    color: var(--text-dark);
    line-height: 1.7;
}

.mission-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--primary-gold);
    font-weight: bold;
    font-size: var(--font-size-xl);
}

.core-values {
    background: var(--navy-blue);
    padding: var(--spacing-3xl);
    border-radius: 16px;
    color: var(--white);
}

.core-values h3 {
    font-size: var(--font-size-2xl);
    color: var(--primary-gold);
    margin-bottom: var(--spacing-xl);
    text-align: center;
    font-weight: 700;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
}

.value-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-sm);
}

.value-item i {
    font-size: var(--font-size-3xl);
    color: var(--primary-gold);
}

.value-item span {
    font-size: var(--font-size-base);
    font-weight: 500;
}

/* Why Choose Westridge Section */
.why-westridge-section {
    padding: var(--spacing-4xl) 0;
    background-color: rgba(255, 255, 255, 0.95);
    background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)), url('../images/School Mascot/M3.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover, clamp(360px, 55vw, 900px);
    background-attachment: scroll, fixed;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.why-westridge-content {
    margin-top: var(--spacing-3xl);
}

.distinctly-westridge {
    background: linear-gradient(135deg, var(--navy-blue), #1e40af);
    padding: var(--spacing-3xl);
    border-radius: 16px;
    color: var(--white);
    margin-bottom: var(--spacing-3xl);
}

.distinctly-westridge h3 {
    font-size: var(--font-size-2xl);
    color: var(--primary-gold);
    margin-bottom: var(--spacing-lg);
    font-weight: 700;
}

.distinctly-westridge p {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
}

.distinctly-westridge .principle {
    background: rgba(255, 215, 0, 0.1);
    padding: var(--spacing-lg);
    border-radius: 12px;
    border-left: 4px solid var(--primary-gold);
    font-weight: 500;
    margin-top: var(--spacing-lg);
}

.reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
}

.reason-card {
    background: var(--white);
    padding: var(--spacing-2xl);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
    border-top: 3px solid var(--primary-gold);
}

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

.reason-card i {
    font-size: var(--font-size-4xl);
    color: var(--primary-gold);
    margin-bottom: var(--spacing-md);
}

.reason-card h4 {
    font-size: var(--font-size-xl);
    color: var(--navy-blue);
    margin-bottom: var(--spacing-md);
    font-weight: 700;
}

.reason-card p {
    color: var(--text-dark);
    line-height: 1.7;
}

/* Educational Philosophy Section */
.philosophy-section {
    padding: var(--spacing-4xl) 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.philosophy-content {
    margin-top: var(--spacing-3xl);
}

.philosophy-intro {
    font-size: var(--font-size-xl);
    color: var(--navy-blue);
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--spacing-3xl);
}

.promises-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.promise-item {
    background: var(--white);
    padding: var(--spacing-xl);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: var(--spacing-md);
    transition: var(--transition-smooth);
}

.promise-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.promise-item i {
    font-size: var(--font-size-2xl);
    color: var(--primary-gold);
    flex-shrink: 0;
}

.promise-item p {
    color: var(--text-dark);
    line-height: 1.6;
    margin: 0;
}

/* School Management Section */
.management-section {
    padding: var(--spacing-4xl) 0;
    background-color: rgba(255, 255, 255, 0.95);
    background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)), url('../images/School Mascot/M3.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover, clamp(360px, 55vw, 900px);
    background-attachment: scroll, fixed;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.management-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    margin-top: var(--spacing-3xl);
    align-items: center;
}

.management-text p {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    color: var(--text-dark);
    margin-bottom: var(--spacing-lg);
}

.management-structure {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.structure-level {
    width: 100%;
    display: flex;
    justify-content: center;
}

.structure-box {
    background: var(--white);
    padding: var(--spacing-2xl);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    text-align: center;
    min-width: 280px;
}

.structure-box.executive {
    border-top: 4px solid var(--primary-gold);
}

.structure-box.board {
    border-top: 4px solid var(--navy-blue);
}

.structure-box.leadership {
    border-top: 4px solid var(--primary-gold);
}

.structure-box i {
    font-size: var(--font-size-4xl);
    color: var(--navy-blue);
    margin-bottom: var(--spacing-md);
}

.structure-box h4 {
    font-size: var(--font-size-xl);
    color: var(--navy-blue);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

.structure-box p {
    color: var(--gray);
    font-size: var(--font-size-base);
}

.structure-arrow {
    margin: var(--spacing-lg) 0;
}

.structure-arrow i {
    font-size: var(--font-size-3xl);
    color: var(--primary-gold);
}

/* Responsive adjustments for new sections */
@media (max-width: 768px) {
    .management-content {
        grid-template-columns: 1fr;
    }

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

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

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

/* Page Section Styling - Fixed Background Effect for All Pages */
.page-section {
    min-height: calc(100vh - 140px);
    padding-top: 140px !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
}

/* Apply background image styling to all About Us pages */
.history-section,
.vision-mission-section,
.why-westridge-section,
.philosophy-section,
.management-section {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    position: relative !important;
    min-height: 600px !important;
}

/* Enhanced School Management Section Styles */
.management-intro {
    margin: var(--spacing-3xl) 0;
}

.intro-card {
    background: linear-gradient(135deg, var(--navy-blue), #1e40af);
    padding: var(--spacing-3xl);
    border-radius: 20px;
    text-align: center;
    color: var(--white);
    box-shadow: var(--shadow-2xl);
}

.intro-icon {
    width: 100px;
    height: 100px;
    background: var(--primary-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-lg);
}

.intro-icon i {
    font-size: var(--font-size-4xl);
    color: var(--navy-blue);
}

.intro-card h3 {
    font-size: var(--font-size-3xl);
    color: var(--primary-gold);
    margin-bottom: var(--spacing-md);
    font-weight: 700;
}

.intro-card p {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

.management-hierarchy {
    margin: var(--spacing-4xl) 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hierarchy-item {
    position: relative;
}

.hierarchy-card {
    background: var(--white);
    padding: var(--spacing-2xl);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    display: flex;
    gap: var(--spacing-xl);
    align-items: flex-start;
    transition: var(--transition-smooth);
    border-left: 6px solid var(--primary-gold);
}

.hierarchy-card:hover {
    transform: translateX(10px);
    box-shadow: var(--shadow-2xl);
}

.executive-level .hierarchy-card {
    border-left-color: var(--primary-gold);
}

.board-level .hierarchy-card {
    border-left-color: var(--navy-blue);
}

.leadership-level .hierarchy-card {
    border-left-color: var(--primary-gold);
}

.hierarchy-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
}

.hierarchy-icon i {
    font-size: var(--font-size-3xl);
    color: var(--navy-blue);
}

.hierarchy-content {
    flex: 1;
}

.hierarchy-content h3 {
    font-size: var(--font-size-2xl);
    color: var(--navy-blue);
    margin-bottom: var(--spacing-xs);
    font-weight: 700;
}

.hierarchy-subtitle {
    display: block;
    color: var(--primary-gold);
    font-weight: 600;
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hierarchy-content p {
    color: var(--text-dark);
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
}

.hierarchy-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.tag {
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    color: var(--navy-blue);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.connection-line {
    width: 4px;
    height: 60px;
    background: linear-gradient(to bottom, var(--primary-gold), var(--navy-blue));
    margin: var(--spacing-md) auto;
    position: relative;
}

.connection-line::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--navy-blue);
}

.management-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-4xl);
}

.feature-card {
    background: var(--white);
    padding: var(--spacing-2xl);
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
    border-top: 4px solid var(--primary-gold);
}

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

.feature-card i {
    font-size: var(--font-size-4xl);
    color: var(--primary-gold);
    margin-bottom: var(--spacing-md);
}

.feature-card h4 {
    font-size: var(--font-size-xl);
    color: var(--navy-blue);
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
}

.feature-card p {
    color: var(--text-dark);
    line-height: 1.6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hierarchy-card {
        flex-direction: column;
        text-align: center;
    }

    .hierarchy-icon {
        margin: 0 auto var(--spacing-md);
    }

    .hierarchy-tags {
        justify-content: center;
    }

    .management-features {
        grid-template-columns: 1fr;
    }
}

/* Form-Based Management Page Styles */
.governance-overview-form {
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    margin-bottom: var(--spacing-3xl);
}

.form-header {
    background: linear-gradient(135deg, var(--navy-blue), #1e40af);
    padding: var(--spacing-xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.form-header.centered {
    justify-content: center;
    text-align: center;
}

.form-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-gold);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-icon i {
    font-size: var(--font-size-2xl);
    color: var(--navy-blue);
}

.form-header h3 {
    color: var(--white);
    font-size: var(--font-size-2xl);
    margin: 0;
    font-weight: 700;
}

.form-body {
    padding: var(--spacing-2xl);
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 2px solid #f3f4f6;
    transition: var(--transition-fast);
}

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

.info-row:hover {
    background: #fafafa;
}

.info-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 600;
    color: var(--navy-blue);
    min-width: 200px;
}

.info-label i {
    color: var(--primary-gold);
    font-size: var(--font-size-xl);
}

.info-value {
    color: var(--text-dark);
    font-size: var(--font-size-base);
    text-align: right;
}

.org-levels {
    display: grid;
    gap: var(--spacing-2xl);
    margin: var(--spacing-3xl) 0;
}

.level-form {
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
    transition: var(--transition-smooth);
}

.level-form:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-2xl);
}

.executive-form {
    border-top: 6px solid var(--primary-gold);
}

.board-form {
    border-top: 6px solid var(--navy-blue);
}

.leadership-form {
    border-top: 6px solid var(--primary-gold);
}

.form-number {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    color: var(--navy-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    box-shadow: var(--shadow-md);
}

.form-content {
    padding: var(--spacing-2xl);
}

.form-icon-badge {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--navy-blue), #1e40af);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.form-icon-badge i {
    font-size: var(--font-size-3xl);
    color: var(--primary-gold);
}

.form-content h3 {
    font-size: var(--font-size-2xl);
    color: var(--navy-blue);
    margin-bottom: var(--spacing-xs);
    font-weight: 700;
}

.form-subtitle {
    color: var(--primary-gold);
    font-weight: 600;
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-lg);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-divider {
    height: 3px;
    background: linear-gradient(to right, var(--primary-gold), transparent);
    margin: var(--spacing-lg) 0;
}

.responsibilities h4 {
    color: var(--navy-blue);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
    font-weight: 600;
}

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

.responsibilities li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    color: var(--text-dark);
    line-height: 1.6;
}

.responsibilities li i {
    color: var(--primary-gold);
    margin-top: 4px;
}

.principles-form {
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    margin-top: var(--spacing-3xl);
}

.principles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0;
}

.principle-item {
    padding: var(--spacing-2xl);
    text-align: center;
    border-right: 1px solid #e5e7eb;
    transition: var(--transition-fast);
}

.principle-item:last-child {
    border-right: none;
}

.principle-item:hover {
    background: #fafafa;
}

.principle-item i {
    font-size: var(--font-size-4xl);
    color: var(--primary-gold);
    margin-bottom: var(--spacing-md);
}

.principle-item h4 {
    color: var(--navy-blue);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
}

.principle-item p {
    color: var(--text-dark);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
    .info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .info-label {
        min-width: auto;
    }

    .info-value {
        text-align: left;
    }

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

    .principle-item {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }

    .principle-item:last-child {
        border-bottom: none;
    }
}

/* Compact Grid-Based Management Layout */
.management-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
    margin-top: var(--spacing-2xl);
}

.overview-card,
.mgmt-card,
.principles-card {
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: var(--transition-smooth);
}

.overview-card {
    grid-column: span 2;
}

.overview-card:hover,
.mgmt-card:hover,
.principles-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-2xl);
}

.card-header {
    background: linear-gradient(135deg, var(--navy-blue), #1e40af);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--white);
}

.card-header i {
    font-size: var(--font-size-2xl);
    color: var(--primary-gold);
}

.card-header h3 {
    font-size: var(--font-size-xl);
    margin: 0;
    font-weight: 700;
}

.card-body {
    padding: var(--spacing-xl);
}

.card-body p {
    color: var(--text-dark);
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
}

.overview-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    background: #f9fafb;
    border-radius: 8px;
    text-align: center;
}

.stat-item i {
    font-size: var(--font-size-xl);
    color: var(--primary-gold);
}

.stat-item span {
    font-size: var(--font-size-sm);
    color: var(--navy-blue);
    font-weight: 600;
}

/* Management Cards */
.mgmt-card {
    padding: var(--spacing-xl);
    position: relative;
}

.executive-card {
    border-top: 4px solid var(--primary-gold);
}

.board-card {
    border-top: 4px solid var(--navy-blue);
}

.leadership-card {
    border-top: 4px solid var(--primary-gold);
}

.card-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 20px;
}

.card-badge span {
    color: var(--navy-blue);
    font-weight: 700;
    font-size: var(--font-size-xs);
    letter-spacing: 1px;
}

.card-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--navy-blue), #1e40af);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.card-icon i {
    font-size: var(--font-size-2xl);
    color: var(--primary-gold);
}

.mgmt-card h3 {
    font-size: var(--font-size-xl);
    color: var(--navy-blue);
    margin-bottom: var(--spacing-xs);
    font-weight: 700;
}

.card-subtitle {
    color: var(--primary-gold);
    font-weight: 600;
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
}

.card-description {
    margin-bottom: var(--spacing-md);
}

.card-description p {
    color: var(--text-dark);
    line-height: 1.6;
    font-size: var(--font-size-sm);
}

.card-responsibilities {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xs);
}

.resp-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--text-dark);
    padding: var(--spacing-xs);
    background: #f9fafb;
    border-radius: 6px;
}

.resp-item i {
    color: var(--primary-gold);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

/* Principles Card */
.principles-card {
    grid-column: span 2;
}

.principles-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: var(--spacing-xl);
    gap: var(--spacing-md);
}

.principle-box {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: #f9fafb;
    border-radius: 8px;
    transition: var(--transition-fast);
}

.principle-box:hover {
    background: var(--primary-gold);
}

.principle-box:hover i,
.principle-box:hover h4,
.principle-box:hover p {
    color: var(--navy-blue);
}

.principle-box i {
    font-size: var(--font-size-2xl);
    color: var(--primary-gold);
    flex-shrink: 0;
}

.principle-box h4 {
    font-size: var(--font-size-base);
    color: var(--navy-blue);
    margin: 0 0 2px 0;
    font-weight: 700;
}

.principle-box p {
    font-size: var(--font-size-xs);
    color: var(--gray);
    margin: 0;
}

/* Responsive */
@media (max-width: 968px) {
    .management-grid {
        grid-template-columns: 1fr;
    }

    .overview-card,
    .principles-card {
        grid-column: span 1;
    }

    .overview-stats {
        grid-template-columns: 1fr;
    }

    .card-responsibilities {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 480px) {
    .principles-list {
        grid-template-columns: 1fr;
    }
}

/* Simple Management Layout with Sidebar */
.management-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--spacing-3xl);
    margin-top: var(--spacing-3xl);
    min-height: 70vh;
    align-items: start;
}

/* Sidebar Navigation */
.management-sidebar {
    background: var(--white);
    border-radius: 12px;
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-lg);
    height: fit-content;
    position: sticky;
    top: 100px;
}

.management-sidebar h3 {
    color: var(--navy-blue);
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 3px solid var(--primary-gold);
}

.management-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.management-nav-list li {
    margin-bottom: var(--spacing-sm);
}

.management-nav-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-md);
    background: #f9fafb;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-dark);
    transition: var(--transition-fast);
    border-left: 3px solid transparent;
    margin-bottom: var(--spacing-sm);
}

.management-nav-item:hover {
    background: var(--primary-gold);
    color: var(--navy-blue);
    border-left-color: var(--navy-blue);
    transform: translateX(5px);
}

.management-nav-link {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
    pointer-events: auto;
}

.management-nav-item:hover .management-nav-link {
    color: var(--navy-blue);
}

.management-nav-item.active {
    background: var(--primary-gold);
    color: var(--navy-blue);
    border-left-color: var(--navy-blue);
}

.management-nav-item.active .management-nav-link {
    color: var(--navy-blue);
}

.management-nav-item i:first-child {
    color: var(--primary-gold);
    font-size: var(--font-size-lg);
    margin-right: var(--spacing-sm);
}

.management-nav-item:hover i:first-child {
    color: var(--navy-blue);
}

.management-nav-item span {
    flex: 1;
    font-weight: 600;
}

.management-nav-item i:last-child {
    color: var(--gray);
    font-size: var(--font-size-sm);
}

.management-nav-item:hover i:last-child {
    color: var(--navy-blue);
}

/* Main Content Area */
.management-main {
    background: var(--white);
    border-radius: 12px;
    padding: var(--spacing-3xl);
    box-shadow: var(--shadow-lg);
}

/* Class Teachers Tabs */
.class-tabs {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.class-tabs-nav {
    display: grid;
    gap: var(--spacing-sm);
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    background: rgba(255, 255, 255, 0.75);
    padding: var(--spacing-md);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(11, 37, 69, 0.05);
}

.class-tab-button {
    border: 1px solid rgba(11, 37, 69, 0.08);
    border-radius: 12px;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(247, 249, 255, 0.65);
    color: var(--navy-blue);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
}

.class-tab-button:hover,
.class-tab-button:focus-visible {
    outline: none;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(11, 37, 69, 0.12);
    border-color: rgba(10, 132, 255, 0.4);
}

.class-tab-button.active {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.9), rgba(10, 132, 255, 0.65));
    color: #fff;
    box-shadow: 0 16px 32px rgba(10, 132, 255, 0.25);
    border-color: transparent;
}

.class-tab-panels {
    position: relative;
}

.class-tab-panel {
    display: none;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: rgba(255, 255, 255, 0.94);
    border-radius: 20px;
    border: 1px solid rgba(11, 37, 69, 0.08);
    box-shadow: 0 20px 40px rgba(11, 37, 69, 0.12);
    min-height: 280px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(12px);
}

.class-tab-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Class Teachers Tube Layout */
.class-tube {
    display: flex;
    justify-content: center;
    width: 100%;
}

.class-tube-shell {
    --tube-divider: rgba(15, 38, 86, 0.16);
    background: linear-gradient(160deg, rgba(241, 245, 255, 0.95), rgba(255, 255, 255, 0.9));
    border-radius: 28px;
    border: 2px solid rgba(11, 37, 69, 0.12);
    box-shadow: 0 24px 48px rgba(11, 37, 69, 0.18);
    padding: clamp(1rem, 2.5vw, 1.75rem);
    max-width: 920px;
    width: min(100%, 920px);
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
    position: relative;
}

.class-tube-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.class-tube-row {
    display: flex;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.class-tube-row--top,
.class-tube-row--bottom {
    justify-content: space-between;
}

.class-tube-row .class-tab-button {
    flex: 1 1 0;
    min-width: 120px;
}

.class-tube-middle {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(320px, 2fr) minmax(150px, 1fr);
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
    align-items: stretch;
}

.class-tube-column {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.class-tube-column--left {
    justify-content: space-between;
}

.class-tube-column--right {
    justify-content: space-between;
}

.class-tube-column .class-tab-button {
    flex: 1 1 auto;
    min-height: 92px;
}

.class-display-card {
    margin: 0;
    max-width: none;
    width: 100%;
}

.class-display-photo {
    width: 100%;
}

.class-display-photo--empty {
    border-style: dashed;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.2), rgba(10, 132, 255, 0.18));
}

.class-display-meta {
    margin-top: var(--spacing-md);
}

.class-display-class {
    display: inline-block;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 960px) {
    .class-tube-shell {
        padding: clamp(0.75rem, 2vw, 1.25rem);
    }

    .class-tube-middle {
        grid-template-columns: minmax(140px, 0.9fr) minmax(280px, 1.6fr) minmax(140px, 0.9fr);
    }

    .class-tube-column .class-tab-button {
        min-height: 84px;
    }
}

@media (max-width: 768px) {
    .class-tube-row {
        flex-wrap: wrap;
    }

    .class-tube-row .class-tab-button {
        flex: 1 1 calc(50% - clamp(0.75rem, 1.5vw, 1.25rem));
        min-width: calc(50% - clamp(0.75rem, 1.5vw, 1.25rem));
    }

    .class-tube-middle {
        grid-template-columns: 1fr;
    }

    .class-tube-column {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .class-tube-column .class-tab-button {
        flex: 1 1 calc(50% - clamp(0.75rem, 1.5vw, 1.25rem));
        min-width: calc(50% - clamp(0.75rem, 1.5vw, 1.25rem));
    }
}

@media (max-width: 540px) {

    .class-tube-row .class-tab-button,
    .class-tube-column .class-tab-button {
        flex: 1 1 100%;
        min-width: 0;
    }
}

.class-teacher-grid {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2rem);
    border-radius: 20px;
    background: radial-gradient(circle at top, rgba(10, 132, 255, 0.1), rgba(13, 30, 64, 0.08));
}

.class-tab-panel.active .class-teacher-grid {
    animation: tabPanelPulse 1.2s ease forwards;
}

.class-teacher-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: linear-gradient(155deg, rgba(11, 37, 69, 0.88), rgba(11, 37, 69, 0.65));
    border-radius: 26px;
    border: 1px solid rgba(255, 215, 0, 0.6);
    box-shadow: 0 24px 46px rgba(11, 37, 69, 0.3);
    max-width: min(460px, 92vw);
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.class-teacher-card::before,
.class-teacher-card::after {
    display: none;
}

.class-teacher-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px rgba(11, 37, 69, 0.38);
}

.class-teacher-photo {
    width: clamp(320px, 45vw, 560px);
    max-width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    background: #fff;
    border: 3px solid rgba(255, 215, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.class-teacher-photo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimizeQuality;

    filter: none;
    transform: translateZ(0);
}

.class-teacher-card:hover .class-teacher-photo {
    box-shadow: 0 28px 50px rgba(11, 37, 69, 0.28);
    transform: translateY(-4px) scale(1.01);
}

.class-teacher-photo--empty,
.class-display-photo--empty {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.2), rgba(10, 132, 255, 0.18));
    border-style: dashed;
}

.class-display-photo .photo-placeholder {
    display: none;
    text-align: center;
}

.class-display-photo--empty .photo-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.class-display-photo--empty [data-display-image] {
    visibility: hidden !important;
    opacity: 0 !important;
}

.photo-placeholder {
    font-weight: 600;
    color: rgba(11, 37, 69, 0.72);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.class-teacher-meta h3 {
    font-size: clamp(1.25rem, 2.2vw, 1.55rem);
    color: var(--primary-gold);
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-xs);
}

.class-teacher-meta p {
    margin: 0;
    color: rgba(232, 238, 255, 0.8);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.class-display-role {
    margin-top: var(--spacing-xs);
    color: rgba(232, 238, 255, 0.85);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.class-display-role:empty {
    display: none;
}

/* Class Teachers Specific Image Quality Fix */
.class-teachers-section .class-teacher-photo {
    width: clamp(300px, 38vw, 420px);
}

.class-teachers-section .class-teacher-photo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    image-rendering: optimizeQuality;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
    filter: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

@keyframes tabPanelPulse {
    0% {
        box-shadow: 0 0 0 rgba(10, 132, 255, 0.25);
    }

    50% {
        box-shadow: 0 0 18px rgba(10, 132, 255, 0.15);
    }

    100% {
        box-shadow: 0 0 0 rgba(10, 132, 255, 0.1);
    }
}

@media (max-width: 768px) {
    .class-tabs-nav {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

/* ECD Program Cards */
.programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-lg);
}

.program-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: var(--spacing-lg);
    transition: var(--transition-smooth);
}

.program-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-gold);
}

.program-card h3 {
    color: var(--navy-blue);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--primary-gold);
    padding-bottom: var(--spacing-sm);
}

.program-card h4 {
    color: var(--navy-blue);
    font-size: var(--font-size-md);
    margin: var(--spacing-md) 0 var(--spacing-sm) 0;
}

.program-card ul {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
}

.program-card li {
    margin-bottom: var(--spacing-xs);
    color: var(--text-dark);
}

.program-card p {
    color: var(--text-dark);
    margin-top: var(--spacing-md);
    font-weight: 500;
}

/* ECD Content Layout */
.ecd-content-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    /* Navigation on left (1/3), content on right (2/3) */
    gap: var(--spacing-3xl);
    margin-top: var(--spacing-3xl);
    align-items: start;
    margin-left: -100px;
    /* Move entire layout to the left */
    min-height: auto;
}

.ecd-main-content {
    padding: 0;
    /* Restore original padding */
    background: transparent;
    /* Restore original background */
}

/* ECD Content Sections */
.ecd-content-section {
    padding: var(--spacing-2xl);
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--spacing-xl);
}

.ecd-content-section h3 {
    color: var(--navy-blue);
    font-size: 2.2rem;
    margin-bottom: var(--spacing-xl);
    text-align: center;
    position: relative;
    padding-bottom: 1rem;
}

.ecd-content-section h3::after {
    content: '';
    position: absolute;
    bottom: 0.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--primary-gold);
    border-radius: 2px;
}

.ecd-content-section h4 {
    color: var(--navy-blue);
    font-size: 1.4rem;
    margin: var(--spacing-xl) 0 var(--spacing-md) 0;
    border-left: 4px solid var(--primary-gold);
    padding-left: var(--spacing-md);
}

.ecd-content-section p {
    color: var(--text-dark);
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
}

/* Philosophy Grid */
.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.philosophy-item {
    background: linear-gradient(135deg, var(--white) 0%, #f8f9fa 100%);
    padding: var(--spacing-xl);
    border-radius: 12px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.philosophy-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-gold);
}

.philosophy-item h4 {
    color: var(--navy-blue);
    font-size: 1.2rem;
    margin-bottom: var(--spacing-md);
    border: none;
    padding: 0;
}

.philosophy-item p {
    color: var(--text-dark);
    margin: 0;
    font-size: 0.95rem;
}

/* Programs Grid */
.programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.program-card {
    background: var(--white);
    border: 2px solid #e9ecef;
    border-radius: 15px;
    padding: var(--spacing-xl);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.program-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-gold), var(--navy-blue));
}

.program-card:hover {
    border-color: var(--primary-gold);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.program-card h4 {
    color: var(--navy-blue);
    font-size: 1.3rem;
    margin-bottom: var(--spacing-md);
    border: none;
    padding: 0;
}

.program-card h5 {
    color: var(--primary-gold);
    font-size: 1.1rem;
    margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
    font-weight: 600;
}

.program-card ul {
    margin: var(--spacing-md) 0;
    padding-left: var(--spacing-lg);
}

.program-card li {
    color: var(--text-dark);
    margin-bottom: var(--spacing-xs);
    line-height: 1.6;
}

.program-card p {
    background: #f8f9fa;
    padding: var(--spacing-md);
    border-radius: 8px;
    border-left: 4px solid var(--primary-gold);
    margin: var(--spacing-lg) 0 0 0;
    font-weight: 500;
}

/* Curriculum List */
.curriculum-list {
    background: #f8f9fa;
    padding: var(--spacing-xl);
    border-radius: 12px;
    border-left: 5px solid var(--primary-gold);
    margin-top: var(--spacing-lg);
}

.curriculum-list li {
    color: var(--text-dark);
    margin-bottom: var(--spacing-lg);
    line-height: 1.7;
    padding-left: var(--spacing-md);
    position: relative;
}

.curriculum-list li::before {
    content: '▶';
    color: var(--primary-gold);
    position: absolute;
    left: 0;
    font-size: 0.8rem;
}

/* Schedule Content */
.ecd-content-section ul {
    background: var(--white);
    padding: var(--spacing-lg);
    border-radius: 8px;
    border: 1px solid #e9ecef;
    margin: var(--spacing-md) 0;
}

.ecd-content-section ul li {
    color: var(--text-dark);
    margin-bottom: var(--spacing-sm);
    line-height: 1.6;
    padding-left: var(--spacing-sm);
    position: relative;
}

.ecd-content-section ul li::before {
    content: '•';
    color: var(--primary-gold);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Facilities Grid - 2 columns, squared tiles */
.facilities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-2xl);
    margin-top: var(--spacing-2xl);
    justify-items: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.facility-tile {
    background: var(--white);
    border-radius: 0;
    /* make square */
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1;
    position: relative;
}

.facility-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.facility-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
}

.facility-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

/* Class photos – rounded corners with soft glow */
.facilities-grid .facility-tile {
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(255, 255, 255, 0.7), 0 0 18px rgba(255, 215, 0, 0.25);
}

.facilities-grid .facility-tile:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 28px rgba(255, 215, 0, 0.35);
}

.facilities-grid .facility-image,
.facilities-grid .facility-img {
    border-radius: 12px !important;
}

.facilities-grid .facility-image {
    background: transparent;
}

/* Simple Lightbox */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.lightbox-overlay.active {
    display: flex;
}

.lightbox-image {
    max-width: 90vw;
    max-height: 90vh;
    box-shadow: var(--shadow-lg);
}

.lightbox-close {
    position: fixed;
    top: 20px;
    right: 24px;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
}

.facility-tile:hover .facility-img {
    transform: scale(1.05);
}

.facility-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 70%);
    color: #fff;
    padding: 1rem 1rem 1.25rem;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 800;
}

.facility-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.96);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.facility-tile:hover .facility-overlay {
    opacity: 1;
    transform: translateY(0);
}

.facility-overlay-content {
    max-width: 90%;
}

.facility-overlay h4 {
    color: var(--primary-gold);
    font-size: 0.95rem;
    margin: 0 0 0.5rem 0;
}

.facility-overlay ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem 0;
}

.facility-overlay li {
    background: var(--light-gray);
    border-left: 3px solid var(--primary-gold);
    padding: 0.35rem 0.5rem;
    margin: 0.25rem 0;
    border-radius: 4px;
    font-size: 0.9rem;
}

.facility-overlay p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Application Info */
.application-info {
    background: linear-gradient(135deg, var(--white) 0%, #f8f9fa 100%);
    padding: var(--spacing-2xl);
    border-radius: 15px;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.application-cta {
    background: var(--navy-blue);
    color: var(--white);
    padding: var(--spacing-xl);
    border-radius: 12px;
    margin-top: var(--spacing-xl);
    text-align: center;
}

.application-cta h4 {
    color: var(--white);
    border: none;
    padding: 0;
    margin-bottom: var(--spacing-md);
}

.application-cta p {
    color: #e9ecef;
    margin-bottom: var(--spacing-lg);
}

/* Contact details styling - TWO VERSIONS */
/* Version 1: For ECD application section (inside navy blue application-cta) */
.application-cta .contact-details {
    background: rgba(255, 255, 255, 0.1);
    padding: var(--spacing-lg);
    border-radius: 8px;
    margin-top: var(--spacing-lg);
}

.application-cta .contact-details p {
    margin-bottom: var(--spacing-sm);
    color: var(--white);
    display: flex;
    align-items: baseline;
}

.application-cta .contact-details strong {
    color: var(--primary-gold);
    min-width: 120px;
    margin-right: 10px;
}

/* Version 2: For ECD content section (transparent background) */
.ecd-content-section .contact-details {
    background: rgba(241, 245, 249, 0.8);
    padding: var(--spacing-lg);
    border-radius: 8px;
    margin-top: var(--spacing-lg);
    border-left: 3px solid var(--primary-gold);
}

.ecd-content-section .contact-details p {
    margin-bottom: var(--spacing-sm);
    color: var(--navy-blue);
    display: flex;
    align-items: baseline;
}

.ecd-content-section .contact-details strong {
    color: var(--navy-blue);
    min-width: 120px;
    margin-right: 10px;
    font-weight: 600;
}


.ecd-navigation {
    background: var(--white);
    border-radius: 12px;
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-lg);
    height: auto;
    overflow: visible;
}

.ecd-navigation h3 {
    color: var(--navy-blue);
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 3px solid var(--primary-gold);
}

.ecd-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.ecd-nav-item {
    margin-bottom: 0;
}

.ecd-nav-item a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    background: #f9fafb;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 600;
    transition: var(--transition-fast);
    border-left: 3px solid transparent;
}

.ecd-nav-item a:hover {
    background: var(--primary-gold);
    color: var(--navy-blue);
    border-left-color: var(--navy-blue);
    transform: translateX(5px);
}

/* ECD nav vibrant hover colors (one per tab) */
.ecd-nav-list .ecd-nav-item:nth-child(1) a:hover {
    /* Red */
    background: #FF3B30;
    color: #ffffff;
    border-left-color: #ffffff;
}

.ecd-nav-list .ecd-nav-item:nth-child(2) a:hover {
    /* Orange */
    background: #FF9500;
    color: #0b2545;
    border-left-color: #0b2545;
}

.ecd-nav-list .ecd-nav-item:nth-child(3) a:hover {
    /* Yellow */
    background: #FFCC00;
    color: #0b2545;
    border-left-color: #0b2545;
}

.ecd-nav-list .ecd-nav-item:nth-child(4) a:hover {
    /* Green */
    background: #34C759;
    color: #0b2545;
    border-left-color: #0b2545;
}

.ecd-nav-list .ecd-nav-item:nth-child(5) a:hover {
    /* Blue */
    background: #0A84FF;
    color: #ffffff;
    border-left-color: #ffffff;
}

.ecd-nav-list .ecd-nav-item:nth-child(6) a:hover {
    /* Indigo */
    background: #5856D6;
    color: #ffffff;
    border-left-color: #ffffff;
}

.ecd-nav-list .ecd-nav-item:nth-child(7) a:hover {
    /* Violet */
    background: #AF52DE;
    color: #ffffff;
    border-left-color: #ffffff;
}

.ecd-nav-list .ecd-nav-item:nth-child(8) a:hover {
    /* Pink (extra) */
    background: #FF2D55;
    color: #ffffff;
    border-left-color: #ffffff;
}

.ecd-nav-item.active a,
.ecd-nav-item a.active,
.ecd-page .ecd-nav-item.active a,
.ecd-page .ecd-nav-item a.active {
    background: var(--primary-gold);
    color: var(--navy-blue);
    border-left-color: var(--navy-blue);
    transform: none;
    cursor: default;
}

.ecd-nav-item.active a:hover,
.ecd-nav-item a.active:hover,
.ecd-page .ecd-nav-item.active a:hover,
.ecd-page .ecd-nav-item a.active:hover {
    background: var(--primary-gold);
    color: var(--navy-blue);
    border-left-color: var(--navy-blue);
    transform: none;
}

.ecd-program-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.ecd-program-item {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(15, 37, 69, 0.08);
    box-shadow: 0 12px 24px rgba(15, 37, 69, 0.05);
    overflow: hidden;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.ecd-program-item:hover {
    box-shadow: 0 16px 28px rgba(15, 37, 69, 0.08);
    transform: translateY(-2px);
}

.ecd-program-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: transparent;
    border: none;
    text-align: left;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--navy-blue);
    cursor: pointer;
}

.ecd-program-toggle:focus {
    outline: 3px solid rgba(239, 191, 82, 0.6);
    outline-offset: -3px;
}

.ecd-program-label {
    flex: 1;
}

.ecd-program-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    border: 2px solid var(--navy-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.ecd-program-icon::before,
.ecd-program-icon::after {
    content: "";
    position: absolute;
    background: var(--navy-blue);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.ecd-program-icon::before {
    width: 10px;
    height: 2px;
}

.ecd-program-icon::after {
    width: 2px;
    height: 10px;
}

.ecd-program-item.expanded .ecd-program-icon {
    background: var(--navy-blue);
    color: #ffffff;
}

.ecd-program-item.expanded .ecd-program-icon::after {
    transform: scaleY(0);
    opacity: 0;
}

.ecd-program-content {
    padding: 0 var(--spacing-lg);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
}

.ecd-program-content h5 {
    margin-top: var(--spacing-sm);
    color: var(--primary-gold);
    font-size: var(--font-size-md);
    font-weight: 700;
}

.ecd-program-content ul {
    margin: var(--spacing-sm) 0 var(--spacing-md);
    padding-left: var(--spacing-lg);
}

.ecd-program-content li {
    margin-bottom: 0.35rem;
    line-height: 1.5;
}

.ecd-program-content p {
    margin-bottom: var(--spacing-md);
}

.ecd-program-item.expanded .ecd-program-content {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
}

/* ECD Stats */
.ecd-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.stat-item {
    text-align: center;
    padding: var(--spacing-lg);
    background: #f8fafc;
    border-radius: 8px;
    border-top: 3px solid var(--primary-gold);
}

.stat-number {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--navy-blue);
    margin-bottom: var(--spacing-sm);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-dark);
    font-weight: 600;
}

/* ECD Content Sections */
.ecd-content-sections {
    padding: var(--spacing-3xl) 0;
}

.ecd-section {
    background: var(--white);
    border-radius: 12px;
    padding: var(--spacing-3xl);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--spacing-3xl);
}

/* Philosophy Grid */
.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.philosophy-item {
    background: #f8fafc;
    border-left: 4px solid var(--primary-gold);
    padding: var(--spacing-lg);
    border-radius: 8px;
}

.philosophy-item h4 {
    color: var(--navy-blue);
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-sm);
}

.philosophy-item p {
    color: var(--text-dark);
    line-height: 1.6;
}

/* Curriculum List */
.curriculum-list {
    list-style: none;
    padding: 0;
}

.curriculum-list li {
    background: #f8fafc;
    border-left: 3px solid var(--primary-gold);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    border-radius: 4px;
}

/* Responsive Design */
@media (max-width: 968px) {
    .ecd-content-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        margin-left: 0;
        /* Reset left margin on mobile */
        padding: 0 var(--spacing-sm);
    }

    .ecd-navigation {
        position: static;
        order: 1;
    }

    .ecd-main-content {
        order: 2;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .ecd-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
        margin-top: var(--spacing-lg);
    }

    .stat-item {
        padding: var(--spacing-md);
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.85rem;
    }

    .philosophy-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        margin-top: var(--spacing-lg);
    }

    .philosophy-item {
        padding: var(--spacing-md);
    }

    .philosophy-mascot-cell {
        display: none;
        /* Hide mascot cell on mobile for cleaner layout */
    }

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

    .facilities-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

    .facility-tile {
        max-width: 100%;
        width: 100%;
        aspect-ratio: 1;
        margin: 0 auto;
    }

    .facility-image {
        width: 100%;
        height: 100%;
    }

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

    .facility-title {
        font-size: 1rem;
        padding: 0.75rem;
    }

    .facility-overlay {
        padding: 1rem;
        overflow-y: auto;
    }

    .facility-overlay-content {
        max-width: 100%;
    }

    .facility-overlay h4 {
        font-size: 0.9rem;
    }

    .facility-overlay li {
        font-size: 0.85rem;
        padding: 0.3rem 0.4rem;
    }

    .facility-overlay p {
        font-size: 0.85rem;
    }

    .facility-info h3 {
        font-size: 1rem;
    }

    .facility-info p {
        font-size: 0.85rem;
    }

    .ecd-content-section {
        padding: var(--spacing-md);
        margin: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .ecd-content-section h3 {
        font-size: 1.5rem;
        margin-bottom: var(--spacing-md);
    }

    .ecd-content-section h4 {
        font-size: 1.2rem;
        margin-top: var(--spacing-md);
        margin-bottom: var(--spacing-sm);
    }

    .ecd-content-section p {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: var(--spacing-md);
    }

    /* Hide fixed mascots on mobile */
    .mascot-fixed {
        display: none;
    }

    /* Application section mobile fixes */
    .application-info {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }

    .application-info h4 {
        font-size: 1.1rem;
        margin-bottom: var(--spacing-sm);
    }

    .application-info ul,
    .application-info ol {
        padding-left: 1.2rem;
        margin-bottom: var(--spacing-md);
    }

    .application-info li {
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
    }

    .application-cta {
        padding: var(--spacing-md);
        margin-top: var(--spacing-md);
    }

    .download-section {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }

    .download-btn {
        width: 100%;
        padding: var(--spacing-md);
        font-size: 0.9rem;
    }

    .contact-section {
        padding: var(--spacing-md);
    }

    .contact-details {
        padding: var(--spacing-md);
    }

    .contact-details p {
        font-size: 0.9rem;
        margin-bottom: var(--spacing-sm);
    }

    /* Program accordion mobile fixes */
    .ecd-program-accordion {
        gap: var(--spacing-sm);
        margin-top: var(--spacing-md);
    }

    .ecd-program-item {
        border-radius: 8px;
    }

    .ecd-program-toggle {
        padding: var(--spacing-md);
    }

    .ecd-program-label {
        font-size: 0.95rem;
    }

    .ecd-program-content {
        padding: 0 var(--spacing-md);
    }

    .ecd-program-content h5 {
        font-size: 1rem;
        margin-bottom: var(--spacing-sm);
    }

    .ecd-program-content ul {
        padding-left: 1.2rem;
        margin-bottom: var(--spacing-sm);
    }

    .ecd-program-content li {
        font-size: 0.9rem;
        margin-bottom: 0.3rem;
    }

    .ecd-program-content p {
        font-size: 0.85rem;
        margin-top: var(--spacing-sm);
    }

    /* Curriculum list mobile fixes */
    .curriculum-list {
        padding-left: 1.2rem;
    }

    .curriculum-list li {
        font-size: 0.9rem;
        margin-bottom: var(--spacing-sm);
        line-height: 1.5;
    }

    /* Schedule section mobile fixes */
    .ecd-content-section ul {
        padding-left: 1.2rem;
        margin-bottom: var(--spacing-md);
    }

    .ecd-content-section ul li {
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
    }

    /* ECD Overview section mobile fixes */
    .ecd-overview {
        padding: var(--spacing-xl) 0;
    }

    .ecd-overview .container {
        padding: 0 var(--spacing-sm);
        max-width: 100%;
    }

    /* Ensure no horizontal overflow */
    .ecd-overview,
    .ecd-overview * {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Additional mobile fixes for smaller screens */
@media (max-width: 480px) {
    .ecd-content-layout {
        padding: 0 var(--spacing-xs);
        gap: var(--spacing-md);
    }

    .ecd-content-section {
        padding: var(--spacing-sm);
    }

    .ecd-content-section h3 {
        font-size: 1.3rem;
    }

    .ecd-content-section h4 {
        font-size: 1.1rem;
    }

    .ecd-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .stat-item {
        padding: var(--spacing-sm);
    }

    .stat-number {
        font-size: 1.3rem;
    }

    .stat-label {
        font-size: 0.8rem;
    }

    .philosophy-grid {
        gap: var(--spacing-sm);
    }

    .philosophy-item {
        padding: var(--spacing-sm);
    }

    .philosophy-item h4 {
        font-size: 1rem;
    }

    .philosophy-item p {
        font-size: 0.85rem;
    }

    .facilities-grid {
        gap: var(--spacing-md);
    }

    .facility-tile {
        border-radius: 8px;
    }

    .facility-title {
        font-size: 0.9rem;
        padding: 0.6rem;
    }

    .facility-overlay {
        padding: 0.75rem;
    }

    .facility-overlay h4 {
        font-size: 0.85rem;
    }

    .facility-overlay li {
        font-size: 0.8rem;
        padding: 0.25rem 0.3rem;
    }

    .facility-overlay p {
        font-size: 0.8rem;
    }

    .application-info {
        padding: var(--spacing-sm);
    }

    .application-info h4 {
        font-size: 1rem;
    }

    .application-info li {
        font-size: 0.85rem;
    }

    .application-cta {
        padding: var(--spacing-sm);
    }

    .download-section {
        padding: var(--spacing-sm);
    }

    .download-btn {
        padding: var(--spacing-sm);
        font-size: 0.85rem;
    }

    .contact-section {
        padding: var(--spacing-sm);
    }

    .contact-details {
        padding: var(--spacing-sm);
    }

    .contact-details p {
        font-size: 0.85rem;
    }

    .ecd-program-toggle {
        padding: var(--spacing-sm);
    }

    .ecd-program-label {
        font-size: 0.9rem;
    }

    .ecd-program-content {
        padding: 0 var(--spacing-sm);
    }

    .ecd-program-content h5 {
        font-size: 0.95rem;
    }

    .ecd-program-content li {
        font-size: 0.85rem;
    }

    .curriculum-list li {
        font-size: 0.85rem;
    }

    .ecd-content-section p {
        font-size: 0.9rem;
    }

    .ecd-content-section ul li {
        font-size: 0.85rem;
    }

    /* ECD Overview section smaller screen fixes */
    .ecd-overview {
        padding: var(--spacing-lg) 0;
    }

    .ecd-overview .container {
        padding: 0 var(--spacing-xs);
    }

    .section-header {
        padding: 0 var(--spacing-xs);
    }

    .section-header h2 {
        font-size: 1.3rem;
    }

    .section-header p {
        font-size: 0.85rem;
    }

}

/* Mobile-specific facility tile behavior */
@media (max-width: 768px) {

    /* Make facility overlay always visible on mobile for better UX */
    .facility-tile {
        cursor: pointer;
    }

    /* On touch devices, show overlay on tap instead of hover */
    .facility-tile:active .facility-overlay,
    .facility-tile.touched .facility-overlay {
        opacity: 1;
        transform: translateY(0);
    }

    /* Ensure facility tiles don't overflow */
    .facilities-grid .facility-tile {
        max-width: 100%;
        width: 100%;
    }

    /* Fix any potential overflow issues */
    .ecd-content-section {
        overflow-x: hidden;
        word-wrap: break-word;
    }

    /* Ensure images don't overflow */
    .facility-img {
        max-width: 100%;
        height: auto;
    }

    /* Fix navigation column visibility */
    .ecd-navigation-column {
        width: 100%;
    }

    /* Hide nav mascots on mobile */
    .nav-mascot {
        display: none !important;
    }
}

.management-text-content {
    max-width: 800px;
    margin: 0 auto;
}

.management-text-content p {
    font-size: var(--font-size-lg);
    line-height: 1.9;
    color: var(--text-dark);
    margin-bottom: var(--spacing-xl);
    text-align: justify;
}

.management-text-content p:last-child {
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 968px) {
    .management-layout {
        grid-template-columns: 1fr;
    }

    .management-sidebar {
        position: static;
    }

    .management-nav-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
}

@media (max-width: 480px) {
    .management-nav-list {
        grid-template-columns: 1fr;
    }
}

/* Update management nav item without arrows */
.management-nav-item {
    justify-content: flex-start !important;
    gap: var(--spacing-md) !important;
}

/* Increase navigation block size */
.management-sidebar {
    width: 320px !important;
}

.management-layout {
    grid-template-columns: 320px 1fr !important;
}

.management-nav-item {
    padding: var(--spacing-lg) var(--spacing-md) !important;
    min-height: 60px !important;
}

.management-nav-item span {
    font-size: var(--font-size-base) !important;
    white-space: normal !important;
    line-height: 1.4 !important;
}

/* Resources Page Styles */
.resources-section {
    padding: var(--spacing-4xl) 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    isolation: isolate;
}

.resources-intro {
    max-width: 900px;
    margin: 0 auto var(--spacing-3xl);
    text-align: center;
}

.resources-intro p {
    font-size: var(--font-size-xl);
    line-height: 1.8;
    color: var(--text-dark);
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
    margin-top: var(--spacing-3xl);
}

.resource-card {
    background: var(--white);
    padding: var(--spacing-2xl);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: var(--transition-smooth);
    border-top: 4px solid var(--primary-gold);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Resource card overlay for text readability */
.resource-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(0, 0, 0, 0.7) 100%);
    border-radius: 16px;
    z-index: 1;
}

.resource-card>* {
    position: relative;
    z-index: 2;
}

/* Individual resource backgrounds */
.resource-card:nth-child(1) {
    background-image: url('../images/gallery/GP7_2074.JPG');
}

.resource-card:nth-child(2) {
    background-image: url('../images/facilities/Science Lab.webp');
}

.resource-card:nth-child(3) {
    background-image: url('../images/facilities/ICT Lab.webp');
}

.resource-card:nth-child(4) {
    background-image: url('../images/facilities/Music room.webp');
}

.resource-card:nth-child(5) {
    background-image: url('../images/facilities/Interactive screen.webp');
}

.resource-card:nth-child(6) {
    background-image: url('../images/sports/Tennis.webp');
}

.resource-card:nth-child(7) {
    background-image: url('../images/facilities/Libarary.webp');
}

.resource-card:nth-child(8) {
    background-image: url('../images/facilities/Swimming pool.webp');
}

.resource-card:nth-child(9) {
    background-image: url('../images/facilities/Sports Pavillion.webp');
}

.resource-card:nth-child(10) {
    background-image: url('../images/clubs/Robotics.webp');
}

.resource-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-2xl);
    border-top-color: var(--navy-blue);
}

.resource-icon {
    display: none;
}

.resource-card h3 {
    font-size: var(--font-size-xl);
    color: var(--navy-blue);
    margin-bottom: var(--spacing-md);
    font-weight: 700;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    background: var(--primary-gold);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.resource-card p {
    color: var(--navy-blue);
    line-height: 1.6;
    font-size: var(--font-size-sm);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease 0.1s;
    background: var(--primary-gold);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.resource-card:hover h3,
.resource-card:hover p {
    opacity: 1;
    transform: translateY(0);
}

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

    .management-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .management-sidebar {
        position: static;
        order: 2;
    }

    .management-main {
        order: 1;
    }
}

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

/* Center last row item in resources grid */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
    margin-top: var(--spacing-3xl);
}

.resource-card:nth-child(10) {
    grid-column: 2 / 3;
}

/* ========================================
   CLEAN MOBILE RESPONSIVE DESIGN
   ======================================== */

/* ========================================
   CLEAN MOBILE RESPONSIVE DESIGN
   ======================================== */

/* Mobile styles - Clean and simple */
@media (max-width: 768px) {

    /* Basic mobile layout */
    .container {
        padding: 0 0.25rem !important;
        max-width: 100%;
    }

    /* Mobile Navigation */
    .mobile-nav {
        display: block;
    }

    /* Header mobile */
    .header {
        padding: 0.5rem 0;
    }

    .header-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }

    .logo {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
    }

    .logo-img {
        width: 40px;
        height: 40px;
    }

    .logo-text h1 {
        font-size: 1.2rem;
        line-height: 1.2;
    }

    .logo-text p {
        font-size: 0.8rem;
        line-height: 1.2;
    }

    /* Hide desktop navigation */
    .main-nav {
        display: none !important;
    }

    /* Mobile navigation button */
    .mobile-nav-btn {
        display: flex !important;
        position: fixed !important;
        right: 20px !important;
        top: 20px !important;
        z-index: 1001 !important;
    }

    /* Hero section mobile */
    .hero {
        padding: 0;
        min-height: 60vh;
    }

    .hero-content {
        padding: 2rem 1rem;
        text-align: center;
    }

    .hero-content h1 {
        font-size: 2.5rem;
        line-height: 1.2;
        margin-bottom: 1rem;
    }

    .hero-content h2 {
        font-size: 1.5rem;
        line-height: 1.3;
        margin-bottom: 1rem;
    }

    .hero-content p {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }

    /* Hero ribbon mobile */
    .hero-ribbon {
        padding: 1rem 0;
        text-align: center !important;
    }

    .hero-ribbon .container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .hero-ribbon-text {
        font-size: 1.2rem;
        letter-spacing: 1px;
        text-align: center !important;
        width: 100% !important;
        display: block !important;
    }

    /* Sections mobile */
    section {
        padding: 3rem 0;
    }

    .section-header h2 {
        font-size: 2rem;
        line-height: 1.3;
        margin-bottom: 1rem;
    }

    .section-header p {
        font-size: 1rem;
        line-height: 1.5;
    }

    /* Stats section mobile */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        padding: 2rem 1rem;
    }

    .stat-item {
        text-align: center;
        padding: 1.5rem 1rem;
    }

    .stat-number {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .stat-label {
        font-size: 0.9rem;
    }

    /* About section mobile */
    .about-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .about-text {
        padding: 0;
    }

    .about-text h3 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .about-text p {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    /* Features grid mobile */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .feature-card {
        padding: 1.5rem;
        text-align: center;
    }

    .feature-card h4 {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
    }

    .feature-card p {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    /* Instagram grid mobile */
    .instagram-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 0 1rem;
    }

    .instagram-post {
        border-radius: 8px;
    }

    /* Footer mobile */
    .footer {
        padding: 3rem 0 2rem;
    }

    .footer-content {
        align-items: center;
        gap: 1.75rem;
    }

    .footer-logo-hero {
        width: 140px;
    }

    .footer-main {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .footer-main .footer-section {
        text-align: center;
        width: 100%;
    }

    .footer-section.quick-links ul {
        align-items: center;
    }

    .footer-site .footer-main {
        grid-template-columns: 1fr;
        column-gap: var(--spacing-lg);
    }

    .footer-site .footer-section.quick-links,
    .footer-site .footer-section.follow-us,
    .footer-site .footer-section.contact-info {
        width: 100%;
        justify-self: center;
    }

    .footer-site .footer-section.follow-us .follow-links {
        align-items: center;
    }

    .footer-section h4 {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .footer-section a {
        font-size: 0.95rem;
    }

    .social-links {
        justify-content: center;
        gap: 1rem;
    }

    .footer-affiliations {
        gap: 1.5rem;
    }

    .footer-site .footer-logo-home {
        width: 125px;
    }

    .footer-site .footer-identity-home h3 {
        font-size: 1.6rem;
    }

    .footer-site .footer-identity-home p {
        font-size: 1rem;
    }

    .footer-site .footer-main {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--spacing-xl);
        margin-left: 0;
    }

    .footer-site .footer-section.quick-links {
        text-align: center;
    }

    .footer-site .footer-section.quick-links ul {
        align-items: center;
    }

    .footer-site .footer-section.follow-us {
        text-align: center;
    }

    .footer-site .footer-section.follow-us .follow-links {
        align-items: center;
    }

    .footer-site .footer-section.contact-info .footer-contact p {
        text-align: center;
        justify-content: center;
    }

    .footer-site .footer-section.contact-info {
        text-align: center;
    }

    .footer-site .footer-section.contact-info .footer-contact {
        align-items: center;
    }

    .footer-bottom {
        padding-top: 2rem;
        font-size: 0.8rem;
    }

    /* Buttons mobile */
    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
        min-width: 120px;
    }

    /* What Makes Us Unique mobile */
    .unique-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .unique-text {
        padding: 0;
    }

    .unique-text h3 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .unique-text p {
        font-size: 1rem;
        line-height: 1.6;
    }

    /* ECD page mobile - SIMPLE AND CLEAN */
    .ecd-hero {
        padding: 100px 0 60px;
    }

    .ecd-hero-content {
        padding: 2rem 1rem;
    }

    .ecd-hero-content h1 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .ecd-hero-content h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .ecd-navigation {
        padding: 2rem 0;
    }

    .ecd-nav-container {
        flex-direction: column;
        gap: 2rem;
        padding: 0 1rem;
    }

    .ecd-nav-panel {
        width: 100%;
        order: 2;
    }

    .ecd-main-content {
        width: 100%;
        order: 1;
        padding: 0 0.25rem !important;
        box-sizing: border-box;
    }

    .ecd-content-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-left: 0;
        margin-top: 2rem;
    }

    .ecd-nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    /* ECD content sections - SIMPLE */
    .ecd-content-section {
        padding: 1rem;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        margin-bottom: 1rem;
    }

    .ecd-content-section h3 {
        color: var(--navy-blue);
        text-align: left;
        margin-bottom: 1rem;
        font-size: 1.5rem;
    }

    .ecd-content-section p {
        color: var(--navy-blue);
        margin-bottom: 1rem;
        text-align: left;
    }

    .ecd-content-section h4 {
        color: var(--navy-blue);
        margin: 1rem 0 0.5rem 0;
        font-size: 1.2rem;
        text-align: left;
    }

    .ecd-content-section h5 {
        color: var(--navy-blue);
        margin: 1rem 0 0.5rem 0;
        font-size: 1rem;
        text-align: left;
    }

    .ecd-content-section ul,
    .ecd-content-section ol {
        margin-bottom: 1rem;
        padding-left: 1.5rem;
    }

    .ecd-content-section li {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 0.5rem;
        color: var(--navy-blue);
    }

    /* Application specific styles - Simple list form for mobile */
    #application-content {
        padding: 1rem;
        margin: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
        box-sizing: border-box;
        background: transparent;
    }

    #application-content h3 {
        color: var(--navy-blue);
        text-align: left;
        margin-bottom: 1rem;
        font-size: 1.5rem;
    }

    #application-content p {
        color: var(--navy-blue);
        margin-bottom: 1rem;
        text-align: left;
    }

    #application-content h4 {
        color: var(--navy-blue);
        margin: 1rem 0 0.5rem 0;
        font-size: 1.2rem;
        text-align: left;
    }

    .application-info {
        margin-bottom: 1rem;
        padding: 0;
        background: transparent;
        border: none;
    }

    .application-cta {
        margin-top: 1rem;
        padding: 0;
        border: none;
        background: transparent;
    }

    .download-section {
        padding: 0;
        margin-bottom: 1rem;
        background: transparent;
        border: none;
        text-align: left;
    }

    .contact-section {
        padding: 0;
        margin-top: 1rem;
        background: transparent;
        border: none;
    }

    .contact-section h5 {
        color: var(--navy-blue);
        margin-bottom: 0.5rem;
    }

    .contact-section p {
        color: var(--navy-blue);
        margin-bottom: 0.5rem;
    }

    .contact-details p {
        color: var(--navy-blue);
        margin-bottom: 0.25rem;
        display: flex;
        align-items: baseline;
    }

    .contact-details strong {
        min-width: 100px;
        margin-right: 8px;
    }

    .download-section .btn {
        display: block;
        width: 100%;
        margin-bottom: 1rem;
    }

    .download-btn {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
        width: 100%;
        max-width: 300px;
    }

    .download-note {
        color: var(--navy-blue) !important;
        margin-top: 0.5rem;
        font-size: 0.9rem;
    }

    .download-section h5 {
        color: var(--navy-blue) !important;
        margin-bottom: 0.5rem;
        font-size: 1rem;
    }

    .download-section p {
        color: var(--navy-blue) !important;
    }

    /* Sports page mobile */
    .sports-navigation-section {
        padding: 100px 0 3rem;
    }

    .sports-mobile-nav {
        display: none;
        /* Hide sports mobile nav panel - now in main mobile nav dropdown */
    }

    .sports-nav-container {
        flex-direction: column;
        gap: 2rem;
    }

    .sports-nav-panel.desktop-nav {
        display: none;
    }

    .sports-nav-panel {
        width: 100%;
        order: 1;
        margin-bottom: 0;
    }

    .sports-content {
        width: 100%;
        order: 1;
    }

    .sports-nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    .sports-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .sport-tile {
        min-height: 200px;
        padding: 1rem;
    }

    .sport-tile h3 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .sport-tile p {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .clubs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .club-tile {
        min-height: 180px;
        padding: 1rem;
    }

    .club-tile h3 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .club-tile p {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    /* About Us pages mobile - Simple list form */
    .management-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .management-sidebar {
        display: none;
        /* Hide management sidebar on mobile - now in main mobile nav dropdown */
    }

    .management-main {
        order: 1;
        width: 100%;
    }

    .management-nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    .management-main {
        padding: 1rem;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        margin-bottom: 1rem;
    }

    .management-main h2 {
        color: var(--navy-blue);
        text-align: left;
        margin-bottom: 1rem;
        font-size: 1.5rem;
    }

    .management-main p {
        color: var(--navy-blue);
        margin-bottom: 1rem;
        text-align: left;
    }

    .management-main h3 {
        color: var(--navy-blue);
        margin: 1rem 0 0.5rem 0;
        font-size: 1.2rem;
        text-align: left;
    }

    .management-main ul,
    .management-main ol {
        margin-bottom: 1rem;
        padding-left: 1.5rem;
    }

    .management-main li {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 0.5rem;
        color: var(--navy-blue);
    }

    /* Resources grid - Simple list format */
    .resources-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .resource-card {
        padding: 1rem;
        margin-bottom: 1rem;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        border: none;
        display: block;
        text-align: left;
        position: relative;
    }

    .resource-card h3 {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
        color: var(--navy-blue);
        text-align: left;
        line-height: 1.3;
        border: none;
        padding: 0;
    }

    .resource-card p {
        font-size: 0.9rem;
        line-height: 1.5;
        color: var(--navy-blue);
        text-align: left;
        margin-bottom: 1rem;
    }

    .resource-icon {
        display: none;
    }

    /* Content sections - Simple list form */
    .content-section {
        padding: 1rem;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        margin-bottom: 1rem;
    }

    .content-section h2 {
        color: var(--navy-blue);
        text-align: left;
        margin-bottom: 1rem;
        font-size: 1.5rem;
    }

    .content-section h3 {
        color: var(--navy-blue);
        margin: 1rem 0 0.5rem 0;
        font-size: 1.2rem;
        text-align: left;
    }

    .content-section p {
        color: var(--navy-blue);
        margin-bottom: 1rem;
        text-align: left;
    }

    .content-section ul,
    .content-section ol {
        margin-bottom: 1rem;
        padding-left: 1.5rem;
    }

    .content-section li {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 0.5rem;
        color: var(--navy-blue);
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .container {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .logo-img {
        width: 35px;
        height: 35px;
    }

    .logo-text h1 {
        font-size: 1rem;
    }

    .logo-text p {
        font-size: 0.7rem;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content h2 {
        font-size: 1.2rem;
    }

    .section-header h2 {
        font-size: 1.8rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .instagram-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .feature-card {
        padding: 1rem;
    }

    .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.8rem;
        min-width: 100px;
    }

    .sports-grid,
    .clubs-grid {
        grid-template-columns: 1fr;
    }

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

    .ecd-hero-content h1 {
        font-size: 2rem;
    }

    .ecd-hero-content h2 {
        font-size: 1.2rem;
    }

    .ecd-content-section {
        padding: 0.5rem 0.25rem !important;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        margin-bottom: 1rem;
    }

    .ecd-content-section h3 {
        color: var(--navy-blue);
        text-align: left;
        margin-bottom: 1rem;
        font-size: 1.3rem;
    }

    .ecd-content-section p {
        color: var(--navy-blue);
        margin-bottom: 1rem;
        text-align: left;
    }

    .ecd-content-section h4 {
        color: var(--navy-blue);
        margin: 1rem 0 0.5rem 0;
        font-size: 1.1rem;
        text-align: left;
    }

    .ecd-content-section h5 {
        color: var(--navy-blue);
        margin: 1rem 0 0.5rem 0;
        font-size: 0.95rem;
        text-align: left;
    }

    .ecd-content-section li {
        color: var(--navy-blue);
    }

    /* Application section small mobile fix - Simple list form */
    #application-content {
        padding: 0.75rem;
        margin: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
        box-sizing: border-box;
        background: transparent;
    }

    #application-content h3 {
        color: var(--navy-blue);
        text-align: left;
        margin-bottom: 1rem;
        font-size: 1.3rem;
    }

    #application-content p {
        color: var(--navy-blue);
        margin-bottom: 1rem;
        text-align: left;
    }

    #application-content h4 {
        color: var(--navy-blue);
        margin: 1rem 0 0.5rem 0;
        font-size: 1.1rem;
        text-align: left;
    }

    .application-info {
        padding: 0;
        background: transparent;
        border: none;
    }

    .application-cta {
        padding: 0;
        background: transparent;
        border: none;
    }

    .download-section {
        padding: 0;
        background: transparent;
        border: none;
    }

    .contact-section {
        padding: 0;
        background: transparent;
        border: none;
    }

    .contact-section h5 {
        color: var(--navy-blue);
        margin-bottom: 0.5rem;
    }

    .contact-section p {
        color: var(--navy-blue);
        margin-bottom: 0.5rem;
    }

    .contact-details p {
        color: var(--navy-blue);
        margin-bottom: 0.25rem;
        display: flex;
        align-items: baseline;
    }

    .contact-details strong {
        min-width: 100px;
        margin-right: 8px;
    }

    .download-note {
        color: var(--navy-blue) !important;
        margin-top: 0.5rem;
        font-size: 0.8rem;
    }

    .download-section h5 {
        color: var(--navy-blue) !important;
        margin-bottom: 0.5rem;
        font-size: 0.95rem;
    }

    .download-section p {
        color: var(--navy-blue) !important;
    }

    .download-btn {
        padding: 0.6rem 0.8rem;
        font-size: 0.8rem;
    }

    /* About Us pages small mobile - Simple list form */
    .management-main {
        padding: 0.75rem;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        margin-bottom: 1rem;
    }

    .management-main h2 {
        color: var(--navy-blue);
        text-align: left;
        margin-bottom: 1rem;
        font-size: 1.3rem;
    }

    .management-main p {
        color: var(--navy-blue);
        margin-bottom: 1rem;
        text-align: left;
    }

    .management-main h3 {
        color: var(--navy-blue);
        margin: 1rem 0 0.5rem 0;
        font-size: 1.1rem;
        text-align: left;
    }

    .management-main li {
        color: var(--navy-blue);
    }

    /* Resources small mobile - Simple list format */
    .resources-grid {
        grid-template-columns: 1fr;
    }

    .resource-card {
        padding: 0.75rem;
        margin-bottom: 1rem;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        border: none;
        display: block;
        text-align: left;
        position: relative;
    }

    .resource-card h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
        color: var(--navy-blue);
        text-align: left;
        line-height: 1.3;
        border: none;
        padding: 0;
    }

    .resource-card p {
        font-size: 0.8rem;
        line-height: 1.5;
        color: var(--navy-blue);
        text-align: left;
        margin-bottom: 1rem;
    }

    .resource-icon {
        display: none;
    }

    /* Content sections small mobile - Simple list form */
    .content-section {
        padding: 0.75rem;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        margin-bottom: 1rem;
    }

    .content-section h2 {
        color: var(--navy-blue);
        text-align: left;
        margin-bottom: 1rem;
        font-size: 1.3rem;
    }

    .content-section h3 {
        color: var(--navy-blue);
        margin: 1rem 0 0.5rem 0;
        font-size: 1.1rem;
        text-align: left;
    }

    .content-section p {
        color: var(--navy-blue);
        margin-bottom: 1rem;
        text-align: left;
    }

    .content-section li {
        color: var(--navy-blue);
    }
}

@media (max-width: 768px) {

    /* Hide ECD left-side navigation on mobile */
    .ecd-navigation {
        display: none;
    }

    /* Prevent horizontal shift - SITE-WIDE */
    body,
    body .container,
    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    #application-content,
    #application-content * {
        max-width: 100%;
        box-sizing: border-box;
    }

    #application-content .contact-details p {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Remove decorative tiles/boxes site-wide on mobile - ALL PAGES */
    /* Note: .sport-tile and .club-tile are handled separately below to maintain compact sizing */
    /* Note: .contact-section is excluded from main page sections to preserve page structure */
    .academic-card,
    .feature-card,
    .program-card,
    .facility-tile,
    .stat-item,
    .step-item,
    .content-section,
    .download-section,
    .application-cta,
    .about-content,
    .about-text,
    .ecd-content-section,
    .admission-content-section,
    .management-text-content,
    .sports-section,
    .hierarchy-card,
    .feature-card,
    .info-row,
    .resource-card,
    .fact-item,
    .principle-item,
    .step-content,
    .admissions-cta,
    .ecd-cta,
    .contact-form-container,
    .map-container {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0.5rem 0.25rem !important;
        margin: 0 0 1rem 0 !important;
    }

    /* Nested contact sections (not main page sections) */
    .ecd-content-section .contact-section,
    .content-section .contact-section,
    .application-content .contact-section {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0.5rem 0.25rem !important;
        margin: 0 0 1rem 0 !important;
    }

    /* Ensure grid-based sections stack cleanly - SITE-WIDE */
    /* Note: .stats-grid, .sports-grid, and .clubs-grid are handled separately below */
    .programs-grid,
    .facilities-grid,
    .philosophy-grid,
    .facts-grid,
    .application-content,
    .contact-content,
    .about-content,
    .admission-content,
    .management-content,
    .resources-grid,
    .principles-list,
    .hierarchy-grid {
        display: block !important;
    }

    /* Sports and Clubs grids - compact single column with 5px spacing */
    /* Override all earlier media queries for these grids */
    .sports-grid,
    .clubs-grid,
    .sports-section .sports-grid,
    .sports-section .clubs-grid,
    #sports-offered .sports-grid,
    #sports-clubs .clubs-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        margin: 0.5rem 0 !important;
        padding: 0 !important;
    }

    /* Buttons and links - SITE-WIDE */
    .btn,
    a.btn,
    .download-btn,
    .contact-section .btn,
    .application-cta .btn,
    button[type="submit"] {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0.5rem 0 !important;
        padding: 0.75rem 1rem !important;
    }

    /* Images inside tiles: full width and unclipped */
    .facility-tile img,
    .program-card img,
    .instagram-post .post-image {
        width: 100% !important;
        height: auto !important;
        object-fit: cover;
        border-radius: 0 !important;
    }

    /* Sports and Clubs Tiles - COMPACT SIZING on mobile */
    .sport-tile,
    .club-tile {
        background: var(--white) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        border-radius: 6px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: 140px !important;
        max-height: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Compact image heights */
    .sport-image,
    .club-image {
        height: 100px !important;
        max-height: 100px !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .sport-img,
    .club-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 0 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

    /* Compact info sections */
    .sport-info,
    .club-info {
        padding: 0.5rem 0.75rem !important;
        text-align: center !important;
    }

    .sport-info h3,
    .club-info h3 {
        font-size: 1rem !important;
        margin: 0 0 0.5rem 0 !important;
        text-align: center !important;
    }

    /* Compact buttons - centered */
    .sport-info .btn,
    .club-info .btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem !important;
        width: auto !important;
        min-width: 100px !important;
        display: inline-block !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    /* Sports section wrapper - ensure proper spacing */
    .sports-section,
    #sports-offered,
    #sports-clubs {
        padding: 0.5rem 0.25rem !important;
    }

    .sports-section h2,
    .sports-section p {
        margin: 0 0 0.75rem 0 !important;
        text-align: center !important;
    }

    /* Contact Page Specific Fixes */
    .contact-content {
        display: block !important;
        padding: 0 !important;
        gap: 1rem !important;
    }

    .contact-form-container,
    .map-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 1.5rem 0 !important;
    }

    .contact-form-container h3,
    .map-container h3 {
        text-align: center !important;
        margin: 0 0 0.75rem 0 !important;
    }

    .map-wrapper {
        margin: 0 0 1rem 0 !important;
        border-radius: 0 !important;
    }

    .map-wrapper iframe {
        width: 100% !important;
        height: 300px !important;
        border-radius: 0 !important;
    }

    .map-info {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .map-info p {
        margin: 0 0 0.75rem 0 !important;
        text-align: left !important;
        display: block !important;
        padding: 0 !important;
    }

    .map-info p i {
        margin-right: 0.5rem !important;
    }

    /* Contact form elements */
    .contact-form {
        padding: 0 !important;
        margin: 0 !important;
    }

    .form-group {
        margin-bottom: 1rem !important;
    }

    .form-group input,
    .form-group textarea {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 1rem !important;
        border: 1px solid rgba(0, 0, 0, 0.2) !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
    }

    .form-submit {
        margin-top: 1rem !important;
    }

    .form-submit .btn {
        width: 100% !important;
        padding: 0.75rem 1rem !important;
    }

    /* Home Page Stats Section - Center align on mobile */
    .stats .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    .stats .stat-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 1rem 0.5rem !important;
    }

    .stats .stat-content {
        text-align: center !important;
        width: 100% !important;
    }

    .stats .stat-number {
        text-align: center !important;
        margin: 0 auto !important;
    }

    .stats .stat-item p {
        text-align: center !important;
        margin: 0.5rem 0 0 0 !important;
    }

    .stats .stat-icon {
        text-align: center !important;
        margin: 0 auto 0.5rem !important;
    }

    /* Paragraph readability like form blocks - SITE-WIDE */
    p,
    .ecd-content-section p,
    .about-text p,
    .content-section p,
    .application-info p,
    .application-cta p,
    .contact-section p,
    .admission-content-section p,
    .management-text-content p,
    .sports-section p,
    .hero-content p,
    .section-header p {
        margin: 0 0 0.85rem 0 !important;
        line-height: 1.6 !important;
        text-align: left !important;
    }

    /* Headings - SITE-WIDE center alignment (titles and subtitles) */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .section-header h1,
    .section-header h2,
    .section-header h3,
    .section-header p,
    .content-section h1,
    .content-section h2,
    .content-section h3,
    .content-section h4,
    .about-text h2,
    .about-text h3,
    .management-text-content h2,
    .management-text-content h3,
    .sports-section h2,
    .sports-section h3,
    .sports-section h4,
    .hero-content h2,
    .hero-content h3,
    .ecd-content-section h2,
    .ecd-content-section h3,
    .ecd-content-section h4,
    .application-cta h4,
    .application-cta h5,
    .application-info h4,
    .contact-section h4,
    .contact-section h5,
    .download-section h5,
    .page-title,
    .main-title,
    .subtitle {
        text-align: center !important;
        margin: 0 0 0.75rem 0 !important;
    }

    /* Header logo should remain left-aligned */
    .logo-text h1 {
        text-align: left !important;
    }

    /* Stats headings already centered above */

    /* Lists - SITE-WIDE */
    ul,
    ol,
    .ecd-content-section ul,
    .ecd-content-section ol,
    .content-section ul,
    .content-section ol,
    .application-info ul,
    .application-info ol {
        padding-left: 1.25rem !important;
        margin: 0 0 0.85rem 0 !important;
        text-align: left !important;
    }

    li {
        text-align: left !important;
        margin-bottom: 0.5rem !important;
    }

    /* ECD Application: force true paragraph flow, remove any residual layout */
    /* Only apply to Application section, not other ECD sections */
    body.ecd-page #application-content {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        max-width: 100% !important;
    }

    /* Ensure Application section children inherit properly */
    body.ecd-page #application-content>* {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        max-width: 100% !important;
    }

    /* Ensure other ECD sections are not affected by Application-specific styles */
    /* JavaScript handles show/hide, we just ensure styles don't leak */

    /* Flatten any nested grids/flex/cards/tiles inside Application ONLY */
    /* Note: Removed [class*="content"] selector as it was too broad and affected other ECD sections */
    /* Don't override display property - let JavaScript control show/hide completely */
    body.ecd-page #application-content {
        position: static !important;
        width: 100% !important;
        padding: 0.5rem 0.25rem !important;
        margin: 0 0 1rem 0 !important;
        transform: none !important;
        overflow: visible !important;
    }

    /* Style direct children for layout only (not display) */
    body.ecd-page #application-content>* {
        position: static !important;
        width: 100% !important;
        padding: 0.5rem 0.25rem !important;
        margin: 0 0 1rem 0 !important;
        transform: none !important;
        overflow: visible !important;
    }

    /* Specific classes inside Application section only - convert grids to block */
    body.ecd-page #application-content .programs-grid,
    body.ecd-page #application-content .facilities-grid,
    body.ecd-page #application-content .philosophy-grid {
        display: block !important;
    }

    /* Application-specific inner sections */
    body.ecd-page #application-content .application-info,
    body.ecd-page #application-content .application-cta,
    body.ecd-page #application-content .download-section,
    body.ecd-page #application-content .contact-section {
        position: static !important;
        width: 100% !important;
        padding: 0.5rem 0.25rem !important;
        margin: 0 0 1rem 0 !important;
        transform: none !important;
        overflow: visible !important;
    }

    /* Lists and headings inside Application - center align titles */
    body.ecd-page #application-content h3,
    body.ecd-page #application-content h4,
    body.ecd-page #application-content h5 {
        margin: 0 0 0.75rem 0 !important;
        text-align: center !important;
    }

    body.ecd-page #application-content ul,
    body.ecd-page #application-content ol {
        padding-left: 1.25rem !important;
        margin: 0 0 0.85rem 0 !important;
    }

    /* Buttons/links stretch naturally */
    body.ecd-page #application-content .btn,
    body.ecd-page #application-content a.btn,
    body.ecd-page #application-content .download-btn {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }

    /* Contact details - SITE-WIDE: left-aligned, label on top, content below */
    .contact-details,
    body.ecd-page #application-content .contact-details,
    .history-content .contact-details,
    .admission-content .contact-details {
        text-align: left !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .contact-details p,
    body.ecd-page #application-content .contact-details p,
    .history-content .contact-details p,
    .admission-content .contact-details p {
        display: block !important;
        align-items: initial !important;
        text-align: left !important;
        margin: 0 0 0.75rem 0 !important;
        overflow-wrap: break-word !important;
    }

    .contact-details strong,
    body.ecd-page #application-content .contact-details strong,
    .history-content .contact-details strong,
    .admission-content .contact-details strong {
        display: block !important;
        min-width: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 4px !important;
        text-align: left !important;
    }

    /* Form elements - SITE-WIDE */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.75rem !important;
        margin: 0.5rem 0 !important;
        box-sizing: border-box !important;
    }

    /* Section headers - SITE-WIDE center alignment */
    .section-header {
        text-align: center !important;
        padding: 0.5rem 0.25rem !important;
    }

    .section-header h2,
    .section-header h3 {
        text-align: center !important;
    }

    /* About Westridge Page - Remove Vision/Mission boxes and match Application margins */
    .vision-box,
    .mission-box {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0.5rem 0.25rem !important;
        margin: 0 0 1rem 0 !important;
    }

    /* Restore navy blue box for Core Values */
    .core-values {
        background: var(--navy-blue) !important;
        border: none !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
        padding: 1.5rem 0.75rem !important;
        margin: 0 0 1rem 0 !important;
        color: var(--white) !important;
    }

    .vision-mission-content {
        display: block !important;
        margin-top: 1rem !important;
    }

    /* VM icon - make it smaller or remove background on mobile */
    .vm-icon {
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto 0.75rem !important;
        background: transparent !important;
    }

    .vm-icon i {
        font-size: 1.5rem !important;
        color: var(--primary-gold) !important;
    }

    /* Vision/Mission headings */
    .vision-box h3,
    .mission-box h3,
    .core-values h3 {
        text-align: center !important;
        margin-bottom: 0.75rem !important;
    }

    /* Vision/Mission text content */
    .vision-box p,
    .mission-box p {
        margin: 0 0 0.85rem 0 !important;
        text-align: left !important;
    }

    /* Mission list - remove bullets and yellow arrows, add spacing between items */
    .mission-box ul.mission-list,
    .mission-box .mission-list {
        list-style: none !important;
        padding-left: 0 !important;
        margin: 0 0 0.85rem 0 !important;
    }

    .mission-box ul.mission-list li,
    .mission-box .mission-list li {
        margin-bottom: 1.25rem !important;
        padding-left: 0 !important;
        list-style: none !important;
        text-align: left !important;
        position: relative !important;
    }

    /* Remove yellow arrows (→) from mission list items on mobile */
    .mission-box ul.mission-list li::before,
    .mission-box .mission-list li::before {
        display: none !important;
        content: none !important;
    }

    .mission-box ul.mission-list li:last-child {
        margin-bottom: 0 !important;
    }

    /* Core values grid - convert to block */
    .values-grid {
        display: block !important;
    }

    .value-item {
        margin-bottom: 1rem !important;
        padding: 0.5rem 0.25rem !important;
        color: var(--white) !important;
    }

    /* Ensure value-item icons and text are visible on navy blue background */
    .value-item i {
        color: var(--primary-gold) !important;
    }

    .value-item span {
        color: var(--white) !important;
    }

    /* History content */
    .history-content,
    .history-text {
        padding: 0.5rem 0.25rem !important;
        margin: 0 0 1rem 0 !important;
    }

    /* Why Choose Westridge Page - Apply same settings as About Westridge */
    /* Remove boxes from reason cards */
    .reason-card {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0.5rem 0.25rem !important;
        margin: 0 0 1rem 0 !important;
        text-align: left !important;
    }

    /* Remove boxes from promise items */
    .promise-item {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0.5rem 0.25rem !important;
        margin: 0 0 1rem 0 !important;
        display: block !important;
    }

    /* Convert grids to block layout */
    .reasons-grid,
    .promises-grid {
        display: block !important;
    }

    /* Reason card and promise item content */
    .reason-card h4,
    .reason-card p,
    .promise-item p {
        text-align: left !important;
        margin: 0 0 0.85rem 0 !important;
    }

    .reason-card h4 {
        text-align: center !important;
        margin-bottom: 0.75rem !important;
    }

    /* Reason card icons */
    .reason-card i {
        display: block !important;
        margin: 0 auto 0.75rem !important;
        text-align: center !important;
    }

    /* Promise item icons */
    .promise-item i {
        display: inline-block !important;
        margin-right: 0.5rem !important;
        vertical-align: middle !important;
    }

    /* Keep distinctly-westridge navy blue box (similar to core-values) */
    .distinctly-westridge {
        background: var(--navy-blue) !important;
        border: none !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
        padding: 1.5rem 0.75rem !important;
        margin: 0 0 1rem 0 !important;
        color: var(--white) !important;
    }

    .distinctly-westridge h3 {
        color: var(--primary-gold) !important;
        text-align: center !important;
        margin-bottom: 0.75rem !important;
    }

    .distinctly-westridge p {
        color: var(--white) !important;
        text-align: left !important;
        margin: 0 0 0.85rem 0 !important;
    }

    /* Remove box styling from principle paragraph */
    .distinctly-westridge .principle {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 0 0.85rem 0 !important;
        color: var(--white) !important;
    }

    /* Philosophy content */
    .philosophy-content {
        padding: 0.5rem 0.25rem !important;
    }

    .philosophy-intro {
        text-align: center !important;
        margin: 0 0 1rem 0 !important;
    }

    /* Why Westridge content */
    .why-westridge-content {
        padding: 0.5rem 0.25rem !important;
        margin-top: 1rem !important;
    }
}

/* ===========================================
   GALLERY PAGE STYLES
   =========================================== */

.gallery-page {
    position: relative;
    min-height: 100vh;
    padding: 3rem 0;
    overflow: visible;
}

.gallery-container {
    position: relative;
    z-index: 1;
}

.gallery-page .section-header {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 18px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
    padding: 2rem 2.5rem;
    max-width: max-content;
    margin-left: auto;
    margin-right: auto;
}

/* Gallery Watermark - Matching the rest of the website */
.gallery-page::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 1000px;
    background-image: url('../images/School Mascot/M3.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    z-index: 0;
    pointer-events: none;
    opacity: 0.3;
}

.gallery-nav-container {
    display: flex;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 2rem auto 0;
    padding: 0 2rem;
}

.gallery-nav-panel {
    flex: 0 0 140px;
    background: var(--light-gray);
    padding: var(--spacing-md);
    border-radius: 8px;
    height: fit-content;
    position: sticky;
    top: 120px;
    z-index: 2;
}

.gallery-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gallery-nav-list li {
    margin-bottom: var(--spacing-xs);
}

.gallery-nav-link {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-gray);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-weight: 500;
    border: 1px solid transparent;
    white-space: nowrap;
    font-size: 0.9rem;
    text-align: center;
    cursor: pointer;
}

.gallery-nav-link:hover,
.gallery-nav-link.active {
    background: var(--primary-gold);
    color: var(--navy-blue);
    border-color: var(--primary-gold);
}

.gallery-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 1;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.3s ease;
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    will-change: opacity, transform;
}

.gallery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1);
}

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

/* Gallery Lightbox Styles */
.gallery-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-lightbox.active {
    display: flex;
    opacity: 1;
}

.gallery-lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery-lightbox img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.gallery-lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    font-weight: 300;
    cursor: pointer;
    z-index: 10001;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    transition: background 0.3s ease, transform 0.3s ease;
}

.gallery-lightbox-close:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: rotate(90deg);
}

.gallery-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 30px;
    cursor: pointer;
    z-index: 10001;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    transition: background 0.3s ease;
}

.gallery-lightbox-nav:hover {
    background: rgba(0, 0, 0, 0.8);
}

.gallery-lightbox-prev {
    left: 30px;
}

.gallery-lightbox-next {
    right: 30px;
}

.gallery-lightbox-nav.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.gallery-placeholder {
    text-align: center;
    color: var(--text-gray);
    padding: 3rem;
    font-style: italic;
}

/* Responsive Breakpoints */
@media (max-width: 1400px) {
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

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

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

/* Mobile Responsive */
@media (max-width: 768px) {
    .gallery-page::before {
        width: 600px;
        height: 600px;
    }

    .gallery-nav-container {
        flex-direction: column;
        gap: 1rem;
    }

    .gallery-nav-panel {
        position: static;
        width: 100%;
        flex: 0 0 auto;
    }

    .gallery-nav-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .gallery-nav-list li {
        margin-bottom: 0;
        flex: 1;
        min-width: calc(50% - 0.25rem);
    }

    .gallery-nav-link {
        text-align: center;
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.85rem;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

/* =========================================== */
/* MEET THE TEAM - CENTERED TABS (MOBILE)     */
/* =========================================== */
@media (max-width: 768px) {

    /* Make management layout center its content */
    .management-layout {
        display: flex !important;
        flex-direction: column;
        align-items: center;
    }

    /* Center the main content container */
    .management-main {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* Center the class-tube container */
    .class-tube {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* Center the entire tube shell container */
    .class-tube-shell {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* Center the tube rows */
    .class-tube-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* Center the tube columns container */
    .class-tube-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* Center the middle section */
    .class-tube-middle {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* Ensure tab buttons are properly centered and sized */
    .class-tube-row .class-tab-button,
    .class-tube-column .class-tab-button {
        width: 80%;
        max-width: 260px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    /* Center the teacher card display */
    .class-display-card {
        margin-left: auto;
        margin-right: auto;
    }
}

/* =========================================== */
/* ECD PAGE - WHITE TEXT ON BACKGROUNDS       */
/* =========================================== */
@media (max-width: 768px) {

    /* ECD Section headings without backgrounds - make white */
    .ecd-content-section h3 {
        color: var(--white) !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    }

    .ecd-content-section h3::after {
        background: var(--white);
    }

    /* ECD Sub-headings - make white */
    .ecd-content-section h4 {
        color: var(--white) !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    }

    /* ECD smaller subheadings */
    .ecd-content-section h5 {
        color: var(--white) !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    }

    /* ECD paragraph text - make white */
    .ecd-content-section p {
        color: var(--white) !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    }

    /* ECD strong/bold text - make white or gold */
    .ecd-content-section strong {
        color: var(--primary-gold) !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    }

    /* ECD list items - make white */
    .ecd-content-section li {
        color: var(--white) !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    }

    /* ECD links in content - make white */
    .ecd-content-section a {
        color: var(--primary-gold) !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    }

    /* Stat labels on ECD page */
    .ecd-stats .stat-label,
    .ecd-page .stat-label {
        color: var(--white) !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    }

    /* Stat values - ensure they are visible */
    .ecd-stats .stat-value,
    .ecd-stats .stat-number,
    .ecd-page .stat-value,
    .ecd-page .stat-number {
        color: var(--primary-gold) !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    }

    /* Section titles that appear on fixed backgrounds */
    .ecd-page .section-title,
    .ecd-page .section-subtitle {
        color: var(--white) !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    }

    /* Navigation labels on ECD */
    .ecd-nav-label {
        color: var(--white) !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    }

    /* Facility titles if not already styled */
    .ecd-page .facility-content h4 {
        color: var(--white) !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    }

    /* Staff section titles */
    .ecd-page .staff-category h4 {
        color: var(--white) !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    }

    /* ECD Hero subtitle - make white */
    .ecd-hero-text h2 {
        color: var(--white) !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    }
}
/* ==========================================================================
   Examinations Section Styles
   ========================================================================== */
.exam-section {
    margin-top: 2rem;
}

.exam-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.exam-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.exam-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.exam-logo-wrapper {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.exam-logo {
    max-height: 80px;
    max-width: 100%;
    object-fit: contain;
}

.exam-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--navy-blue);
    margin-bottom: 1rem;
    text-align: center;
}

.exam-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-dark, #333);
    flex-grow: 1;
    margin-bottom: 1.5rem !important;
}

.exam-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.9rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(245, 247, 250, 0.5);
    border-radius: 8px;
    padding: 1rem;
}

.exam-meta span {
    color: var(--navy-blue);
}

.exam-meta strong {
    color: var(--primary-color, #0e192c);
}

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

/* ============================================================
   SCROLL ANIMATIONS  —  Apple-grade reveal system
   - GPU-only properties (opacity + transform) → never layouts
   - cubic-bezier(0.16, 1, 0.3, 1) is Apple's signature "ease-out-expo" curve
   - Triggered once by IntersectionObserver in script.js
   - Fully disabled under prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

    .reveal {
        opacity: 0;
        transform: translate3d(0, 28px, 0);
        transition:
            opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
            transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
        transition-delay: calc(var(--reveal-delay, 0) * 1ms);
        backface-visibility: hidden;
        /* will-change is applied transiently from JS just before reveal,
           and removed after the transition. Declaring it here would
           promote every reveal to its own compositor layer permanently,
           which can stall trackpad/wheel scroll on macOS Chrome. */
    }

    /* JS sets this class right before the element animates */
    .reveal.is-priming {
        will-change: opacity, transform;
    }

    .reveal.is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    /* Once settled, release GPU memory */
    .reveal.is-settled {
        will-change: auto;
    }

    /* Subtle scale variant for image-heavy tiles */
    .reveal--scale {
        transform: translate3d(0, 28px, 0) scale(0.985);
    }

    .reveal--scale.is-visible {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* ============================================================
   SCROLL SMOOTHNESS
   Note: `scroll-behavior: smooth` on the root is intentionally NOT set
   here — it interferes with continuous wheel/trackpad input on Chromium
   (each tick queues a smooth-scroll animation, making the page feel
   stuck). Anchor-link smooth scrolling is handled by JS where needed.
   ============================================================ */

/* background-attachment: fixed is a known iOS/Safari perf killer.
   Switch to scroll on touch viewports — visually identical, dramatically smoother. */
@media (max-width: 1024px),
       (hover: none) and (pointer: coarse) {

    .page-section,
    .resources-section,
    .why-westridge-section,
    .about-westridge-section,
    .history-section,
    .vision-mission-section,
    .management-section,
    .philosophy-section,
    .gallery-page,
    .about,
    .ecd-page .ecd-hero,
    .spacer-image,
    .spacer-between-video-stats {
        background-attachment: scroll !important;
    }
}

/* Reduced motion: turn everything off */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ===========================================================================
   MOBILE BUG FIXES  —  surgical mobile-only overrides
   Every rule below is wrapped in a touch / small-viewport @media query so the
   desktop / laptop experience is byte-identical to before these were added.
   =========================================================================== */

/* --- Bug 1 -----------------------------------------------------------------
   "Immovable background is static throughout the website" on mobile.
   The earlier targeted allow-list missed elements with inline
   `background-attachment: fixed` or nested selectors. Universal sweep at
   touch viewports forces every fixed background to scroll naturally with
   the page, no jank. */
@media (max-width: 1024px),
       (hover: none) and (pointer: coarse) {

    [style*="background-attachment"],
    [class*="page-section"],
    section,
    main,
    .about,
    .about-overlay,
    .resources-section,
    .gallery-page,
    .ecd-page .ecd-hero,
    .spacer-image,
    .spacer-between-video-stats,
    .why-westridge-section,
    .about-westridge-section,
    .history-section,
    .vision-mission-section,
    .management-section,
    .philosophy-section {
        background-attachment: scroll !important;
    }
}

/* --- Bug 2 -----------------------------------------------------------------
   ECD page on mobile: cards turn white, but text stays white-with-shadow
   making everything unreadable. Restore dark body text on every ECD card
   on small viewports only. */
@media (max-width: 768px) {

    body.ecd-page .ecd-content-section,
    body.ecd-page .ecd-content-section p,
    body.ecd-page .ecd-content-section li,
    body.ecd-page .ecd-content-section span,
    body.ecd-page .ecd-content-section strong,
    body.ecd-page .ecd-content-section em,
    body.ecd-page .ecd-content-section a,
    body.ecd-page .ecd-program-content,
    body.ecd-page .ecd-program-content p,
    body.ecd-page .ecd-program-content li,
    body.ecd-page .ecd-program-content span {
        color: #1e293b !important;
        text-shadow: none !important;
    }

    body.ecd-page .ecd-content-section h2,
    body.ecd-page .ecd-content-section h3,
    body.ecd-page .ecd-content-section h4 {
        color: #0b2545 !important;
        text-shadow: none !important;
    }
}

/* --- Bug 3 -----------------------------------------------------------------
   ECD programmes: expanded card content overflows because JS measures
   `scrollHeight` while the parent section is hidden (== 0). On mobile
   just let the content take its natural height — the transition still
   feels right because the section was offscreen anyway. */
@media (max-width: 768px) {

    .ecd-program-item.expanded .ecd-program-content {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* --- Bug 4 -----------------------------------------------------------------
   Mobile body-scroll lock for the class-photo / gallery lightbox so iOS
   stops drifting the underlying page (which is what makes the image look
   like it "shifts up and cuts in half"). Applied via a class set by JS in
   openLightbox(); removed in closeLightbox(). */
body.lightbox-mobile-lock {
    position: fixed !important;
    width: 100% !important;
    left: 0 !important;
    overflow: hidden !important;
    touch-action: none;
}

/* ===========================================================================
   MOBILE CLEAN VIEW (proposal)
   ---------------------------------------------------------------------------
   Flattens every card, tile and panel on small viewports into a unified white
   reading surface with centered headings + justified body text. Margins are
   narrow, decorations are removed, content reads top-to-bottom in one flow.
   Every rule lives inside @media (max-width: 768px) so the
   desktop / laptop layout is byte-identical.
   =========================================================================== */
@media (max-width: 768px) {

    /* 1. Every section becomes white — no fixed-bg parallax, no overlays */
    body, main, section,
    .page-section,
    .why-westridge-section,
    .about-westridge-section,
    .history-section,
    .vision-mission-section,
    .management-section,
    .philosophy-section,
    .resources-section,
    .gallery-page,
    body.ecd-page {
        background: #ffffff !important;
        background-image: none !important;
    }

    /* 2. Strip every tile / card / panel decoration */
    .reason-card, .facility-tile, .sport-tile, .stat-item,
    .team-card, .team-member-card, .feature-card,
    .philosophy-card, .value-card, .principle-card,
    .subject-card, .activity-card, .exam-card,
    .program-card, .ecd-program-item, .ecd-content-section,
    .fee-card, .payment-card, .alumni-card,
    .honour-card, .club-card, .spotlight-card,
    .gallery-item, .management-card,
    .about-overlay,
    .management-text-content, .application-info, .application-cta,
    .download-section, .map-container, .contact-form-container,
    .map-info, .distinctly-westridge, .overview-collage-wrapper,
    .resources-intro, .why-westridge-content, .about-content,
    .section-header,
    .ecd-navigation, .management-sidebar {
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 0.5rem 0 !important;
        margin: 0 0 1.25rem 0 !important;
        max-width: 100% !important;
    }

    /* 3. Collapse every grid so children stack vertically */
    .reasons-grid, .sports-grid, .facilities-grid,
    .stats-grid, .team-grid, .gallery-grid,
    .activities-grid, .subjects-grid, .principles-grid,
    .philosophy-grid, .values-grid, .exam-grid,
    .fee-grid, .payment-grid, .alumni-grid,
    .honours-grid, .clubs-grid, .overview-collage,
    .management-layout, .why-westridge-content,
    .ecd-content-layout {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
    }

    /* 4. Narrow uniform gutter on every container */
    .container, .gallery-container {
        padding: 0 1rem !important;
        max-width: 100% !important;
    }

    /* 5. All readable text in deep navy, no shadows */
    body :where(p, li, span, strong, em, td, th, a, blockquote, label,
                 h1, h2, h3, h4, h5, h6,
                 .section-header h2, .section-header h3, .section-header p) {
        color: #0b2545 !important;
        text-shadow: none !important;
    }

    /* 6. Centered headings, justified body — Apple-style reading flow */
    body :where(h1, h2, h3, h4, h5, h6,
                 .section-header h2, .section-header h3) {
        text-align: center !important;
        margin: 1.25rem 0 0.6rem !important;
        line-height: 1.25 !important;
    }

    body p, body blockquote {
        text-align: justify !important;
        text-align-last: center !important;
        line-height: 1.65 !important;
        margin: 0 0 1rem !important;
        max-width: 100% !important;
    }

    /* 7. Lists: block-centered, items left-aligned for legibility */
    body ul, body ol {
        display: table !important;
        margin: 0 auto 1rem !important;
        text-align: left !important;
        padding-left: 1.5rem !important;
    }

    /* 8. Images flow naturally, light corner rounding for friendliness */
    body img:not(.logo-img):not(.affiliation-logo):not(.mascot-fixed):not([class*="mascot"]) {
        display: block !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 1rem auto !important;
        border-radius: 10px !important;
    }
}

/* ===========================================================================
   MOBILE CLEAN VIEW — Round 2: home-page targeted polish
   ---------------------------------------------------------------------------
   All rules below stay inside @media (max-width: 768px) — desktop untouched.
   =========================================================================== */
@media (max-width: 768px) {

    /* === Header: compact, logo enlarged + centered, burger left =========== */
    .header {
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
        min-height: 0 !important;
    }
    .header .container,
    .header .header-content {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .header .logo {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.6rem !important;
        width: 100% !important;
    }
    .header .logo-img,
    .header .logo a img.logo-img {
        width: 56px !important;
        height: 56px !important;
        max-height: 56px !important;
    }
    .header .logo-text { text-align: left !important; }
    .header .logo-text h1 {
        font-size: 1.15rem !important;
        margin: 0 !important;
        line-height: 1.1 !important;
    }
    .header .logo-text p {
        font-size: 0.78rem !important;
        margin: 0 !important;
        line-height: 1.1 !important;
    }
    .main-nav,
    .header .main-nav { display: none !important; }

    /* Burger button → middle-left of header */
    .mobile-nav-btn {
        position: fixed !important;
        left: 1rem !important;
        right: auto !important;
        top: 1.2rem !important;
        z-index: 1100 !important;
    }
    body { padding-top: var(--header-height) !important; }

    /* === Hero: slideshow fills the section, images cover ================== */
    .hero { height: 60vh !important; min-height: 380px !important; padding: 0 !important; }
    .hero-slider,
    .hero-slide { width: 100% !important; height: 100% !important; }
    .hero-slide-image,
    .hero-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* === "Freedom Through Knowledge" ribbon: school-colour decoration ===== */
    .hero-ribbon {
        background:
            linear-gradient(90deg, var(--primary-gold, #ffb703) 0, var(--primary-gold, #ffb703) 6px, transparent 6px, transparent calc(100% - 6px), var(--primary-gold, #ffb703) calc(100% - 6px)),
            linear-gradient(135deg, #0b2545 0%, #1d3a73 60%, #0b2545 100%) !important;
        padding: 0.85rem 1rem !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .hero-ribbon::before,
    .hero-ribbon::after {
        content: '' !important;
        position: absolute !important;
        left: 0 !important; right: 0 !important;
        height: 3px !important;
        background: var(--primary-gold, #ffb703) !important;
    }
    .hero-ribbon::before { top: 0 !important; }
    .hero-ribbon::after  { bottom: 0 !important; }
    .hero-ribbon-text {
        color: var(--primary-gold, #ffb703) !important;
        text-align: center !important;
        font-weight: 800 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        margin: 0 !important;
    }

    /* === Headmaster photo fits its tile ==================================== */
    .about-photo,
    .headmaster-profile .about-photo {
        width: 100% !important;
        aspect-ratio: 4 / 3 !important;
        overflow: hidden !important;
        border-radius: 12px !important;
        margin: 0 auto 1rem !important;
    }
    .about-photo img,
    .headmaster-profile .about-photo img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;
        border-radius: 12px !important;
        margin: 0 !important;
    }

    /* === Experience-video section: keep heading + crystal box, hide body == */
    .experience-video-content > p { display: none !important; }
    .experience-video-content h2 {
        display: inline-block !important;
        background: rgba(255, 255, 255, 0.14) !important;
        backdrop-filter: blur(16px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        border-radius: 16px !important;
        padding: 0.85rem 1.6rem !important;
        color: #fff !important;
        text-shadow: none !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    }
    /* Kill the hover-animation on the Watch-Video button */
    .video-play-btn,
    .video-play-btn:hover,
    .video-play-btn:focus,
    .video-play-btn:active {
        transform: none !important;
        animation: none !important;
        transition: background 0.18s ease !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
    }

    /* === Footer: white text, centered everywhere ========================== */
    .footer,
    .footer * {
        text-align: center !important;
        color: #ffffff !important;
    }
    .footer h3,
    .footer h4 {
        color: var(--primary-gold, #ffb703) !important;
        text-align: center !important;
    }
    .footer ul,
    .footer ol {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 auto 1rem !important;
        text-align: center !important;
        display: block !important;
    }
    .footer li {
        text-align: center !important;
        margin: 0.35rem 0 !important;
    }
    .footer a { color: #ffffff !important; }
    .footer .footer-contact p,
    .footer .footer-contact i,
    .footer .social-links a {
        text-align: center !important;
        justify-content: center !important;
    }

    /* === Spacer sections: real fixed-attachment background image =========
       Overrides the universal "scroll on mobile" rule from the previous
       block so these specific spacers DO act as a parallax viewport.
       =================================================================== */
    .spacer-image,
    .spacer-between-video-stats {
        background-image: url('../images/about/DJI_0300.webp') !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed !important;
        min-height: 280px !important;
        height: 280px !important;
        display: block !important;
        width: 100% !important;
    }

}

/* ===========================================================================
   MOBILE CLEAN VIEW — Round 2 hotfixes (higher specificity)
   =========================================================================== */
@media (max-width: 768px) {

    /* Burger button — beat the !important right:20px from the legacy rule */
    body .mobile-nav-btn,
    body div.mobile-nav-btn {
        position: fixed !important;
        top: 1.1rem !important;
        left: 1rem !important;
        right: auto !important;
        margin: 0 !important;
        z-index: 1100 !important;
    }

    /* Spacer image — higher specificity than legacy .spacer-image rules */
    body section.spacer-image,
    body section.spacer-between-video-stats,
    body section.spacer-image.spacer-between-video-stats {
        background: url('../images/about/DJI_0300.webp') center center / cover no-repeat !important;
        background-attachment: fixed !important;
        min-height: 320px !important;
        height: 320px !important;
        display: block !important;
        width: 100% !important;
    }

    /* Video section — kill the descriptive paragraph wherever it lives */
    section.experience-video p,
    .experience-video-content p,
    .experience-video-wrapper p,
    .experience-video-container p {
        display: none !important;
    }

}

/* ===========================================================================
   MOBILE CLEAN VIEW — Round 3: home hero/headmaster polish + full ECD redesign
   All rules below stay inside @media (max-width: 768px). Desktop untouched.
   =========================================================================== */
@media (max-width: 768px) {

    /* ====================================================================
       HOME PAGE
       ==================================================================== */

    /* Hero slideshow: images cover the hero box, cropping is OK */
    .hero,
    section.hero {
        height: 70vh !important;
        min-height: 420px !important;
        max-height: 720px !important;
        overflow: hidden !important;
        position: relative !important;
    }
    .hero-slider,
    .hero-slide,
    .hero-slide.active {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    .hero-slide-image,
    .hero-slide img.hero-slide-image,
    .hero-slide > img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
    }

    /* Remove the "Welcome to" overline from the hero */
    .hero-center-overline { display: none !important; }

    /* Headmaster photo: keep native aspect ratio, frame = image dimensions */
    .about-photo,
    .headmaster-profile .about-photo {
        width: auto !important;
        height: auto !important;
        aspect-ratio: auto !important;
        max-width: 100% !important;
        display: inline-block !important;
        margin: 0 auto 1rem !important;
        padding: 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    .about-photo img,
    .headmaster-profile .about-photo img {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 !important;
        border-radius: 12px !important;
    }

    /* ====================================================================
       ECD PAGE — header, philosophy, programmes, curriculum, schedule,
                  facilities, staff. + mascot lifted out to fixed watermark.
       ==================================================================== */

    /* --- ECD hero header ------------------------------------------------- */
    body.ecd-page .ecd-hero-text p { display: none !important; }

    body.ecd-page .ecd-hero-text h1 {
        font-family: 'Playfair Display', Georgia, serif !important;
        font-weight: 700 !important;
        font-size: clamp(2rem, 8.5vw, 3rem) !important;
        letter-spacing: 0.03em !important;
        line-height: 1.1 !important;
        color: #ffffff !important;
        text-shadow: 0 4px 18px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.5) !important;
        text-align: center !important;
        margin: 0 0 0.85rem 0 !important;
    }

    body.ecd-page .ecd-hero-text h2 {
        display: inline-block !important;
        border: 2px solid #000000 !important;
        padding: 0.55rem 1rem !important;
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
        margin: 0 auto !important;
        background: rgba(255,255,255,0.78) !important;
        color: #000 !important;
        text-shadow: none !important;
        border-radius: 4px !important;
    }

    /* --- Universal: remove every tile/card decoration in ECD content ---- */
    body.ecd-page .ecd-content-section,
    body.ecd-page .philosophy-grid,
    body.ecd-page .philosophy-item,
    body.ecd-page .philosophy-card,
    body.ecd-page .value-card,
    body.ecd-page .schedule-card,
    body.ecd-page .schedule-grid > *,
    body.ecd-page .staff-card,
    body.ecd-page .team-member-card,
    body.ecd-page .ecd-staff-grid > *,
    body.ecd-page .facility-tile,
    body.ecd-page .facilities-grid > * {
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0.4rem 0 !important;
        margin: 0 0 1rem 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- Our Philosophy → flat centered paragraphs ---------------------- */
    body.ecd-page #philosophy-content .philosophy-grid {
        display: block !important;
        grid-template-columns: none !important;
    }
    body.ecd-page #philosophy-content .philosophy-mascot-cell { display: none !important; }
    body.ecd-page #philosophy-content .philosophy-item h4,
    body.ecd-page #philosophy-content .philosophy-item h3 {
        text-align: center !important;
        margin: 1rem 0 0.4rem !important;
    }
    body.ecd-page #philosophy-content .philosophy-item p,
    body.ecd-page #philosophy-content p {
        text-align: center !important;
        text-align-last: center !important;
        line-height: 1.65 !important;
        max-width: 100% !important;
        margin: 0 0 1rem !important;
    }
    body.ecd-page #philosophy-content i,
    body.ecd-page #philosophy-content [class*="icon"] {
        display: none !important;
    }

    /* --- ECD Programmes: keep expandable, kill tile, align margins ----- */
    body.ecd-page #programs-content .ecd-program-accordion {
        margin: 0 !important;
        padding: 0 !important;
    }
    body.ecd-page #programs-content .ecd-program-item {
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(11, 37, 69, 0.15) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 0 0.5rem !important;
    }
    body.ecd-page #programs-content .ecd-program-toggle {
        background: transparent !important;
        padding: 0.85rem 0 !important;
        text-align: center !important;
        justify-content: center !important;
    }
    body.ecd-page #programs-content .ecd-program-content {
        padding: 0 0 1rem !important;
        text-align: center !important;
    }
    body.ecd-page #programs-content .ecd-program-content p {
        text-align: center !important;
        text-align-last: center !important;
    }

    /* --- ECD Curriculum: centre intro, left-align "Subjects Taught:" --- */
    body.ecd-page #curriculum-content > p,
    body.ecd-page #curriculum-content > div > p {
        text-align: center !important;
        text-align-last: center !important;
    }
    body.ecd-page #curriculum-content h4 {
        text-align: left !important;
        margin: 1.25rem 0 0.5rem !important;
    }
    body.ecd-page #curriculum-content .curriculum-list,
    body.ecd-page #curriculum-content ul {
        text-align: left !important;
        margin: 0 !important;
        padding-left: 1.25rem !important;
    }

    /* --- School Schedule: flat, full-width like the headings ----------- */
    body.ecd-page #schedule-content [class*="card"],
    body.ecd-page #schedule-content [class*="tile"],
    body.ecd-page #schedule-content table,
    body.ecd-page #schedule-content .schedule-grid {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 0 1rem !important;
        width: 100% !important;
        display: block !important;
    }
    body.ecd-page #schedule-content h3,
    body.ecd-page #schedule-content h4,
    body.ecd-page #schedule-content p {
        text-align: center !important;
    }

    /* --- Facilities for ECD: black border around descriptions --------- */
    body.ecd-page #facilities-content p,
    body.ecd-page #facilities-content .facility-description,
    body.ecd-page #facilities-content .facility-tile p,
    body.ecd-page #facilities-content .facility-tile .facility-text {
        border: 2px solid #000000 !important;
        padding: 0.65rem 0.8rem !important;
        border-radius: 4px !important;
        text-align: center !important;
        text-align-last: center !important;
        margin: 0.5rem 0 !important;
        background: #ffffff !important;
    }
    body.ecd-page #facilities-content .facility-title {
        text-align: center !important;
    }

    /* --- Our Staff: flat, full-width like sub-heading placeholders --- */
    body.ecd-page #staff-content .staff-card,
    body.ecd-page #staff-content .team-member-card,
    body.ecd-page #staff-content .ecd-staff-grid > *,
    body.ecd-page #staff-content [class*="card"] {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 0 1rem !important;
        width: 100% !important;
        display: block !important;
        text-align: center !important;
    }

    /* --- Mascot lifted out & fixed as page watermark ------------------ */
    body.ecd-page .mascot-fixed,
    body.ecd-page [class*="mascot"]:not(.philosophy-mascot-cell),
    body.ecd-page .nav-mascot,
    body.ecd-page #navMascotPrograms,
    body.ecd-page #navMascotStaff,
    body.ecd-page .philosophy-mascot-cell {
        display: none !important;
    }
    /* Also clear the mascot background-image baked into ECD content sections */
    body.ecd-page .ecd-content-section,
    body.ecd-page .about-overlay {
        background-image: none !important;
    }

    /* Fixed watermark: doesn't scroll, sits faintly behind content */
    body.ecd-page::before {
        content: '' !important;
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: min(80vw, 420px) !important;
        height: min(80vw, 420px) !important;
        background-image: url('../images/School Mascot/M3.png') !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: contain !important;
        opacity: 0.07 !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }
    /* Make sure real content sits above the watermark */
    body.ecd-page main,
    body.ecd-page .ecd-content-section,
    body.ecd-page .ecd-hero,
    body.ecd-page header,
    body.ecd-page footer {
        position: relative !important;
        z-index: 1 !important;
    }

    /* --- Center-align every piece of text inside ECD content ---------- */
    body.ecd-page .ecd-content-section,
    body.ecd-page .ecd-content-section *:not(ul):not(ol):not(li) {
        text-align: center !important;
    }
    body.ecd-page .ecd-content-section h2,
    body.ecd-page .ecd-content-section h3,
    body.ecd-page .ecd-content-section h4 {
        text-align: center !important;
    }
    /* Bullet lists: keep block centered, items left for legibility */
    body.ecd-page .ecd-content-section ul,
    body.ecd-page .ecd-content-section ol {
        display: table !important;
        margin: 0 auto 1rem !important;
        text-align: left !important;
    }
    /* But the curriculum subjects-taught list stays left-aligned */
    body.ecd-page #curriculum-content .curriculum-list,
    body.ecd-page #curriculum-content h4 + ul {
        text-align: left !important;
        display: block !important;
        margin-left: 0 !important;
    }

}

/* Round 3 hotfix: ensure Welcome-to overline really hides */
@media (max-width: 768px) {
    body .hero .hero-center .hero-center-overline,
    body section.hero .hero-center .hero-center-overline {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

/* Round 3 hotfix: philosophy items as flowing centered paragraphs */
@media (max-width: 768px) {

    body.ecd-page #philosophy-content .philosophy-grid,
    body.ecd-page #philosophy-content .philosophy-item {
        display: block !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        flex-direction: column !important;
    }

    body.ecd-page #philosophy-content .philosophy-item {
        text-align: center !important;
        padding: 0.4rem 0 !important;
        margin: 0 0 1.25rem !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.ecd-page #philosophy-content .philosophy-item > *,
    body.ecd-page #philosophy-content .philosophy-item h2,
    body.ecd-page #philosophy-content .philosophy-item h3,
    body.ecd-page #philosophy-content .philosophy-item h4 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        text-align: center !important;
        margin: 0 auto 0.5rem !important;
        padding: 0 !important;
    }

    body.ecd-page #philosophy-content .philosophy-item p {
        text-align: center !important;
        text-align-last: center !important;
        margin: 0 auto 0 !important;
        max-width: 100% !important;
        line-height: 1.65 !important;
    }

    body.ecd-page #philosophy-content .philosophy-item i,
    body.ecd-page #philosophy-content .philosophy-item [class*="icon"],
    body.ecd-page #philosophy-content .philosophy-item img:not([alt*="mascot" i]) {
        display: none !important;
    }
}

/* ===========================================================================
   MOBILE CLEAN VIEW — Round 4
   ---------------------------------------------------------------------------
   1. Re-assert the home-page header + footer as the site-wide mobile default
      and lock them with !important + body-prefixed selectors so per-page
      overrides cannot silently win.
   2. Fix ECD header: it was inheriting position:relative from the Round 3
      z-index-stacking rule and scrolling with the page. Force fixed again.
   3. Mirror ECD slideshow visual settings (fade timing, navy overlay, gold
      + navy border decoration) onto the home page hero. ECD hero untouched.
   4. ECD school schedule: each <ul> becomes a uniform-size tile; default
      black bullets removed; existing yellow ::before bullets retained.
   5. ECD facilities: remove yellow accent border before sub-headings, strip
      every bullet marker (default and ::before), add black text-stroke
      "border" to the facility name caption.

   Every rule lives inside @media (max-width: 768px). Desktop untouched.
   =========================================================================== */
@media (max-width: 768px) {

    /* === 1 + 2. Site-wide header: fixed, on every page ==================== */
    body .header,
    body header.header,
    body.ecd-page .header,
    body.ecd-page header.header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
    }
    /* Beat the Round 3 rule (body.ecd-page header { position: relative }) */
    body.ecd-page header,
    body.ecd-page header.header {
        position: fixed !important;
    }
    body { padding-top: var(--header-height, 80px) !important; }

    /* === 1. Site-wide footer: re-assert white-centered home-page styling == */
    body .footer,
    body .footer * {
        text-align: center !important;
        color: #ffffff !important;
    }
    body .footer h3,
    body .footer h4 {
        color: var(--primary-gold, #ffb703) !important;
    }
    body .footer a { color: #ffffff !important; }

    /* === 3. Home hero: mirror ECD slideshow settings (ECD untouched) ====== */
    body:not(.ecd-page) .hero,
    body:not(.ecd-page) section.hero {
        position: relative !important;
        overflow: hidden !important;
        border-top: 6px solid var(--primary-gold, #ffb703) !important;
        border-bottom: 6px solid var(--navy-blue, #0b2545) !important;
    }
    body:not(.ecd-page) .hero-slide {
        opacity: 0 !important;
        transition: opacity 1.5s ease-in-out !important;
    }
    body:not(.ecd-page) .hero-slide.active {
        opacity: 1 !important;
    }
    body:not(.ecd-page) .hero-slide-overlay {
        background: rgba(30, 58, 138, 0.5) !important;
    }

    /* === 4. ECD School Schedule: uniform tiles, yellow bullets only ======= */
    body.ecd-page #schedule-content ul {
        background: #ffffff !important;
        border: 1px solid rgba(11, 37, 69, 0.18) !important;
        border-radius: 10px !important;
        padding: 1rem 1.25rem !important;
        margin: 0.6rem 0 1.25rem !important;
        min-height: 200px !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        list-style: none !important;          /* kill default black bullets */
        text-align: center !important;
        text-align-last: center !important;
        box-sizing: border-box !important;
    }
    body.ecd-page #schedule-content ul li {
        list-style: none !important;          /* belt + suspenders          */
        text-align: center !important;
        padding-left: 1rem !important;
        position: relative !important;
        color: var(--text-dark, #1a1a1a) !important;
        margin-bottom: 0.45rem !important;
    }
    /* Re-affirm the yellow ::before bullet on schedule items only */
    body.ecd-page #schedule-content ul li::before {
        content: '\2022' !important;          /* yellow • */
        color: var(--primary-gold, #ffb703) !important;
        position: absolute !important;
        left: 0.25rem !important;
        font-weight: bold !important;
        display: inline-block !important;
    }
    body.ecd-page #schedule-content h4 {
        border-left: 0 !important;
        padding-left: 0 !important;
        text-align: center !important;
    }

    /* === 5. ECD Facilities: cleanup + black text-border on facility name == */
    /* Drop the yellow accent line before each sub-heading */
    body.ecd-page #facilities-content h4 {
        border-left: 0 !important;
        padding-left: 0 !important;
    }
    /* Remove every bullet marker — default browser AND custom yellow */
    body.ecd-page #facilities-content ul,
    body.ecd-page #facilities-content .facility-overlay ul {
        list-style: none !important;
        padding-left: 0 !important;
    }
    body.ecd-page #facilities-content li {
        list-style: none !important;
        padding-left: 0 !important;
    }
    body.ecd-page #facilities-content li::before,
    body.ecd-page #facilities-content .facility-overlay li::before {
        content: none !important;
        display: none !important;
    }
    /* Facility name: black text-stroke "border" */
    body.ecd-page #facilities-content .facility-title,
    body.ecd-page .facilities-grid .facility-tile .facility-title {
        -webkit-text-stroke: 1px #000000 !important;
        text-stroke: 1px #000000 !important;
        color: #ffffff !important;
        font-weight: 800 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
    }
}

/* ===========================================================================
   MOBILE CLEAN VIEW — Round 5
   ---------------------------------------------------------------------------
   ABOUT WESTRIDGE (scoped via body:has(.story-hero) — unique to that page)
     - Replace the inner white/temple/awards-image backgrounds with the
       home-page-style fixed-attachment DJI_0300 backdrop.
     - All headings (h1–h6) AND the .section-header tagline → yellow.
     - All body text (<p>, <li>, <span>) → white.
     - Frosted-glass / "liquid crystal" box behind the ABOUT WESTRIDGE
       section-header so the title reads cleanly over the new background.

   WHY CHOOSE WESTRIDGE (scoped via body:has(.why-westridge-section))
     - Pull DIVERSITY card closer to DISTINCTLY WESTRIDGE.
     - Lift "OUR EDUCATIONAL PHILOSOPHY / Our Promise to You" higher.
     - Center-align the philosophy icons (override the existing inline rule).
     - Fixed unscrollable mascot watermark via body::before.

   Every rule lives inside @media (max-width: 768px). Desktop untouched.
   =========================================================================== */
@media (max-width: 768px) {

    /* ====================================================================
       ABOUT WESTRIDGE — fixed page-wide background
       ==================================================================== */
    body:has(.story-hero) section.page-section {
        background-image: url('../images/about/DJI_0300.webp') !important;
        background-color: transparent !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed !important;
    }
    body:has(.story-hero) section.page-section > .about-overlay {
        background: transparent !important;
        background-image: none !important;
    }

    /* Kill the inner sections' own white / image backgrounds + overlays */
    body:has(.story-hero) .story-hero,
    body:has(.story-hero) .vision-mission-hero {
        background: transparent !important;
        background-image: none !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
        margin-left: 0 !important;
        left: auto !important;
        width: 100% !important;
        padding: 1rem 0 !important;
        min-height: 0 !important;
    }
    body:has(.story-hero) .story-hero::before,
    body:has(.story-hero) .vision-mission-hero::before {
        background: none !important;
        display: none !important;
    }

    /* Core Values block: drop the solid navy card, let BG show through */
    body:has(.story-hero) .core-values,
    body:has(.story-hero) .core-values-section {
        background: transparent !important;
        box-shadow: none !important;
        padding: 1rem 0 !important;
        margin: 0.5rem auto !important;
    }

    /* Vision/Mission icon disc: keep gold for contrast */
    body:has(.story-hero) .vm-icon {
        margin: 0 auto 0.75rem !important;
    }

    /* ====================================================================
       ABOUT WESTRIDGE — yellow headings + subheadings, white body
       ==================================================================== */
    body:has(.story-hero) section.page-section h1,
    body:has(.story-hero) section.page-section h2,
    body:has(.story-hero) section.page-section h3,
    body:has(.story-hero) section.page-section h4,
    body:has(.story-hero) section.page-section h5,
    body:has(.story-hero) section.page-section h6,
    body:has(.story-hero) section.page-section .section-header p,
    body:has(.story-hero) section.page-section .vm-tagline {
        color: var(--primary-gold, #ffb703) !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55) !important;
    }
    body:has(.story-hero) section.page-section p,
    body:has(.story-hero) section.page-section li,
    body:has(.story-hero) section.page-section span,
    body:has(.story-hero) section.page-section .mission-list li,
    body:has(.story-hero) section.page-section .value-item span,
    body:has(.story-hero) section.page-section .history-text p {
        color: #ffffff !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important;
    }
    /* Re-pin the subheading taglines to gold (they're <p>, would lose color above) */
    body:has(.story-hero) section.page-section .section-header p,
    body:has(.story-hero) section.page-section .vm-tagline {
        color: var(--primary-gold, #ffb703) !important;
    }

    /* ====================================================================
       ABOUT WESTRIDGE — liquid-crystal box behind page section-header
       ==================================================================== */
    body:has(.story-hero) section.page-section > .about-overlay > .container > .section-header,
    body:has(.story-hero) section.page-section .section-header:first-of-type {
        display: block !important;
        max-width: min(92vw, 520px) !important;
        margin: 0.75rem auto 1.25rem !important;
        padding: 1.1rem 1.4rem !important;
        background: rgba(255, 255, 255, 0.14) !important;
        backdrop-filter: blur(16px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
        border: 1px solid rgba(255, 255, 255, 0.28) !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
        text-align: center !important;
    }

    /* ====================================================================
       WHY CHOOSE WESTRIDGE — compact distinctly→diversity gap
                              + lift philosophy section
       ==================================================================== */
    body:has(.why-westridge-section) .distinctly-westridge {
        margin: 0 0 0.6rem 0 !important;
        padding: 1rem 1rem !important;
    }
    body:has(.why-westridge-section) .why-westridge-content {
        margin-top: 0.75rem !important;
    }
    body:has(.why-westridge-section) .reasons-grid {
        margin-top: 0.4rem !important;
        gap: 0.75rem !important;
    }

    body:has(.why-westridge-section) section.philosophy-section {
        padding: 1rem 0 1.5rem !important;
        margin-top: -1rem !important;
    }
    body:has(.why-westridge-section) .philosophy-content {
        margin-top: 0.75rem !important;
    }
    body:has(.why-westridge-section) .philosophy-intro {
        margin-bottom: 1rem !important;
    }

    /* ====================================================================
       WHY CHOOSE WESTRIDGE — center the philosophy promise icons
       (overrides the legacy mobile rule that puts them inline-left)
       ==================================================================== */
    body:has(.why-westridge-section) .philosophy-section .promise-item,
    body:has(.why-westridge-section) section.philosophy-section .promise-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 0.5rem !important;
    }
    body:has(.why-westridge-section) .philosophy-section .promise-item i,
    body:has(.why-westridge-section) section.philosophy-section .promise-item i {
        display: block !important;
        margin: 0 auto !important;
        text-align: center !important;
        vertical-align: middle !important;
    }
    body:has(.why-westridge-section) .philosophy-section .promise-item p,
    body:has(.why-westridge-section) section.philosophy-section .promise-item p {
        text-align: center !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* ====================================================================
       WHY CHOOSE WESTRIDGE — fixed, unscrollable mascot watermark
       ==================================================================== */
    body:has(.why-westridge-section)::before {
        content: '' !important;
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: min(80vw, 420px) !important;
        height: min(80vw, 420px) !important;
        background-image: url('../images/School Mascot/M3.png') !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: contain !important;
        opacity: 0.08 !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }
    /* Lift real content above the watermark — header is intentionally
       excluded so it stays position: fixed (see Round 4 + Round 6) */
    body:has(.why-westridge-section) main,
    body:has(.why-westridge-section) footer,
    body:has(.why-westridge-section) section {
        position: relative !important;
        z-index: 1 !important;
    }
    /* Soften the section backgrounds so the watermark reads through */
    body:has(.why-westridge-section) section.why-westridge-section {
        background-color: rgba(255, 255, 255, 0.78) !important;
    }
    body:has(.why-westridge-section) section.philosophy-section {
        background: linear-gradient(135deg, rgba(248, 249, 250, 0.78) 0%, rgba(233, 236, 239, 0.78) 100%) !important;
    }
}

/* ===========================================================================
   MOBILE CLEAN VIEW — Round 6
   ---------------------------------------------------------------------------
   1. Re-affirm fixed header on the why-westridge page (covers the Round 5
      regression already patched above; this is a safety belt).
   2. Apply the about-westridge DJI_0300 fixed-attachment background to the
      why-westridge page. Apply it to <body> so the Round 5 mascot watermark
      (body::before) still floats above it. Inner sections become transparent.
   3. Add light frosted-glass panels behind the why-page text content so it
      reads cleanly over the DJI background + mascot.
   4. Resources page: enlarge .resources-section .sport-tile so the images
      are large and neat on mobile (overrides earlier .sport-image:150px rule).

   Every rule lives inside @media (max-width: 768px). Desktop untouched.
   =========================================================================== */
@media (max-width: 768px) {

    /* ====================================================================
       1. WHY PAGE — header MUST stay fixed (matches home-page size).
       ==================================================================== */
    body:has(.why-westridge-section) header,
    body:has(.why-westridge-section) header.header,
    body:has(.why-westridge-section) .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
    }

    /* ====================================================================
       2. WHY PAGE — DJI_0300 fixed background on <body>
          (so the body::before mascot watermark from Round 5 sits above it)
       ==================================================================== */
    body:has(.why-westridge-section) {
        background-image: url('../images/about/DJI_0300.webp') !important;
        background-color: transparent !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed !important;
    }
    /* Strip the inner sections' opaque/tinted backgrounds so DJI shows through */
    body:has(.why-westridge-section) section.page-section,
    body:has(.why-westridge-section) section.why-westridge-section,
    body:has(.why-westridge-section) section.why-westridge-section.page-section,
    body:has(.why-westridge-section) section.philosophy-section {
        background: transparent !important;
        background-image: none !important;
        background-color: transparent !important;
    }
    body:has(.why-westridge-section) .about-overlay {
        background: transparent !important;
        background-image: none !important;
    }

    /* ====================================================================
       3. WHY PAGE — light frosted panels behind text
       ==================================================================== */
    /* Section headers: glassy panel */
    body:has(.why-westridge-section) .why-westridge-section .section-header,
    body:has(.why-westridge-section) .philosophy-section .section-header {
        display: block !important;
        max-width: min(92vw, 520px) !important;
        margin: 0.75rem auto 1rem !important;
        padding: 0.95rem 1.2rem !important;
        background: rgba(255, 255, 255, 0.18) !important;
        backdrop-filter: blur(16px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
        border: 1px solid rgba(255, 255, 255, 0.30) !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
        text-align: center !important;
    }
    body:has(.why-westridge-section) .why-westridge-section .section-header h2,
    body:has(.why-westridge-section) .why-westridge-section .section-header p,
    body:has(.why-westridge-section) .philosophy-section .section-header h2,
    body:has(.why-westridge-section) .philosophy-section .section-header p {
        color: var(--primary-gold, #ffb703) !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55) !important;
    }

    /* Distinctly Westridge: keep navy box but lighten/translucent over BG */
    body:has(.why-westridge-section) .distinctly-westridge {
        background: rgba(11, 37, 69, 0.82) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border-radius: 14px !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
    }

    /* Reason cards (DIVERSITY etc.): light frosted panels */
    body:has(.why-westridge-section) .reasons-grid .reason-card {
        background: rgba(255, 255, 255, 0.86) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border-radius: 12px !important;
        border-top: 3px solid var(--primary-gold, #ffb703) !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
        padding: 1rem !important;
        margin: 0 auto 0.6rem !important;
    }

    /* Philosophy intro + promise tiles: light frosted panels */
    body:has(.why-westridge-section) .philosophy-intro {
        background: rgba(255, 255, 255, 0.86) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border-radius: 12px !important;
        padding: 0.85rem 1.1rem !important;
        margin: 0.4rem auto 1rem !important;
        max-width: 92vw !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
        color: var(--navy-blue, #0b2545) !important;
    }
    body:has(.why-westridge-section) .philosophy-section .promise-item {
        background: rgba(255, 255, 255, 0.86) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border-radius: 12px !important;
        padding: 1rem 0.9rem !important;
        margin: 0 auto 0.6rem !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
    }
    body:has(.why-westridge-section) .philosophy-section .promise-item p {
        color: var(--navy-blue, #0b2545) !important;
    }

    /* ====================================================================
       4. RESOURCES — enlarge sport-tile images so they're visible & neat
       ==================================================================== */
    /* Override the legacy .sport-image:150px and re-affirm the
       absolute-positioned image-fills-tile pattern, with a taller tile */
    body:has(.resources-section) .resources-section .sport-tile,
    body:has(.resources-section) .sports-grid .sport-tile {
        position: relative !important;
        display: block !important;
        min-height: 360px !important;
        height: 60vw !important;
        max-height: 460px !important;
        width: 100% !important;
        margin: 0 auto 14px !important;
        border-radius: 18px !important;
        border: 3px solid rgba(253, 210, 110, 0.85) !important;
        overflow: hidden !important;
        background: var(--white) !important;
        box-shadow: 0 8px 22px rgba(6, 12, 24, 0.18) !important;
    }
    body:has(.resources-section) .resources-section .sport-image,
    body:has(.resources-section) .sports-grid .sport-tile .sport-image {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
    }
    /* Bump specificity above the global
       `body img:not(.logo-img):not(...) { height: auto !important }` rule
       by adding the `img` element selector and an extra class. */
    body:has(.resources-section) .resources-section .sports-grid .sport-tile img.sport-img,
    body:has(.resources-section) section.resources-section .sports-grid .sport-tile img.sport-img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
        border-radius: 0 !important;
    }
    body:has(.resources-section) .resources-section .sport-info,
    body:has(.resources-section) .sports-grid .sport-tile .sport-info {
        position: absolute !important;
        inset: 0 !important;
        padding: 1rem !important;
        background: linear-gradient(180deg, rgba(9, 20, 40, 0.10) 0%, rgba(9, 20, 40, 0.70) 100%) !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        text-align: center !important;
    }
    body:has(.resources-section) .resources-section .sport-info h3,
    body:has(.resources-section) .sports-grid .sport-tile .sport-info h3 {
        color: #ffffff !important;
        font-family: 'Playfair Display', serif !important;
        font-size: 1.4rem !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        margin: 0 !important;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55) !important;
    }
    /* Force single-column on resources grid (beats earlier rules) */
    body:has(.resources-section) .resources-section .sports-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 0 0.4rem !important;
    }
}

/* ===========================================================================
   MOBILE CLEAN VIEW — Round 7
   ---------------------------------------------------------------------------
   1. DEFINITE FIX: image placeholders match image height site-wide on mobile.
      The global rule already forces <img height:auto !important>, but their
      wrapper divs kept fixed/min heights, leaving empty space below each
      image. Drop those constrained heights on every image wrapper class.
   2. Resources: tile height collapses to image height (placeholder = image),
      .sport-info overlay centers the title both axes.
   3. Resources page: kill the inner .container scrollbar that produced a
      second scrollbar alongside the browser scroll.
   4. About westridge: extend the crystal-glass treatment from the page
      header to ALL text content blocks (history, vision, mission, values).

   Every rule lives inside @media (max-width: 768px). Desktop untouched.
   =========================================================================== */
@media (max-width: 768px) {

    /* ====================================================================
       3. Kill the inner .container scrollbar (double-scrollbar fix)
       The legacy rule `.container { overflow-x: hidden; overflow-y: auto }`
       triggers a thin scrollbar whenever scrollHeight > clientHeight by
       even 1-3px. Allow vertical overflow to bubble to <html>/<body>.
       Header and footer .container are 0px overflow so unaffected.
       ==================================================================== */
    body .container,
    html body .container {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }
    /* Safari ≤ 15 fallback (overflow:clip is Safari 16+) */
    @supports not (overflow-x: clip) {
        body .container,
        html body .container {
            overflow: visible !important;
        }
    }

    /* ====================================================================
       1. GLOBAL: image placeholders collapse to their image's natural height
       ==================================================================== */
    body .sport-image,
    body .facility-image,
    body .resource-image,
    body .program-image,
    body .team-image,
    body .gallery-image {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: block !important;
        position: relative !important;
        inset: auto !important;
        background: none !important;
    }
    /* Beat the global mobile rule
       `body img:not(.logo-img):not(.affiliation-logo):not(.mascot-fixed):not([class*="mascot"])
         { margin: 1rem auto !important; height: auto !important }`
       which has specificity (0,4,2). We need (0,4,2) at minimum so source
       order wins, or (0,5,2)+ to win outright. Each selector below counts
       4+ classes and 2+ elements. */
    body .sports-grid .sport-tile .sport-image img.sport-img,
    body .facilities-grid .facility-tile .facility-image img.facility-img,
    body .resources-grid .resource-card .resource-image img.resource-img,
    body .programs-grid .program-card .program-image img.program-img,
    body .team-grid .team-card .team-image img.team-img,
    body .gallery-grid .gallery-item .gallery-image img.gallery-img,
    body .facilities-grid .facility-tile img.facility-img,
    body .sports-grid .sport-tile img.sport-img,
    body section .sport-image img.sport-img,
    body section .facility-image img.facility-img {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;            /* kill the global 1rem auto margin */
        object-fit: cover !important;
        display: block !important;
        vertical-align: top !important;  /* belt + suspenders for baseline gap */
    }
    /* Lightweight version for simple wrappers (lower specificity, last resort) */
    body .sport-image,
    body .facility-image,
    body .resource-image,
    body .program-image,
    body .team-image,
    body .gallery-image {
        line-height: 0 !important;       /* eliminates baseline gap from
                                            inline children fallback paths */
    }

    /* ====================================================================
       4. ABOUT WESTRIDGE — crystal-glass treatment around every text block
       ==================================================================== */
    body:has(.story-hero) .history-text,
    body:has(.story-hero) .vision-mission-hero .vision-box,
    body:has(.story-hero) .vision-mission-hero .mission-box,
    body:has(.story-hero) .core-values,
    body:has(.story-hero) .core-values-section .core-values {
        background: rgba(255, 255, 255, 0.16) !important;
        backdrop-filter: blur(16px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
        border: 1px solid rgba(255, 255, 255, 0.30) !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
        padding: 1.1rem 1.25rem !important;
        margin: 0.75rem auto 1.25rem !important;
        max-width: min(92vw, 560px) !important;
        box-sizing: border-box !important;
    }
    /* Inside the crystal panels: yellow headings + white body
       (already set in Round 5, reaffirmed here in case specificity flips) */
    body:has(.story-hero) .history-text h3,
    body:has(.story-hero) .vision-box h3,
    body:has(.story-hero) .mission-box h3,
    body:has(.story-hero) .core-values h3 {
        color: var(--primary-gold, #ffb703) !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
    }
    body:has(.story-hero) .history-text p,
    body:has(.story-hero) .vision-box p,
    body:has(.story-hero) .mission-box p,
    body:has(.story-hero) .mission-list li,
    body:has(.story-hero) .core-values .value-item span {
        color: #ffffff !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    }
}

/* ===========================================================================
   MOBILE CLEAN VIEW — Round 8
   ---------------------------------------------------------------------------
   1. NAV STABILITY: lock visibility of every .mobile-nav-list <li> and the
      chevron icons so the "ECD chevron + MEET THE TEAM disappear" bug can't
      recur. Companion JS reset lives in script.js toggleMobileDropdown().
   2. HOME HERO: lock the slide images to fill the hero placeholder
      (beats the global mobile img rule that forced margin + auto height).
   3. HOME HEADMASTER: kill the auto margin around the portrait so the
      .about-photo placeholder collapses to image height (no empty band).
   4. TEAM PAGES (administration / specialist-teachers / class-teachers):
      drop aspect-ratio 3/4 on .class-teacher-photo so the placeholder
      collapses to the image's natural height, no empty space below.

   Every rule lives inside @media (max-width: 768px). Desktop untouched.
   =========================================================================== */
@media (max-width: 768px) {

    /* ====================================================================
       1. Nav drawer stability — chevrons + items always visible
       ==================================================================== */
    body .mobile-nav-menu .mobile-nav-list > li,
    body .mobile-nav-menu ul.mobile-nav-list > li {
        display: list-item !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    body .mobile-nav-menu .mobile-nav-link {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    body .mobile-nav-menu .mobile-nav-link i,
    body .mobile-nav-menu .mobile-nav-link i.fas,
    body .mobile-nav-menu .mobile-nav-link i.fa-chevron-down,
    body .mobile-nav-menu .mobile-nav-link i.fa-chevron-up {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        min-width: 0.9em !important;
        font-style: normal !important;
        transform-origin: center center !important;
        transition: transform 0.18s ease !important;
    }
    /* Cap dropdown expansion so opening one drawer item doesn't push others
       off-screen (which previously masqueraded as "items disappeared"). */
    body .mobile-nav-menu .mobile-dropdown.active {
        max-height: 320px !important;
        overflow-y: auto !important;
    }
    body .mobile-nav-menu {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ====================================================================
       2. HOME HERO — images fill the hero placeholder (no margin / auto-height)
       Selector at specificity (0,4,3) beats the global (0,4,2)
       `body img:not(...) { margin: 1rem auto !important; height: auto !important }`.
       ==================================================================== */
    body section.hero .hero-slider .hero-slide img.hero-slide-image,
    body:not(.ecd-page) section.hero .hero-slider .hero-slide img.hero-slide-image,
    body:not(.ecd-page) section.hero .hero-slider .hero-slide > img,
    body:not(.ecd-page) section.hero .hero-slide > img.hero-slide-image {
        position: absolute !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
        vertical-align: top !important;
    }
    body:not(.ecd-page) section.hero .hero-slider,
    body:not(.ecd-page) section.hero .hero-slide {
        margin: 0 !important;
    }

    /* ====================================================================
       3. HOME HEADMASTER — placeholder collapses to image height
       Selector at specificity (0,4,3) beats global (0,4,2).
       ==================================================================== */
    body section .about-content.headmaster-profile .about-photo,
    body section.about-section .about-content.headmaster-profile .about-photo,
    body section .headmaster-profile.about-content .about-photo {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto 1rem !important;
        padding: 0 !important;
        line-height: 0 !important;
        overflow: hidden !important;
        border-radius: 12px !important;
        background: transparent !important;
    }
    body section.about .about-content.headmaster-profile .about-photo img,
    body section#about .about-content.headmaster-profile .about-photo img,
    body section.about-section .about-content.headmaster-profile .about-photo img,
    body .about-content.headmaster-profile.headmaster-profile .about-photo img {
        display: block !important;
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: cover !important;
        vertical-align: top !important;
        border-radius: 12px !important;
    }

    /* ====================================================================
       4. TEAM PAGES — placeholder = image (administration, specialist,
                       class teachers — all share .class-teacher-photo)
       Selector specificity (0,4,3) beats global (0,4,2).
       ==================================================================== */
    body article.class-teacher-card.class-display-card .class-teacher-photo.class-display-photo,
    body article.class-teacher-card .class-teacher-photo {
        aspect-ratio: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        line-height: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        display: block !important;
        position: relative !important;
    }
    body article.class-teacher-card.class-display-card .class-teacher-photo.class-display-photo img,
    body article.class-teacher-card .class-teacher-photo img {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: cover !important;
        display: block !important;
        vertical-align: top !important;
    }
    /* Empty-portrait state: keep dashed border + show placeholder text */
    body article.class-teacher-card.class-display-card .class-teacher-photo.class-display-photo--empty {
        min-height: 220px !important;
    }
}

/* ===========================================================================
   MOBILE CLEAN VIEW — Round 9
   ---------------------------------------------------------------------------
   1. MEET THE TEAM (administration / specialist-teachers / class-teachers):
      Tinder-style profile UI. Hide the grid of class buttons + the sidebar
      management-nav, show only the prominent display card with image/grade/
      name, with Prev / Next buttons injected by script.js.
   2. ACADEMIC OVERVIEW: kill the white tint + mascot watermark baked into
      .history-section. Apply DJI_0300 fixed-attachment background to the
      body so it's the immovable backdrop. Add frosted text panels behind
      every text block + the sports-nav-panel.
   3. SUBJECTS OFFERED + A BLOCK + E BLOCK: inherit the same panel
      treatment (they're inside the same .sports-content). Image fix on
      class photo tiles via the global resources placeholder rules.
   4. STUDENT SUPPORT CENTRE: center-align everything inside #sports-support.
   The Tinder controls (.tinder-team-controls) are hidden on desktop in a
   later, non-media-scoped rule so the markup is harmless above 768px.
   =========================================================================== */

/* Desktop: hide the JS-injected Tinder controls so they don't appear */
.tinder-team-controls { display: none; }

@media (max-width: 768px) {

    /* ====================================================================
       1. TINDER UI for team pages
       ==================================================================== */
    /* Hide the grid of class buttons + side management nav on mobile */
    body:has(.class-tube) .class-tube .class-tube-row,
    body:has(.class-tube) .class-tube .class-tube-middle .class-tube-column,
    body:has(.class-tube) .class-tab-button,
    body:has(.class-tube) .management-sidebar {
        display: none !important;
    }
    /* Class tube becomes a vertical Tinder stack: card + controls */
    body:has(.class-tube) .class-tube,
    body:has(.class-tube) .class-tube-shell,
    body:has(.class-tube) .class-tube-middle {
        display: block !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 420px !important;
    }
    body:has(.class-tube) .management-layout,
    body:has(.class-tube) .management-main {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: none !important;
        margin: 0 auto !important;
    }
    /* The prominent display card (image, grade, name, role) */
    body:has(.class-tube) article.class-display-card {
        display: block !important;
        background: rgba(255, 255, 255, 0.96) !important;
        border-radius: 18px !important;
        box-shadow: 0 14px 36px rgba(11, 37, 69, 0.22) !important;
        padding: 0 !important;
        margin: 0.5rem auto !important;
        width: 100% !important;
        max-width: 360px !important;
        overflow: hidden !important;
        border: 3px solid rgba(253, 210, 110, 0.85) !important;
    }
    body:has(.class-tube) article.class-display-card .class-display-photo {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
    }
    body:has(.class-tube) article.class-display-card .class-display-photo img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        display: block !important;
        object-fit: cover !important;
    }
    /* Empty-state portrait keeps a height so the card looks complete */
    body:has(.class-tube) article.class-display-card .class-display-photo--empty {
        min-height: 280px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    body:has(.class-tube) article.class-display-card .class-display-meta {
        padding: 1rem 1.1rem 1.2rem !important;
        text-align: center !important;
    }
    body:has(.class-tube) article.class-display-card .class-display-class {
        display: block !important;
        font-size: 0.85rem !important;
        letter-spacing: 0.18em !important;
        text-transform: uppercase !important;
        color: var(--primary-gold, #ffb703) !important;
        margin: 0 0 0.35rem !important;
        font-weight: 700 !important;
    }
    body:has(.class-tube) article.class-display-card .class-display-meta h3 {
        font-size: 1.45rem !important;
        line-height: 1.2 !important;
        color: var(--navy-blue, #0b2545) !important;
        margin: 0 0 0.25rem !important;
    }
    body:has(.class-tube) article.class-display-card .class-display-role {
        font-size: 0.9rem !important;
        color: var(--text-dark, #1a1a1a) !important;
        margin: 0 !important;
        text-transform: capitalize !important;
    }

    /* Prev/Next controls — beneath the card */
    body:has(.class-tube) .tinder-team-controls {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 360px !important;
        margin: 0.6rem auto 1.25rem !important;
        gap: 1rem !important;
        padding: 0 0.25rem !important;
    }
    body:has(.class-tube) .tinder-team-controls .tinder-team-btn {
        flex: 1 1 0 !important;
        height: 56px !important;
        border: none !important;
        border-radius: 14px !important;
        background: linear-gradient(135deg, var(--primary-gold, #ffb703), #fdd26e) !important;
        color: var(--navy-blue, #0b2545) !important;
        font-size: 2rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        cursor: pointer !important;
        box-shadow: 0 6px 14px rgba(11, 37, 69, 0.22) !important;
        transition: transform 0.12s ease, box-shadow 0.12s ease !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    }
    body:has(.class-tube) .tinder-team-controls .tinder-team-btn:active {
        transform: scale(0.97) !important;
        box-shadow: 0 3px 10px rgba(11, 37, 69, 0.18) !important;
    }

    /* ====================================================================
       2 + 3. ACADEMIC OVERVIEW — DJI bg, no watermark, frosted text panels
       (Subjects, A BLOCK, E BLOCK, Support, Exams all inherit.)
       ==================================================================== */
    body:has(#academic-overview) {
        background-image: url('../images/about/DJI_0300.webp') !important;
        background-color: transparent !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed !important;
    }
    /* Strip the white tint + mascot watermark from .history-section */
    body:has(#academic-overview) section#academic-overview,
    body:has(#academic-overview) section.history-section.page-section,
    body:has(#academic-overview) section.history-section {
        background: transparent !important;
        background-image: none !important;
        background-color: transparent !important;
    }
    body:has(#academic-overview) .about-overlay {
        background: transparent !important;
        background-image: none !important;
    }
    /* Sports nav panel (the left rail with section links) → frosted panel */
    body:has(#academic-overview) .sports-nav-panel {
        background: rgba(255, 255, 255, 0.90) !important;
        backdrop-filter: blur(12px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
        border-radius: 14px !important;
        padding: 0.85rem 1rem !important;
        margin: 0 auto 1rem !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.20) !important;
        max-width: 92vw !important;
    }
    /* Section headers + content blocks → frosted panels */
    body:has(#academic-overview) .sports-section .section-header,
    body:has(#academic-overview) .sports-section .content,
    body:has(#academic-overview) .sports-section .content > p,
    body:has(#academic-overview) .sports-section .overview-collage-wrapper,
    body:has(#academic-overview) .sports-section .subjects-accordion,
    body:has(#academic-overview) .sports-section .sports-overview-content {
        background: rgba(255, 255, 255, 0.88) !important;
        backdrop-filter: blur(10px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
        border-radius: 14px !important;
        padding: 1rem 1.1rem !important;
        margin: 0.75rem auto 1rem !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.20) !important;
        max-width: 92vw !important;
        box-sizing: border-box !important;
    }
    /* Inside .content, individual <p> shouldn't get their own panel (the
       .content wrapper already provides it) */
    body:has(#academic-overview) .sports-section .content > p {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        padding: 0 0 0.75rem !important;
        margin: 0 !important;
        max-width: 100% !important;
        border-radius: 0 !important;
    }
    /* Subjects details items: cleaner spacing */
    body:has(#academic-overview) .subjects-accordion .subject-item {
        background: rgba(255, 255, 255, 0.62) !important;
        border-radius: 10px !important;
        margin-bottom: 0.45rem !important;
        padding: 0.25rem 0.4rem !important;
    }

    /* Overview collage tiles: placeholder = image height */
    body:has(#academic-overview) .overview-collage .collage-item {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 0 0.6rem !important;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    body:has(#academic-overview) .overview-collage .collage-item img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        vertical-align: top !important;
    }

    /* Class photo tiles in A BLOCK / E BLOCK */
    body:has(#academic-overview) .facilities-grid,
    body:has(#academic-overview) #aBlockGrid,
    body:has(#academic-overview) #eBlockGrid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0.5rem auto !important;
    }
    body:has(#academic-overview) #aBlockGrid .facility-tile,
    body:has(#academic-overview) #eBlockGrid .facility-tile {
        position: relative !important;
        background: rgba(255, 255, 255, 0.92) !important;
        border-radius: 14px !important;
        border: 2px solid rgba(253, 210, 110, 0.85) !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        cursor: pointer !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
    }
    body:has(#academic-overview) #aBlockGrid .facility-image,
    body:has(#academic-overview) #eBlockGrid .facility-image {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
    }
    body:has(#academic-overview) #aBlockGrid .facility-tile .facility-image img.facility-img,
    body:has(#academic-overview) #eBlockGrid .facility-tile .facility-image img.facility-img {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        object-fit: cover !important;
        display: block !important;
        vertical-align: top !important;
    }
    body:has(#academic-overview) #aBlockGrid .facility-tile .facility-title,
    body:has(#academic-overview) #eBlockGrid .facility-tile .facility-title {
        position: static !important;
        background: linear-gradient(0deg, var(--navy-blue, #0b2545), rgba(11,37,69,0.85)) !important;
        color: #ffffff !important;
        padding: 0.65rem 0.75rem !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
        text-align: center !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
    }

    /* ====================================================================
       4. STUDENT SUPPORT CENTRE — fully center-aligned
       ==================================================================== */
    body:has(#academic-overview) #sports-support,
    body:has(#academic-overview) #sports-support .section-header,
    body:has(#academic-overview) #sports-support .section-header h2,
    body:has(#academic-overview) #sports-support .section-header p,
    body:has(#academic-overview) #sports-support .content,
    body:has(#academic-overview) #sports-support .content > p,
    body:has(#academic-overview) #sports-support .support-grid,
    body:has(#academic-overview) #sports-support .support-grid .support-item,
    body:has(#academic-overview) #sports-support .support-grid .support-item h3,
    body:has(#academic-overview) #sports-support .support-grid .support-item p {
        text-align: center !important;
        text-align-last: center !important;
    }
    body:has(#academic-overview) #sports-support .support-grid {
        display: block !important;
        margin: 0 auto !important;
    }
    body:has(#academic-overview) #sports-support .support-grid .support-item {
        background: rgba(255, 255, 255, 0.88) !important;
        backdrop-filter: blur(10px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
        border-radius: 14px !important;
        padding: 1rem 1.1rem !important;
        margin: 0 auto 0.85rem !important;
        max-width: 92vw !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
        box-sizing: border-box !important;
    }
}

/* ===========================================================================
   MOBILE CLEAN VIEW — Round 10
   ---------------------------------------------------------------------------
   1. Sports page honours sections (#sports-honours + #sports-club-honours):
      same DJI fixed bg + frosted panels as academic-overview.
   2. Academic Honours block on academic-overview: frosted panel + readable.
   3. Gallery page: ensure thumbnails render cleanly with placeholder=image
      and same DJI bg.
   =========================================================================== */
@media (max-width: 768px) {

    /* --- Sports page: DJI bg + transparent inner sections --- */
    body:has(#sports-honours),
    body:has(#sports-club-honours) {
        background-image: url('../images/about/DJI_0300.webp') !important;
        background-color: transparent !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed !important;
    }
    body:has(#sports-honours) section.history-section,
    body:has(#sports-honours) section.page-section,
    body:has(#sports-honours) .about-overlay {
        background: transparent !important;
        background-image: none !important;
        background-color: transparent !important;
    }

    /* --- Honours sections (sports.html + academic-overview.html) --- */
    body:has(#sports-honours) #sports-honours,
    body:has(#sports-honours) #sports-club-honours,
    body:has(#academic-overview) #sports-academic-honours {
        padding: 0.5rem 0 !important;
    }
    body:has(#sports-honours) #sports-honours > h2,
    body:has(#sports-honours) #sports-club-honours > h2,
    body:has(#academic-overview) #sports-academic-honours > h2 {
        background: rgba(255, 255, 255, 0.90) !important;
        backdrop-filter: blur(12px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
        border-radius: 14px !important;
        padding: 0.85rem 1.1rem !important;
        margin: 0.5rem auto 0.5rem !important;
        max-width: 92vw !important;
        text-align: center !important;
        color: var(--navy-blue, #0b2545) !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
    }
    body:has(#sports-honours) .sports-overview-content,
    body:has(#academic-overview) #sports-academic-honours .sports-overview-content {
        background: rgba(255, 255, 255, 0.90) !important;
        backdrop-filter: blur(12px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
        border-radius: 14px !important;
        padding: 1rem 1.1rem !important;
        margin: 0.5rem auto 1rem !important;
        max-width: 92vw !important;
        color: var(--text-dark, #1a1a1a) !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }
    body:has(#sports-honours) .sports-overview-content .honours-list,
    body:has(#academic-overview) .sports-overview-content .honours-list {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    body:has(#sports-honours) .sports-overview-content .honours-list li,
    body:has(#academic-overview) .sports-overview-content .honours-list li {
        padding: 0.45rem 0 0.45rem 1.1rem !important;
        position: relative !important;
        border-bottom: 1px solid rgba(11, 37, 69, 0.08) !important;
        line-height: 1.5 !important;
    }
    body:has(#sports-honours) .sports-overview-content .honours-list li::before,
    body:has(#academic-overview) .sports-overview-content .honours-list li::before {
        content: '\2022' !important;
        color: var(--primary-gold, #ffb703) !important;
        position: absolute !important;
        left: 0 !important;
        font-weight: bold !important;
    }
    body:has(#sports-honours) .sports-overview-content .honours-list li:last-child,
    body:has(#academic-overview) .sports-overview-content .honours-list li:last-child {
        border-bottom: 0 !important;
    }

    /* ====================================================================
       Gallery page: DJI bg + clean tile rendering on mobile
       ==================================================================== */
    body:has(#galleryGrid) main.gallery-page,
    body:has(#galleryGrid) {
        background-image: url('../images/about/DJI_0300.webp') !important;
        background-color: transparent !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed !important;
    }
    body:has(#galleryGrid) main.gallery-page {
        background: transparent !important;
        background-image: none !important;
    }

    /* Gallery section header + nav panel → frosted */
    body:has(#galleryGrid) .gallery-container .section-header,
    body:has(#galleryGrid) .gallery-nav-panel {
        background: rgba(255, 255, 255, 0.90) !important;
        backdrop-filter: blur(12px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
        border-radius: 14px !important;
        padding: 0.85rem 1rem !important;
        margin: 0.5rem auto 0.75rem !important;
        max-width: 92vw !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
        box-sizing: border-box !important;
    }
    body:has(#galleryGrid) .gallery-container .section-header h2,
    body:has(#galleryGrid) .gallery-container .section-header p {
        color: var(--navy-blue, #0b2545) !important;
    }
    body:has(#galleryGrid) .gallery-nav-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    body:has(#galleryGrid) .gallery-nav-link {
        display: inline-block !important;
        padding: 0.4rem 0.85rem !important;
        border-radius: 999px !important;
        font-size: 0.85rem !important;
        background: rgba(11, 37, 69, 0.08) !important;
        color: var(--navy-blue, #0b2545) !important;
        text-decoration: none !important;
    }
    body:has(#galleryGrid) .gallery-nav-link.active {
        background: var(--primary-gold, #ffb703) !important;
        color: var(--navy-blue, #0b2545) !important;
        font-weight: 700 !important;
    }

    /* Gallery grid layout: 2 columns on mobile, image fills its tile */
    body:has(#galleryGrid) .gallery-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 0 !important;
        margin: 0.5rem auto 1.5rem !important;
        max-width: 96vw !important;
        background: transparent !important;
    }
    /* Gallery tiles: UNIFORM 1:1 squares — images fill via object-fit:cover.
       Unlike other sections, gallery tiles must all be the same size for
       a clean grid; the image is cropped to match the placeholder. */
    body:has(#galleryGrid) .gallery-grid .gallery-item,
    body:has(#galleryGrid) .gallery-content .gallery-grid .gallery-item {
        position: relative !important;
        display: block !important;
        overflow: hidden !important;
        border-radius: 10px !important;
        border: 2px solid rgba(253, 210, 110, 0.85) !important;
        background: rgba(255, 255, 255, 0.78) !important;
        margin: 0 !important;
        padding: 0 !important;
        cursor: pointer !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        line-height: 0 !important;
        aspect-ratio: 1 / 1 !important;  /* uniform square tiles */
    }
    /* Image fills the square tile (beats global 0,4,2) */
    body:has(#galleryGrid) .gallery-grid .gallery-item img,
    body:has(#galleryGrid) .gallery-content .gallery-grid .gallery-item img {
        position: absolute !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: cover !important;
        object-position: center center !important;
        vertical-align: top !important;
        border-radius: 0 !important;
    }
}