/* ==========================================================================
   1. RESET & CORE STRUCTURAL UI SYSTEM
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    width: 100%;
    height: 100%;
    /* Light mode (default/no .dark-mode class, same convention as the rest
       of the site) needs a light base — every section already flips to a
       light background by default and only goes dark via body.dark-mode
       below, but this raw element background was hardcoded to the dark
       navy unconditionally, so it showed through as a black flash during
       scroll/overscroll in light mode. Now it matches --sl-bg-main (the
       page's own light surface token) by default, and body.dark-mode
       restores the original dark navy. */
    background-color: #f8fafc;
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    overflow-x: hidden;
}
body.dark-mode {
    background-color: #030710;
}

html.nav-locked, 
body.nav-locked {
    overflow: hidden !important;
    height: 100vh !important;
}

/* Fix mobile SVG click tracking dead-zones */
.nav-icons button svg {
    pointer-events: none;
}

/* ==========================================================================
   2. TYPOGRAPHY-FIRST ULTRA-COLOSSAL PRELOADER SYSTEM
   ========================================================================== */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #0a142c 0%, #030710 100%);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate3d(0, 0, 0);
    transition: transform 0.95s cubic-bezier(0.85, 0, 0.15, 1);
}

.preloader.dismissed {
    transform: translate3d(0, -100%, 0);
}

/* Home has two preloader variants sharing the same .preloader positioning
   system above: the crest/glitch preloader (#preloader, default — shown on
   every fresh load and every refresh) and the matrix-shield preloader
   (#preloaderMatrix, same visual style as preloader.html — shown instead
   only when the html.use-matrix-preloader class is set, i.e. when the page
   was reached via the browser's Back/Forward button). Exactly one is ever
   visible at a time. */
#preloaderMatrix {
    display: none;
}
html.use-matrix-preloader #preloader {
    display: none;
}
html.use-matrix-preloader #preloaderMatrix {
    display: flex;
}

/* ---------- Matrix-shield preloader structure (ported from preloader.css) ---------- */
.pcm-preloader-structure {
    position: relative;
    width: 190px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pcm-orbital-ring {
    position: absolute;
    border: 5px solid transparent;
    border-radius: 50%;
    animation: pcmOrbitLinear infinite linear;
}
.pcm-orbital-ring.ring-maroon {
    width: 100%;
    height: 100%;
    border-top-color: #802400;
    border-bottom-color: #802900;
    animation-duration: 1.4s;
}
.pcm-orbital-ring.ring-green {
    width: 78%;
    height: 78%;
    border-left-color: #008751;
    border-right-color: #008751;
    animation-duration: 1s;
    animation-direction: reverse;
}
.pcm-logo-capsule {
    position: absolute;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    box-shadow: 0 0 35px rgba(255, 183, 3, 0.1);
    animation: pcmBreathingGlow 2s ease-in-out infinite;
}
.pcm-preloader-logo {
    width: 90%;
    height: 90%;
    object-fit: contain;
}
@keyframes pcmOrbitLinear {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes pcmBreathingGlow {
    0%, 100% {
        transform: scale(0.94);
        opacity: 0.85;
        box-shadow: 0 0 28px rgba(255, 183, 3, 0.1);
    }
    50% {
        transform: scale(1.04);
        opacity: 1;
        box-shadow: 0 0 50px rgba(255, 183, 3, 0.25);
    }
}

/* ==========================================================================
   2b. ON-SCROLL SECTION REVEAL SYSTEM
   Powers every ".scroll-animate" element across the page (observed via
   IntersectionObserver in home.js). Starts hidden/offset, then fades and
   slides into place the first time it enters the viewport.
   ========================================================================== */
.scroll-animate {
    opacity: 0;
    transform: translateY(70px) scale(0.94);
    transition: opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.scroll-animate.reveal-left {
    transform: translateX(-60px) scale(0.96);
}
.scroll-animate.reveal-right {
    transform: translateX(60px) scale(0.96);
}
.scroll-animate.reveal-bottom {
    transform: translateY(60px) scale(0.96);
}
/* Fade-only variant — used where a slide/scale entrance would be too much
   (e.g. the Gallery bento tiles below, which just want a soft fade+unblur
   in place rather than sliding in). Overrides the base transform to none,
   leaving opacity (and, for .gl-item, the blur filter) to do the work. */
.scroll-animate.reveal-fade {
    transform: none;
}
.scroll-animate.active {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
    .scroll-animate {
        transition: opacity 0.3s ease;
        transform: none !important;
    }
}

/* --- ACADEMICS & CLUBS/SOCIETIES TILE SCROLL-IN "POP" ---
   The Sports tiles already read nicely on scroll thanks to their reveal;
   this gives the Academics tiles (.acad-card) and Clubs & Societies tiles
   (.cs-card) the same treatment, but a touch livelier: each tile starts
   slightly shrunk down as well as lower/offset, then pops into place with
   a soft bounce-out easing as it scrolls into view, instead of a plain
   flat fade+slide. Still layered on the shared ".scroll-animate" +
   ".active" system (IntersectionObserver in home.js, staggered per-card
   via each tile's own inline transition-delay) — this only strengthens
   the starting transform and swaps in a bouncier easing for these two
   tile types. The two-class selector here (0,2,0 specificity) safely
   wins over both the generic ".scroll-animate" rule above and each
   card's own base ".acad-card"/".cs-card" transition rule below, so this
   works regardless of source order. */
.acad-card.scroll-animate,
.cs-card.scroll-animate {
    transform: translateY(55px) scale(0.85);
    transition: opacity 0.85s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.acad-card.scroll-animate.active,
.cs-card.scroll-animate.active {
    transform: translate3d(0, 0, 0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
    .acad-card.scroll-animate,
    .cs-card.scroll-animate {
        transform: none;
        transition: opacity 0.3s ease;
    }
}

/* ==========================================================================
   2c. HERO ENTRANCE REVEAL
   The hero content sits underneath the preloader, so it must not run its
   entrance animation on page load like the scroll-reveal system above (which
   only fires once an element crosses into view). Instead these elements
   start hidden/offset and only animate in once "hero-revealed" is added to
   <body> — done in home.js at the same moment the preloader is dismissed —
   using staggered delays so the crest, then the text, then the slide dots
   settle into place right behind the preloader as it slides away.
   ========================================================================== */
.hero-branding,
.hero-text-block,
.hero .slider-dots,
.hero .hero-player-widget,
.hero .hero-pin-board {
    opacity: 0;
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.hero-branding {
    transform: translateX(-70px) scale(0.94);
    transition-delay: 0.15s;
}

.hero-text-block {
    transform: translateY(55px) scale(0.96);
    transition-delay: 0.35s;
}

.hero .slider-dots {
    /* .slider-dots is horizontally centered via translateX(-50%); that has to
       be preserved alongside the entrance offset since this transform wins
       over the base rule (both are one-class selectors, but this one is
       declared later in the cascade). */
    transform: translateX(-50%) translateY(24px);
    transition-delay: 0.65s;
}

.hero .hero-player-widget {
    transform: translateY(20px);
    transition-delay: 0.8s;
}

.hero .hero-pin-board {
    transform: translateX(50px);
    transition-delay: 0.95s;
}

body.hero-revealed .hero-branding,
body.hero-revealed .hero-text-block {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

body.hero-revealed .hero .slider-dots {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

body.hero-revealed .hero .hero-player-widget {
    opacity: 1;
    transform: translateY(0);
}

body.hero-revealed .hero .hero-pin-board {
    opacity: 1;
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .hero-branding,
    .hero-text-block,
    .hero .slider-dots,
    .hero .hero-player-widget,
    .hero .hero-pin-board {
        transition: opacity 0.3s ease;
        transform: none !important;
        opacity: 1;
    }
}

.preloader-content {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.preloader-brand {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 4vw, 28px);
    width: 100%;
    max-width: 90vw;
}

.preloader-sinhala-title {
    font-size: clamp(2.4rem, 8.5vw, 5.2rem);
    font-family: Yaldevi;
    font-weight: 400;
    color: #ffb703; 
    line-height: 1.2;
    letter-spacing: 1px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    opacity: 0;
    animation: text-reveal-sinhala 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.preloader-english-title {
    font-size: clamp(0.72rem, 2.3vw, 1.1rem);
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5ch;
    width: 100%;
    line-height: 1.4;
    opacity: 0;
    animation: cinematic-expand 3.5s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards,
               gold-shimmer 6s ease-in-out infinite alternate 4s;
}

.preloader-english-title span {
    display: inline-block;
    white-space: nowrap;
}

.preloader-status-dots {
    position: absolute;
    bottom: calc(45px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
}

.p-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: block;
    animation: dot-wave 1.5s ease-in-out infinite;
}

/* --- SHARED RGB-SPLIT GLITCH KEYFRAMES (used by milestone + preloader text) --- */
@keyframes glitch-slice-top {
    0%   { clip-path: inset(0 0 85% 0); transform: translate(0, 0); }
    20%  { clip-path: inset(10% 0 60% 0); transform: translate(-3px, -1px); }
    40%  { clip-path: inset(40% 0 35% 0); transform: translate(2px, 1px); }
    60%  { clip-path: inset(65% 0 15% 0); transform: translate(-2px, 0); }
    80%  { clip-path: inset(20% 0 55% 0); transform: translate(3px, -1px); }
    100% { clip-path: inset(0 0 90% 0); transform: translate(0, 1px); }
}

@keyframes glitch-slice-bottom {
    0%   { clip-path: inset(80% 0 0 0); transform: translate(0, 0); }
    20%  { clip-path: inset(55% 0 15% 0); transform: translate(3px, 1px); }
    40%  { clip-path: inset(30% 0 45% 0); transform: translate(-2px, -1px); }
    60%  { clip-path: inset(10% 0 70% 0); transform: translate(2px, 0); }
    80%  { clip-path: inset(50% 0 25% 0); transform: translate(-3px, 1px); }
    100% { clip-path: inset(88% 0 0 0); transform: translate(0, -1px); }
}

.dot-green  { background-color: #008751; animation-delay: 0s; }
.dot-gold   { background-color: #ffb703; animation-delay: 0.25s; }
.dot-maroon { background-color: #800020; animation-delay: 0.5s; }

/* --- PRELOADER TEXT GLITCH/CLICK EFFECT --- */
.preloader-sinhala-title,
.preloader-english-title {
    position: relative;
}

.preloader-sinhala-title::before,
.preloader-sinhala-title::after,
.preloader-english-title::before,
.preloader-english-title::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #0a142c 0%, #030710 100%);
    display: none;
    white-space: nowrap;
    overflow: hidden;
}

.preloader.is-text-glitching .preloader-sinhala-title::before,
.preloader.is-text-glitching .preloader-english-title::before {
    display: block;
    left: -3px;
    color: #00f0ff;
    text-shadow: 2px 0 #00f0ff;
    animation: glitch-slice-top 0.2s infinite linear alternate-reverse;
}

.preloader.is-text-glitching .preloader-sinhala-title::after,
.preloader.is-text-glitching .preloader-english-title::after {
    display: block;
    left: 3px;
    color: #ff0055;
    text-shadow: -2px 0 #ff0055;
    animation: glitch-slice-bottom 0.2s infinite linear alternate-reverse;
}

.preloader.is-text-glitching .preloader-brand {
    animation: preloaderShake 0.2s linear infinite;
}

@keyframes preloaderShake {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(-2px, 1px); }
    50%      { transform: translate(2px, -1px); }
    75%      { transform: translate(-1px, -1px); }
}

@keyframes text-reveal-sinhala {
    from { opacity: 0; transform: scale(0.92) translateY(25px); filter: blur(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes cinematic-expand {
    0% { opacity: 0; letter-spacing: -0.15em; filter: blur(6px); }
    40% { opacity: 0.4; }
    100% { opacity: 0.95; letter-spacing: clamp(3px, 0.6vw, 8px); filter: blur(0); }
}
@keyframes gold-shimmer {
    0%, 100% { text-shadow: 0 0 0 rgba(255, 183, 3, 0); color: #ffffff; }
    50% { text-shadow: 0 0 12px rgba(255, 183, 3, 0.45); color: #fff3d1; }
}
@keyframes dot-wave {
    0%, 100% { transform: translateY(0); opacity: 0.35; }
    50% { transform: translateY(-8px); opacity: 1; }
}

/* ==========================================================================
   3. CURVED NAVIGATION HEADER ARCHITECTURE
   ========================================================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3500;
    background: linear-gradient(to right, #050a18 70%, #001130 100%);
    padding: 14px 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1550px;
    margin: 0 auto;
    width: 100%;
}

.mobile-menu-toggle {
    display: none; 
    background: transparent;
    border: none;
    width: 26px;
    height: 20px;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 2200;
}

.hamburger-bar {
    width: 100%;
    height: 3px;
    background-color: #ffffff;
    border-radius: 4px;
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.mobile-menu-toggle.open .hamburger-bar:nth-child(1) { transform: rotate(45deg) translateY(-2px); }
.mobile-menu-toggle.open .hamburger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-menu-toggle.open .hamburger-bar:nth-child(3) { transform: rotate(-45deg) translateY(2px); }

.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-crest {
    height: 48px;
    width: auto;
    object-fit: contain;
}

.logo-text .main-title {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    color: #ffffff;
    display: block;
}

.logo-text .sub-title {
    font-size: 0.8rem;
    color: #ffb703;
    letter-spacing: 1px;
    display: block;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.nav-links a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    transition: color 0.25s ease;
}

.nav-links a:hover {
    color: #ffb703;
}

.nav-links a.active-pill {
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    padding: 6px 20px;
    border-radius: 24px;
}

.nav-icons {
    display: flex;
    align-items: center;
    gap: 18px;
}

.nav-icons button {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
}

.nav-icons button:hover {
    color: #ffb703;
}

/* --- Quick menu trigger: redesigned as a glass icon-badge (matching the
   team's liquid-glass language used across aboutus.html) with its own
   signature move — a 2x2 dot grid that morphs into an X when the
   quick-access menu opens, instead of a plain dot/hamburger icon. --- */
.quick-menu-trigger {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease;
}
.quick-menu-trigger:hover {
    border-color: #039be5;
    box-shadow: 0 0 16px rgba(3, 155, 229, 0.45);
    transform: translateY(-2px);
}
.qm-icon {
    position: relative;
    width: 16px;
    height: 16px;
}
.qm-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: #ffffff;
    transition: all 0.35s cubic-bezier(.22,1,.36,1);
}
.qm-dot-1 { top: 0;    left: 0; }
.qm-dot-2 { top: 0;    right: 0; }
.qm-dot-3 { bottom: 0; left: 0; }
.qm-dot-4 { bottom: 0; right: 0; }
.quick-menu-trigger:hover .qm-dot { background: #ffb703; border-radius: 50%; }

#quickMenuTriggerBtn.menu-trigger-active {
    background-color: #039be5;
    border-color: #039be5;
    box-shadow: 0 0 20px rgba(3, 155, 229, 0.6);
    transform: scale(1.05);
}
/* dots 1 & 4 stretch into one diagonal bar, 2 & 3 into the other — forming an X */
#quickMenuTriggerBtn.menu-trigger-active .qm-dot-1,
#quickMenuTriggerBtn.menu-trigger-active .qm-dot-4 {
    top: 7px; left: -1px; width: 18px; height: 2px; border-radius: 2px; background: #fff;
}
#quickMenuTriggerBtn.menu-trigger-active .qm-dot-1 { transform: rotate(45deg); }
#quickMenuTriggerBtn.menu-trigger-active .qm-dot-4 { transform: rotate(-45deg); }
#quickMenuTriggerBtn.menu-trigger-active .qm-dot-2,
#quickMenuTriggerBtn.menu-trigger-active .qm-dot-3 {
    opacity: 0; transform: scale(0);
}

/* --- DARK / LIGHT MODE TOGGLE: glitch-style icon button (no on/off slider) --- */
.theme-mode-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.tmt-track {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

.tmt-thumb {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F58634;
    transition: color 0.4s ease;
}

.tmt-icon {
    width: 16px;
    height: 16px;
    position: absolute;
    transition: opacity 0.25s ease, transform 0.3s ease;
}

.tmt-icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.tmt-icon-sun  { opacity: 1; transform: rotate(0) scale(1); }

/* Dark mode visual state — matched to the News/Events pages' toggle:
   flat dim circle, warm orange crescent, no gold glow ring. */
body.dark-mode .tmt-track { background: rgba(255, 255, 255, 0.04); box-shadow: none; }
body.dark-mode .tmt-thumb { color: #F58634; }
body.dark-mode .tmt-icon-sun  { opacity: 0; transform: rotate(90deg) scale(0.5); }
body.dark-mode .tmt-icon-moon { opacity: 1; transform: rotate(0) scale(1); }

/* --- SIGN IN / PRESIDENT'S PORTAL dropdown --- */
.signin-dropdown-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.signin-trigger-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, transform 0.2s, background 0.2s, box-shadow 0.3s;
}

.signin-trigger-btn:hover { color: #ffb703; }

.signin-dropdown-wrapper.signin-open .signin-trigger-btn {
    color: #ffb703;
    transform: scale(1.05);
}

.signin-dropdown-menu {
    position: absolute;
    top: calc(100% + 16px);
    right: -8px;
    min-width: 210px;
    background: rgba(5, 15, 32, 0.65);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 8px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.96);
    transform-origin: top right;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.25s;
    z-index: 4000;
}

.signin-dropdown-wrapper.signin-open .signin-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.signin-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
    color: #e2e8f0;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: background 0.2s ease, color 0.2s ease;
}

.signin-dropdown-item svg { flex-shrink: 0; }

.signin-dropdown-item:hover {
    background: rgba(0, 200, 83, 0.14);
    color: #ffffff;
}

.signin-dropdown-item:last-child:hover {
    background: rgba(255, 183, 3, 0.14);
}

body.dark-mode .signin-dropdown-menu {
    background: rgba(9, 20, 40, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Soft switch-flip pulse on the toggle button (.tmt-glitch) and the
   full-page theme-transition-veil glitch now live centrally in
   partials.js's SHARED_CHROME_CSS, so the same effect plays on every
   page, not just Home. */

/* ==========================================================================
   4. VERTICAL QUICK ACCESS MENU OVERLAY SYSTEM
   ========================================================================== */
.quick-access-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    
    /* Solid background fallback to keep the menu dark and block out the page underneath */
    background-color: #020510; 
    
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.01);
    will-change: transform, opacity;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   NEW: Isolated Background Layer (Handles the 50% Image Opacity)
   ========================================================================== */
.quick-access-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Blends your original radial gradient perfectly over your background photo */
    background: radial-gradient(circle at 35% 50%, rgba(6, 17, 41, 0.85) 0%, rgba(2, 5, 16, 0.95) 100%), 
                url('images/Menu Page Background.jpg'); /* <-- Swap with your actual image file name */
                
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Reduces only the photo/gradient layer visibility to 50% */
    opacity: 0.5; 
    
    /* Safely forces this entire design layer behind your menu links and text */
    z-index: -1; 
}

.quick-access-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.quick-menu-close {
    position: absolute;
    top: 95px;
    right: 45px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    font-size: 4rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 3200;
}

.quick-menu-close:hover {
    color: #ff5722;
    transform: rotate(90deg);
}

.quick-menu-wrapper {
    width: 100%;
    max-width: 1340px;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
    padding: 20px 80px;
    gap: 80px;
}

.quick-menu-branding {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 620px;
}

.giant-vertical-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 0.8;
    user-select: none;
    pointer-events: none;
    width: 100%;
    z-index: 1;
}

.giant-vertical-text span {
    font-size: clamp(9rem, 16vw, 15rem);
    font-weight: 900;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(180deg, #4c586e 0%, #151b29 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -4px;
    margin-right: 350px;
}

.quick-menu-crest-glow-zone {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.quick-menu-crest {
    width: clamp(220px, 30vw, 520px);
    max-width: 100%;
    margin-left: -100px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 50px rgba(0, 230, 118, 0.9)) 
            drop-shadow(0 0 100px rgba(0, 230, 118, 0.5))
            drop-shadow(0 25px 45px rgba(0, 0, 0, 0.7));
    animation: subtle-float 6s ease-in-out infinite;
}

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

.quick-menu-links-panel {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.quick-nav-tree {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 2.3vh, 18px);
    text-align: left;
}

.quick-link-item {
    font-size: 40px;
    font-weight: 400;
    font-style: italic;
    text-transform: uppercase;
    color: #ff6f00; 
    text-decoration: none;
    letter-spacing: 0.5px;
    line-height: 1.1;
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
    transform-origin: left center;
    text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

.quick-link-item:hover {
    color: #ffffff;
    transform: translateX(12px) scale(1.02);
}

.quick-link-item.link-green-active {
    color: #00e676; 
}
.quick-link-item.link-green-active:hover {
    color: #ffffff;
}

/* ==========================================================================
   5. HERO PRESENTATION AND SLIDER SYSTEMS
   ========================================================================== */
.hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100dvh; 
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, 
        rgba(0, 0, 0, 0.98) 0%, 
        rgba(0, 0, 0, 0.88) 45%, 
        rgba(0, 0, 0, 0.3) 75%, 
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 2;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center right;
    opacity: 0;
    transform: scale(1);
    transition: opacity 1.2s ease-in-out;
    will-change: opacity, transform;
}

/* Ken Burns auto-zoom — while a slide is active it slowly scales up for
   the whole time it's showing (~6s between slide changes, see home.js),
   so the background photo always feels like it's gently drifting inward
   rather than sitting static. Kept deliberately subtle and slow (small
   scale, long duration relative to the 6s slide interval) so it reads as
   a gentle drift, not a zoom. .hero has overflow:hidden so the zoomed
   edges never show outside the banner. Restarts cleanly every time this
   slide's turn comes back around, since the animation is tied to the
   "active" class being added/removed by the slider JS. */
@keyframes heroSlideKenBurns {
    from { transform: scale(1); }
    to   { transform: scale(1.045); }
}
.slide.active {
    opacity: 1;
    animation: heroSlideKenBurns 14s linear forwards;
}
@media (prefers-reduced-motion: reduce) {
    .slide.active { animation: none; }
}

.hero-content-wrapper {
    position: relative;
    z-index: 3;
    max-width: 1550px;
    width: 100%;
    padding: 0 40px;
    margin-top: 80px;
    margin-right: auto;
    display: flex;
    align-items: center;
}

.hero-branding {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.large-crest {
    width: 620px;
    margin-right: -95px; 
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.7));
    animation: heroCrestLoop 5s ease-in-out infinite;
    will-change: transform;
}

@keyframes heroCrestLoop {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-10px) rotate(1.5deg); }
}

.motto-box {
    background: rgba(0, 0, 0, 0.7);
    border: 1.5px solid #ffb703;
    padding: 6px 16px;
    border-radius: 4px;
    text-align: center;
    margin-top: -10px;
}

.motto-sinhala { font-size: 0.85rem; color: #ffb703; }
.motto-english { font-size: 0.65rem; font-weight: 600; color: #ffffff; margin-top: 2px; }

.hero-text-block { text-align: left; margin-left: -40px; }
.welcome-cursive { font-family: 'Great Vibes', cursive; font-size: 3.5rem; color: #ffffff; display: block; }
.hero-main-title { font-size: 3.8rem; font-weight: 700; line-height: 1.05; margin-bottom: 18px; }
.hero-main-title .highlight-title { display: block; font-size: 2.2rem; color: #ffb703; }
.hero-description { font-size: 0.95rem; line-height: 1.65; color: rgba(255, 255, 255, 0.85); max-width: 580px; }

/* --- HERO "PREX-Ai" LAUNCHER BUTTON ---
   Sits under the hero description, matching the navbar chat launcher's
   neon-green idle blink, with its own hover lift/glow and a quick
   click-pulse burst before handing off to ai.html. */
.hero-prexai-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 30px;
    border-radius: 50px;
    border: 1.5px solid #00e676;
    background: linear-gradient(90deg, #00c853, #ffb703);
    background-size: 220% 100%;
    background-position: 0% 50%;
    color: #06210f;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    animation: heroPrexAiBlink 2.2s ease-in-out infinite;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-position 0.5s ease;
}

.hero-prexai-btn .hpa-label { position: relative; z-index: 2; }

.hero-prexai-btn .hpa-arrow {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.hero-prexai-btn .hpa-arrow svg { width: 18px; height: 18px; }

/* Diagonal shine sweep that plays on hover, echoing the neon-glass feel
   used elsewhere in the header/quick-menu components. */
.hero-prexai-btn .hpa-shine {
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    transform: skewX(-20deg);
    z-index: 1;
    pointer-events: none;
}

.hero-prexai-btn:hover {
    transform: translateY(-3px);
    background-position: 100% 50%;
    box-shadow: 0 8px 22px rgba(0, 200, 83, 0.45), 0 0 18px rgba(255, 183, 3, 0.35);
}

.hero-prexai-btn:hover .hpa-arrow { transform: translateX(5px); }

.hero-prexai-btn:hover .hpa-shine {
    animation: heroPrexAiShine 0.9s ease forwards;
}

.hero-prexai-btn:active { transform: translateY(-1px) scale(0.97); }

.hero-prexai-btn.hpa-clicked {
    animation: heroPrexAiClickPulse 0.55s ease;
}

/* Idle loop: a soft neon breathing glow, same rhythm as the chat launcher. */
@keyframes heroPrexAiBlink {
    0%, 100% {
        box-shadow: 0 0 4px rgba(0, 230, 118, 0.3), 0 0 0 rgba(255, 183, 3, 0);
    }
    50% {
        box-shadow: 0 0 16px rgba(0, 230, 118, 0.7), 0 0 26px rgba(255, 183, 3, 0.45);
    }
}

@keyframes heroPrexAiShine {
    0%   { left: -60%; }
    100% { left: 130%; }
}

/* Click burst: a brief scale + flare that plays the moment the button
   is pressed, right before navigation to ai.html. */
@keyframes heroPrexAiClickPulse {
    0%   { transform: scale(1); box-shadow: 0 0 4px rgba(0, 230, 118, 0.3); }
    35%  { transform: scale(1.08); box-shadow: 0 0 26px rgba(0, 230, 118, 0.95), 0 0 40px rgba(255, 183, 3, 0.7); }
    100% { transform: scale(1); box-shadow: 0 0 4px rgba(0, 230, 118, 0.3); }
}

body.dark-mode .hero-prexai-btn {
    border-color: #00e676;
    color: #06210f;
}

/* --- HERO CTA ROW: houses the Sign In + PREX-Ai launcher side by side,
   Sign In first, PREX-Ai second --- */
.hero-cta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 26px;
}

/* --- HERO "SIGN IN" BUTTON — same structure/animation family as the
   PREX-Ai launcher (shine sweep, idle blink, click pulse) but in the
   site's light-blue accent so the two read as related-but-distinct. --- */
.hero-signin-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 30px;
    border-radius: 50px;
    border: 1.5px solid #4fc3f7;
    background: rgba(79, 195, 247, 0.1);
    color: #4fc3f7;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    animation: heroSigninBlink 2.2s ease-in-out infinite;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.3s ease, color 0.3s ease;
}

.hero-signin-btn .hsb-label { position: relative; z-index: 2; }

.hero-signin-btn .hsb-arrow {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.hero-signin-btn .hsb-arrow svg { width: 18px; height: 18px; }

.hero-signin-btn .hsb-shine {
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-20deg);
    z-index: 1;
    pointer-events: none;
}

.hero-signin-btn:hover {
    transform: translateY(-3px);
    background: rgba(79, 195, 247, 0.22);
    color: #e3f6ff;
    box-shadow: 0 8px 22px rgba(79, 195, 247, 0.4), 0 0 18px rgba(79, 195, 247, 0.35);
}

.hero-signin-btn:hover .hsb-arrow { transform: translateX(5px); }

.hero-signin-btn:hover .hsb-shine {
    animation: heroSigninShine 0.9s ease forwards;
}

.hero-signin-btn:active { transform: translateY(-1px) scale(0.97); }

.hero-signin-btn.hsb-clicked {
    animation: heroSigninClickPulse 0.55s ease;
}

@keyframes heroSigninBlink {
    0%, 100% {
        box-shadow: 0 0 4px rgba(79, 195, 247, 0.3), 0 0 0 rgba(79, 195, 247, 0);
    }
    50% {
        box-shadow: 0 0 16px rgba(79, 195, 247, 0.7), 0 0 26px rgba(79, 195, 247, 0.4);
    }
}

@keyframes heroSigninShine {
    0%   { left: -60%; }
    100% { left: 130%; }
}

@keyframes heroSigninClickPulse {
    0%   { transform: scale(1); box-shadow: 0 0 4px rgba(79, 195, 247, 0.3); }
    35%  { transform: scale(1.08); box-shadow: 0 0 26px rgba(79, 195, 247, 0.95), 0 0 40px rgba(79, 195, 247, 0.6); }
    100% { transform: scale(1); box-shadow: 0 0 4px rgba(79, 195, 247, 0.3); }
}

body.dark-mode .hero-signin-btn {
    border-color: #4fc3f7;
    color: #b3e5fc;
}

@media (max-width: 900px) {
    .hero-cta-row { justify-content: center; margin-left: auto; margin-right: auto; }
}

.slider-dots { position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 16px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.3); border: none; cursor: pointer; }
.dot.active { background-color: #ffb703; transform: scale(1.3); }

/* ==========================================================================
   HERO MINI-PLAYER WIDGET
   Bottom-right segmented scrubber (same idea as rockstargames.com's hero
   video control) that mirrors the existing .dot/.slide state one-for-one —
   built from home.js's own changeSlide()/slideInterval, so this never drifts
   out of sync with the centred dots below the headline.
   ========================================================================== */
.hero-player-widget {
    position: absolute;
    right: 32px;
    bottom: 35px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}
.hpw-playpause {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(15, 15, 15, 0.42);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 0.95;
}
.hpw-playpause:focus,
.hpw-playpause:focus-visible {
    outline: none;
    box-shadow: none;
}
.hpw-playpause:hover { opacity: 1; }
.hpw-playpause:active { transform: scale(0.92); }
.hpw-playpause svg { width: 18px; height: 18px; }
.hpw-segments { display: flex; align-items: center; gap: 16px; }
.hpw-seg {
    position: relative;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    overflow: hidden;
    cursor: pointer;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s ease, border-radius 0.3s ease, background 0.2s ease;
}
.hpw-seg:focus,
.hpw-seg:focus-visible {
    outline: none;
    box-shadow: none;
}
.hpw-seg:hover { background: rgba(255, 255, 255, 0.7); }
.hpw-seg.active {
    width: 78px;
    height: 9px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.42);
}
.hpw-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: #ffffff;
    border-radius: 5px;
}
.hpw-seg.active .hpw-fill.hpw-run {
    animation: hpwFillProgress 6s linear forwards;
}
@keyframes hpwFillProgress {
    from { width: 0%; }
    to   { width: 100%; }
}
.hero.hero-paused .hpw-fill.hpw-run,
.hero.hero-paused .slide.active {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .hpw-seg.active .hpw-fill.hpw-run { animation: none; width: 100%; }
}
@media (max-width: 760px) {
    .hero-player-widget { right: 20px; bottom: 90px; gap: 14px; }
    .hpw-playpause { width: 34px; height: 34px; }
    .hpw-seg { width: 9px; height: 9px; }
    .hpw-seg.active { width: 44px; height: 7px; }
}

.menu-backdrop-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    z-index: 1500;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
body.nav-locked .menu-backdrop-overlay { opacity: 1; visibility: visible; }

/* ==========================================================================
   6. SEARCH OVERLAY SYSTEM ARCHITECTURE (MATCHING ARTBOARD 11)
   ========================================================================== */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    
    /* Solid background fallback to mask the underlying page content completely */
    background-color: #020510; 
    
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 4000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.02);
    will-change: transform, opacity;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Isolated Search Background Layer (Handles the 50% Image Opacity)
   ========================================================================== */
.search-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Blends your original centered radial gradient seamlessly with the background image */
    background: radial-gradient(circle at center, rgba(6, 17, 41, 0.9) 0%, rgba(2, 5, 16, 0.95) 100%), 
                url('images/Hero Section Background 03.jpg');
                
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Drops the photo + gradient layer visibility exactly to 50% */
    opacity: 0.5; 
    
    /* Keeps the image layout strictly behind your search bar, text elements, and key results */
    z-index: -1; 
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.search-overlay-close {
    position: absolute;
    top: 30px;
    right: 45px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 4rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 4200;
}

.search-overlay-close:hover {
    color: #ff5722;
    transform: rotate(90deg);
}

.search-overlay-wrapper {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    margin-top: -20px;
}

.search-branding-zone {
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
}

.search-overlay-crest {
    width: 380px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.5));
    animation: searchCrestFloat 3.5s ease-in-out infinite;
}

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

.search-title-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 20px;
    margin-bottom: 25px;
}

.search-title-divider h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.decor-line {
    height: 4px;
    flex-grow: 1;
    border-radius: 2px;
}

.decor-line.line-left { background: linear-gradient(to right, #008751 0%, #ff6f00 100%); }
.decor-line.line-right { background: linear-gradient(to left, #008751 0%, #ff6f00 100%); }

.search-input-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin-bottom: 25px;
    border-radius: 50px;
    animation: searchBarPulseGlow 2.6s ease-in-out infinite;
}

@keyframes searchBarPulseGlow {
    0%, 100% { box-shadow: 0 10px 30px rgba(0, 135, 81, 0.15), 0 0 0 0 rgba(0, 135, 81, 0.25); }
    50%      { box-shadow: 0 10px 40px rgba(255, 111, 0, 0.2), 0 0 0 10px rgba(255, 111, 0, 0); }
}

.search-box-icon {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: #008751;
    display: flex;
    align-items: center;
    pointer-events: none;
    z-index: 5;
}

#siteSearchInput {
    width: 100%;
    padding: 16px 24px 16px 64px;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(0, 135, 81, 0.35), rgba(255, 111, 0, 0.28));
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50px;
    outline: none;
    box-shadow: inset 0 1px 20px rgba(255, 255, 255, 0.08);
    transition: border-color 0.3s ease, background 0.3s ease;
}

#siteSearchInput:focus {
    border-color: rgba(255, 255, 255, 0.6);
    background: linear-gradient(135deg, rgba(0, 135, 81, 0.45), rgba(255, 111, 0, 0.36));
}

#siteSearchInput::placeholder {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
}

.search-results-card {
    width: 100%;
    max-width: 640px;
    background: linear-gradient(135deg, rgba(0, 135, 81, 0.18), rgba(255, 111, 0, 0.14));
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 40px;
    padding: 20px 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-10px);
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease,
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                padding 0.4s ease;
}

/* Only expand the card once there are real matches to show — keeps the
   search bar the clean focal point until the person actually finds something */
.search-results-card.has-matches {
    max-height: 50vh;
    opacity: 1;
    padding: 22px 16px;
    transform: translateY(0);
}

.search-results-viewport {
    width: 100%;
    max-height: 40vh;
    overflow-y: auto;
}

.search-results-viewport::-webkit-scrollbar { width: 6px; }
.search-results-viewport::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 10px; }

.search-empty-state {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 150px;
}

.search-empty-state p {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a2233;
    letter-spacing: 0.5px;
    text-align: center;
}

.search-result-item {
    display: block;
    text-decoration: none;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    transition: background-color 0.2s ease, transform 0.2s ease;
    border-radius: 8px;
    animation: searchResultItemIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes searchResultItemIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Stagger each result so they cascade in one after another */
.search-result-item:nth-child(1)  { animation-delay: 0.02s; }
.search-result-item:nth-child(2)  { animation-delay: 0.06s; }
.search-result-item:nth-child(3)  { animation-delay: 0.10s; }
.search-result-item:nth-child(4)  { animation-delay: 0.14s; }
.search-result-item:nth-child(5)  { animation-delay: 0.18s; }
.search-result-item:nth-child(6)  { animation-delay: 0.22s; }
.search-result-item:nth-child(7)  { animation-delay: 0.26s; }
.search-result-item:nth-child(8)  { animation-delay: 0.30s; }
.search-result-item:nth-child(n+9) { animation-delay: 0.34s; }

.search-result-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
}

.search-result-title { font-size: 1.05rem; font-weight: 700; color: #ffffff; margin-bottom: 2px; }
.search-result-category { font-size: 0.78rem; font-weight: 600; color: #ffb703; text-transform: uppercase; }

/* ==========================================================================
   7. MOBILE RESPONSIVE MEDIA QUERIES (OPTIMIZED CLOSE-RANGE PROXIMITY)
   ========================================================================== */
@media (max-width: 1024px) {
    .navbar { padding: 12px 20px; border-radius: 0 0 16px 16px; }
    .nav-container { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; }
    .mobile-menu-toggle { display: flex; grid-column: 1; }
    .logo-area { grid-column: 2; justify-content: center; }
    .nav-crest { height: 38px; margin-right: -15px; margin-left: -30px;}
    .logo-text .main-title { font-size: 0.80rem; }
    .logo-text .sub-title { font-size: 0.72rem; }
    .nav-icons { grid-column: 3; gap: 12px; }

    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: 290px;
        height: 100vh;
        background: #040914;
        flex-direction: column;
        align-items: flex-start;
        padding: 90px 24px;
        gap: 12px;
        box-shadow: 8px 0 30px rgba(0, 0, 0, 0.8);
        z-index: 2100;
        transform: translate3d(-100%, 0, 0);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav-links.mobile-open { transform: translate3d(0, 0, 0); }
    .nav-links a { font-size: 1.05rem; width: 100%; padding: 10px; }

    /* Quick Access Menu Layout Tuning */
    .quick-menu-close { top: 78px; right: 20px; font-size: 3.2rem; }
    .quick-menu-wrapper { grid-template-columns: 1fr; padding: 20px 24px 10px 24px; gap: 0px; height: 100%; overflow-y: auto; }
    .quick-menu-branding { order: 1; min-height: auto; height: auto; }
    .giant-vertical-text { flex-direction: row; gap: 12px; top: 50%; left: 50%; transform: translate(-50%, -50%)}
    .giant-vertical-text span { font-size: clamp(5rem, 15vw, 7rem); background: linear-gradient(180deg, rgba(96,107,130,0.15) 0%, rgba(28,35,51,0.02) 100%); -webkit-background-clip: text; letter-spacing: -2px; margin-right: 0; }
    .quick-menu-crest { width: clamp(60px, 58vw, 340px); filter: drop-shadow(0 0 45px rgba(0, 230, 118, 0.95)); margin-left: 0px; }

    /* Close layout gap by pulling links up into emblem space */
    .quick-menu-links-panel { order: 2; justify-content: center; width: 100%; margin-top: -120px; }
    .quick-nav-tree { text-align: center; align-items: center; width: 100%; gap: 16px; }
    .quick-link-item { font-size: clamp(1.45rem, 5.5vw, 1.85rem); transform-origin: center center; }

    /* Search Responsive Elements */
    .search-overlay-close { top: 15px; right: 20px; font-size: 3.2rem; }
    .search-overlay-wrapper { padding: 16px; width: 100%; }
    .search-overlay-crest { width: 110px; }
    .search-title-divider h2 { font-size: 1.05rem; letter-spacing: 1px; }
    .search-title-divider { gap: 12px; }

    /* Hero Presentation Settings */
    .hero-content-wrapper { flex-direction: column; text-align: center; padding: 0 24px; margin-top: 90px; }
    .large-crest { width: clamp(180px, 42vw, 270px); margin-right: 0px; }
    .hero-text-block { margin-left: 0; text-align: center; }
    .welcome-cursive { font-size: 2.2rem; }
    .hero-main-title { font-size: 2.2rem; }
    .hero-main-title .highlight-title { font-size: 1.5rem; }
    .hero-description { font-size: 0.88rem; max-width: 100%; }
    .hero-gradient-overlay { background: linear-gradient(to bottom, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.95) 100%); }
    .slider-dots { bottom: 25px; }
}

@media (max-width: 480px) {
    /* Absolute close proximity configuration settings for small smartphones */
    .quick-menu-wrapper { padding-top: 25px; }
    .quick-menu-crest { width: 210px; }
    .quick-menu-links-panel { margin-top: -145px; }
    .quick-nav-tree { gap: 12px; }
    .quick-link-item { font-size: 1.35rem; }

    .search-overlay-wrapper { margin-top: 0px; padding-top: 60px; }
    .search-overlay-crest { width: 95px; margin-bottom: -5px; }
    .search-title-divider { gap: 8px; margin-bottom: 20px; }
    .search-title-divider h2 { font-size: 0.9rem; }
    #siteSearchInput { padding: 14px 20px 14px 54px; font-size: 0.98rem; }
    .search-box-icon { left: 18px; }
    .search-results-card { border-radius: 30px; padding: 30px 16px; min-height: 200px; }
    .search-empty-state p { font-size: 1.25rem; }
    .search-result-title { font-size: 0.95rem; }
    .search-result-category { font-size: 0.72rem; }
}

/* ==========================================================================
   PRINCIPAL MESSAGE BASE CANVAS SETUP (LIGHT EXCLUSIVELY)
   ========================================================================== */
.principal-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: clamp(60px, 8vw, 120px) max(5vw, 20px);
    background-color: #ffffff; /* Clean white canvas layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.pm-global-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    display: grid;
    grid-template-columns: 1fr 1.30fr; /* Perfect golden-ratio grid split */
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
    z-index: 10;
}

/* ==========================================================================
   PORTRAIT FRAME ARCHITECTURE (ANTI-LAYOUT-SHIFT)
   ========================================================================== */
.pm-portrait-column {
    width: 100%;
    display: flex;
    justify-content: center;
}

.pm-frame-container {
    position: relative;
    width: 100%;
    max-width: 400px; /* Safe bounds sizing for desktop scales */
    aspect-ratio: 1 / 1.1; /* Hard-locked frame proportions prevents CLS jumps */
}

/* Replicates the elegant heavily-rounded capsule border from Artboard 22 */
.pm-image-clipper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: clamp(40px, 6vw, 70px); /* Responsive fluid rounding corners */
    overflow: hidden;
    z-index: 3;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
}

.pm-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Golden floating offset frame border layout */
.pm-artistic-border {
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 3px solid #df8626; /* Authentic school gold accent */
    border-radius: clamp(46px, 6vw, 76px);
    z-index: 1;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Micro-interaction layout focus hooks */
.pm-frame-container:hover .pm-portrait-img {
    transform: scale(1.06);
}
.pm-frame-container:hover .pm-artistic-border {
    transform: scale(1.02);
}

/* ==========================================================================
   HIGH-CONTRAST TYPOGRAPHY SYSTEM
   ========================================================================== */
.pm-content-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pm-main-heading {
    font-family: 'Inter', sans-serif;
    color: #0f172a; /* Deep Charcoal Black */
    font-size: clamp(1.8rem, 3vw, 2.6rem); /* Fully fluid heading text size */
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0 0 6px 0;
}

/* Signature Branding Accent Split Bars */
.pm-signature-line {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0;
}

.sig-bar-green {
    height: 4px;
    width: 35px;
    background-color: #00c853;
    border-radius: 4px 0 0 4px;
    flex-shrink: 0;
}

.sig-bar-orange {
    height: 4px;
    width: clamp(60px, 10vw, 100px);
    background-color: #df8626;
    border-radius: 0 4px 4px 0;
    margin-right: 14px;
    flex-shrink: 0;
}

.pm-author-name {
    font-family: 'Poppins', sans-serif;
    color: #df8626;
    font-weight: 700;
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    white-space: nowrap;
}

/* Article Body Copy Styling Rules */
.pm-message-body p {
    font-family: 'Poppins', sans-serif;
    color: #334155; /* Soft ultra-legible charcoal gray text body */
    font-size: clamp(0.92rem, 1.05vw, 1.05rem);
    line-height: 1.7;
    margin: 0 0 18px 0;
    text-align: justify;
}
.pm-message-body p:last-child { margin-bottom: 0; }

.pm-truncated-text {
    display: block;
    width: 100%;
}

.pm-readmore-link {
    display: block;
    text-align: left;
    color: #df8626;
    text-decoration: none;
    font-weight: 700;
    margin-left: 0;
    margin-top: 8px;
    transition: color 0.2s ease;
}
.pm-readmore-link:hover {
    color: #00c853;
}

/* ==========================================================================
   SECTION DECORATIVE FOOTER ALIGNMENTS
   ========================================================================== */
.pm-section-footer {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin-top: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pm-branding-dots {
    display: flex;
    gap: 6px;
}

.pm-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.pm-dot.color-green { background-color: #00c853; }
.pm-dot.color-orange { background-color: #df8626; }

/* Micro Badge Layout Group Placement */
.pm-bottom-crest {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pm-mini-logo {
    width: 34px;
    height: auto;
    object-fit: contain;
}

.pm-mini-text {
    display: flex;
    flex-direction: column;
}

.pm-mini-title {
    font-family: 'Poppins', sans-serif;
    color: #0f172a;
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.2px;
    line-height: 1.2;
}

.pm-mini-subtitle {
    font-family: 'Poppins', sans-serif;
    color: #64748b;
    font-weight: 600;
    font-size: 0.58rem;
    letter-spacing: 0.8px;
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE DECK LAYOUTS
   ========================================================================== */
@media (max-width: 992px) {
    .pm-global-container {
        grid-template-columns: 1fr; /* Stack panels vertically on tablet down viewports */
        gap: 36px;
    }

    .pm-portrait-column {
        order: 1;
        max-width: 320px;
        margin: 0 auto; /* Perfect horizontal centration limits */
    }

    .pm-content-column {
        order: 2;
    }

    .pm-main-heading, 
    .pm-signature-line {
        justify-content: center;
        text-align: center;
    }

    .pm-message-body p {
        text-align: left; /* Changes text alignments to left format to ensure clean mobile blocks */
    }

    .pm-section-footer {
        margin-top: 50px;
        flex-direction: column;
        gap: 24px;
    }

    .pm-bottom-crest {
        position: relative;
        right: auto;
    }
}

/* ==========================================================================
   SCHOOL MOTTO, VISION & MISSION SECTION (PREMIUM DARK SYSTEM)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Sacramento&display=swap');

/* ==========================================================================
   UPDATED SCHOOL MOTTO SECTION (WITH 50% BACKGROUND OPACITY LAYER)
   ========================================================================== */
.motto-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: clamp(60px, 8vw, 120px) max(5vw, 20px);
    background-color: #ffffff; /* Matches the Academics section's light-mode canvas */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-position: center; /* Serves as the base coordinate anchor for JS parallax shifts */
}

/* Isolated background photo layer at 50% opacity */
.motto-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/School Moto Background.jpg'); /* Targets your asset file name verbatim */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: inherit; /* Dynamically inherits the live JS tracking adjustments from the parent container */
    opacity: 0.15; /* Light mode: same flat opacity as the Academics section background photo */
    z-index: 1;
    pointer-events: none;
    will-change: background-position;
}

/* Linear background shielding overlay matrix */
.motto-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent; /* Light mode: no extra tint, matching the Academics section (dark mode restores its overlay below) */
    z-index: 2; /* Elevated to sit perfectly on top of the faded photo, but underneath the text layer (z-index: 10) */
    pointer-events: none;
}

.motto-global-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    display: grid;
    grid-template-columns: 1fr 0.8fr 1fr; /* Symmetric side columns so the crest column lands on the true center */
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
    z-index: 10;
}

/* --- Card Base Structures --- */
.motto-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.motto-card-header {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.motto-card-header.text-right {
    align-items: flex-end;
}

/* Elegant Handwriting Script Tags */
.motto-script-tag {
    font-family: 'Sacramento', 'Great Vibes', cursive;
    font-size: clamp(2.6rem, 4vw, 3.7rem);
    line-height: 1;
    position: absolute;
    top: -25px;
    left: -5px;
    z-index: 1;
    opacity: 0.9;
}

.text-right .motto-script-tag {
    left: auto;
    right: -5px;
}

.motto-script-tag.text-green { color: #00c853; }
.motto-script-tag.text-orange { color: #df8626; }

.motto-sinhala-title {
    font-family: 'Yaldevi', 'Poppins', sans-serif;
    color: #00c853;
    font-size: clamp(1.6rem, 2.2vw, 2.2rem);
    font-weight: 700;
    margin: 0;
    position: relative;
    z-index: 2;
    padding-top: 15px;
}
.motto-sinhala-title.text-orange { color: #df8626; }

/* --- High Contrast Typography (light mode default; dark-mode override below) --- */
.motto-sinhala-highlight {
    font-family: 'Yaldevi', 'Poppins', sans-serif;
    color: #0f172a; /* Solid charcoal for legibility on the light canvas */
    font-size: clamp(1.25rem, 1.8vw, 1.6rem);
    font-weight: 400;
    line-height: 1.4;
    margin: 0 0 14px 0;
}

.motto-sinhala-paragraph {
    font-family: 'Yaldevi';
    color: #000000;
    font-size: clamp(0.92rem, 1.05vw, 1.02rem);
    font-weight: 400;
    line-height: 1.7;
    margin: 0 0 14px 0;
    text-align: justify;
}

.text-right .motto-sinhala-paragraph {
    text-align-last: right;
}

.motto-english-translation {
    font-family: 'Poppins', sans-serif;
    font-style: italic;
    color: #000000;
    font-size: clamp(0.88rem, 1vw, 0.95rem);
    line-height: 1.6;
    margin: 0;
}

/* --- Brand Accent Dividers --- */
.motto-accent-bar {
    height: 4px;
    margin-bottom: 14px;
    border-radius: 4px;
}

.bar-solid-green {
    width: 80px;
    background-color: #00c853;
}

.bar-split-colors {
    width: 100px;
    display: flex;
}
.bar-split-colors .split-g { width: 40%; background-color: #00c853; border-radius: 4px 0 0 4px; }
.bar-split-colors .split-o { width: 60%; background-color: #df8626; border-radius: 0 4px 4px 0; }

/* Corrected orientation: rotates the split bar 180deg so it reads
   green -> orange in the right direction on the Vision card. */
.bar-split-colors.bar-flipped { transform: rotate(180deg); }

/* ==========================================================================
   CENTER COLUMN: THE SACRED EMPOWERED CREST FRAME
   ========================================================================== */
.motto-crest-column {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.motto-crest-frame {
    position: relative;
    width: clamp(220px, 27vw, 340px);
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.motto-interactive-crest {
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 5;
    filter: drop-shadow(0 0 25px rgba(0, 200, 83, 0.3)); /* Vibrant dimensional glow shadow */
    animation: crestSoftFloat 4s ease-in-out infinite alternate;
    will-change: transform;
}

/* Ambient Orbiting Outer Dashed Ring */
.motto-crest-glow-ring {
    position: absolute;
    width: 95%;
    height: 95%;
    border: 2px dashed rgba(223, 134, 38, 0.25);
    border-radius: 50%;
    z-index: 1;
    animation: rotationLoop 28s linear infinite;
}


/* ==========================================================================
   SECTION ACTIONS & FOOTER ALIGNMENTS
   ========================================================================== */
.motto-section-footer {
    width: 100%;
    max-width: 1200px;
    margin-top: clamp(40px, 6vw, 80px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    z-index: 10;
}

.motto-explore-btn {
    font-family: 'Poppins', sans-serif;
    color: #df8626;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.motto-explore-btn:hover {
    color: #00c853;
    transform: translateY(-2px);
}

.motto-explore-btn .btn-arrow {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.motto-explore-btn:hover .btn-arrow {
    transform: translateX(4px);
}

.motto-carousel-indicators {
    display: flex;
    gap: 8px;
}

.motto-indicator-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: rgba(15, 23, 42, 0.15);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.motto-indicator-dot.active-orange {
    background-color: #df8626;
    transform: scale(1.2);
}

.motto-indicator-dot.active-green {
    background-color: #347c2a;
    transform: scale(1.2);
}

/* ==========================================================================
   ANIMATION KEYFRAME SPECS
   ========================================================================== */
@keyframes crestSoftFloat {
    0% { transform: translateY(0); }
    100% { transform: translateY(-12px); }
}

@keyframes rotationLoop {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   MOBILE-FIRST RESPONSIBLE MEDIA REFACTOR MATRIX (ZERO OVERFLOW SHIFTS)
   ========================================================================== */
@media (max-width: 992px) {
    .motto-global-container {
        grid-template-columns: 1fr; /* Switch to uniform layout stack */
        gap: 56px;
    }

    .motto-crest-column {
        order: 1; /* Elevates school emblem badge to top position on tablet viewports */
        margin-bottom: 10px;
    }

    .vision-card { order: 2; }
    .mission-card { order: 3; }

    .motto-card, .motto-card-header, .motto-card-body {
        align-items: center !important;
        text-align: center !important;
    }

    .text-right .motto-sinhala-paragraph {
        text-align-last: center;
    }

    .motto-sinhala-paragraph {
        text-align: center;
    }

    .motto-accent-bar {
        margin: 0 auto 14px auto;
    }
    
    .motto-script-tag {
        position: relative;
        top: 0;
        left: 0 !important;
        right: 0 !important;
        transform: rotate(0deg) !important;
        margin-bottom: -10px;
    }
}

/* ==========================================================================
   ACADEMICS SECTION STYLES (FADED CANVAS EDITION)
   ========================================================================== */
.acad-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: clamp(60px, 8vw, 120px) max(5vw, 20px);
    background-color: #ffffff; /* Clean white canvas background */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Faded background image layer with 25% opacity over a white background */
.acad-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/ACADAMICS.jpg'); /* Matches your actual uploaded asset filename */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.15; /* Reduced opacity ensures clear text readability */
    z-index: 1;
    pointer-events: none;
}

.acad-global-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 5vw, 70px);
    z-index: 5;
}

/* --- Section Header Layout --- */
.acad-section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.acad-badge-pill {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #008751;
    background: rgba(0, 135, 81, 0.06);
    padding: 6px 18px;
    border-radius: 50px;
    margin-bottom: 16px;
}

.acad-main-heading {
    font-family: 'Poppins', sans-serif;
    color: #0f172a; /* Solid charcoal black */
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0 0 10px 0;
}

.acad-heading-bar {
    display: flex;
    gap: 0;
    width: 120px;
    height: 4px;
    margin-bottom: 20px;
    border-radius: 4px;
    overflow: hidden;
}

.acad-bar-green { width: 40%; background-color: #00c853; }
.acad-bar-orange { width: 60%; background-color: #df8626; }

.acad-sub-paragraph {
    color: #475569;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    line-height: 1.6;
    margin: 0;
}

/* --- Responsive Grid Engine --- */
.acad-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    width: 100%;
}

/* --- Academic Card Components --- */
.acad-card {
    position: relative;
    background-color: rgba(255, 255, 255, 0.9); /* Slight gloss blending over background */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 20px;
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), 
                box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1), 
                border-color 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

.acad-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 200, 83, 0.08), rgba(223, 134, 38, 0.08));
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.acad-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
    border-color: rgba(223, 134, 38, 0.35);
}

.acad-card:hover::before {
    opacity: 1;
}

.acad-preview-hint {
    position: absolute;
    bottom: 4px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #df8626;
    letter-spacing: 0.5px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.acad-preview-hint svg {
    width: 13px;
    height: 13px;
}

.acad-card:hover .acad-preview-hint {
    opacity: 1;
    transform: translateX(0);
}

/* Visual Headers inside Cards */
.acad-card-visual {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.acad-icon-shield {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

.acad-icon-shield svg {
    width: 26px;
    height: 26px;
}

.bg-soft-green { background-color: rgba(0, 200, 83, 0.1); }
.bg-soft-orange { background-color: rgba(223, 134, 38, 0.1); }

.acad-card-index {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.8rem;
    color: #e2e8f0;
    letter-spacing: -0.5px;
    transition: color 0.3s ease;
}

.acad-card:hover .acad-card-index {
    color: #df8626;
}

.acad-card:hover .acad-icon-shield {
    transform: scale(1.05);
}

/* Card Typography Grouping */
.acad-card-content {
    display: flex;
    flex-direction: column;
}

.acad-card-title-si {
    font-family: 'Yaldevi', sans-serif;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.acad-card-title-en {
    font-family: 'Poppins', sans-serif;
    color: #64748b;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 0 0 16px 0;
}

.acad-card-desc {
    font-family: 'Poppins', sans-serif;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
    text-align: left;
}

/* Bottom Decorative Lines */
.acad-card-footer {
    width: 100%;
    height: 3px;
    background-color: #f1f5f9;
    border-radius: 2px;
    overflow: hidden;
}

.acad-accent-line {
    display: block;
    height: 100%;
    width: 25px;
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.acad-accent-line.line-green { background-color: #00c853; }
.acad-accent-line.line-orange { background-color: #df8626; }

.acad-card:hover .acad-accent-line {
    width: 100%;
}

.acad-footer-action {
    display: flex;
    justify-content: center;
    margin-top: clamp(20px, 3vw, 36px);
}

.acad-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #008751;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    padding: 15px 28px;
    border-radius: 50px;
    box-shadow: 0 12px 24px -8px rgba(0, 135, 81, 0.4);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.acad-primary-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.35);
    background-color: #0f172a;
}

.acad-btn-svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.acad-primary-btn:hover .acad-btn-svg {
    transform: translateX(5px);
}

/* ==========================================================================
   MOBILE RESPONSIVE BREAKPOINTS (ZERO-OVERFLOW STACKS)
   ========================================================================== */
@media (max-width: 768px) {
    .acad-cards-grid {
        grid-template-columns: 1fr; /* Switch to a clean vertical list structure on mobile phones */
        gap: 20px;
    }
    
    .acad-card {
        padding: 24px 20px;
    }
}

/* ==========================================================================
   STRENGTH SECTION SYSTEM (DARK EMERALD CONCEPT)
   ========================================================================== */
.strength-section {
    position: relative;
    width: 100%;
    padding: clamp(50px, 6vw, 90px) max(5vw, 20px);
    background: linear-gradient(160deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%); /* Light mode: bright canvas; dark mode restores the original dark-blue mix below */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Replicates the bright emerald aura gradient from Strength Section.png */
.strength-ambient-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(350px, 75vw, 900px);
    aspect-ratio: 1.5 / 1;
    background: radial-gradient(circle, rgba(0, 200, 83, 0.18) 0%, rgba(223, 134, 38, 0.03) 50%, rgba(0, 0, 0, 0) 100%);
    filter: blur(60px);
    z-index: 1;
    pointer-events: none;
}

.strength-global-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 4vw, 55px);
    align-items: center;
    z-index: 5;
}

/* --- Stats Grid Config --- */
.strength-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2.5vw, 32px);
    width: 100%;
}

/* --- Precision 3D Capsule Cards Architecture --- */
.strength-card {
    width: 100%;
    perspective: 1000px; /* Preps the hardware track for responsive hovering scales */
}

.strength-card-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.35; /* Strict aspect lock prevents layout jumps on rendering */
    background-color: #df8626; /* Original base institutional orange layer */
    border-radius: clamp(35px, 4.5vw, 65px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4),
                inset 0 -8px 15px rgba(0, 0, 0, 0.2),
                0 0 26px 4px rgba(0, 200, 83, 0.35),
                0 0 55px 10px rgba(0, 200, 83, 0.2); /* green neon halo around the whole card */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Green top sliding container cap */
.strength-face-green {
    position: relative;
    width: 100%;
    height: 68%; /* Mathematical ratio split matching reference image alignment */
    background: linear-gradient(135deg, #00c853 0%, #00a444 100%);
    border-radius: clamp(35px, 4.5vw, 65px) clamp(35px, 4.5vw, 65px) clamp(40px, 5vw, 68px) clamp(40px, 5vw, 68px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(8px, 1.5vw, 16px);
    padding: 20px 10px 10px 10px;
    z-index: 2;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Orange bottom label plate */
.strength-face-orange {
    position: relative;
    width: 100%;
    height: 32%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 12px 6px 12px;
    z-index: 1;
}

/* --- SVG Vector "Coin / Disc" Branding Layout ---
   The icon now sits on a circular disc (like an embossed coin) with a
   soft orange neon glow behind it. The disc color itself is theme-aware:
   white/light in light mode, dark in dark mode — while the neon glow
   stays a constant warm orange in both states. */
.strength-icon-container {
    width: clamp(52px, 6vw, 74px);
    height: clamp(52px, 6vw, 74px);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: relative;
    background: radial-gradient(circle at 32% 28%, #ffffff 0%, #f1f5f9 55%, #e2e8f0 100%);
    color: #0f172a; /* Light mode: dark glyph on a pale coin */
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.9),
        inset 0 -3px 6px rgba(15, 23, 42, 0.15),
        0 6px 14px rgba(0, 0, 0, 0.25); /* clean coin, no neon ring around the circle */
    transition: background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}

body.dark-mode .strength-icon-container {
    background: radial-gradient(circle at 32% 28%, #1c2942 0%, #101a2c 55%, #0a1220 100%);
    color: #ffffff; /* Dark mode: bright glyph on a dark coin */
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.08),
        inset 0 -3px 6px rgba(0, 0, 0, 0.55),
        0 6px 14px rgba(0, 0, 0, 0.45); /* clean coin, no neon ring around the circle */
}

body.dark-mode .strength-section {
    background: linear-gradient(160deg, #0d1b3a 0%, #0a142c 35%, #050a17 70%, #030710 100%);
}

body.dark-mode .strength-main-title {
    color: #ffffff;
}

.strength-icon-container svg {
    width: 52%;
    height: 52%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

/* --- High-Contrast Card Typography Systems --- */
.strength-counter-wrapper {
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    font-weight: 800;
    font-size: clamp(1.8rem, 3.2vw, 3.2rem); /* Fluid responsive counter scaling values */
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -1px;
}

.strength-plus {
    font-size: 0.85em;
    margin-left: 1px;
}

.strength-label {
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    font-weight: 700;
    font-size: clamp(0.85rem, 1.25vw, 1.22rem);
    line-height: 1.3;
    text-align: center;
    margin: 0;
    letter-spacing: 0.2px;
}

/* --- Desktop Hover Animation States --- */
@media (min-width: 993px) {
    .strength-card:hover .strength-card-inner {
        transform: translateY(-10px) scale(1.03);
        box-shadow: 0 25px 50px rgba(0, 200, 83, 0.15), 0 20px 40px rgba(0, 0, 0, 0.5),
                    0 0 30px 6px rgba(255, 152, 46, 0.45), 0 0 65px 14px rgba(255, 152, 46, 0.28);
    }
}

/* ==========================================================================
   LOWER TITLE SECTION FRAME
   ========================================================================== */
.strength-footer-title-block {
    width: 100%;
    text-align: center;
}

.strength-main-title {
    font-family: 'Poppins', sans-serif;
    color: #0f172a;
    font-size: clamp(1.15rem, 2.2vw, 1.8rem);
    font-weight: 500;
    letter-spacing: clamp(4px, 0.6vw, 8px); /* Matches exact tracking style layout wide metrics */
    margin: 0;
    padding-left: clamp(4px, 0.6vw, 8px); /* Compensates final right-letter space bounds */
    opacity: 0.9;
}

/* ==========================================================================
   MOBILE & TABLET BREAKPOINT ENGINE (ANTI-SHIFTS SYSTEM)
   ========================================================================== */
@media (max-width: 992px) {
    .strength-grid {
        grid-template-columns: repeat(2, 1fr); /* Clean balanced 2x2 grid structure setup on tablet viewports */
        gap: 24px;
        max-width: 600px;
    }
}

@media (max-width: 480px) {
    .strength-section {
        padding: 60px 16px;
    }

    .strength-grid {
        grid-template-columns: 1fr; /* Pure linear stream execution for tight mobile viewports */
        gap: 20px;
        max-width: 280px; /* Safe compact aspect boundaries control */
    }
    
    .strength-card-inner {
        aspect-ratio: 1 / 1.25; /* Slightly squashed ratio constraints optimizing mobile view lengths */
    }

    .strength-main-title {
        line-height: 1.5;
        letter-spacing: 3px;
    }
}

/* ==========================================================================
   LIGHT SYSTEM DESIGN TIMELINES & LAYOUT REFINEMENTS
   ========================================================================== */
:root {
    --sl-bg-main: #f8fafc;
    --sl-bg-card: #ffffff;
    --sl-text-primary: #0f172a;
    --sl-text-secondary: #475569;
    --sl-accent: #008751; /* Corporate Signature Green */
    --sl-accent-orange: #ff6f00; /* Secondary Orange Highlights */
    --sl-radius-main: 16px;
    --sl-shadow-smooth: 0 10px 30px -10px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.02);
    
    /* NEW BACKGROUND IMAGE CONTROLS */
    --sl-bg-image: url('images/Sports_Background.jpg'); /* Matches your actual uploaded asset filename */
    --sl-bg-opacity: 0.10; /* Adjust between 0.01 and 1.00 to change image strength */
}

.sports-light-section {
    position: relative; /* Required: anchors the absolute background layer inside this section */
    background-color: var(--sl-bg-main);
    padding: clamp(60px, 8vw, 120px) 0;
    font-family: 'Poppins', sans-serif;
    width: 100%;
    overflow: hidden;
}

/* LOW OPACITY BACKGROUND IMAGE ELEMENT */
.sports-light-section::before {
    content: '';
    position: absolute;
    inset: 0; /* Covers the entire width and height of the section seamlessly */
    background-image: var(--sl-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--sl-bg-opacity); /* Controlled separately from child content opacity */
    pointer-events: none; /* Prevents the invisible layer from blocking mouse clicks or text selections */
    z-index: 0; /* Places it directly on top of the background color layer */
}

.sl-container {
    position: relative; /* Establishes a stack placement layer */
    z-index: 1; /* Pushes text content, sports cards, and preview buttons cleanly on top of the image */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
/* --- A. LIGHT THEME HEADERS --- */
.sl-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto clamp(40px, 6vw, 60px) auto;
}

.sl-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--sl-accent);
    background: rgba(0, 135, 81, 0.06);
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 16px;
}

.sl-title {
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    color: var(--sl-text-primary);
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}

.sl-subtitle {
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    color: var(--sl-text-secondary);
    line-height: 1.6;
}

/* --- B. COMPACT CARD GRID (sl-card-desc OMITTED FOR CLEANER GEOMETRY) --- */
.sl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 50px;
}

.sl-card {
    background: var(--sl-bg-card);
    border-radius: var(--sl-radius-main);
    box-shadow: var(--sl-shadow-smooth);
    border: 1px solid rgba(15, 23, 42, 0.04);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

.sl-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    overflow: hidden;
}

.sl-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sl-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(15, 23, 42, 0.3) 100%);
    opacity: 0.7;
}

.sl-card-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--sl-text-primary);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
}

.sl-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex-grow: 1;
}

.sl-card-title {
    font-size: 1.3rem;
    color: var(--sl-text-primary);
    font-weight: 700;
    margin-bottom: 14px;
}

.sl-trigger-btn {
    background: none;
    border: none;
    color: var(--sl-accent);
    font-size: 0.88rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
}

.sl-trigger-btn span {
    transition: transform 0.3s ease;
}

/* --- C. CARD RENDERING MICRO-INTERACTIONS --- */
.sl-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.12);
}

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

.sl-card:hover .sl-trigger-btn {
    color: var(--sl-accent-orange);
}

.sl-card:hover .sl-trigger-btn span {
    transform: translateX(4px);
}

/* --- D. REDESIGNED SECTION FOOTER ACCELERATOR --- */
.sl-section-footer {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.sl-primary-footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: var(--sl-accent);
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 16px 40px;
    border-radius: 50px;
    box-shadow: 0 10px 25px -6px rgba(0, 135, 81, 0.35);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-btn-arrow {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.sl-primary-footer-btn:hover {
    background: #0f172a;
    box-shadow: 0 10px 25px -6px rgba(15, 23, 42, 0.25);
    transform: translateY(-3px);
}

.sl-primary-footer-btn:hover .footer-btn-arrow {
    transform: translateX(5px);
}

/* ==========================================================================
   LIQUID GLASS INTERACTIVE MODAL (PARITY SYSTEM WITH PREVIEW_4.JPEG)
   ========================================================================== */
.sl-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(226, 232, 240, 0.35);
    backdrop-filter: blur(0px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sl-modal-wrapper {
    padding: 24px;
    width: 100%;
    max-width: 780px;
    perspective: 1200px;
}

/* Dynamic Frosted Liquid Glass Shell Engine */
.sl-liquid-glass-panel {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 35px 70px -15px rgba(15, 23, 42, 0.15),
                0 0 0 1px rgba(255, 255, 255, 0.4) inset;
    backdrop-filter: blur(25px) saturate(195%);
    -webkit-backdrop-filter: blur(25px) saturate(195%);
    border-radius: 28px;
    padding: 40px;
    position: relative;
    
    /* Liquid-fluid distortion animation initial entry metrics */
    transform: scale(0.88) translateY(25px) rotateX(-8deg);
    border-radius: 55px 35px 65px 45px / 45px 65px 35px 55px;
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.5s ease, 
                border-radius 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Modal Operational States */
.sl-modal-backdrop.is-active {
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(16px);
}

.sl-modal-backdrop.is-active .sl-liquid-glass-panel {
    transform: scale(1) translateY(0) rotateX(0deg);
    opacity: 1;
    border-radius: 28px;
}

/* Modal Close Switch UI Element */
.sl-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(15, 23, 42, 0.05);
    color: #0f172a;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    z-index: 10;
    transition: all 0.25s ease;
}

.sl-modal-close:hover {
    background: #0f172a;
    color: #ffffff;
    transform: rotate(90deg);
}

/* Content Matrix Inside Glass Pane */
.sl-modal-content {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 36px;
    align-items: center;
}

.sl-modal-graphic {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 30px -10px rgba(0,0,0,0.12);
}

.sl-modal-graphic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Shimmer Highlight Flow effect across graphic node */
.sl-modal-graphic-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
    transform: translateX(-100%);
}

.sl-modal-backdrop.is-active .sl-modal-graphic-shimmer {
    transform: translateX(100%);
    transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.sl-modal-info {
    display: flex;
    flex-direction: column;
}

.sl-modal-headline {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--sl-text-primary);
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.sl-modal-paragraph {
    font-size: 0.95rem;
    color: var(--sl-text-secondary);
    line-height: 1.65;
    margin-bottom: 24px;
}

/* Micro Modal Button */
.sl-modal-explore-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 2px solid var(--sl-accent);
    color: var(--sl-accent);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 24px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.sl-modal-explore-btn svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.sl-modal-explore-btn:hover {
    background: var(--sl-accent);
    color: #ffffff;
}

.sl-modal-explore-btn:hover svg {
    transform: translateX(3px);
}

/* ==========================================================================
   RESPONSIVE LAYOUT BREAKPOINT ENGINE (ANTI-SHIFTS SYSTEM)
   ========================================================================== */
@media (max-width: 992px) {
    .sl-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 680px) {
    .sl-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto 40px auto;
    }
    
    .sl-liquid-glass-panel {
        padding: 32px 20px;
    }
    
    .sl-modal-content {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
    }
    
    .sl-modal-graphic {
        max-width: 160px;
        margin: 0 auto;
    }
    
    .sl-modal-explore-btn {
        margin: 0 auto;
    }
    
    .sl-primary-footer-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   CLUBS & SOCIETIES VARS & SPECIFIC LIGHT GRID GEOMETRY
   ========================================================================== */
:root {
    --cs-bg-main: #f1f5f9; /* Smooth light alternating background track */
    --cs-bg-card: #ffffff;
    --cs-text-dark: #0f172a;
    --cs-text-muted: #475569;
    --cs-green: #008751;       /* Official Theme Green Accent */
    --cs-orange: #ff6f00;      /* Official Theme Orange Accent */
    --cs-blue: #0284c7;
    --cs-purple: #6d28d9;
    --cs-radius: 16px;
    --cs-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.01);

    /* NEW BACKDROP IMAGE PROPERTIES */
    --cs-bg-image: url('images/Club And Socites Background.jpg'); /* Replace with your image file path or URL */
    --cs-bg-opacity: 0.14; /* Adjust value (e.g., 0.01 to 0.10) to tweak backdrop intensity */
}

.cs-section {
    position: relative; /* Hooks the absolute pseudo-layer within section boundaries */
    background-color: var(--cs-bg-main);
    padding: clamp(60px, 8vw, 120px) 0;
    font-family: 'Poppins', sans-serif;
    width: 100%;
    overflow: hidden;
}

/* CLUBS LOW OPACITY OVERLAY GRAPHIC LAYER */
.cs-section::before {
    content: '';
    position: absolute;
    inset: 0; /* Stretches seamlessly to all four corners of the section */
    background-image: var(--cs-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--cs-bg-opacity); /* Changes image opacity completely independently of text/cards */
    pointer-events: none; /* Allows user text-selection or click actions to pass straight through */
    z-index: 0; /* Sandwiches the image layer directly over the background color track */
}

.cs-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative; /* Establishes a clean local layout positioning plane */
    z-index: 1; /* Elevates your layout cards, headers, and quick preview modals above the background image */
}

/* --- A. LIGHT THEME BLOCK HEADER --- */
.cs-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto clamp(40px, 6vw, 60px) auto;
}

.cs-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--cs-green);
    background: rgba(0, 135, 81, 0.06);
    padding: 6px 18px;
    border-radius: 50px;
    margin-bottom: 16px;
}

.cs-title {
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    color: var(--cs-text-dark);
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}

.cs-subtitle {
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    color: var(--cs-text-muted);
    line-height: 1.65;
}

/* --- B. COMPACT 4-COLUMN RESPONSIVE GRID (DESCRIPTIONS OMITTED) --- */
.cs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 50px;
}

.cs-card {
    background: var(--cs-bg-card);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow);
    border: 1px solid rgba(15, 23, 42, 0.03);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

.cs-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.cs-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Badge-style club logos (circular / non-cover-friendly artwork) show fully, uncropped */
.cs-img-badge {
    object-fit: contain;
    background-color: #ffffff;
    padding: 14px;
}

.cs-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(15, 23, 42, 0.25) 100%);
    opacity: 0.7;
}

/* Structural Category Tags */
.cs-card-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 4px;
}

.tag-orange { background-color: var(--cs-orange); }
.tag-green  { background-color: var(--cs-green); }
.tag-blue   { background-color: var(--cs-blue); }
.tag-purple { background-color: var(--cs-purple); }

.cs-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex-grow: 1;
}

.cs-card-title {
    font-size: 1.15rem;
    color: var(--cs-text-dark);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 14px;
}

.cs-trigger-btn {
    background: none;
    border: none;
    color: var(--cs-green);
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
}

.cs-trigger-btn span {
    transition: transform 0.3s ease;
}

/* --- C. CARD ANIMATION AND HOVER STATES --- */
.cs-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.1);
}

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

.cs-card:hover .cs-trigger-btn {
    color: var(--cs-orange);
}

.cs-card:hover .cs-trigger-btn span {
    transform: translateX(4px);
}

/* --- D. SECTION FOOTER MAIN ACTION CTA --- */
.cs-footer-action {
    display: flex;
    justify-content: center;
}

.cs-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--cs-green);
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 16px 36px;
    border-radius: 50px;
    box-shadow: 0 10px 25px -6px rgba(0, 135, 81, 0.35);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cs-btn-svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.cs-primary-btn:hover {
    background: #0f172a;
    box-shadow: 0 10px 25px -6px rgba(15, 23, 42, 0.25);
    transform: translateY(-2px);
}

.cs-primary-btn:hover .cs-btn-svg {
    transform: translateX(4px);
}

/* ==========================================================================
   LIQUID GLASS INTERACTIVE OVERLAY MODAL SYSTEM ENGINE
   ========================================================================== */
.cs-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000; /* Stacks cleanly above standard page structures */
    background-color: rgba(226, 232, 240, 0.35);
    backdrop-filter: blur(0px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-modal-wrapper {
    padding: 24px;
    width: 100%;
    max-width: 780px;
    perspective: 1200px;
}

/* Organic Liquid Glass Core Framework Shell */
.cs-liquid-glass-panel {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 35px 70px -15px rgba(15, 23, 42, 0.15),
                0 0 0 1px rgba(255, 255, 255, 0.4) inset;
    backdrop-filter: blur(25px) saturate(195%);
    -webkit-backdrop-filter: blur(25px) saturate(195%);
    border-radius: 28px;
    padding: 40px;
    position: relative;
    
    /* Liquid physical pop-expansion configuration values */
    transform: scale(0.88) translateY(25px) rotateX(-8deg);
    border-radius: 55px 35px 65px 45px / 45px 65px 35px 55px; /* Organic liquid form state */
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.5s ease, 
                border-radius 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Active Transition Binds */
.cs-modal-backdrop.is-active {
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(16px);
}

.cs-modal-backdrop.is-active .cs-liquid-glass-panel {
    transform: scale(1) translateY(0) rotateX(0deg);
    opacity: 1;
    border-radius: 28px; /* Smoothly snaps to geometric layout stability */
}

/* Close Control Node */
.cs-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(15, 23, 42, 0.05);
    color: #0f172a;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    z-index: 10;
    transition: all 0.25s ease;
}

.cs-modal-close:hover {
    background: #0f172a;
    color: #ffffff;
    transform: rotate(90deg);
}

/* Core Interface Content Grid */
.cs-modal-content {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 36px;
    align-items: center;
}

.cs-modal-graphic {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 30px -10px rgba(0,0,0,0.12);
}

.cs-modal-graphic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ambient Highlight Shimmer Wave */
.cs-modal-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
    transform: translateX(-100%);
}

.cs-modal-backdrop.is-active .cs-modal-shimmer {
    transform: translateX(100%);
    transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.cs-modal-info {
    display: flex;
    flex-direction: column;
}

.cs-modal-headline {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--cs-text-dark);
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.cs-modal-paragraph {
    font-size: 0.95rem;
    color: var(--cs-text-muted);
    line-height: 1.65;
    margin-bottom: 24px;
}

/* Internal Modal Explore Action Arrow Button */
.cs-modal-explore-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 2px solid var(--cs-green);
    color: var(--cs-green);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 24px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.cs-modal-explore-btn svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.cs-modal-explore-btn:hover {
    background: var(--cs-green);
    color: #ffffff;
}

.cs-modal-explore-btn:hover svg {
    transform: translateX(3px);
}

/* ==========================================================================
   RESPONSIVE LAYOUT ENGINE FOR NO CONTENT DRIFT ON MOBILE VIEWPORTS
   ========================================================================== */
@media (max-width: 1150px) {
    .cs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 680px) {
    .cs-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto 40px auto;
    }
    
    .cs-liquid-glass-panel {
        padding: 32px 20px;
    }
    
    .cs-modal-content {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
    }
    
    .cs-modal-graphic {
        max-width: 160px;
        margin: 0 auto;
    }
    
    .cs-modal-explore-btn {
        margin: 0 auto;
    }
    
    .cs-primary-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   DYNAMIC COMPACT EVENT GALLERY - LIGHT SYSTEM ARCHITECTURE
   ========================================================================== */
:root {
    --gl-bg-main: #f8fafc;       /* Crisp light theme surface base */
    --gl-bg-card: #ffffff;       /* Pure white solid grid elements */
    --gl-text-dark: #0f172a;     /* Deep slate for clear primary headlines */
    --gl-text-muted: #475569;    /* Balanced gray for secondary descriptions */
    --gl-accent-green: #008751;  /* Corporate Signature Green */
    --gl-accent-orange: #ff6f00; /* Secondary Highlights Orange */
    --gl-radius: 20px;           /* Smooth curved frame corner metrics */
    --gl-card-border: rgba(15, 23, 42, 0.05);
    
    /* BACKGROUND IMAGE CONTROLS FOR THE GALLERY BACKDROP IF NEEDED */
    --gl-backdrop-opacity: 0.03;
}

.gl-section {
    position: relative;
    background-color: var(--gl-bg-main);
    padding: clamp(60px, 8vw, 120px) 0;
    width: 100%;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
}

/* OPTIONAL: Low Opacity Background Graphic Layer for Section Depth */
.gl-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--gl-backdrop-opacity);
    pointer-events: none;
    z-index: 0;
}

.gl-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

/* --- A. LIGHT THEME HEADERS --- */
.gl-header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto clamp(40px, 6vw, 64px) auto;
}

.gl-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--gl-accent-green);
    background: rgba(0, 135, 81, 0.06);
    padding: 6px 18px;
    border-radius: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(0, 135, 81, 0.15);
}

.gl-title {
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    color: var(--gl-text-dark);
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 18px;
}

.gl-subtitle {
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    color: var(--gl-text-muted);
    line-height: 1.7;
}

/* --- B. HIGH-CONTRAST BENTO GRID LAYOUT --- */
.gl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 240px;
    gap: 20px;
    margin-bottom: 56px;
}

.gl-item {
    position: relative;
    background: var(--gl-bg-card);
    border-radius: var(--gl-radius);
    overflow: hidden;
    border: 1px solid var(--gl-card-border);
    box-shadow: 0 10px 25px -10px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.01);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.gl-item.scroll-animate {
    filter: blur(6px);
    transition: opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.05s cubic-bezier(0.16, 1, 0.3, 1),
                filter 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}
.gl-item.scroll-animate.active {
    filter: blur(0);
}

/* Bento Sizing System */
.gl-item.item-tall {
    grid-row: span 2;
}

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

.gl-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Elegant Text Overlay Gradient Adjusted for Light Design Panels */
.gl-item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
        rgba(15, 23, 42, 0) 35%, 
        rgba(15, 23, 42, 0.35) 60%, 
        rgba(15, 23, 42, 0.85) 100%);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.gl-item-tag {
    font-size: 0.65rem;
    font-weight: 700;
    color: #ffffff;
    background: var(--gl-accent-orange);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    transform: translateY(4px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.gl-item.item-tall .gl-item-tag {
    background: var(--gl-accent-green);
}

.gl-item-label {
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    color: #ffffff;
    font-weight: 700;
    line-height: 1.4;
    transform: translateY(4px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- C. HOVER ANIMATIONS --- */
.gl-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.12);
    border-color: rgba(15, 23, 42, 0.08);
}

.gl-item:hover .gl-img {
    transform: scale(1.05);
}

.gl-item:hover .gl-item-tag,
.gl-item:hover .gl-item-label {
    transform: translateY(0);
}

/* --- D. REDIRECT OUTBOUND HUB ACTION BUTTON --- */
.gl-action-hub {
    display: flex;
    justify-content: center;
}

.gl-portal-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: var(--gl-accent-green);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 16px 36px;
    border-radius: 50px;
    box-shadow: 0 10px 25px -6px rgba(0, 135, 81, 0.3);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.gl-btn-svg {
    width: 15px;
    height: 15px;
    color: #ffffff;
    transition: transform 0.3s ease;
}

.gl-portal-btn:hover {
    background: #0f172a;
    box-shadow: 0 10px 25px -6px rgba(15, 23, 42, 0.2);
    transform: translateY(-2px);
}

.gl-portal-btn:hover .gl-btn-svg {
    transform: translate(2px, -2px);
}

/* ==========================================================================
   RESPONSIVE LAYOUT ENGINE & ANTI-DRIFT BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
    .gl-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 220px;
        gap: 16px;
    }
    .gl-item.item-wide {
        grid-column: span 1; /* Drop scaling safely to keep structural balance */
    }
}

@media (max-width: 640px) {
    .gl-section {
        padding: 60px 0;
    }

    .gl-grid {
        grid-template-columns: 1fr; /* 100% stack layout fluid control on mobile screens */
        grid-auto-rows: 240px;
        gap: 14px;
        margin-bottom: 40px;
    }

    .gl-item.item-tall {
        grid-row: span 1; /* Reset extreme height blocks for single-column views */
    }

    .gl-item-overlay {
        padding: 20px;
    }

    .gl-portal-btn {
        width: 100%;
        justify-content: center;
        font-size: 0.78rem;
        padding: 16px 20px;
    }
}

/* ==========================================================================
   MILESTONE BANNER DESIGN - LIGHT CANVAS GRADIENT ARCHITECTURE
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@800;900&family=Play:wght@400;700&display=swap');

.milestone-section {
    position: relative;
    width: 100%;
    background: #ffffff;
    /* Soft ambient golden warm glow gradient in lower corners mimicking your design image */
    background: radial-gradient(circle at 50% 130%, #fff1cc 0%, #ffffff 85%);
    padding: 100px 0 80px 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.milestone-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* --- A. THE "48 YEARS AND COUNTING" TEXT GRAPHIC BLOCK --- */
.milestone-graphic-block {
    display: inline-block;
    margin-bottom: 45px;
    user-select: none;
}

.mg-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Mimics the sharp mechanical slant style from the original image */
    transform: skewX(-12deg); 
    font-family: 'Orbitron', sans-serif;
    line-height: 0.85;
}

/* Colors extracted exactly from image branding */
.color-orange { color: #f2722b; }
.color-green  { color: #347c2a; }

/* Left Number Side Layout */
.mg-number-side {
    display: flex;
    font-size: clamp(6.5rem, 14vw, 11rem);
    font-weight: 900;
    letter-spacing: -6px;
}

/* Right Copy Block Side Layout */
.mg-text-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-weight: 900;
    text-transform: lowercase;
    letter-spacing: -1px;
}

.mg-row-top {
    font-size: clamp(3rem, 6.2vw, 4.9rem);
    margin-bottom: 6px;
}

.mg-row-bottom {
    font-size: clamp(3.2rem, 6.5vw, 5.2rem);
}

/* --- B. CHROMATIC GLITCH RENDERING ENGINE --- */
.mg-num, .mg-row-top, .mg-row-bottom {
    position: relative;
}

.mg-num::before, .mg-num::after,
.mg-row-top::before, .mg-row-top::after,
.mg-row-bottom::before, .mg-row-bottom::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    clip: rect(0, 0, 0, 0);
    display: none;
}

/* Active Glitch State Animations executed by JS triggers */
.milestone-section.is-glitching .mg-num::before,
.milestone-section.is-glitching .mg-row-top::before,
.milestone-section.is-glitching .mg-row-bottom::before {
    display: block;
    left: -2px;
    text-shadow: 2px 0 #00f0ff;
    animation: glitch-slice-top 0.25s infinite linear alternate-reverse;
}

.milestone-section.is-glitching .mg-num::after,
.milestone-section.is-glitching .mg-row-top::after,
.milestone-section.is-glitching .mg-row-bottom::after {
    display: block;
    left: 2px;
    text-shadow: -2px 0 #ff0055;
    animation: glitch-slice-bottom 0.25s infinite linear alternate-reverse;
}

/* --- C. DESCRIPTION PARAGRAPH DESIGN --- */
.milestone-body {
    max-width: 960px;
    margin-bottom: 40px;
}

.milestone-paragraph {
    font-family: 'Play', sans-serif;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    color: #1e293b;
    line-height: 1.7;
    font-weight: 400;
    letter-spacing: 0.5px;
    word-spacing: 1px;
}

/* --- D. HISTORY REDIRECT LINK --- */
.milestone-action {
    margin-bottom: 40px;
}

.milestone-link {
    font-family: 'Play', sans-serif;
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    color: #f2722b;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 1px;
    transition: letter-spacing 0.3s ease, color 0.3s ease;
}

.milestone-link:hover {
    color: #347c2a;
    letter-spacing: 2px;
}

/* --- E. THREE DOTS SYSTEM --- */
.milestone-indicators {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.m-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.bg-green  { background-color: #347c2a; }
.bg-orange { background-color: #f2722b; }

/* --- F. MEDIA QUERY BREAKPOINT ADJUSTMENTS --- */
@media (max-width: 768px) {
    .milestone-section {
        padding: 60px 0;
    }
    .mg-wrapper {
        flex-direction: column;
        gap: 0;
        transform: skewX(-8deg);
    }
    .mg-text-side {
        align-items: center;
    }
    .mg-number-side {
        letter-spacing: -3px;
    }
}

/* ==========================================================================
   FOOTER FRAMEWORK - STYLIZED SYSTEM SPECIFICATION
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Poppins:wght@400;500;600;700&display=swap');

.site-footer {
    position: relative;
    width: 100%;
    /* Dark Blueprint stylized map background directly modeling Footer Section.jpg */
    background-image: linear-gradient(rgba(11, 23, 44, 0.88), rgba(11, 23, 44, 0.92)), 
                      url('images/Map.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 60px;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
}

/* Layered click engine allowing complete map background activation */
.footer-map-bg-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 90px); /* Keeps link clear of the bottom text curve badge */
    z-index: 1;
    cursor: pointer;
}

.footer-main-content {
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    z-index: 2; /* Ensures inner link items remain accessible over background link maps */
}

/* --- A. GRID STRUCTURE CONTROL --- */
.footer-grid-container {
    display: grid;
    grid-template-columns: 1.1fr 0.8fr 1.1fr;
    gap: 40px;
    align-items: flex-start;
}

.footer-column {
    display: flex;
    flex-direction: column;
}

/* --- B. TEXT BRANDING COLOR VALUES --- */
.footer-brand-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.2rem, 2.2vw, 1.65rem);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.5px;
    margin: 0 0 28px 0;
    color: #ffffff;
}

.text-green {
    color: #4ca61e; /* Match crisp foliage green styling from screenshot */
}

.text-orange {
    color: #f2722b; /* Match deep solar accent orange directly */
}

.footer-section-heading {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 16px 0;
}

/* --- C. ADDRESS & CONTACT PROPERTIES --- */
.contact-details-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-item {
    font-size: 0.92rem;
    color: #ffffff;
    font-weight: 500;
    line-height: 1.45;
    margin: 0;
}

.contact-link {
    text-decoration: none;
    display: inline-block;
    width: fit-content;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.contact-link:hover {
    color: #4ca61e;
    transform: translateX(3px);
}

.interactive-email {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.interactive-email:hover {
    color: #4ca61e;
}

/* --- D. CENTER MAP NAVIGATION BADGE --- */
.map-badge-col {
    align-items: center;
    justify-content: center;
    padding-top: 10px;
}

.maps-display-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: rgba(30, 41, 59, 0.7);
    border: 2px solid #575e6a;
    padding: 12px 20px;
    border-radius: 4px;
    text-decoration: none;
    max-width: 320px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.maps-display-card:hover {
    transform: translateY(-2px);
    background-color: rgba(30, 41, 59, 0.9);
}

.maps-pin-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
}

.maps-pin-svg {
    width: 32px;
    height: 32px;
    fill: #1d72b8; /* Google Navigation Standard Tint Variant */
}

.maps-card-typography {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.m-card-title {
    font-family: 'Orbitron', sans-serif;
    color: #d1d5db;
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.5px;
}

.m-card-subtitle {
    font-family: 'Orbitron', sans-serif;
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 900;
    margin: 1px 0 3px 0;
}

.m-card-status {
    font-size: 0.65rem;
    color: #94a3b8;
    font-weight: 700;
    letter-spacing: 1px;
}

/* --- E. SOCIAL CHANNELS & POLICY ACTIONS --- */
.social-links-col {
    align-items: flex-end;
}

.alignment-right {
    text-align: right;
}

.social-icon-row {
    display: flex;
    gap: 14px;
    margin-bottom: 24px;
}

.social-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.social-svg {
    width: 22px;
    height: 22px;
    fill: #ffffff;
    transition: fill 0.2s ease;
}

.social-icon-wrapper:hover {
    transform: scale(1.12);
}

.social-icon-wrapper:hover .social-svg {
    fill: #f2722b;
}

.legal-links-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.policy-link {
    font-size: 0.95rem;
    color: #f2722b; /* Pale gold/orange links modeled directly from Footer Section.jpg */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease, padding-right 0.2s ease;
}

.policy-link:hover {
    color: #ffffff;
    padding-right: 4px;
}

/* --- F. BOTTOM CAPSULE/ARC DISPLAY BAR --- */
.footer-bottom-vault {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 50px;
    z-index: 3;
}

.footer-arc-badge {
    background-color: #ffffff;
    color: #000000;
    /* Generates the clean broad layout curve arch matching your design specification */
    border-top-left-radius: 120px 100px;
    border-top-right-radius: 120px 100px;
    padding: 24px 40px 18px 40px;
    width: 82%;
    max-width: 880px;
    text-align: center;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
}

.copyright-statement {
    font-size: clamp(0.72rem, 1.4vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.2px;
    margin: 0 0 4px 0;
    color: #0f172a;
}

.school-boys-credit {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #64748b;
    margin: 0;
}

/* ==========================================================================
   MOBILE SMOOTH RESPONSIVE ENGINE (ANTI-DRIFT AND OPTIMIZATION LAYERS)
   ========================================================================== */
@media (max-width: 992px) {
    .footer-grid-container {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
    }

    .footer-column {
        align-items: center !important;
    }

    .alignment-right {
        text-align: center;
    }

    .legal-links-stack {
        align-items: center;
    }

    .footer-brand-title {
        margin-bottom: 20px;
    }

    .footer-arc-badge {
        width: 92%;
        border-top-left-radius: 60px 40px;
        border-top-right-radius: 60px 40px;
        padding: 20px 20px 14px 20px;
    }
}

@media (max-width: 480px) {
    .site-footer {
        padding-top: 45px;
    }

    .footer-arc-badge {
        width: 100%;
        border-top-left-radius: 35px 25px;
        border-top-right-radius: 35px 25px;
    }
}

/* ==========================================================================
   WIDESCREEN PRESIDENT'S WEEK GRID ENGINE (Ref: News to home page_2.jpg)
   ========================================================================== */
.pw-widescreen-viewport {
    width: 100%;
    padding: 30px 40px;
    background-color: #f1f5f9; /* Light mode: light canvas around the dark-blue card */
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    /* NOTE: this section also carries the ".scroll-animate" class, which needs
       its own opacity/transform transition to animate in on scroll. Both are
       declared together here (instead of just "background-color 0.5s ease")
       because a later `transition` shorthand fully replaces an earlier one of
       equal specificity — without this, the scroll-in reveal was silently
       disabled on both the News and Events banner sections. */
    transition: background-color 0.5s ease,
                opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

.pw-full-banner-card {
    width: 100%;
    max-width: 1440px; /* Expansive layout matching your top navigation bar */
    background: linear-gradient(135deg, #020b18 0%, #051429 60%, #091c36 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 32px;
    padding: 40px 60px 30px 60px;
    /* Soft green neon glow in light mode (this box is intentionally dark-blue by default) */
    box-shadow: 0 25px 60px rgba(2, 11, 24, 0.4), 0 0 0 1px rgba(0, 200, 83, 0.08), 0 0 45px rgba(0, 200, 83, 0.22);
    position: relative;
    transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

/* Widescreen Header Layout */
.pw-top-flex-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 20px;
}

.pw-lbl-updates {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    transition: color 0.5s ease;
}

.pw-badge-category {
    border: 1.5px solid #f97316;
    color: #f97316;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px 16px;
    border-radius: 20px;
    margin-left: 14px;
    letter-spacing: 0.5px;
    display: inline-block;
}

/* Branding & Accent Markers */
.pw-brand-identity {
    text-align: right;
}

.pw-brand-heading {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 900;
    margin: 0;
    letter-spacing: 0.5px;
    line-height: 1;
    transition: color 0.5s ease;
}

.pw-sub-accent-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 6px;
}

.pw-color-rules {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 60px;
}

.pw-color-rules .rule-emerald { height: 3px; background-color: #008751; width: 100%; }
.pw-color-rules .rule-amber { height: 3px; background-color: #f97316; width: 70%; margin-left: auto; }

.pw-sub-heading-text {
    color: #f97316;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
}

/* Big Canvas Splitting Grid */
.pw-main-widescreen-grid {
    display: grid;
    grid-template-columns: 490px 1fr;
    gap: 70px;
    align-items: center;
    min-height: 430px;
    margin-bottom: 15px;
}

/* Left Side Dynamic News Image Window */
.pw-feature-image-slot {
    width: 490px;
    height: 430px;
    max-height: 430px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 20px;
    cursor: pointer;
}

.pw-news-hero-graphic {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills the frame edge-to-edge at full "zoomed" resolution */
    object-position: center;
    transition: transform 0.4s ease;
}

/* Premium Widescreen Glassmorphism Capsule */
.pw-glass-capsule-wrapper {
    width: 100%;
}

.pw-glass-capsule {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 80px; /* Gives it the clean capsule look from your photo */
    padding: 45px 55px;
    box-shadow: inset 0 1px 30px rgba(255, 255, 255, 0.03), 0 15px 35px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease, background 0.4s ease, border-color 0.4s ease;
}

/* Content Typography inside Glass */
.pw-dynamic-title {
    color: #f97316; /* Precise orange heading color */
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 6px 0;
}

.pw-dynamic-meta-row {
    margin-bottom: 20px;
}

.pw-dynamic-date {
    color: #f1f5f9;
    font-size: 0.95rem;
    font-weight: 700;
    display: block;
    transition: color 0.5s ease;
}

.pw-dynamic-tag {
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: lowercase;
}

.pw-dynamic-excerpt {
    color: #e2e8f0;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 10px 0;
    transition: color 0.5s ease;
    /* Applies to BOTH the News/Announcements card and the Events/Calendar
       card (they share this class) — long descriptions get clipped to 3
       lines with a trailing "..." instead of overflowing or getting cut
       off mid-word. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pw-action-anchor {
    color: #f97316;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.5px;
}

/* Empty-state message shown when no news/event has actually been
   published yet — deliberately calmer than the orange "live" heading
   so it doesn't read like a real headline. */
.pw-dynamic-title.pw-empty-state-title {
    color: #94a3b8;
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.pw-action-anchor:hover {
    text-decoration: underline;
}

/* Control Footers */
.pw-component-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.pw-carousel-dots-row {
    display: flex;
    gap: 10px;
}

.pw-navigation-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #f97316;
    opacity: 0.3;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pw-navigation-dot.active {
    background-color: #008751; /* Active item shifts to emerald green */
    opacity: 1;
    transform: scale(1.2);
}

.pw-timestamp-display {
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    transition: color 0.5s ease;
}

/* Responsive Compression Handling */
@media (max-width: 1200px) {
    .pw-full-banner-card { padding: 35px 40px; }
    .pw-glass-capsule { padding: 35px 40px; border-radius: 50px; }
    .pw-dynamic-title { font-size: 1.6rem; }
}

@media (max-width: 992px) {
    .pw-main-widescreen-grid { grid-template-columns: 1fr; gap: 40px; }
    .pw-feature-image-slot { width: 100%; max-width: 320px; height: 260px; max-height: 260px; margin: 0 auto; }
    .pw-news-hero-graphic { max-height: 260px; }
}

@media (max-width: 600px) {
    .pw-widescreen-viewport { padding: 15px; }
    .pw-full-banner-card { padding: 25px 20px; border-radius: 20px; }
    .pw-top-flex-header { flex-direction: column; gap: 15px; }
    .pw-brand-identity { text-align: left; }
    .pw-sub-accent-row { justify-content: flex-start; }
    .pw-brand-heading { font-size: 2rem; }
    .pw-glass-capsule { border-radius: 30px; padding: 25px; }
    .pw-dynamic-title { font-size: 1.3rem; }
}
/* --- MULTI-SECTION DYNAMIC TAB SYSTEM --- */
.pw-meta-tagging {
    display: flex;
    gap: 30px;
    align-items: center;
}

.pw-tab-btn {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #64748b; /* Inactive tab label is muted gray */
    cursor: pointer;
    text-transform: uppercase;
    position: relative;
    padding: 5px 0;
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pw-tab-btn:hover {
    color: #cbd5e1;
}

.pw-tab-btn.active {
    color: #f97316; /* Active tab label is orange */
}

.pw-tab-btn::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #008751, #f97316);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pw-tab-btn.active::after {
    width: 100%;
}

.pw-main-widescreen-grid.tab-fade-anim {
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}

.pw-main-widescreen-grid.tab-changing {
    opacity: 0;
    transform: translateY(10px);
}

/* --- SMOOTH PER-SLIDE CROSSFADE ANIMATION (prevents jumbled/flicker text swaps) --- */
.pw-glass-capsule,
.pw-news-hero-graphic {
    will-change: opacity, transform;
}

.pw-glass-capsule.pw-slide-out,
.pw-news-hero-graphic.pw-slide-out {
    animation: pwSlideOutAnim 0.22s ease forwards;
}

.pw-glass-capsule.pw-slide-in,
.pw-news-hero-graphic.pw-slide-in {
    animation: pwSlideInAnim 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pwSlideOutAnim {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-10px); }
}

@keyframes pwSlideInAnim {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* --- GOOGLE CALENDAR PORTAL MODAL BLUR SYSTEM --- */
/* ==========================================================================
   ADVANCE ULTRA-PREMIUM CYBERPUNK GLASSMORPHIC CALENDAR PORTAL STYLES
   ========================================================================== */
.adv-calendar-modal {
    display: none;
    position: fixed;
    z-index: 100000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(2, 4, 10, 0.6);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    align-items: center;
    justify-content: center;
}

.adv-calendar-modal.show {
    display: flex;
    opacity: 1;
}

.adv-calendar-glass-panel {
    background: rgba(10, 20, 44, 0.45);
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 35px 25px 25px 25px;
    border-radius: 28px;
    width: 92%;
    max-width: 1100px;
    height: 82vh;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), 
                inset 0 1px 2px rgba(255, 255, 255, 0.1);
    position: relative;
    transform: scale(0.8) translateY(40px);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.adv-calendar-modal.show .adv-calendar-glass-panel {
    transform: scale(1) translateY(0);
}

/* Neon Breathing Pulse Glow Effect */
.adv-calendar-glow-edge {
    position: absolute;
    top: -1px; left: -1px; right: -1px; bottom: -1px;
    border-radius: 28px;
    background: linear-gradient(135deg, #039be5, #0b8043, #d97706, #039be5);
    background-size: 300% 300%;
    z-index: -1;
    opacity: 0.4;
    filter: blur(8px);
    animation: advNeonPulse 8s ease infinite;
}

@keyframes advNeonPulse {
    0% { background-position: 0% 50%; opacity: 0.3; }
    50% { background-position: 100% 50%; opacity: 0.5; filter: blur(12px); }
    100% { background-position: 0% 50%; opacity: 0.3; }
}

/* Futuristic Premium Close Button */
.adv-close-calendar-btn {
    color: rgba(255, 255, 255, 0.6);
    position: absolute;
    right: 30px;
    top: 12px;
    font-size: 34px;
    font-weight: 200;
    cursor: pointer;
    line-height: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.adv-close-calendar-btn:hover {
    color: #ffffff;
    background: rgba(239, 68, 68, 0.8);
    border-color: rgba(239, 68, 68, 1);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
    transform: rotate(90deg);
}

.adv-calendar-inner-frame {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: inset 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* --- Opening glitch flicker: plays briefly the moment the calendar is
   clicked, so the portal feels like it "snaps" into view rather than just
   fading in --- */
.adv-calendar-modal.calendar-opening-glitch .adv-calendar-glass-panel {
    animation: calendarOpenGlitch 0.45s steps(1, end);
}

@keyframes calendarOpenGlitch {
    0%   { clip-path: inset(0 0 100% 0); opacity: 0; transform: scale(0.8) translateY(40px); }
    15%  { clip-path: inset(20% 0 40% 0); opacity: 0.6; transform: scale(0.85) translateY(30px) translateX(-4px); }
    30%  { clip-path: inset(55% 0 5% 0);  opacity: 0.8; transform: scale(0.9) translateY(20px) translateX(3px); }
    45%  { clip-path: inset(5% 0 60% 0);  opacity: 0.9; transform: scale(0.95) translateY(10px) translateX(-2px); }
    60%  { clip-path: inset(0 0 0 0);     opacity: 1;   transform: scale(1) translateY(0); }
    100% { clip-path: inset(0 0 0 0);     opacity: 1;   transform: scale(1) translateY(0); }
}

/* ==========================================================================
   HOME GALLERY PREVIEW — LIQUID GLASS LIGHTBOX
   ========================================================================== */
.home-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(8, 12, 20, 0.55);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.home-lightbox-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.home-lightbox-glass {
    position: relative;
    width: 100%;
    max-width: 920px;
    padding: 18px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 30px 70px -10px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    transform: scale(0.94) translateY(14px);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-lightbox-overlay.active .home-lightbox-glass {
    transform: scale(1) translateY(0);
}

.home-lightbox-glass img {
    display: block;
    width: 100%;
    max-height: 74vh;
    object-fit: contain;
    border-radius: 22px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

.home-lightbox-caption {
    text-align: center;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.2px;
    margin-top: 16px;
    opacity: 0.9;
}

.home-lightbox-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s ease, background-color 0.25s ease;
    z-index: 2;
}

.home-lightbox-close:hover {
    background-color: var(--gl-accent-green, #008751);
    transform: scale(1.1) rotate(90deg);
}

.gl-item { cursor: pointer; }

@media (max-width: 640px) {
    .home-lightbox-glass { padding: 12px; border-radius: 22px; }
    .home-lightbox-glass img { border-radius: 16px; max-height: 60vh; }
    .home-lightbox-close { top: -14px; right: -8px; width: 36px; height: 36px; font-size: 1.3rem; }
}

/* ==========================================================================
   GLOBAL DARK MODE THEME LAYER
   Overrides the light-background sections when body.dark-mode is active.
   Sections already dark (hero, navbar, motto-section, strength-section,
   footer, quick menu, search overlay, preloader) are left untouched.
   ========================================================================== */

/* --- Shared surface + text tokens for the light sections --- */
body.dark-mode {
    --sl-bg-main: #0b1220;
    --sl-bg-card: #101a2c;
    --sl-text-primary: #f1f5f9;
    --sl-text-secondary: #94a3b8;

    --cs-bg-main: #0b1220;
    --cs-bg-card: #101a2c;
    --cs-text-dark: #f1f5f9;
    --cs-text-muted: #94a3b8;

    --gl-bg-main: #0b1220;
    --gl-bg-card: #101a2c;
    --gl-text-dark: #f1f5f9;
    --gl-text-muted: #94a3b8;
    --gl-card-border: rgba(255, 255, 255, 0.08);
}

/* --- Academics section (uses direct hex values, so override explicitly) --- */
body.dark-mode .acad-section {
    background-color: #0b1220;
}

body.dark-mode .acad-main-heading,
body.dark-mode .acad-card-title-si {
    color: #f1f5f9;
}

body.dark-mode .acad-sub-paragraph,
body.dark-mode .acad-card-desc,
body.dark-mode .acad-card-title-en {
    color: #94a3b8;
}

body.dark-mode .acad-card {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .acad-card::before {
    background: linear-gradient(135deg, rgba(0, 200, 83, 0.14), rgba(223, 134, 38, 0.14));
}

/* --- School Vision / Mission (motto) section --- */
body.dark-mode .motto-section::before {
    opacity: 1;
}

body.dark-mode .motto-bg-overlay {
    background: linear-gradient(180deg, rgba(3, 7, 16, 0.93) 0%, rgba(6, 11, 25, 0.96) 100%);
}

body.dark-mode .motto-sinhala-highlight {
    color: #ffffff;
}

body.dark-mode .motto-sinhala-paragraph {
    color: #e2e8f0;
}

body.dark-mode .motto-english-translation {
    color: #94a3b8;
}

body.dark-mode .motto-indicator-dot {
    background-color: rgba(255, 255, 255, 0.2);
}

/* The rule above (body.dark-mode .motto-indicator-dot) is more specific than
   the plain .active-green/.active-orange selectors because of the extra
   "body" element, so without these it silently washes out the green/orange
   dots in dark mode. These restore the intended green-orange-green look. */
body.dark-mode .motto-indicator-dot.active-green {
    background-color: #347c2a;
}

body.dark-mode .motto-indicator-dot.active-orange {
    background-color: #df8626;
}

/* --- Milestone / School History section --- */
body.dark-mode .milestone-section {
    background: radial-gradient(circle at 50% 130%, #14210f 0%, #0b1220 85%);
}

body.dark-mode .milestone-paragraph {
    color: #cbd5e1;
}

/* --- Gallery preview badge / heading text already uses gl-text vars, but the
   badge pill background is hard-coded light — soften it for dark mode --- */
body.dark-mode .gl-badge,
body.dark-mode .cs-badge,
body.dark-mode .acad-badge-pill {
    background: rgba(0, 200, 83, 0.14);
}

/* --- Card surfaces that reference --sl-bg-card / --cs-bg-card / --gl-bg-card
   directly get slightly brighter borders so they still read as "cards" on a
   dark canvas --- */
body.dark-mode .sl-sport-card,
body.dark-mode .cs-card,
body.dark-mode .monitor-card {
    border-color: rgba(255, 255, 255, 0.08);
}

/* --- Quick Preview liquid-glass modals (Academics / Sports / Clubs) were
   hardcoded to a white frosted glass, so they stayed light even in dark
   mode. Give the panel and its close button a dark frosted treatment
   instead; text already re-colors on its own via --sl-text-primary /
   --sl-text-secondary. --- */
body.dark-mode .sl-liquid-glass-panel,
body.dark-mode .cs-liquid-glass-panel {
    background: rgba(16, 26, 44, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 35px 70px -15px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

body.dark-mode .sl-modal-backdrop,
body.dark-mode .cs-modal-backdrop {
    background-color: rgba(4, 8, 16, 0.55);
}

body.dark-mode .sl-modal-close,
body.dark-mode .cs-modal-close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
}

body.dark-mode .sl-modal-close:hover,
body.dark-mode .cs-modal-close:hover {
    background: #00c853;
    color: #0b1220;
}

body.dark-mode .sl-modal-graphic-shimmer,
body.dark-mode .cs-modal-graphic-shimmer {
    background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
}

/* --- Badge-style club/society logos (e.g. Photography & Art Society) were
   pinned to a white backing plate; switch them dark like every other card
   surface in dark mode --- */
body.dark-mode .cs-img-badge {
    background-color: #101a2c;
}

/* --- Base page canvas fallback (prevents any un-themed gaps from flashing white) --- */
body.dark-mode {
    background-color: #0b1220;
}

/* --- Smooth icon flip inside the toggle is handled in the toggle's own
   rules above; this just ensures nav text stays legible in both modes --- */
body.dark-mode .nav-links a {
    color: #f1f5f9;
}

/* --- Principal's Message section --- */
body.dark-mode .principal-section {
    background-color: #0b1220;
}

body.dark-mode .pm-main-heading {
    color: #f1f5f9;
}

body.dark-mode .pm-message-body p {
    color: #94a3b8;
}

body.dark-mode .pm-mini-title {
    color: #f1f5f9;
}

body.dark-mode .pm-mini-subtitle {
    color: #94a3b8;
}

/* --- News Updates & Events Updates (President's Week): the outer canvas
   is light by default (light mode) and the card itself is dark-blue.
   In dark mode this flips — the outer canvas turns dark, and the card
   becomes a clean white showcase box. --- */
body.dark-mode .pw-widescreen-viewport {
    background-color: #0b1220;
}

body.dark-mode .pw-full-banner-card {
    /* Softer muted slate instead of stark white — easier on the eyes in
       dark mode while keeping enough contrast for the dark text inside. */
    background: linear-gradient(135deg, #e7ecf2 0%, #dbe2ea 55%, #cbd5e1 100%);
    border-color: rgba(15, 23, 42, 0.06);
    /* Soft orange neon glow in dark mode */
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(249, 115, 22, 0.1), 0 0 40px rgba(249, 115, 22, 0.22);
}

body.dark-mode .pw-lbl-updates,
body.dark-mode .pw-brand-heading {
    color: #0f172a;
}

body.dark-mode .pw-tab-btn.active {
    color: #f97316;
}

body.dark-mode .pw-tab-btn {
    color: #475569;
}

body.dark-mode .pw-tab-btn:hover {
    color: #94a3b8;
}

body.dark-mode .pw-glass-capsule {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: inset 0 1px 20px rgba(255, 255, 255, 0.6), 0 15px 35px rgba(15, 23, 42, 0.05);
}

body.dark-mode .pw-dynamic-date {
    color: #0f172a;
}

body.dark-mode .pw-dynamic-excerpt {
    color: #334155;
}

body.dark-mode .pw-timestamp-display {
    color: #475569;
}

/* --- OUR STRENGTH IN NUMBERS: diagonal ribbon removed per request; section
   now uses a single permanent dark/dark-blue mixed gradient background --- */

/* --- Vision & Mission center crest: enlarged further per request --- */
.motto-crest-frame {
    width: clamp(260px, 32vw, 400px);
}

/* --- Academics heading: drop the green/orange divider bar and tighten
   the spacing so the heading sits closer to the badge pill --- */
.acad-heading-bar {
    display: none;
}

.acad-main-heading {
    margin-bottom: 14px;
}

/* --- Hero logo: a second, distinct animation layered on top of the existing
   float (a slow shimmering glow pulse) --- */
.large-crest {
    animation: heroCrestLoop 5s ease-in-out infinite, heroCrestGlowPulse 3.2s ease-in-out infinite;
}

@keyframes heroCrestGlowPulse {
    0%, 100% { filter: drop-shadow(0 10px 20px rgba(0,0,0,0.7)) drop-shadow(0 0 0px rgba(255, 183, 3, 0)); }
    50%      { filter: drop-shadow(0 10px 20px rgba(0,0,0,0.7)) drop-shadow(0 0 30px rgba(255, 183, 3, 0.55)); }
}

/* Full-page theme-transition-veil glitch now lives centrally in
   partials.js's SHARED_CHROME_CSS so it plays identically on every page. */

/* --- NAVBAR CHAT LAUNCHER ---
   Sits just before the Search icon, matching the other nav icon
   buttons in size, with a solid neon-green fill and a plain white
   message icon on top. It idles with a slow neon "blink" glow and
   fires a quick pulse burst on click before handing off to chat.html. */
.nav-icons .nav-chat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #00c853;
    border: 1px solid #00e676;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    animation: navChatNeoBlink 2.2s ease-in-out infinite;
}

.nav-icons .nav-chat-btn:hover {
    background: #00e676;
    transform: translateY(-1px);
}

.nav-icons .nav-chat-btn.nav-chat-btn-clicked {
    animation: navChatClickPulse 0.55s ease;
}

body.dark-mode .nav-icons .nav-chat-btn {
    background: #00b84a;
    border-color: #00e676;
}

/* Idle loop: a soft neon glow that breathes up and down, like a small
   green neon sign blinking, even when nobody has touched it. */
@keyframes navChatNeoBlink {
    0%, 100% {
        box-shadow: 0 0 3px rgba(0, 230, 118, 0.35), 0 0 0 rgba(0, 230, 118, 0);
    }
    50% {
        box-shadow: 0 0 12px rgba(0, 230, 118, 0.95), 0 0 22px rgba(0, 230, 118, 0.55);
    }
}

/* Click burst: a brief scale + flare that plays the moment the button
   is pressed, right before the page navigates to chat.html. */
@keyframes navChatClickPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 6px rgba(0, 230, 118, 0.6);
    }
    35% {
        transform: scale(1.28);
        box-shadow: 0 0 26px rgba(0, 230, 118, 1), 0 0 42px rgba(0, 230, 118, 0.65);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 6px rgba(0, 230, 118, 0.6);
    }
}

/* --- 48 years and counting: a clearly readable, continuously looping glitch
   burst, once every 0.75s --- */
.milestone-graphic-block .mg-num,
.milestone-graphic-block .mg-row-top,
.milestone-graphic-block .mg-row-bottom {
    animation: mgAmbientGlitchLoop 0.75s steps(1, end) infinite;
}

@keyframes mgAmbientGlitchLoop {
    0%, 60%, 100% { transform: translate(0, 0); filter: none; }
    64% { transform: translate(-3px, 1px); filter: drop-shadow(2px 0 #00f0ff) drop-shadow(-2px 0 #ff0055); }
    70% { transform: translate(3px, -1px); filter: none; }
    76% { transform: translate(-2px, 0px); filter: drop-shadow(-2px 0 #00f0ff) drop-shadow(2px 0 #ff0055); }
    82% { transform: translate(0, 0); filter: none; }
}


:root{
  --green: #00A859;
  --green-glow: rgba(0,168,89,.55);
  --orange: #F58634;
  --orange-glow: rgba(245,134,52,.55);
  --ink: #eef1ee;
  --ink-dim: #c7cbc8;

  --glass-fill: rgba(24,26,24,.42);
  --glass-fill-strong: rgba(15,16,15,.58);
  --glass-border: rgba(255,255,255,.14);
  --glass-highlight: rgba(255,255,255,.35);

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Poppins', 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
}

/* ==========================================================================
   SHARED NAVBAR + QUICK MENU + SEARCH OVERLAY + FOOTER (liquid-glass system)
   Ported 1:1 from events.css so Home uses the exact same navbar/quick-menu/
   search-overlay/footer look as Events, News, Academics, etc. Every rule
   below is !important so it wins over any earlier page-specific styles.
   NOTE: Home's own preloader design (section 2 above) and the hero section
   are untouched — only the shared site chrome is unified here.
   ========================================================================== */

/* ---------- 2. Navbar (fixed, full-width, curved bottom corners) ---------- */
.navbar{
  position:fixed !important; top:0 !important; left:0 !important; width:100% !important; z-index:3500 !important;
  background:rgba(6,7,6,.55) !important;
  backdrop-filter:blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(140%) !important;
  padding:14px 40px !important;
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06) !important;
  border-bottom-left-radius:24px !important;
  border-bottom-right-radius:24px !important;
  border-bottom:1px solid var(--glass-border) !important;
}
.nav-container{ display:flex !important; justify-content:space-between !important; align-items:center !important; max-width:1550px !important; margin:0 auto !important; width:100% !important; }
.mobile-menu-toggle{
  display:none !important; background:transparent !important; border:none !important;
  width:26px !important; height:20px !important; flex-direction:column !important; justify-content:space-between !important;
  cursor:pointer !important; z-index:2200 !important;
}
.hamburger-bar{
  width:100% !important; height:3px !important; background-color:#fff !important; border-radius:4px !important;
  transform-origin:left center !important;
  transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .2s ease !important;
}
.mobile-menu-toggle.open .hamburger-bar:nth-child(1){ transform:rotate(45deg) translateY(-2px) !important; }
.mobile-menu-toggle.open .hamburger-bar:nth-child(2){ opacity:0 !important; transform:scaleX(0) !important; }
.mobile-menu-toggle.open .hamburger-bar:nth-child(3){ transform:rotate(-45deg) translateY(2px) !important; }

.logo-area{ display:flex !important; align-items:center !important; gap:12px !important; text-decoration:none !important; }
.nav-crest{ height:48px !important; width:auto !important; object-fit:contain !important; }
.logo-text .main-title{
  font-family:var(--font-display) !important; font-weight:400 !important; letter-spacing:.01em !important;
  text-transform:uppercase !important; color:#fff !important; display:block !important; font-size:1.05rem !important;
}
.logo-text .sub-title{
  font-family:var(--font-body) !important; font-weight:600 !important; letter-spacing:.14em !important;
  color:var(--orange) !important; text-shadow:0 0 12px var(--orange-glow) !important;
  display:block !important; font-size:.72rem !important;
}

.nav-links{ display:flex !important; align-items:center !important; gap:4px !important; }
.nav-links a{
  color:var(--ink-dim) !important; text-decoration:none !important; font-weight:600 !important; font-size:.85rem !important;
  border-radius:999px !important; padding:6px 12px !important;
  transition:color .25s var(--ease), background .25s var(--ease) !important;
}
.nav-links a:hover{ color:#fff !important; background:rgba(255,255,255,.06) !important; }
.nav-links a.active-pill{
  color: var(--orange) !important;
  background:rgba(245,134,52,.12) !important;
  border:1px solid rgba(245,134,52,.35) !important;
  box-shadow:0 0 16px rgba(245,134,52,.2) !important;
}

.nav-icons{ display:flex !important; align-items:center !important; gap:10px !important; }
.nav-icons button{
  width:36px !important; height:36px !important; border-radius:50% !important;
  border:1px solid var(--glass-border) !important;
  background:rgba(255,255,255,.04) !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  color:var(--ink) !important; cursor:pointer !important;
  transition:transform .2s var(--ease), box-shadow .3s var(--ease), color .2s, background .2s !important;
}
.nav-icons button:hover{
  color:#0a0b0a !important; background:var(--green) !important; box-shadow:0 0 18px var(--green-glow) !important;
  transform:translateY(-2px) !important;
}
.nav-icons button svg{ width:16px !important; height:16px !important; }
#quickMenuTriggerBtn.menu-trigger-active{ background-color: var(--orange) !important; box-shadow:0 0 18px var(--orange-glow) !important; color:#fff !important; }

/* Account icon (an <a> tag, not a <button>) — give it the exact same
   circular glass badge as the other nav-icon buttons (theme toggle,
   search, quick menu) so it's 100% visually consistent. */
.nav-icons .signin-trigger-btn{
  width:36px !important; height:36px !important; border-radius:50% !important;
  border:1px solid var(--glass-border) !important;
  background:rgba(255,255,255,.04) !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  color:var(--ink) !important; cursor:pointer !important;
  transition:transform .2s var(--ease), box-shadow .3s var(--ease), color .2s, background .2s !important;
}
.nav-icons .signin-trigger-btn svg{ width:16px !important; height:16px !important; }
.nav-icons .signin-trigger-btn:hover{
  color:#0a0b0a !important; background:var(--green) !important; box-shadow:0 0 18px var(--green-glow) !important;
  transform:translateY(-2px) !important;
}


/* ---------- 4. Sign-in dropdown ---------- */
.signin-dropdown-wrapper{ position:relative !important; display:inline-flex !important; align-items:center !important; }
.signin-trigger-btn{ background:none !important; border:1px solid var(--glass-border) !important; color:#fff !important; }
.signin-dropdown-wrapper.signin-open .signin-trigger-btn{ color:var(--orange) !important; transform:scale(1.05) !important; background:rgba(255,255,255,.04) !important; }
.signin-dropdown-menu{
  position:absolute !important; top:calc(100% + 16px) !important; right:-8px !important; min-width:210px !important;
  background:rgba(10,11,10,.85) !important; backdrop-filter:blur(18px) saturate(140%) !important; -webkit-backdrop-filter:blur(18px) saturate(140%) !important;
  border:1px solid var(--glass-border) !important; border-radius:18px !important; padding:8px !important;
  box-shadow:0 20px 45px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14) !important;
  display:flex !important; flex-direction:column !important; gap:4px !important;
  opacity:0 !important; visibility:hidden !important; transform:translateY(-8px) scale(.96) !important; transform-origin:top right !important;
  transition:opacity .25s cubic-bezier(.16,1,.3,1), transform .25s cubic-bezier(.16,1,.3,1), visibility .25s !important;
  z-index:4000 !important;
}
.signin-dropdown-wrapper.signin-open .signin-dropdown-menu{ opacity:1 !important; visibility:visible !important; transform:translateY(0) scale(1) !important; }
.signin-dropdown-item{
  display:flex !important; align-items:center !important; gap:10px !important; padding:11px 14px !important; border-radius:12px !important;
  color:var(--ink-dim) !important; text-decoration:none !important; font-size:.85rem !important; font-weight:600 !important; letter-spacing:.3px !important;
  transition:background .2s ease, color .2s ease !important;
}
.signin-dropdown-item svg{ flex-shrink:0 !important; }
.signin-dropdown-item:hover{ background:rgba(0,168,89,.14) !important; color:#fff !important; }
.signin-dropdown-item:last-child:hover{ background:rgba(245,134,52,.14) !important; }

/* ---------- 5. Nav chat launcher ---------- */
.nav-icons .nav-chat-btn{
  width:36px !important; height:36px !important; border-radius:50% !important;
  background:var(--green) !important; border:1px solid #00e676 !important; color:#fff !important;
  animation:navChatNeoBlink 2.2s ease-in-out infinite !important;
}
.nav-icons .nav-chat-btn:hover{ background:#00e676 !important; transform:translateY(-1px) !important; }
.nav-icons .nav-chat-btn.nav-chat-btn-clicked{ animation:navChatClickPulse .55s ease !important; }
@keyframes navChatNeoBlink{ 0%,100%{ box-shadow: 0 0 3px rgba(0,230,118,.35), 0 0 0 rgba(0,230,118,0); } 50%{ box-shadow: 0 0 14px rgba(0,230,118,.75), 0 0 22px rgba(0,230,118,.35); } }
@keyframes navChatClickPulse{ 0%{transform:scale(1);} 35%{transform:scale(1.1); box-shadow:0 0 26px rgba(0,230,118,.95);} 100%{transform:scale(1);} }

/* ---------- 6. Menu backdrop + Quick access overlay ---------- */
.menu-backdrop-overlay{
  position:fixed !important; inset:0 !important; background-color:rgba(0,0,0,.5) !important;
  backdrop-filter:blur(12px) !important; -webkit-backdrop-filter:blur(12px) !important;
  opacity:0 !important; visibility:hidden !important; z-index:1500 !important;
  transition:opacity .4s ease, visibility .4s ease !important;
}
body.nav-locked .menu-backdrop-overlay{ opacity:1 !important; visibility:visible !important; }

.quick-access-overlay{
  position:fixed !important; inset:0 !important; max-height:100dvh !important; overflow-y:auto !important;
  background-color:#05060a !important;
  backdrop-filter:blur(30px) !important; -webkit-backdrop-filter:blur(30px) !important;
  z-index:3000 !important; display:flex !important; justify-content:center !important; align-items:center !important;
  opacity:0 !important; visibility:hidden !important; transform:scale(1.01) !important;
  transition:opacity .4s cubic-bezier(.16,1,.3,1), visibility .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1) !important;
}
.quick-access-overlay::before{
  content:"" !important; position:absolute !important; inset:0 !important;
  background:radial-gradient(circle at 35% 50%, rgba(0,168,89,.14) 0%, rgba(5,6,5,.95) 100%) !important;
  opacity:.6 !important; z-index:-1 !important;
}
.quick-access-overlay.active{ opacity:1 !important; visibility:visible !important; transform:scale(1) !important; }
.quick-menu-close{
  position:absolute !important; top:95px !important; right:45px !important; background:none !important; border:none !important;
  color:rgba(255,255,255,.35) !important; font-size:4rem !important; cursor:pointer !important; line-height:1 !important;
  transition:color .2s, transform .25s cubic-bezier(.16,1,.3,1) !important; z-index:3200 !important;
}
.quick-menu-close:hover{ color:var(--orange) !important; transform:rotate(90deg) !important; }
.quick-menu-wrapper{
  width:100% !important; max-width:1340px !important; display:grid !important; grid-template-columns:1.3fr 1fr !important;
  align-items:center !important; padding:20px 80px !important; gap:80px !important;
}
.quick-menu-branding{ position:relative !important; display:flex !important; justify-content:center !important; align-items:center !important; width:100% !important; min-height:620px !important; }
.giant-vertical-text{
  position:absolute !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important;
  display:flex !important; flex-direction:column !important; justify-content:center !important; align-items:center !important;
  line-height:.8 !important; user-select:none !important; pointer-events:none !important; width:100% !important; z-index:1 !important;
}
.giant-vertical-text span{
  font-size:clamp(9rem, 16vw, 15rem) !important; font-weight:900 !important; font-family:var(--font-body) !important;
  background:linear-gradient(180deg, rgba(0,168,89,.28) 0%, rgba(5,6,5,.05) 100%) !important;
  -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important;
  letter-spacing:-4px !important; margin-right:350px !important;
}
.quick-menu-crest-glow-zone{ position:relative !important; display:flex !important; justify-content:center !important; align-items:center !important; z-index:2 !important; }
.quick-menu-crest{
  width:clamp(220px, 30vw, 520px) !important; max-width:100% !important; margin-left:-100px !important; height:auto !important; object-fit:contain !important;
  filter:drop-shadow(0 0 50px var(--green-glow)) drop-shadow(0 0 100px rgba(0,168,89,.4)) drop-shadow(0 25px 45px rgba(0,0,0,.7)) !important;
  animation:subtle-float 6s ease-in-out infinite !important;
}
@keyframes subtle-float{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }
.quick-menu-links-panel{ display:flex !important; justify-content:flex-start !important; align-items:center !important; }
.quick-nav-tree{ display:flex !important; flex-direction:column !important; gap:clamp(8px,2.3vh,18px) !important; text-align:left !important; }
.quick-link-item{
  font-size:40px !important; font-weight:400 !important; font-style:italic !important; text-transform:uppercase !important;
  color:var(--orange) !important; text-decoration:none !important; letter-spacing:.5px !important; line-height:1.1 !important;
  display:inline-block !important; transition:transform .25s cubic-bezier(.16,1,.3,1), color .2s ease !important;
  transform-origin:left center !important; text-shadow:0 2px 10px rgba(0,0,0,.4) !important;
}
.quick-link-item:hover{ color:#fff !important; transform:translateX(12px) scale(1.02) !important; }
.quick-link-item.link-green-active{ color:var(--green) !important; }
.quick-link-item.link-green-active:hover{ color:#fff !important; }

/* ---------- 7. Search overlay ---------- */
.search-overlay{
  position:fixed !important; inset:0 !important; background-color:#05060a !important;
  backdrop-filter:blur(20px) !important; -webkit-backdrop-filter:blur(20px) !important;
  z-index:4000 !important; display:flex !important; justify-content:center !important; align-items:center !important;
  opacity:0 !important; visibility:hidden !important; transform:scale(1.02) !important;
  transition:opacity .35s cubic-bezier(.16,1,.3,1), visibility .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1) !important;
}
.search-overlay::before{
  content:"" !important; position:absolute !important; inset:0 !important;
  background:radial-gradient(circle at center, rgba(0,168,89,.16) 0%, rgba(5,6,5,.92) 100%), url('images/Hero Section Background 03.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity:.55 !important; z-index:-1 !important;
}
.search-overlay.active{ opacity:1 !important; visibility:visible !important; transform:scale(1) !important; }
.search-overlay-close{
  position:absolute !important; top:30px !important; right:45px !important; background:none !important; border:none !important;
  color:rgba(255,255,255,.4) !important; font-size:4rem !important; cursor:pointer !important; line-height:1 !important;
  transition:color .2s, transform .25s cubic-bezier(.16,1,.3,1) !important; z-index:4200 !important;
}
.search-overlay-close:hover{ color:var(--orange) !important; transform:rotate(90deg) !important; }
.search-overlay-wrapper{ width:100% !important; max-width:720px !important; display:flex !important; flex-direction:column !important; align-items:center !important; padding:24px !important; margin-top:-20px !important; }
.search-branding-zone{ margin-bottom:25px !important; display:flex !important; justify-content:center !important; }
.search-overlay-crest{
  width:380px !important; height:auto !important; object-fit:contain !important;
  filter:drop-shadow(0 4px 15px rgba(0,0,0,.5)) !important;
  animation:searchCrestFloat 3.5s ease-in-out infinite !important;
}
@keyframes searchCrestFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
.search-title-divider{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; gap:20px !important; margin-bottom:25px !important; }
.search-title-divider h2{
  font-family:var(--font-display) !important; font-size:1.25rem !important; font-weight:400 !important; color:#fff !important;
  text-transform:uppercase !important; letter-spacing:1.5px !important; white-space:nowrap !important; text-shadow:0 2px 4px rgba(0,0,0,.4) !important;
}
.decor-line{ height:4px !important; flex-grow:1 !important; border-radius:2px !important; }
.decor-line.line-left{ background:linear-gradient(to right, var(--green) 0%, var(--orange) 100%) !important; }
.decor-line.line-right{ background:linear-gradient(to left, var(--green) 0%, var(--orange) 100%) !important; }
.search-input-container{ position:relative !important; width:100% !important; max-width:640px !important; margin-bottom:25px !important; border-radius:50px !important; animation:searchBarPulseGlow 2.6s ease-in-out infinite !important; }
@keyframes searchBarPulseGlow{ 0%,100%{ box-shadow: 0 10px 30px rgba(0,168,89,.15), 0 0 0 0 rgba(0,168,89,.25); } 50%{ box-shadow: 0 10px 40px rgba(245,134,52,.2), 0 0 0 10px rgba(245,134,52,0); } }
.search-box-icon{ position:absolute !important; left:24px !important; top:50% !important; transform:translateY(-50%) !important; color:var(--green) !important; display:flex !important; align-items:center !important; pointer-events:none !important; z-index:5 !important; }
#siteSearchInput{
  width:100% !important; padding:16px 24px 16px 64px !important; font-size:1.1rem !important; font-weight:700 !important;
  font-family:var(--font-body) !important; color:#fff !important;
  background:linear-gradient(135deg, rgba(0,168,89,.3), rgba(245,134,52,.24)) !important;
  backdrop-filter:blur(18px) saturate(180%) !important; -webkit-backdrop-filter:blur(18px) saturate(180%) !important;
  border:1px solid rgba(255,255,255,.35) !important; border-radius:50px !important; outline:none !important;
  box-shadow:inset 0 1px 20px rgba(255,255,255,.08) !important;
  transition:border-color .3s ease, background .3s ease !important;
}
#siteSearchInput:focus{ border-color:rgba(255,255,255,.6) !important; background:linear-gradient(135deg, rgba(0,168,89,.4), rgba(245,134,52,.32)) !important; }
#siteSearchInput::placeholder{ color:rgba(255,255,255,.7) !important; font-weight:700 !important; }
.search-results-card{
  width:100% !important; max-width:640px !important;
  background:linear-gradient(135deg, rgba(0,168,89,.16), rgba(245,134,52,.12)) !important;
  backdrop-filter:blur(22px) saturate(180%) !important; -webkit-backdrop-filter:blur(22px) saturate(180%) !important;
  border:1px solid rgba(255,255,255,.25) !important; border-radius:40px !important; padding:20px 14px !important;
  box-shadow:0 20px 50px rgba(0,0,0,.35) !important;
  display:flex !important; flex-direction:column !important; max-height:0 !important; opacity:0 !important; overflow:hidden !important;
  transform:translateY(-10px) !important;
  transition:max-height .4s cubic-bezier(.16,1,.3,1), opacity .3s ease, transform .4s cubic-bezier(.16,1,.3,1), padding .4s ease !important;
}
.search-results-card.has-matches{ max-height:50vh !important; opacity:1 !important; padding:22px 16px !important; transform:translateY(0) !important; }
.search-results-viewport{ width:100% !important; max-height:40vh !important; overflow-y:auto !important; }
.search-results-viewport::-webkit-scrollbar{ width:6px !important; }
.search-results-viewport::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2) !important; border-radius:10px !important; }
.search-result-item{
  display:block !important; text-decoration:none !important; padding:14px 20px !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  transition:background-color .2s ease, transform .2s ease !important; border-radius:8px !important;
}
.search-result-item:hover{ background-color:rgba(255,255,255,.1) !important; transform:translateX(4px) !important; }
.search-result-title{ font-size:1.05rem !important; font-weight:700 !important; color:#fff !important; margin-bottom:2px !important; }
.search-result-category{ font-size:.78rem !important; font-weight:600 !important; color:var(--orange) !important; text-transform:uppercase !important; }

/* ---------- 8. Theme switch transition veil ----------
   NOTE: the full glitch effect (flicker + shake + RGB-split streaks) is
   defined once, up in "2b/5. Theme switch transition" (search
   ".theme-transition-veil" near the top of the Hero/reveal rules). This
   section used to re-declare a weaker, duplicate version of the same
   class/keyframes with !important, which silently overrode/cancelled the
   shake and the correct per-mode veil color — removed so the one real
   definition is the only one in effect. */

/* ---------- 9. Footer (Home-style) ---------- */
.site-footer{
  position:relative !important; width:100% !important;
  background-image:radial-gradient(120% 90% at 12% 0%, rgba(0,168,89,.14), transparent 55%),
    radial-gradient(120% 90% at 100% 10%, rgba(245,134,52,.12), transparent 55%),
    linear-gradient(rgba(6,7,6,.9), rgba(6,7,6,.95)) !important;
  padding-top:60px !important; overflow:hidden !important; font-family:var(--font-body) !important;
}
.footer-map-bg-link{ position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:calc(100% - 90px) !important; z-index:1 !important; cursor:pointer !important; }
.footer-main-content{ position:relative !important; width:100% !important; max-width:1280px !important; margin:0 auto !important; padding:0 32px !important; z-index:2 !important; }
.footer-grid-container{ display:grid !important; grid-template-columns:1.1fr .8fr 1.1fr !important; gap:40px !important; align-items:flex-start !important; }
.footer-column{ display:flex !important; flex-direction:column !important; }
.footer-brand-title{
  font-family:var(--font-display) !important; font-weight:400 !important; text-transform:uppercase !important;
  font-size:clamp(1.2rem, 2.2vw, 1.65rem) !important; line-height:1.25 !important; letter-spacing:.5px !important; margin:0 0 28px 0 !important; color:#fff !important;
}
.footer-brand-title .text-green{ color: var(--green) !important; }
.text-orange{ color: var(--orange) !important; }
.footer-section-heading{
  font-family:var(--font-display) !important; font-weight:400 !important; font-size:1rem !important;
  letter-spacing:1.5px !important; text-transform:uppercase !important; margin:0 0 16px 0 !important;
  text-shadow:0 0 14px var(--orange-glow) !important;
}
.contact-details-list{ display:flex !important; flex-direction:column !important; gap:6px !important; }
.contact-item{ font-size:.92rem !important; color:var(--ink-dim) !important; font-weight:500 !important; line-height:1.45 !important; margin:0 !important; }
.contact-link{ text-decoration:none !important; display:inline-block !important; width:fit-content !important; cursor:pointer !important; transition:color .2s ease, transform .2s ease !important; }
.contact-link:hover, .interactive-email:hover{ color: var(--green) !important; transform:translateX(3px) !important; }
.interactive-email{ color:var(--ink-dim) !important; text-decoration:none !important; transition:color .2s ease !important; }

.map-badge-col{ align-items:center !important; justify-content:center !important; padding-top:10px !important; }
.maps-display-card{
  display:flex !important; align-items:center !important; gap:14px !important;
  background:var(--glass-fill) !important; border:1px solid var(--glass-border) !important;
  padding:12px 20px !important; border-radius:20px !important; text-decoration:none !important; max-width:320px !important;
  box-shadow:0 10px 25px rgba(0,0,0,.4) !important; backdrop-filter:blur(16px) !important;
  transition:transform .2s ease, box-shadow .25s ease !important;
}
.maps-display-card:hover{ transform:translateY(-2px) !important; box-shadow:0 0 26px var(--green-glow) !important; }
.maps-pin-graphic{ display:flex !important; align-items:center !important; justify-content:center !important; }
.maps-pin-svg{ width:32px !important; height:32px !important; fill: var(--green) !important; }
.maps-card-typography{ display:flex !important; flex-direction:column !important; line-height:1.2 !important; }
.m-card-title, .m-card-subtitle{ font-family: var(--font-display) !important; font-weight:400 !important; color:#fff !important; margin:0 !important; }
.m-card-title{ font-size:.8rem !important; letter-spacing:.5px !important; }
.m-card-subtitle{ font-size:1.15rem !important; margin:1px 0 3px 0 !important; }
.m-card-status{ font-size:.65rem !important; color: var(--green) !important; font-weight:700 !important; letter-spacing:1px !important; }

.social-links-col{ align-items:flex-end !important; }
.alignment-right{ text-align:right !important; }
.social-icon-row{ display:flex !important; gap:14px !important; margin-bottom:24px !important; }
.social-icon-wrapper{
  width:38px !important; height:38px !important; border-radius:50% !important; border:1px solid var(--glass-border) !important;
  background:rgba(255,255,255,.04) !important;
  display:flex !important; align-items:center !important; justify-content:center !important; text-decoration:none !important;
  transition:transform .2s ease, background .2s ease !important;
}
.social-svg{ width:22px !important; height:22px !important; fill:#fff !important; transition:fill .2s ease !important; }
.social-icon-wrapper:hover{ transform:scale(1.12) !important; background:var(--orange) !important; box-shadow:0 0 16px var(--orange-glow) !important; }
.social-icon-wrapper:hover .social-svg{ fill:#0a0b0a !important; }
.legal-links-stack{ display:flex !important; flex-direction:column !important; align-items:flex-end !important; gap:8px !important; }
.policy-link{ font-size:.95rem !important; color: var(--ink-dim) !important; text-decoration:none !important; font-weight:500 !important; transition:color .2s ease, padding-right .2s ease !important; }
.policy-link:hover{ color:#fff !important; padding-right:4px !important; }

.footer-bottom-vault{ position:relative !important; width:100% !important; display:flex !important; justify-content:center !important; margin-top:50px !important; z-index:3 !important; }
.footer-arc-badge{
  background: var(--glass-fill) !important; backdrop-filter:blur(18px) saturate(140%) !important;
  border:1px solid var(--glass-border) !important;
  border-top-left-radius:120px 100px !important; border-top-right-radius:120px 100px !important;
  padding:24px 40px 18px 40px !important; width:82% !important; max-width:880px !important; text-align:center !important;
  box-shadow: 0 -10px 30px rgba(0,0,0,.35) !important;
}
.copyright-statement{ font-size:clamp(.72rem,1.4vw,.95rem) !important; font-weight:600 !important; letter-spacing:.2px !important; margin:0 0 4px 0 !important; color: var(--ink) !important; }
.school-boys-credit{ font-size:.68rem !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:1.5px !important; color: var(--ink-dim) !important; margin:0 !important; }

/* ---------- 10. Responsive: navbar / quick menu / search / footer ---------- */
@media (max-width: 1024px){
  body{ padding-top:78px !important; }
  .navbar{ padding:12px 20px !important; border-radius:0 0 16px 16px !important; }
  .nav-container{ display:grid !important; grid-template-columns:auto 1fr auto !important; gap:10px !important; }
  .mobile-menu-toggle{ display:flex !important; grid-column:1 !important; }
  .logo-area{ grid-column:2 !important; justify-content:center !important; }
  .nav-crest{ height:38px !important; margin-right:-15px !important; margin-left:-30px !important; }
  .logo-text .main-title{ font-size:.8rem !important; }
  .logo-text .sub-title{ font-size:.72rem !important; }
  .nav-icons{ grid-column:3 !important; gap:12px !important; }

  .nav-links{
    position:fixed !important; top:0 !important; left:0 !important; width:290px !important; height:100vh !important;
    background:rgba(6,7,6,.96) !important; backdrop-filter:blur(18px) !important;
    border-right:1px solid var(--glass-border) !important;
    flex-direction:column !important; align-items:flex-start !important; padding:90px 24px !important; gap:12px !important;
    box-shadow:8px 0 30px rgba(0,0,0,.6) !important; z-index:2100 !important;
    transform:translate3d(-100%,0,0) !important;
    transition:transform .4s cubic-bezier(.16,1,.3,1) !important;
  }
  .nav-links.mobile-open{ transform:translate3d(0,0,0) !important; }
  .nav-links a{ font-size:1.05rem !important; width:100% !important; padding:10px !important; }

  .quick-menu-close{ top:78px !important; right:20px !important; font-size:3.2rem !important; }
  .quick-menu-wrapper{ grid-template-columns:1fr !important; padding:20px 24px 10px 24px !important; gap:0 !important; height:100% !important; overflow-y:auto !important; }
  .quick-menu-branding{ order:1 !important; min-height:auto !important; height:auto !important; }
  .giant-vertical-text{ flex-direction:row !important; gap:12px !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; }
  .giant-vertical-text span{ font-size:clamp(5rem,15vw,7rem) !important; letter-spacing:-2px !important; margin-right:0 !important; }
  .quick-menu-crest{ width:clamp(60px,58vw,340px) !important; margin-left:0 !important; }
  .quick-menu-links-panel{ order:2 !important; justify-content:center !important; width:100% !important; margin-top:-120px !important; }
  .quick-nav-tree{ text-align:center !important; align-items:center !important; width:100% !important; gap:16px !important; }
  .quick-link-item{ font-size:clamp(1.45rem,5.5vw,1.85rem) !important; transform-origin:center center !important; }

  .search-overlay-close{ top:15px !important; right:20px !important; font-size:3.2rem !important; }
  .search-overlay-wrapper{ padding:16px !important; width:100% !important; }
  .search-overlay-crest{ width:110px !important; }
  .search-title-divider h2{ font-size:1.05rem !important; letter-spacing:1px !important; }
  .search-title-divider{ gap:12px !important; }
}

@media (max-width: 992px){
  .footer-grid-container{ grid-template-columns:1fr !important; gap:36px !important; text-align:center !important; }
  .footer-column{ align-items:center !important; }
  .alignment-right{ text-align:center !important; }
  .legal-links-stack{ align-items:center !important; }
  .footer-brand-title{ margin-bottom:20px !important; }
  .footer-arc-badge{ width:92% !important; border-top-left-radius:60px 40px !important; border-top-right-radius:60px 40px !important; padding:20px 20px 14px 20px !important; }
}

@media (max-width: 480px){
  .site-footer{ padding-top:45px !important; }
}


/* ==========================================================================
   APPLICATIONS & FORMS — LIVE PREVIEW BAR (Home)
   A full-width "ribbon" (.apb-section) that houses one centered floating
   box (.apb-bar). Light mode gives the whole ribbon a light backdrop;
   dark mode leaves the ribbon transparent (blending into the surrounding
   dark sections) but turns the box itself into a fully animated green
   neon panel. A soft green glow sits behind the box in both modes.
   ========================================================================== */
.apb-section{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding: clamp(34px, 5vw, 54px) clamp(16px, 4vw, 40px);
  box-sizing:border-box;
  background: linear-gradient(180deg, #f4f6f4 0%, #eef1ee 100%);
  transition: background .4s var(--ease);
}

body.dark-mode .apb-section{
  background: transparent;
}

.apb-bar{
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:18px;
  padding: 12px 14px 12px 12px;
  border-radius: 999px;
  background: var(--glass-fill-strong);
  border: 2.5px solid rgba(0,168,89,.4);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 16px 38px rgba(0,0,0,.3);
  transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}

/* Ambient green neon glow sitting behind the box, in both modes */
.apb-bar::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-16px;
  border-radius: inherit;
  background: radial-gradient(ellipse at center, var(--green-glow) 0%, rgba(0,168,89,0) 72%);
  opacity:.65;
  filter: blur(6px);
  pointer-events:none;
  transition: opacity .4s var(--ease);
}

.apb-badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex-shrink:0;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--orange);
  color:#1c1005;
  font-family: var(--font-body);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  transition: transform .25s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.apb-badge:hover{ transform: translateY(-1px); }

.apb-badge-pulse{
  width:7px; height:7px; border-radius:50%;
  background:#1c1005;
  flex-shrink:0;
}

@keyframes apbBoxNeonPulseDark{
  0%, 100% { box-shadow: 0 0 0 0 var(--green-glow), 0 0 14px rgba(0,168,89,.45), 0 16px 38px rgba(0,0,0,.3); }
  50% { box-shadow: 0 0 0 10px rgba(0,168,89,0), 0 0 40px rgba(0,168,89,.9), 0 16px 38px rgba(0,0,0,.3); }
}

.apb-divider{
  display:flex;
  flex-direction:column;
  gap:3px;
  flex-shrink:0;
}
.apb-divider-green, .apb-divider-orange{
  width:3px; height:9px; border-radius:2px;
}
.apb-divider-green{ background: var(--green); }
.apb-divider-orange{ background: var(--orange); }

.apb-track-link{
  flex:1 1 auto;
  min-width:0;
  text-decoration:none;
  display:block;
}

.apb-track{
  position:relative;
  display:block;
  height:1.4em;
  overflow:hidden;
}

.apb-slide{
  position:absolute;
  top:0; left:0; right:0;
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-size:.92rem;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:0;
  transform: translateY(65%);
  transition: opacity .45s var(--ease), transform .45s var(--ease), color .4s var(--ease);
  pointer-events:none;
}
.apb-slide.is-active{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.apb-slide.is-leaving{
  opacity:0;
  transform: translateY(-65%);
}

.apb-viewall{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--orange);
  color:#1c1005;
  font-family: var(--font-body);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  transition: transform .25s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.apb-viewall svg{ width:14px; height:14px; }
.apb-viewall:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(245,134,52,.4); }

/* ---------- dark mode: the ENTIRE box turns green + animates like neon ---------- */
body.dark-mode .apb-bar{
  background: var(--green);
  border-color: rgba(4,18,10,.35);
  animation: apbBoxNeonPulseDark 2.6s ease-in-out infinite;
}
body.dark-mode .apb-bar::before{ opacity:.9; }

body.dark-mode .apb-badge{ background:#04120a; color: var(--green); }
body.dark-mode .apb-badge-pulse{ background: var(--green); }

body.dark-mode .apb-divider-green,
body.dark-mode .apb-divider-orange{ background:#04120a; }

body.dark-mode .apb-slide{ color:#04120a; }

body.dark-mode .apb-viewall{ background:#04120a; color: var(--green); }
body.dark-mode .apb-viewall:hover{ box-shadow: 0 10px 22px rgba(0,0,0,.4); }

@media (max-width: 720px){
  .apb-bar{ flex-wrap:wrap; border-radius:26px; padding:14px 16px; gap:12px; }
  .apb-badge{ order:1; }
  .apb-divider{ display:none; }
  .apb-track-link{ order:3; flex:1 1 100%; }
  .apb-viewall{ order:2; margin-left:auto; }
}

/* ---------- SCROLL-IN ENTRANCE ANIMATION ----------
   The section already has the generic ".scroll-animate.reveal-bottom"
   fade+slide-up (see "ON-SCROLL SECTION REVEAL SYSTEM" near the top of
   this file — home.js adds ".active" via IntersectionObserver the first
   time this section crosses into view, with a 550ms transition-delay).
   This block layers two extra touches on top of that shared system,
   scoped only to this bar so it doesn't affect any other section:
     1. A bouncier pop-in easing (slight overshoot) instead of the plain
        ease-out every other section uses, since this bar is meant to
        feel more "alive" than a plain content block.
     2. A one-time neon "signal ping" ring that bursts outward from the
        bar right as it settles into place — layered on the existing
        ::before ambient glow via a new ::after pseudo-element, so it
        never conflicts with the bar's own continuous neon pulse
        (dark-mode's apbBoxNeonPulseDark keeps running independently). */
.apb-section.scroll-animate{
  transition: opacity 0.9s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.apb-bar::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-16px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(0,168,89,.55);
  opacity:0;
  pointer-events:none;
}
.apb-section.active .apb-bar::after{
  animation: apbEntrancePing 1.1s cubic-bezier(0.16, 1, 0.3, 1) 550ms 1 both;
}
@keyframes apbEntrancePing{
  0%   { box-shadow: 0 0 0 0 rgba(0,168,89,.6); opacity:.95; }
  70%  { box-shadow: 0 0 0 30px rgba(0,168,89,0); opacity:.35; }
  100% { box-shadow: 0 0 0 30px rgba(0,168,89,0); opacity:0; }
}
body.dark-mode .apb-bar::after{
  box-shadow: 0 0 0 0 rgba(255,255,255,.5);
}
body.dark-mode .apb-section.active .apb-bar::after{
  animation-name: apbEntrancePingDark;
}
@keyframes apbEntrancePingDark{
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.55); opacity:.9; }
  70%  { box-shadow: 0 0 0 30px rgba(255,255,255,0); opacity:.3; }
  100% { box-shadow: 0 0 0 30px rgba(255,255,255,0); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .apb-bar::after{ display:none; }
}

/* ============================================================================
   ██  MOBILE-ONLY UI OVERHAUL  —  phones (≤ 560px)                        ██
   ----------------------------------------------------------------------------
   Everything below fires ONLY on phone-width screens and only ever adds or
   overrides — it never removes rules above. Desktop and tablet (and this
   page's own existing 768/992/1024px breakpoints) are completely untouched.
   Two kinds of change live here:
     1. Real narrow-phone bugs fixed (the "48 years" glitch numbers can
        overflow horizontally below ~380px because their clamp() minimums
        are sized for tablet, not phone).
     2. A deliberate phone-native pattern — Academics / Sports / Clubs &
        Societies switch from a stacked list to a swipeable, snap-scroll
        card rail (the same pattern used on About Us), so browsing four
        cards is one thumb-swipe instead of a long scroll.
   ============================================================================ */
@media (max-width: 560px){

  /* ---------- 1. Hero ---------- */
  .hero-cta-row{ flex-direction: column; width: 100%; gap: 12px; }
  .hero-signin-btn, .hero-prexai-btn{ width: 100%; justify-content: center; }
  .welcome-cursive{ font-size: 2.1rem; }
  .hero-main-title{ font-size: clamp(1.9rem, 9vw, 2.5rem); }
  .hero-main-title .highlight-title{ font-size: clamp(1.25rem, 6vw, 1.6rem); }
  .hero-description{ font-size: .85rem; line-height: 1.6; }
  .large-crest{ max-width: 88px; }

  /* ---------- 2. Principal's Message ---------- */
  .pm-frame-container{ max-width: 230px; margin: 0 auto; }
  .pm-header-group{ text-align: center; }
  .pm-signature-line{ justify-content: center; }
  .pm-main-heading{ font-size: 1.5rem; }
  .pm-message-body p{ font-size: .87rem; }

  /* ---------- 3. Vision & Mission ---------- */
  .motto-card-header,
  .motto-card-header.text-right,
  .motto-card-body,
  .motto-card-body.text-right{ text-align: center; }
  .motto-crest-frame{ max-width: 110px; margin: 0 auto; }
  .motto-sinhala-paragraph{ font-size: .85rem; }

  /* ---------- 4. Applications preview bar ---------- */
  .apb-bar{ border-radius: 22px; padding: 12px 14px; gap: 10px; flex-wrap: wrap; }

  /* ---------- 5. Academics — swipeable card rail ---------- */
  .acad-cards-grid{
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    margin: 0 -16px;
    padding: 4px 16px 10px;
  }
  .acad-cards-grid::-webkit-scrollbar{ display: none; }
  .acad-card{ scroll-snap-align: start; flex: 0 0 240px; padding: 24px 20px; }

  /* ---------- 6. Sports — swipeable card rail ---------- */
  .sl-grid{
    display: flex;
    grid-template-columns: none;
    max-width: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    margin: 0 -16px 32px;
    padding: 2px 16px 8px;
  }
  .sl-grid::-webkit-scrollbar{ display: none; }
  .sl-card{ scroll-snap-align: start; flex: 0 0 230px; }

  /* ---------- 7. Clubs & Societies — swipeable card rail ---------- */
  .cs-grid{
    display: flex;
    grid-template-columns: none;
    max-width: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    margin: 0 -16px 32px;
    padding: 2px 16px 8px;
  }
  .cs-grid::-webkit-scrollbar{ display: none; }
  .cs-card{ scroll-snap-align: start; flex: 0 0 210px; }

  /* ---------- 8. Strength / stats grid ---------- */
  .strength-footer-title-block .strength-main-title{ font-size: 1.4rem; text-align: center; }

  /* ---------- 9. Milestone "48 years and counting" — narrow-phone fix ----------
     Below ~380px the clamp() minimums here (6.5rem for the digits, 3+rem for
     the words) are wider than the screen itself and clip off the edge. This
     rescales the whole block specifically for phone widths. */
  .mg-wrapper{ gap: 4px; transform: skewX(-6deg); }
  .mg-number-side{ font-size: clamp(3.2rem, 19vw, 4.4rem); letter-spacing: -2px; }
  .mg-row-top{ font-size: clamp(1.4rem, 7.6vw, 1.9rem); margin-bottom: 2px; }
  .mg-row-bottom{ font-size: clamp(1.5rem, 8vw, 2rem); }
  .milestone-paragraph{ font-size: .82rem; line-height: 1.7; }
  .milestone-link{ font-size: .78rem; }

  /* ---------- 10. Touch feedback (phones have no :hover) ----------
     Real tap feedback via :active instead of relying on hover states that
     never fire on a touchscreen. */
  .acad-card:active,
  .sl-card:active,
  .cs-card:active,
  .strength-card:active,
  .quicklink-card:active{
    transform: scale(.97);
    transition: transform .12s ease;
  }
}

/* ==========================================================================
   HERO PINNED ANNOUNCEMENTS — "PRIORITY NOTICES" LOCK-SCREEN STYLE BOARD
   ------------------------------------------------------------------------
   A stack of glass notification toasts (same visual language as a Windows
   lock screen) pinned to the top-right of the hero. Content comes live from
   Firestore (pcm_announcements, via pcm-content-store.js / PCContent) and is
   managed entirely from the separate "Pinned Announcements" editor
   (pin-edit.html, linked off admin.html) — see renderPinBoard() /
   openPinModal() in home.js. Each card shows only a title + a short one-line
   teaser; tapping it opens the full announcement (text, optional image,
   optional links) in a centered popup — nothing here is hardcoded, the
   board is simply empty until an admin publishes something.
   ========================================================================== */
.hero-pin-board {
    position: absolute;
    top: 112px;
    right: 32px;
    z-index: 6;
    width: min(320px, 84vw);
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

/* Row that holds the "Priority Notices" pill + the "Clear all" action
   side by side, right-aligned above the card stack. */
.pin-board-header-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    pointer-events: none;
}
.pin-board-header-row .pin-board-header { align-self: auto; }

.pin-clear-all-btn {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--glass-fill);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pin-clear-all-btn:hover,
.pin-clear-all-btn:focus-visible {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ffb4b4;
}

.pin-board-header {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: flex-end;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--glass-fill);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #fff;
    pointer-events: auto;
}
.pin-board-header .pin-board-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #008751, #ff6f00);
    box-shadow: 0 0 8px rgba(0, 135, 81, 0.7);
    animation: pinDotPulse 2.2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes pinDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.8); }
}
.pin-board-header .pin-stack-counter {
    margin-left: 2px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
    font-weight: 600;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: none;
}
/* The whole pill opens the "all notices" tile grid — see openPinAllModal()
   in home.js — so it needs to read as clickable, same language as .pin-card. */
.pin-board-header {
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.pin-board-header:hover,
.pin-board-header:focus-visible {
    background: var(--glass-fill-strong);
    border-color: var(--glass-highlight);
}

/* ---------- Depth-fading list ----------
   Cards sit one under another in normal vertical flow with a small gap —
   NOT overlapped/stacked on top of each other (that read as one messy
   pile). JS (applyStackStyles in home.js) still fades opacity by depth
   (front 100%, next ~50%, then a faint ~20% hint) and uses the CSS
   `order` property to keep the current front card pinned to the top of
   the list without moving DOM nodes around — cards past the 3rd slot get
   display:none so they take up no space at all until scrolled into view. */
.pin-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    pointer-events: auto;
    transition: opacity 0.2s ease;
}
.pin-stack.is-clearing-all { opacity: 0; }

.pin-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--glass-fill);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    cursor: pointer;
    overflow: hidden;
    transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
/* Peek cards (the dim "previous"/"next" neighbours either side of the
   highlighted one) are still real, clickable cards — tapping one opens
   its own popup directly — just shown a little smaller/dimmer so the
   current one keeps visual priority. Their own dismiss (×) and "View
   more" hint stay hidden since they're not the focused card. */
.pin-card.pin-card-peek { transform: scale(0.94); }
.pin-card-peek .pin-card-dismiss { display: none; }
.pin-card-peek .pin-card-more { display: none; }
.pin-card::after {
    /* Subtle glass sheen sweep on hover — kept tasteful/one-shot, not a
       constant looping shimmer, so the board never fights for attention. */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.14) 48%, transparent 66%);
    transform: translateX(-120%);
    pointer-events: none;
}
.pin-card.is-front:hover {
    border-color: var(--glass-highlight);
    background: var(--glass-fill-strong);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pin-card.is-front:hover::after {
    transform: translateX(120%);
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

/* "Erase"-style reveal — the incoming front card wipes in left-to-right,
   like it's being uncovered, instead of just popping into place. */
@keyframes pinWipeIn {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}
.pin-card.is-wiping-in { animation: pinWipeIn 0.55s cubic-bezier(0.65, 0, 0.35, 1); }

/* The outgoing front card wipes away the same way, right-to-left, as if
   erased off the board on its way to the back of the deck. */
@keyframes pinWipeOut {
    from { clip-path: inset(0 0 0 0); }
    to   { clip-path: inset(0 0 0 100%); }
}
.pin-card.is-wiping-out { animation: pinWipeOut 0.45s cubic-bezier(0.65, 0, 0.35, 1); }

/* A visitor's private "clear" of one notice — fades/lifts out, then the
   board rebuilds from the live (admin) list a moment later. */
@keyframes pinCardDismiss {
    to { opacity: 0; transform: translateY(-10px) scale(0.92); }
}
.pin-card.is-dismissing { pointer-events: none; animation: pinCardDismiss 0.26s ease forwards; }

.pin-card-dismiss {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.32);
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.pin-card.is-front .pin-card-dismiss {
    opacity: 0.8;
    pointer-events: auto;
}
.pin-card-dismiss:hover { background: rgba(0, 0, 0, 0.55); color: #fff; }

.pin-card-icon {
    position: relative;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    background: linear-gradient(135deg, #00b368, #ff8a00);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* Animated icon: the badge disc now shares the SAME green→orange gradient
   as the glyph sitting on it (previously a plain white disc behind a
   colorful icon — two clashing palettes). Two soft "broadcast" rings pulse
   outward out of the same gradient family so the whole thing reads as one
   matched, glanceable badge rather than an icon floating on a mismatched
   background. */
.pin-icon-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(0, 179, 104, 0.55);
    animation: pinRingPulse 2.4s ease-out infinite;
}
.pin-icon-ring-2 {
    border-color: rgba(255, 138, 0, 0.45);
    animation-delay: 1.2s;
}
@keyframes pinRingPulse {
    0%   { transform: scale(0.8); opacity: 0.9; }
    70%  { transform: scale(1.45); opacity: 0; }
    100% { opacity: 0; }
}
.pin-icon-svg {
    position: relative;
}
/* The pin glyph itself gently swings, like it's just been pushed in —
   transform-origin near the pinhead so the tail arcs slightly. */
.pin-icon-pin {
    transform-origin: 50% 32%;
    animation: pinIconSwing 2.6s ease-in-out infinite;
}
@keyframes pinIconSwing {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) {
    .pin-icon-ring { animation: none; opacity: 0; }
    .pin-icon-pin { animation: none; }
}

/* When a notice has its own popup image attached, that image fills the
   circle instead of the generic icon — clipped to a small round crop
   (the pulsing broadcast rings stay, framing whichever picture is shown). */
.pin-card-icon.has-image { background: rgba(255, 255, 255, 0.08); cursor: zoom-in; }
.pin-card-icon-clip {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: block;
}
.pin-card-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pin-card-text { flex: 1; min-width: 0; padding-right: 14px; }

.pin-card-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1.3;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pin-card-desc {
    margin-top: 3px;
    font-size: 0.74rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pin-card-more {
    margin-top: 5px;
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #ffb703;
}

@media (max-width: 900px) {
    .hero-pin-board { top: 100px; right: 20px; width: min(280px, 78vw); }
}
@media (max-width: 600px) {
    .hero-pin-board { top: 88px; right: 14px; left: 14px; width: auto; gap: 8px; }
    .pin-board-header { align-self: flex-end; }
    .pin-stack { gap: 6px; }
    .pin-card { padding: 12px 14px; border-radius: 14px; }
    .pin-card-title { font-size: 0.8rem; }
    .pin-card-desc { font-size: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
    .pin-card { transition: opacity 0.2s ease; }
    .pin-card.is-wiping-in, .pin-card.is-wiping-out { animation: none; }
}

/* ---------- "New notice from the office" toast ----------
   Fires live when an admin publishes a pin while the visitor already has
   the page open (see checkForNewPins/showPinToast in home.js) — a normal
   bottom-center notification stack (like a phone's notification tray):
   newest toast slides up from the bottom edge and pushes any earlier ones
   upward, so up to 3 can be visible at once without ever overlapping. */
.pin-toast-stack {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse; /* newest child (appended last) renders at the bottom */
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}
.pin-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--glass-fill-strong);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    cursor: pointer;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(28px) scale(0.96);
    transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.pin-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.pin-toast.is-leaving { opacity: 0; transform: translateY(10px) scale(0.96); }
.pin-toast .pin-card-icon { width: 38px; height: 38px; }
.pin-toast-text { flex: 1; min-width: 0; }
.pin-toast-kicker {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #ffb703;
    margin-bottom: 3px;
}
.pin-toast-title {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1.3;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.pin-toast-close {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.32);
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.pin-toast-close:hover { background: rgba(0, 0, 0, 0.55); color: #fff; }
@media (max-width: 600px) {
    .pin-toast-stack { bottom: 14px; width: min(360px, calc(100vw - 24px)); }
}
@media (prefers-reduced-motion: reduce) {
    .pin-toast { transition: opacity 0.2s ease; transform: none !important; }
}

/* ---------- Pinned Announcement detail popup ---------- */
.pin-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(6, 7, 6, 0.72);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.pin-modal-overlay.active { opacity: 1; visibility: visible; }

.pin-modal-card {
    position: relative;
    width: min(560px, 92vw);
    max-height: 82vh;
    overflow-y: auto;
    padding: 36px 30px 30px;
    border-radius: 22px;
    background: var(--glass-fill-strong);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(26px) saturate(140%);
    -webkit-backdrop-filter: blur(26px) saturate(140%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: translateY(30px) scale(0.96);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pin-modal-overlay.active .pin-modal-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.pin-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--glass-fill);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.pin-modal-close svg { width: 16px; height: 16px; }
.pin-modal-close:hover { background: var(--glass-fill-strong); transform: rotate(90deg); }

.pin-modal-badge {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #ffb703;
    margin-bottom: 12px;
}

.pin-modal-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: none;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 16px;
    border: 1px solid var(--glass-border);
    cursor: zoom-in;
}
.pin-modal-image.hidden { display: none; }

/* ---------- Standalone image-preview lightbox ----------
   Opened by tapping the round image on a card/tile/toast/detail-popup
   directly — just the picture, full size, no title/description chrome. */
.pin-image-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(6, 7, 6, 0.88);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.pin-image-preview-overlay.active { opacity: 1; visibility: visible; }
.pin-image-preview-img {
    max-width: min(560px, 90vw);
    max-height: 82vh;
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    transform: scale(0.94);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.pin-image-preview-overlay.active .pin-image-preview-img { transform: scale(1); }
.pin-image-preview-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--glass-fill);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.pin-image-preview-close:hover { background: var(--glass-fill-strong); transform: rotate(90deg); }

.pin-modal-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1.35;
    color: #ffffff;
    margin-bottom: 8px;
    padding-right: 30px;
}

.pin-modal-meta {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 14px;
}
.pin-modal-meta:empty { display: none; }

.pin-modal-body {
    font-size: 0.92rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.86);
    white-space: pre-line;
}

.pin-modal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}
.pin-modal-links:empty { margin-top: 0; }
.pin-modal-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(0, 135, 81, 0.85), rgba(255, 111, 0, 0.85));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pin-modal-link-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
@media (max-width: 600px) {
    .pin-modal-card { padding: 28px 20px 24px; }
    .pin-modal-title { font-size: 1.15rem; }
}

/* ---------- "All notices" tile-grid popup (opened from the header pill) ----------
   Same glass-modal language as .pin-modal-*, but shows every currently
   pinned announcement at once as a grid of tiles; each tile just opens the
   normal single-announcement popup above — see openPinAllModal() in home.js. */
.pin-all-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(6, 7, 6, 0.72);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.pin-all-modal-overlay.active { opacity: 1; visibility: visible; }

.pin-all-modal-card {
    position: relative;
    width: min(680px, 92vw);
    max-height: 82vh;
    overflow-y: auto;
    padding: 36px 30px 30px;
    border-radius: 22px;
    background: var(--glass-fill-strong);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(26px) saturate(140%);
    -webkit-backdrop-filter: blur(26px) saturate(140%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: translateY(30px) scale(0.96);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pin-all-modal-overlay.active .pin-all-modal-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.pin-all-modal-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    color: #ffffff;
    padding-right: 30px;
    margin-bottom: 4px;
}
.pin-all-modal-sub {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 20px;
}

.pin-all-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.pin-all-modal-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 30px 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
}

.pin-all-tile {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    background: var(--glass-fill);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.pin-all-tile:hover {
    background: var(--glass-fill-strong);
    border-color: var(--glass-highlight);
    transform: translateY(-2px);
}
.pin-all-tile .pin-card-icon { width: 38px; height: 38px; }
.pin-all-tile-text { flex: 1; min-width: 0; }
.pin-all-tile-title {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    color: #ffffff;
    line-height: 1.3;
}
.pin-all-tile-desc {
    margin-top: 3px;
    font-size: 0.72rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.68);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.pin-all-tile-date {
    display: block;
    margin-top: 6px;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: #ffb703;
}

@media (max-width: 600px) {
    .pin-all-modal-card { padding: 28px 20px 24px; }
    .pin-all-modal-grid { grid-template-columns: 1fr; }
}