/* =====================================================
   AIR FORCE SCHOOL KANPUR CANTT - Main Stylesheet
   Based on index(2).html template
   ===================================================== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --navy:#06183a;
  --navy2:#0d2a5e;
  --blue:#1e4fa3;
  --sky:#2563eb;
  --gold:#38bdf8;
  --gold2:#7dd3fc;
  --light:#eef4ff;
  --white:#fff;
  --gray:#64748b;
  --gray2:#94a3b8;
  --border:#dbe4f3;
  --text:#1e293b;
  --admin-bg:#0a1730;
  --admin-sidebar:#10224a;
  --admin-card:#16315f;
  --grad-blue:linear-gradient(135deg,#06183a 0%,#0d2a5e 45%,#1e4fa3 100%);
  --grad-blue-bright:linear-gradient(135deg,#1e4fa3 0%,#2563eb 50%,#38bdf8 100%);
  --grad-sky:linear-gradient(135deg,#2563eb 0%,#38bdf8 100%);
}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;color:var(--text);background:linear-gradient(160deg,#eef4ff 0%,#f7faff 40%,#eaf1ff 100%);overflow-x:hidden;min-height:100vh}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#f1f5f9}::-webkit-scrollbar-thumb{background:var(--blue);border-radius:3px}

/* (Decorative floating/animated sky layer removed for a cleaner, static look) */

@keyframes jetBob{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-8px) rotate(4deg)}}

/* TOPBAR */
#topbar{background:var(--navy);color:#fff;padding:6px 0;font-size:12px;border-bottom:2px solid var(--gold)}
.topbar-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.topbar-left{display:flex;gap:18px;align-items:center}
.topbar-left span{display:flex;align-items:center;gap:5px;color:var(--gold2)}
.topbar-left span i{color:var(--gold)}
.topbar-left span.tb-phone a{color:var(--gold2);text-decoration:none;display:flex;align-items:center;gap:5px}
.topbar-left span.tb-phone a:hover{color:var(--gold)}
.topbar-right{display:flex;gap:8px}
.topbar-right a{color:#fff;text-decoration:none;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:12px;transition:.2s}
.topbar-right a:hover{background:var(--gold);color:var(--navy)}
/* Topbar on phones — LEFT aligned, ONE line (phone + email at the top-left).
   Social icons are hidden on mobile (they live in the footer instead). */
@media(max-width:768px){
  #topbar{font-size:11.5px;padding:7px 0}
  .topbar-inner{padding:0 12px;justify-content:flex-start;text-align:left;gap:0 16px;flex-wrap:nowrap;overflow:hidden}
  .topbar-left{justify-content:flex-start;flex-wrap:nowrap;gap:0 16px;width:100%;min-width:0}
  .topbar-left span{font-size:11.5px;min-width:0}
  .topbar-left .tb-loc{display:none}                 /* keep phone + email on one line */
  .topbar-right{display:none}                          /* no social icons on mobile topbar */
}
@media(max-width:480px){
  #topbar{font-size:11px}
  .topbar-inner{padding:0 10px}
  .topbar-left{gap:0 12px}
  .topbar-left span{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:360px){
  .topbar-left span{font-size:10.5px}
}

/* HEADER (logo left, two-tier menu right) */
#header{background:#fff;padding:12px 0;box-shadow:0 2px 16px rgba(0,0,0,.08);position:sticky;top:0;z-index:1000;border-bottom:3px solid var(--gold)}
.header-inner{max-width:1400px;margin:0 auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:nowrap}
.logo-area{display:flex;align-items:center;gap:16px;text-decoration:none;flex-shrink:0}
.logo-img{height:92px;width:auto;flex-shrink:0;display:block}
.logo-text h1{font-family:'Playfair Display',serif;font-size:24px;color:var(--navy);line-height:1.12;font-weight:700}
.logo-text .school-sub{font-size:12px;color:var(--sky);font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-top:3px}
.logo-text small{font-size:11.5px;color:var(--gray);display:block;margin-top:2px}

/* Right cluster holds both menu tiers */
.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:1;min-width:0}

/* SECONDARY / UTILITY MENU (top tier — LINE 1: text links, wrap, no scroller) */
.top-menu{display:flex;list-style:none;margin:0;padding:0;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:2px;row-gap:4px;max-width:100%}
.top-menu>li{flex:0 0 auto}
.top-menu>li>a{display:block;padding:4px 9px;color:var(--navy);text-decoration:none;font-size:12px;font-weight:600;white-space:nowrap;border-right:1px solid var(--border);transition:.2s;line-height:1.2}
.top-menu>li:last-child>a,.top-menu>li.tm-btn>a{border-right:none}
.top-menu>li>a:hover{color:var(--sky)}

/* ACTION BUTTONS (LINE 2: Mandatory Disclosure + Alumni Form) */
.top-buttons{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:nowrap}
.hdr-btn{display:inline-block;border-radius:6px!important;color:#fff!important;padding:7px 14px!important;font-weight:700!important;box-shadow:0 3px 10px rgba(30,79,163,.25);white-space:nowrap;text-decoration:none}
.hdr-btn{background:linear-gradient(135deg,#1e4fa3,#2563eb)}
.hdr-btn i{margin-right:5px}
.hdr-btn-alt{background:linear-gradient(135deg,#f59e0b,#f97316)!important;box-shadow:0 3px 10px rgba(249,115,22,.3)!important}
.hdr-btn:hover{filter:brightness(1.06)}

/* PRIMARY MENU (bottom tier — rounded bar) */
#navbar{display:flex;align-items:center}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--navy);font-size:26px;line-height:1}
#nav-menu{display:flex;list-style:none;margin:0;padding:5px 8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;background:var(--grad-blue);border-radius:40px;box-shadow:0 6px 18px rgba(6,24,58,.22)}
#nav-menu>li{position:relative}
#nav-menu>li>a{display:block;padding:8px 12px;color:#eaf1ff;text-decoration:none;font-size:13px;font-weight:600;transition:.2s;white-space:nowrap;border-radius:24px}
#nav-menu>li>a:hover,#nav-menu>li.active>a{color:#fff;background:rgba(255,255,255,.16)}
.has-dropdown>a::after{content:' \25BE';font-size:9px;opacity:.7}
/* Invisible hover-bridge: keeps :hover active while moving into the sub-menu */
#nav-menu>li.has-dropdown::before{content:'';position:absolute;left:0;right:0;top:100%;height:16px;display:none}
.dropdown{display:none;position:absolute;top:100%;left:0;margin-top:0;background:var(--navy2);min-width:250px;border-top:3px solid var(--gold);box-shadow:0 12px 30px rgba(0,0,0,.28);z-index:1001;border-radius:0 0 8px 8px;list-style:none;padding:6px 0}
.dropdown li a{pointer-events:auto}
/* desktop-only hover reveal (mobile uses tap/accordion) */
@media(min-width:1261px){
  #nav-menu>li.has-dropdown:hover::before{display:block}
  #nav-menu>li.has-dropdown:hover>.dropdown{display:block}
}
.dropdown li a{display:block;padding:10px 18px;color:#cdd5e0;font-size:12.5px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.05);transition:.2s}
.dropdown li a:hover{color:var(--gold);background:rgba(255,255,255,.06);padding-left:24px}
.dropdown li a i{color:var(--gold2);margin-right:5px;font-size:11px;width:14px;text-align:center}

/* HERO SLIDER — full uncropped image on every device (contain + blurred backdrop) */
/* HERO SLIDER — full-width, UNCROPPED banner on desktop AND mobile.
   The container aspect-ratio matches the 1920x600 banners, so object-fit:cover
   shows the WHOLE image with no crop and no letterbox bars on every screen.
   JS (fitHero) additionally sets the exact height from the active image, so any
   future upload of a different size also stays fully visible and uncropped. */
#hero{position:relative;overflow:hidden;background:var(--grad-blue);width:100%;aspect-ratio:1920/600;transition:height .35s ease}
/* Slides cross-fade smoothly (stacked, absolutely positioned) */
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease;z-index:1}
.slide.active{opacity:1;visibility:visible;z-index:2}
/* Full banner image — fills edge-to-edge, never cropped (container ratio == image ratio) */
.slide-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;z-index:1}
/* readability wash — above the image, below the caption (per-slide) */
.slide::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(6,24,58,.66) 0%,rgba(6,24,58,.20) 36%,transparent 64%)}
/* Caption: plain text bottom-left */
.slide-content{position:absolute;left:4%;right:5%;bottom:38px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;max-width:600px;z-index:4;background:none;border:none;padding:0}
.slide-content>*{max-width:560px}
.slide-eyebrow{display:inline-block;font-size:11px;color:#fff;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;background:linear-gradient(135deg,var(--blue),var(--gold));padding:5px 14px;border-radius:30px;box-shadow:0 4px 14px rgba(30,79,163,.4)}
.slide-content h2{font-family:'Playfair Display',serif;font-size:clamp(18px,2.6vw,32px);color:#fff;line-height:1.18;text-shadow:0 2px 12px rgba(0,0,0,.75)}
.slide-content p{font-size:clamp(12px,1.4vw,15px);color:#eaf1ff;margin-top:8px;font-weight:400;letter-spacing:.4px;text-shadow:0 2px 10px rgba(0,0,0,.65)}
.slide-content .btn{margin-top:14px;padding:11px 28px;background:var(--gold);color:var(--navy);border:none;border-radius:6px;font-weight:700;font-size:13px;cursor:pointer;text-decoration:none;display:inline-block;transition:.25s;letter-spacing:.5px;box-shadow:0 8px 20px rgba(56,189,248,.35)}
.slide-content .btn:hover{background:var(--gold2);transform:translateY(-3px);box-shadow:0 14px 30px rgba(56,189,248,.5)}
.slider-nav{position:absolute;bottom:16px;right:5%;left:auto;transform:none;display:flex;gap:8px;z-index:6}
.slider-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;border:2px solid transparent;transition:.2s}
.slider-dot.active{background:var(--gold);border-color:var(--gold);width:26px;border-radius:5px}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.18);border:none;color:#fff;width:44px;height:44px;border-radius:50%;font-size:17px;cursor:pointer;z-index:10;backdrop-filter:blur(4px);transition:.2s;display:flex;align-items:center;justify-content:center}
.slider-arrow:hover{background:var(--gold);color:var(--navy)}
.slider-arrow.prev{left:16px}.slider-arrow.next{right:16px}
/* Hero animated jet — matches index(2).html exactly */
.hero-jet{display:none}
@keyframes flyAcross{0%{left:-80px;top:20%;transform:scaleX(1) rotate(0deg)}45%{top:30%}50%{transform:scaleX(1) rotate(0deg)}100%{left:110%;top:14%;transform:scaleX(1) rotate(-6deg)}}

/* ADMISSION BANNER */
#admission-banner{background:var(--grad-sky);padding:14px 20px;position:relative;overflow:hidden}
.adm-banner-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:20px;position:relative;z-index:2;flex-wrap:wrap;justify-content:center}
.adm-banner-jet{font-size:34px;color:#fff}
.adm-banner-text{flex:1;min-width:200px;text-align:center}
.adm-pill{display:inline-block;background:#fff;color:var(--sky);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:3px 12px;border-radius:20px;margin-bottom:6px}
.adm-banner-text h3{color:#fff;font-size:20px;font-family:'Playfair Display',serif;line-height:1.2}
.adm-banner-text p{color:rgba(255,255,255,.9);font-size:13px;margin-top:3px}
.adm-banner-btn{background:#fff;color:var(--sky);font-weight:700;font-size:13px;padding:11px 24px;border-radius:30px;text-decoration:none;white-space:nowrap;transition:.2s;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.adm-banner-btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.25)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}

/* MARQUEE */
#marquee-bar{background:var(--gold);padding:8px 0;overflow:hidden}
.marquee-track{display:flex;gap:80px;animation:scrollmq 30s linear infinite;white-space:nowrap}
.marquee-track:hover{animation-play-state:paused}
.marquee-item{font-size:13px;font-weight:600;color:var(--navy);display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:.2s}
.marquee-item:hover{color:var(--navy2)}
.marquee-item .dot{width:6px;height:6px;border-radius:50%;background:var(--navy);flex-shrink:0;display:inline-block;opacity:.5}
.marquee-item .dot.hot{background:#dc2626;opacity:1}
@keyframes scrollmq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* QUICK INFO CARDS */
#quick-info{background:var(--grad-blue);padding:0}
.quick-cards{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);transform:translateY(-40px);position:relative;z-index:5}
.quick-card{padding:28px 20px;text-align:center;color:#fff;border-right:1px solid rgba(255,255,255,.1);cursor:pointer;transition:.3s;text-decoration:none;display:block}
.quick-card:last-child{border-right:none}
.quick-card:hover{background:var(--gold);color:var(--navy)}
.quick-card:hover .quick-icon{color:var(--navy)}
.quick-card:hover h3,.quick-card:hover p{color:var(--navy)}
.quick-icon{font-size:34px;margin-bottom:10px;color:var(--gold);display:block}
.quick-card h3{font-size:15px;font-weight:600;margin-bottom:4px}
.quick-card p{font-size:12px;color:var(--gray2);transition:.3s}

/* SECTIONS */
.section{padding:70px 20px}
.section-alt{background:var(--light)}
.container{max-width:1200px;margin:0 auto}
.section-header{text-align:center;margin-bottom:50px}
.section-badge{display:inline-block;padding:6px 18px;background:var(--gold);color:var(--navy);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;border-radius:2px;margin-bottom:14px}
.section-header h2{font-family:'Playfair Display',serif;font-size:38px;color:var(--navy);margin-bottom:12px}
.section-header p{font-size:16px;color:var(--gray);max-width:600px;margin:0 auto;line-height:1.7}
.section-divider{width:60px;height:3px;background:var(--gold);margin:14px auto 0;border-radius:2px}

/* HOME GRID */
.home-grid{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start}

/* ABOUT */
.about-text-badge{display:inline-block;padding:5px 14px;background:rgba(56,189,248,.15);color:var(--sky);font-size:11px;font-weight:700;border-radius:4px;margin-bottom:14px;border:1px solid rgba(56,189,248,.3)}
.about-content h2{font-family:'Playfair Display',serif;font-size:32px;color:var(--navy);line-height:1.3;margin-bottom:16px}
.about-content p{color:var(--gray);line-height:1.8;font-size:15px;margin-bottom:14px}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.stat-box{text-align:center;padding:18px 10px;background:var(--navy);border-radius:8px;color:#fff}
.stat-num{font-family:'Playfair Display',serif;font-size:30px;color:var(--gold);font-weight:700;line-height:1}
.stat-label{font-size:12px;color:var(--gray2);margin-top:4px}

/* NOTICE BOARD */
.notice-board{background:#fff;border-radius:10px;box-shadow:0 4px 30px rgba(0,0,0,.08);overflow:hidden}
.notice-header{background:var(--navy);color:#fff;padding:16px 20px;display:flex;justify-content:space-between;align-items:center}
.notice-header h3{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.notice-header h3 i{color:var(--gold)}
.notice-header a{font-size:12px;color:var(--gold);text-decoration:none}
.notice-header a:hover{color:var(--gold2)}
.notice-list{padding:0;max-height:320px;overflow-y:auto;scroll-behavior:smooth}
.notice-list::-webkit-scrollbar{width:6px}
.notice-list::-webkit-scrollbar-thumb{background:var(--sky);border-radius:3px}
.notice-item{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:var(--text);transition:.2s;cursor:pointer}
.notice-item:hover{background:var(--light)}
.notice-badge{padding:3px 8px;border-radius:3px;font-size:10px;font-weight:700;flex-shrink:0;margin-top:2px}
.badge-high{background:#fee2e2;color:#991b1b}
.badge-normal{background:#e0f2fe;color:#0369a1}
.notice-text{font-size:13px;line-height:1.5}

/* EVENTS CAROUSEL */
.carousel-wrap{position:relative}
.events-carousel{display:flex;gap:24px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding:6px 2px 18px;-webkit-overflow-scrolling:touch}
.events-carousel::-webkit-scrollbar{height:8px}
.events-carousel::-webkit-scrollbar-track{background:#e2e8f0;border-radius:4px}
.events-carousel::-webkit-scrollbar-thumb{background:var(--sky);border-radius:4px}
.events-carousel .event-card{flex:0 0 340px;max-width:340px;scroll-snap-align:start}
.carousel-btn{position:absolute;top:42%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:none;background:var(--grad-blue-bright);color:#fff;font-size:20px;cursor:pointer;z-index:5;box-shadow:0 4px 16px rgba(37,99,235,.4);transition:.2s;display:flex;align-items:center;justify-content:center}
.carousel-btn:hover{transform:translateY(-50%) scale(1.1)}
.carousel-btn.prev{left:-10px}.carousel-btn.next{right:-10px}

/* EVENT CARD */
.event-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.07);transition:.3s}
.event-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(0,0,0,.15)}
.event-img{height:200px;background:var(--grad-blue);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.event-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:.65}
.event-img-icon{font-size:50px;color:rgba(255,255,255,.3);position:relative;z-index:1}
.event-date{position:absolute;top:14px;left:14px;background:var(--gold);color:var(--navy);padding:8px 12px;border-radius:6px;text-align:center;font-weight:700;font-size:12px;z-index:2}
.event-date span{display:block;font-size:22px;line-height:1}
.event-body{padding:18px}
.event-tag{font-size:11px;font-weight:700;color:var(--sky);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;display:flex;align-items:center;gap:4px}
.event-body h3{font-size:16px;font-weight:600;margin:6px 0 8px;color:var(--navy)}
.event-body p{font-size:13px;color:var(--gray);line-height:1.6}

/* GALLERY */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery-item{aspect-ratio:1;border-radius:8px;overflow:hidden;cursor:pointer;position:relative;background:var(--navy)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:.35s}
.gallery-item:hover img{transform:scale(1.08);opacity:.8}
.gallery-overlay{position:absolute;inset:0;background:rgba(10,22,40,.6);display:flex;align-items:center;justify-content:center;opacity:0;transition:.3s}
.gallery-item:hover .gallery-overlay{opacity:1}
.gallery-overlay i{font-size:28px;color:var(--gold)}

/* EXAM PAPERS / DOWNLOADS */
.hwd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;align-items:start}
.hwd-col h3{font-family:'Playfair Display',serif;font-size:20px;color:var(--navy);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.hwd-col h3 i{color:var(--blue)}
.hwd-list{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow-y:auto;padding-right:6px}
.hwd-list::-webkit-scrollbar{width:6px}.hwd-list::-webkit-scrollbar-thumb{background:var(--sky);border-radius:3px}
.hwd-item{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--border);border-left:4px solid var(--sky);border-radius:8px;padding:13px 16px;text-decoration:none;color:var(--text);transition:.2s}
.hwd-item:hover{transform:translateX(4px);box-shadow:0 6px 18px rgba(30,79,163,.12);border-left-color:var(--gold)}
.hwd-item .hwd-name{font-size:14px;font-weight:600}
.hwd-item .hwd-meta{font-size:11px;color:var(--gray);margin-top:2px}
.hwd-dl{font-size:12px;font-weight:700;color:var(--sky);white-space:nowrap;display:flex;align-items:center;gap:5px;flex-shrink:0}

/* ACHIEVEMENTS */
.achieve-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.achieve-card{background:#fff;border-radius:12px;padding:28px 18px;text-align:center;box-shadow:0 6px 24px rgba(30,79,163,.1);border-top:4px solid var(--sky);transition:.3s}
.achieve-card:hover{transform:translateY(-6px);box-shadow:0 14px 38px rgba(30,79,163,.2);border-top-color:var(--gold)}
.achieve-icon{font-size:40px;margin-bottom:12px;color:var(--blue)}
.achieve-num{font-family:'Playfair Display',serif;font-size:30px;font-weight:700;background:var(--grad-sky);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.achieve-card h3{font-size:14px;font-weight:600;color:var(--navy);margin:6px 0 4px}
.achieve-card p{font-size:12px;color:var(--gray);line-height:1.5}

/* FOOTER */
#footer{background:var(--grad-blue);color:#fff;padding:60px 20px 0}
.footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.footer-brand p{font-size:13px;color:var(--gray2);line-height:1.8;margin:14px 0}
.footer-logo-img{height:54px;margin-bottom:10px;display:block}
.footer-social{display:flex;gap:10px;margin-top:16px}
.footer-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-size:14px;transition:.2s}
.footer-social a:hover{background:var(--gold);color:var(--navy)}
.footer-col h4{font-size:14px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:1px;margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:8px}
.footer-col ul li a{color:var(--gray2);text-decoration:none;font-size:13px;transition:.2s;display:flex;align-items:center;gap:6px}
.footer-col ul li a i{color:var(--gold);font-size:10px;width:10px}
.footer-col ul li a:hover{color:var(--gold);padding-left:4px}
.footer-contact-item{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;font-size:13px;color:var(--gray2);line-height:1.6}
.footer-contact-item .fi-icon{color:var(--gold);font-size:15px;flex-shrink:0;margin-top:2px;width:18px;text-align:center}
.footer-bottom{max-width:1200px;margin:40px auto 0;border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--gray2);flex-wrap:wrap;gap:10px}
.footer-bottom a{color:var(--gold);text-decoration:none}

/* BUTTONS */
.btn-primary{display:inline-block;padding:12px 28px;background:var(--gold);color:var(--navy);font-weight:700;font-size:13px;border-radius:4px;text-decoration:none;transition:.2s;border:2px solid var(--gold);cursor:pointer;letter-spacing:.5px}
.btn-primary:hover{background:transparent;color:var(--gold)}
.btn-outline{display:inline-block;padding:12px 28px;border:2px solid var(--navy);color:var(--navy);font-weight:700;font-size:13px;border-radius:4px;text-decoration:none;transition:.2s;cursor:pointer}
.btn-outline:hover{background:var(--navy);color:#fff}

/* PAGE CONTENT */
.page-wrap{min-height:70vh}
.page-banner{height:240px;background:var(--grad-blue);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:0 20px}
.page-banner::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 30px,rgba(255,255,255,.02) 30px,rgba(255,255,255,.02) 60px)}
.page-banner::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--gold)}
.page-banner h1{font-family:'Playfair Display',serif;font-size:40px;color:#fff;position:relative;z-index:1}
.page-banner p{font-size:14px;color:var(--gold2);position:relative;z-index:1;margin-top:8px}
.breadcrumb{background:var(--light);padding:12px 20px;font-size:13px;color:var(--gray);border-bottom:1px solid var(--border)}
.breadcrumb-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:6px}
.breadcrumb a{color:var(--blue);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb i{font-size:10px;color:var(--gray2)}
.page-content-area{max-width:1100px;margin:0 auto;padding:50px 20px}
.content-card{background:#fff;border-radius:12px;box-shadow:0 4px 30px rgba(0,0,0,.08);padding:40px;margin-bottom:28px}
.content-card h2{font-family:'Playfair Display',serif;font-size:26px;color:var(--navy);margin-bottom:16px}
.content-card h3{font-size:18px;font-weight:600;color:var(--blue);margin:20px 0 10px;display:flex;align-items:center;gap:8px}
.content-card h3 i{color:var(--gold)}
.content-card p{color:var(--gray);line-height:1.8;margin-bottom:14px;font-size:15px}
.content-card ul{margin-left:20px;margin-bottom:14px}
.content-card ul li{color:var(--gray);line-height:1.8;margin-bottom:6px;font-size:15px}
.content-card table{width:100%;border-collapse:collapse;margin-top:10px}
.content-card table th{background:var(--navy);color:#fff;padding:12px 16px;text-align:left;font-size:13px}
.content-card table td{padding:11px 16px;border-bottom:1px solid var(--border);font-size:14px;color:var(--text)}
.content-card table tr:nth-child(even) td{background:var(--light)}
.content-card table tr:hover td{background:#e8f4ff}
.message-card{display:flex;gap:30px;align-items:flex-start}
.message-photo{width:120px;height:140px;border-radius:8px;background:var(--grad-blue);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:40px;border:3px solid var(--gold);color:var(--gold)}
.message-body blockquote{font-style:italic;font-size:16px;color:var(--gray);line-height:1.8;border-left:4px solid var(--gold);padding-left:18px;margin-bottom:16px}
.message-sig{font-weight:700;color:var(--navy);font-size:15px}
.message-sig small{display:block;font-weight:400;color:var(--gray);font-size:13px;margin-top:3px}

/* NOTICE PAGE */
.notice-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.notice-filter-btn{padding:8px 20px;border-radius:4px;border:2px solid var(--border);background:#fff;color:var(--gray);font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:.2s}
.notice-filter-btn.active,.notice-filter-btn:hover{border-color:var(--sky);background:var(--sky);color:#fff}
.notice-card{background:#fff;border-radius:10px;box-shadow:0 3px 16px rgba(6,24,58,.07);padding:20px;margin-bottom:12px;display:flex;gap:16px;align-items:flex-start;text-decoration:none;color:var(--text);transition:.2s;border-left:4px solid var(--border)}
.notice-card:hover{transform:translateX(4px);box-shadow:0 6px 24px rgba(6,24,58,.12);border-left-color:var(--gold)}
.notice-card.hot{border-left-color:#ef4444}
.notice-card-body{flex:1}
.notice-card-title{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:6px}
.notice-card-meta{font-size:12px;color:var(--gray);display:flex;gap:14px;flex-wrap:wrap}
.notice-card-meta span{display:flex;align-items:center;gap:4px}
.notice-card-pdf a{display:flex;align-items:center;gap:6px;padding:7px 16px;background:var(--light);color:var(--blue);border-radius:20px;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap;transition:.2s}
.notice-card-pdf a:hover{background:var(--blue);color:#fff}

/* GALLERY PAGE */
.gallery-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;justify-content:center}
.gallery-filter-btn{padding:8px 22px;border-radius:4px;border:2px solid var(--border);background:#fff;color:var(--gray);font-size:13px;font-weight:600;cursor:pointer;transition:.2s}
.gallery-filter-btn.active,.gallery-filter-btn:hover{border-color:var(--sky);background:var(--sky);color:#fff}

/* EXAM PAPER FILTER */
.paper-filter-bar{background:#fff;border-radius:10px;padding:22px;box-shadow:0 4px 20px rgba(6,24,58,.07);margin-bottom:28px;display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.paper-filter-bar .filter-group{flex:1;min-width:150px}
.paper-filter-bar label{font-size:12px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;display:block}
.paper-filter-bar select,.paper-filter-bar input{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:6px;font-size:14px;color:var(--text);background:#fff;transition:.2s}
.paper-filter-bar select:focus,.paper-filter-bar input:focus{outline:none;border-color:var(--sky)}
.paper-card{background:#fff;border-radius:10px;padding:18px;box-shadow:0 3px 16px rgba(6,24,58,.07);display:flex;align-items:center;gap:14px;margin-bottom:10px;border-left:4px solid var(--sky);transition:.2s}
.paper-card:hover{transform:translateX(4px);box-shadow:0 6px 24px rgba(6,24,58,.12);border-left-color:var(--gold)}
.paper-icon{width:44px;height:44px;background:var(--light);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--blue);flex-shrink:0}
.paper-info{flex:1}
.paper-info h4{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:3px}
.paper-info p{font-size:12px;color:var(--gray)}
.paper-dl{padding:8px 18px;background:var(--blue);color:#fff;border-radius:20px;font-size:13px;font-weight:700;text-decoration:none;display:flex;align-items:center;gap:5px;transition:.2s;white-space:nowrap}
.paper-dl:hover{background:var(--navy)}

/* ADMISSION STEPS */
.admission-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:40px}
.step-card{text-align:center;padding:24px 16px;background:#fff;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.06);border-top:4px solid var(--gold)}
.step-num{width:50px;height:50px;border-radius:50%;background:var(--navy);color:var(--gold);font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-family:'Playfair Display',serif}
.step-card h3{font-size:14px;font-weight:600;color:var(--navy);margin-bottom:8px}
.step-card p{font-size:12px;color:var(--gray);line-height:1.6}

/* FEE TABLE */
.fee-table{width:100%;border-collapse:collapse;box-shadow:0 4px 16px rgba(6,24,58,.07)}
.fee-table th{background:var(--navy);color:#fff;padding:13px 18px;font-size:13px;text-align:left}
.fee-table td{padding:12px 18px;border-bottom:1px solid var(--border);font-size:14px;background:#fff}
.fee-table tr:hover td{background:var(--light)}

/* INFRA GRID */
.infra-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.infra-card{background:#fff;border-radius:10px;padding:24px 20px;box-shadow:0 4px 20px rgba(0,0,0,.07);text-align:center;transition:.3s;border-bottom:3px solid transparent}
.infra-card:hover{transform:translateY(-4px);border-bottom-color:var(--gold);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.infra-icon{font-size:44px;margin-bottom:12px;color:var(--blue)}
.infra-card h3{font-size:15px;font-weight:600;color:var(--navy);margin-bottom:8px}
.infra-card p{font-size:13px;color:var(--gray);line-height:1.6}

/* CLUBS */
.clubs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.club-card{background:#fff;border-radius:10px;padding:22px 16px;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.07);transition:.3s}
.club-card:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.club-icon{font-size:40px;margin-bottom:12px;color:var(--blue)}
.club-card h3{font-size:14px;font-weight:600;color:var(--navy)}
.club-card p{font-size:12px;color:var(--gray);margin-top:6px;line-height:1.5}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:40px}
.contact-info-item{display:flex;gap:14px;margin-bottom:22px;align-items:flex-start}
.contact-info-icon{width:44px;height:44px;background:var(--gold);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;color:var(--navy)}
.contact-info-text h4{font-weight:600;font-size:14px;color:var(--navy);margin-bottom:4px}
.contact-info-text p{font-size:13px;color:var(--gray);line-height:1.6}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;padding:12px 16px;border:1.5px solid var(--border);border-radius:6px;font-family:inherit;font-size:14px;margin-bottom:14px;transition:.2s;color:var(--text);background:#fff}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--blue)}
.contact-form textarea{height:120px;resize:vertical}

/* SCHOOL SONG */
.song-card{background:var(--navy);color:#fff;padding:40px;border-radius:12px;text-align:center;border:2px solid var(--gold)}
.song-card h2{font-family:'Playfair Display',serif;font-size:28px;color:var(--gold);margin-bottom:24px}
.song-verse{margin-bottom:24px;font-size:16px;line-height:2;color:var(--gray2)}
.song-verse strong{color:#fff}

/* CONDUCT */
.conduct-item{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--border)}
.conduct-item:last-child{border-bottom:none}
.conduct-num{width:36px;height:36px;background:var(--navy);color:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.conduct-text h4{font-size:15px;font-weight:600;color:var(--navy);margin-bottom:6px}
.conduct-text p{font-size:14px;color:var(--gray);line-height:1.7}

/* TIMING TABLE */
.timing-table{width:100%;border-collapse:collapse}
.timing-table th{background:var(--navy);color:var(--gold);padding:12px 16px;font-size:13px;text-align:left}
.timing-table td{padding:11px 16px;border-bottom:1px solid var(--border);font-size:14px;background:#fff}
.timing-table tr:last-child td{border-bottom:none}
.timing-table tr:hover td{background:var(--light)}

/* DISCLOSURE */
.disclosure-item{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border);font-size:14px}
.disclosure-item:last-child{border-bottom:none}
.disclosure-item:hover{background:var(--light)}
.disclosure-item span{color:var(--navy);font-weight:500;display:flex;align-items:center;gap:8px}
.disclosure-item a{color:var(--blue);text-decoration:none;font-weight:600;display:flex;align-items:center;gap:6px;padding:6px 14px;background:var(--light);border-radius:4px;transition:.2s}
.disclosure-item a:hover{background:var(--blue);color:#fff}

/* TENDER */
.tender-item{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--border)}
.tender-item:last-child{border-bottom:none}
.tender-info h4{font-size:14px;font-weight:600;color:var(--navy)}
.tender-info p{font-size:12px;color:var(--gray);margin-top:3px}
.tender-date{font-size:12px;color:var(--gold);font-weight:600;white-space:nowrap}

/* TWO COLUMN */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:30px}

/* HOUSE CARDS */
.house-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:36px}
.house-card{border-radius:10px;padding:28px 20px;text-align:center;color:#fff;position:relative;overflow:hidden}
.house-card::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.06)}
.house-card h3{font-size:18px;font-weight:800;font-family:'Playfair Display',serif;margin-bottom:6px;position:relative;z-index:1}
.house-card p{font-size:13px;opacity:.85;position:relative;z-index:1}
.house-icon{font-size:36px;margin-bottom:12px;position:relative;z-index:1;color:#fff}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9999;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{background:#fff;border-radius:12px;padding:32px;max-width:600px;width:100%;max-height:80vh;overflow-y:auto;position:relative}
.modal-close{position:absolute;top:16px;right:16px;background:var(--light);border:none;font-size:20px;cursor:pointer;color:var(--gray);line-height:1;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.2s}
.modal-close:hover{background:var(--navy);color:#fff}
.modal-box h2{font-family:'Playfair Display',serif;font-size:22px;color:var(--navy);margin-bottom:16px}

/* SCROLL TOP */
#scrolltop{position:fixed;bottom:30px;right:30px;width:44px;height:44px;background:var(--gold);color:var(--navy);border:none;border-radius:50%;font-size:18px;cursor:pointer;display:none;align-items:center;justify-content:center;font-weight:700;z-index:999;transition:.2s;box-shadow:0 4px 16px rgba(56,189,248,.4)}
#scrolltop:hover{background:var(--navy);color:var(--gold)}
#scrolltop.show{display:flex}

/* ALERTS */
.alert-success{background:#d1fae5;border:1px solid #6ee7b7;color:#065f46;padding:14px 20px;border-radius:8px;margin-bottom:16px;display:flex;align-items:center;gap:10px;font-size:14px}
.alert-error{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;padding:14px 20px;border-radius:8px;margin-bottom:16px;display:flex;align-items:center;gap:10px;font-size:14px}

/* ADMIN PANEL */
#admin-panel{display:block;min-height:100vh;background:var(--admin-bg)}
.admin-layout{display:flex;min-height:100vh}
.admin-sidebar{width:260px;background:var(--admin-sidebar);color:#fff;display:flex;flex-direction:column;position:fixed;height:100vh;overflow-y:auto;z-index:100}
.admin-logo{padding:24px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.admin-logo h2{font-size:14px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:1px}
.admin-logo p{font-size:11px;color:var(--gray2);margin-top:3px}
.admin-nav{padding:16px 0;flex:1}
.admin-nav-section{padding:8px 20px;font-size:10px;color:var(--gray);text-transform:uppercase;letter-spacing:1.5px;margin-top:8px}
.admin-nav a{display:flex;align-items:center;gap:10px;padding:11px 20px;color:var(--gray2);text-decoration:none;font-size:13px;transition:.2s;border-left:3px solid transparent}
.admin-nav a:hover,.admin-nav a.active{color:#fff;background:rgba(255,255,255,.06);border-left-color:var(--gold)}
.admin-nav a i{font-size:14px;width:18px;text-align:center;color:var(--gray2)}
.admin-nav a:hover i,.admin-nav a.active i{color:var(--gold)}
.admin-main{margin-left:260px;flex:1;padding:30px;background:var(--admin-bg);min-height:100vh}
.admin-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.admin-topbar h1{font-size:20px;color:#fff;font-weight:600}
.admin-topbar-right{display:flex;align-items:center;gap:14px}
.admin-badge{padding:6px 14px;background:rgba(56,189,248,.15);color:var(--gold);border-radius:20px;font-size:12px;font-weight:600}
.admin-logout{padding:8px 18px;background:rgba(255,255,255,.08);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:13px;font-family:inherit;transition:.2s;text-decoration:none;display:inline-block}
.admin-logout:hover{background:rgba(255,60,60,.2);color:#f87171}
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:28px}
.admin-stat{background:var(--admin-card);border-radius:10px;padding:22px;border:1px solid rgba(255,255,255,.06);transition:.2s}
.admin-stat:hover{border-color:rgba(56,189,248,.3)}
.admin-stat-label{font-size:11px;color:var(--gray2);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.admin-stat-value{font-size:30px;font-weight:700;color:#fff}
.admin-stat-meta{font-size:12px;color:var(--gold);margin-top:6px;display:flex;align-items:center;gap:5px}
.admin-card{background:var(--admin-card);border-radius:10px;padding:24px;border:1px solid rgba(255,255,255,.06);margin-bottom:24px}
.admin-card h3{font-size:15px;font-weight:600;color:#fff;margin-bottom:18px;display:flex;align-items:center;gap:8px}
.admin-card h3 i{color:var(--gold)}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th{font-size:11px;color:var(--gray2);text-transform:uppercase;letter-spacing:1px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.admin-table td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px;color:#cdd5e0;vertical-align:middle}
.admin-table tr:hover td{background:rgba(255,255,255,.03)}
.admin-table .badge{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}
.badge-active{background:rgba(16,185,129,.15);color:#6ee7b7}
.badge-pending{background:rgba(251,191,36,.15);color:#fcd34d}
.admin-action-btn{padding:5px 12px;border-radius:4px;border:none;font-size:12px;cursor:pointer;font-family:inherit;transition:.2s;display:inline-flex;align-items:center;gap:4px}
.btn-edit{background:rgba(37,99,235,.2);color:#93c5fd}
.btn-delete{background:rgba(239,68,68,.2);color:#fca5a5}
.btn-edit:hover{background:rgba(37,99,235,.4)}.btn-delete:hover{background:rgba(239,68,68,.4)}
.admin-form input,.admin-form textarea,.admin-form select{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:10px 14px;color:#fff;font-size:13px;font-family:inherit;margin-bottom:14px;transition:.2s}
.admin-form input:focus,.admin-form textarea:focus,.admin-form select:focus{outline:none;border-color:var(--gold)}
/* Dropdown options must be readable (dark bg + light text), not white-on-white */
.admin-form select{background-color:#1a2740;color:#fff;-webkit-appearance:menulist;appearance:menulist;}
.admin-form select option{background-color:#1a2740;color:#fff;}
.admin-form select option:checked,.admin-form select option:hover{background-color:var(--navy,#0b2447);color:var(--gold,#f5b301);}
.admin-form input::placeholder,.admin-form textarea::placeholder{color:var(--gray2)}
.admin-form label{font-size:12px;color:var(--gray2);display:block;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.admin-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.admin-btn{padding:10px 22px;background:var(--gold);color:var(--navy);border:none;border-radius:6px;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;transition:.2s;display:inline-flex;align-items:center;gap:6px}
.admin-btn:hover{background:var(--gold2)}
.login-card{background:var(--admin-sidebar);border-radius:16px;padding:44px;width:100%;max-width:420px;border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.login-card input{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:13px 16px;color:#fff;font-size:14px;font-family:inherit;margin-bottom:14px;transition:.2s}
.login-card input:focus{outline:none;border-color:var(--gold)}
.login-card .login-btn{width:100%;padding:13px;background:var(--gold);color:var(--navy);border:none;border-radius:8px;font-weight:700;font-size:15px;cursor:pointer;font-family:inherit;transition:.2s;margin-top:6px}
.login-card .login-btn:hover{background:var(--gold2)}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .6s ease both}
.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}

/* RESPONSIVE */
@media(max-width:1024px){
  .quick-cards{grid-template-columns:repeat(2,1fr)}
  .quick-card{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)}
  .home-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .admission-steps{grid-template-columns:repeat(2,1fr)}
  .infra-grid{grid-template-columns:repeat(2,1fr)}
  .clubs-grid{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .admin-stats{grid-template-columns:repeat(2,1fr)}
  .admin-sidebar{width:220px}
  .admin-main{margin-left:220px}
  .achieve-grid{grid-template-columns:repeat(2,1fr)}
  .hwd-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  /* Header / topbar / navbar mobile rules now handled in the
     MOBILE HEADER REWORK block at the end of this file. */

  /* HERO — keep full-width, UNCROPPED banner (aspect-ratio drives the height) */
  .slide-content{left:12px;right:12px;bottom:8px;max-width:none;padding:0}
  .slide-content>*{max-width:100%}
  .slide-eyebrow{font-size:9px;letter-spacing:1px;padding:3px 9px;margin-bottom:5px}
  .slide-content h2{font-size:clamp(14px,4.2vw,20px);line-height:1.16}
  .slide-content p{display:none}
  .slide-content .btn{margin-top:8px;padding:8px 16px;font-size:11px}
  .slider-arrow{width:30px;height:30px;font-size:13px}
  .slider-arrow.prev{left:8px}.slider-arrow.next{right:8px}
  .slider-nav{bottom:6px;right:10px;gap:6px}
  .slider-dot{width:7px;height:7px}
  .slider-dot.active{width:16px}

  /* QUICK CARDS */
  .quick-cards{grid-template-columns:1fr 1fr;transform:none}
  .quick-card{color:#fff}
  #quick-info{padding-bottom:10px}

  /* EVENTS */
  .events-carousel .event-card{flex:0 0 85%;max-width:85%}
  .carousel-btn{display:none}

  /* SECTIONS */
  .section{padding:44px 14px}
  .section-header{margin-bottom:30px}
  .section-header h2{font-size:26px}
  .section-header p{font-size:14px}

  /* GALLERY */
  .gallery-grid{grid-template-columns:repeat(2,1fr)}

  /* STATS */
  .stats-row{grid-template-columns:1fr 1fr}

  /* FOOTER */
  .footer-grid{grid-template-columns:1fr}
  #footer{padding:40px 14px 0}
  .footer-bottom{flex-direction:column;text-align:center;gap:8px}

  /* ADMIN */
  .admin-layout{flex-direction:column}
  .admin-sidebar{width:100%;height:auto;position:relative}
  .admin-main{margin-left:0;padding:16px}
  .admin-stats{grid-template-columns:1fr 1fr}
  .admin-form-row{grid-template-columns:1fr}
  .admin-topbar{flex-direction:column;align-items:flex-start;gap:10px}

  /* PAGE CONTENT */
  .page-banner{height:180px}
  .page-banner h1{font-size:24px}
  .page-banner p{font-size:13px}
  .page-content-area{padding:30px 14px}
  .content-card{padding:22px 18px}
  .content-card table{font-size:12px;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .message-card{flex-direction:column;gap:18px}
  .house-grid{grid-template-columns:repeat(2,1fr)}

  /* MISC */
  .paper-filter-bar{flex-direction:column;gap:10px}
  .notice-card{flex-direction:column;gap:10px}
  .two-col{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  /* HEADER */
  .logo-text h1{font-size:12.5px}
  .logo-text .school-sub{display:none}
  .logo-img{height:44px}

  /* HERO — no fixed height; aspect-ratio keeps the banner fully visible/uncropped */
  .slider-arrow{width:28px;height:28px;font-size:12px}
  .slider-arrow.prev{left:6px}.slider-arrow.next{right:6px}
  .slide-content{left:10px;right:10px;bottom:6px;padding:0}
  .slide-content h2{font-size:clamp(13px,4vw,17px)}
  .slide-content p{display:none}
  .hero-jet{font-size:28px}

  /* QUICK CARDS */
  .quick-cards{grid-template-columns:1fr}

  /* SECTIONS */
  .section{padding:34px 12px}
  .section-header h2{font-size:22px}

  /* GALLERY */
  .gallery-grid{grid-template-columns:1fr 1fr}
  .stats-row{grid-template-columns:1fr}
  .admission-steps{grid-template-columns:1fr}
  .clubs-grid{grid-template-columns:1fr 1fr}
  .achieve-grid{grid-template-columns:1fr 1fr}
  .infra-grid{grid-template-columns:1fr}

  /* ADMIN */
  .admin-stats{grid-template-columns:1fr}
  .admin-card h3{font-size:14px}

  /* FOOTER */
  .footer-grid{gap:28px}
  .footer-col h4{margin-bottom:12px}

  /* CONTENT */
  .content-card{padding:18px 14px}
  .page-banner h1{font-size:20px}
  .hwd-grid{grid-template-columns:1fr}
  .house-grid{grid-template-columns:1fr 1fr}
  .fee-table{font-size:12px;display:block;overflow-x:auto}
}

/* ============================================================
   GLOBAL MOBILE RESPONSIVE HARDENING (added for full mobile support)
   Forces inline multi-column grids in page views to stack on
   small screens. Inline styles need !important to be overridden.
   ============================================================ */
@media(max-width:820px){
  /* Any inline 2-col / 3-col / 4-col grid collapses to single column */
  [style*="grid-template-columns:1fr 1fr 1fr auto"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"]{
    grid-template-columns:1fr !important;
  }
  .about-two-col{grid-template-columns:1fr !important;}
  /* Make any wide table inside cards scroll horizontally on mobile */
  .content-card table,.fee-table,.timing-table,.admin-table{
    display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  }
}
@media(min-width:560px) and (max-width:820px){
  /* On small tablets keep auto-fill product/photo grids at 2 columns */
  [style*="minmax(240px"],[style*="minmax(280px"],[style*="minmax(260px"]{
    grid-template-columns:repeat(2,1fr) !important;
  }
}
@media(max-width:560px){
  [style*="minmax(240px"],[style*="minmax(280px"],[style*="minmax(260px"]{
    grid-template-columns:1fr !important;
  }
  /* Stats bar wraps tightly on phones */
  .stats-bar .stat-item{min-width:120px !important;flex:1 1 40% !important;padding:1rem !important;}
  /* Page CTA buttons full-width on phones */
  .page-content-area .btn-primary,.page-content-area .btn-outline{width:100%;justify-content:center;text-align:center;}
}

/* ============================================================
   HOME POPUP MODAL — tafssp-style (framed image card + corner close)
   ============================================================ */
.home-popup-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.72);
  display:none;align-items:center;justify-content:center;
  z-index:99999;padding:20px;opacity:0;transition:opacity .3s ease;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.home-popup-overlay.show{display:flex;opacity:1;}
.home-popup-box{
  position:relative;background:#fff;border-radius:14px;
  width:auto;max-width:min(94vw,560px);margin:auto;
  padding:10px;box-shadow:0 24px 70px rgba(0,0,0,.5);
  transform:scale(.8);opacity:0;
  display:inline-flex;flex-direction:column;align-items:center;
}
.home-popup-overlay.show .home-popup-box{
  animation:popupZoom .45s cubic-bezier(.18,.89,.32,1.28) forwards;
}
.home-popup-overlay.closing .home-popup-box{
  animation:popupFade .3s ease forwards;
}
@keyframes popupZoom{to{transform:scale(1);opacity:1;}}
@keyframes popupFade{to{transform:scale(.85);opacity:0;}}

/* Title caption */
.home-popup-title{
  text-align:center;font-family:'Playfair Display',serif;
  font-size:18px;font-weight:700;color:var(--navy,#0b2447);line-height:1.35;
  padding:6px 40px 10px;flex-shrink:0;width:100%;
}
/* Image wrapper — the image sizes itself so the WHOLE picture is visible */
.home-popup-imgwrap{display:block;line-height:0;width:auto;max-width:100%;}
.home-popup-imglink{display:block;line-height:0;}
.home-popup-img{
  display:block;
  width:auto;height:auto;
  max-width:100%;
  max-height:76vh;              /* fallback for older browsers */
  max-height:80dvh;             /* modern: excludes mobile browser chrome */
  object-fit:contain;border-radius:9px;margin:0 auto;
}
/* When a title is present, leave a little more headroom for it */
.home-popup-title + .home-popup-imgwrap .home-popup-img{max-height:68vh;max-height:72dvh;}
/* Circular close button — sits just inside the top-right corner, never clipped */
.home-popup-close{
  position:absolute;top:8px;right:8px;width:38px;height:38px;border:2px solid #fff;
  border-radius:50%;background:var(--navy,#0b2447);color:#fff;font-size:20px;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  z-index:3;box-shadow:0 4px 12px rgba(0,0,0,.4);transition:transform .25s,background .25s;
}
.home-popup-close:hover{background:var(--gold,#f5b301);color:var(--navy,#0b2447);transform:rotate(90deg) scale(1.08);}

@media(max-width:560px){
  .home-popup-overlay{padding:16px;}
  .home-popup-box{max-width:94vw;padding:8px;border-radius:12px;}
  .home-popup-title{font-size:15.5px;padding:4px 40px 8px;}
  .home-popup-img{max-height:72vh;max-height:78dvh;}
  .home-popup-title + .home-popup-imgwrap .home-popup-img{max-height:64vh;max-height:70dvh;}
  .home-popup-close{top:6px;right:6px;width:34px;height:34px;font-size:18px;}
}
@media(max-width:360px){
  .home-popup-title{font-size:14px;}
}

/* ============================================================
   NEW FEATURES — RESPONSIVE (career form, recruitment builder)
   ============================================================ */
@media(max-width:768px){
  .apply-grid{grid-template-columns:1fr !important;}
  .admin-two-col{grid-template-columns:1fr !important;}
  .field-grid{grid-template-columns:1fr !important;}
  .field-grid .admin-action-btn{width:100%;}
}
/* Recruitment builder field rows look tidy on all sizes */
.field-row .f-label,.field-row .f-type,.field-row .f-options{
  width:100%;box-sizing:border-box;
}

@media(max-width:900px){
  /* Admin two-pane layouts (list + form) stack on tablets/phones */
  [style*="grid-template-columns:1fr 360px"],
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns:1fr 1fr 1fr auto"]{
    grid-template-columns:1fr !important;
  }
}

/* Holiday homework + gallery filter responsiveness */
@media(max-width:640px){
  .paper-filter-bar{grid-template-columns:1fr !important;}
  .paper-filter-bar button{width:100%;}
}

/* ============================================================
   ROUND 4 — Clubs/Houses, Code of Conduct, Infrastructure UI
   ============================================================ */
/* Nicely format bullet/numbered lists inside the fancy cards */
.ui-facilities ul,.ui-rules ul{list-style:none;padding:0;margin:0;}
.ui-facilities ul li,.ui-rules ul li{position:relative;padding:.5rem 0 .5rem 1.7rem;border-bottom:1px dashed #e8ecf3;color:#444;line-height:1.6;font-size:.92rem;}
.ui-facilities ul li:before{content:"\f058";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:0;top:.55rem;color:var(--gold);font-size:.85rem;}
.ui-rules ul li:before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:0;top:.55rem;color:var(--navy);font-size:.8rem;}
.ui-facilities ul li:last-child,.ui-rules ul li:last-child{border-bottom:none;}
.ui-rules ol{padding-left:1.2rem;margin:0;counter-reset:r;list-style:none;}
.ui-rules ol li{position:relative;padding:.5rem 0 .5rem 2.2rem;border-bottom:1px dashed #e8ecf3;color:#444;line-height:1.6;font-size:.92rem;counter-increment:r;}
.ui-rules ol li:before{content:counter(r);position:absolute;left:0;top:.5rem;width:24px;height:24px;background:var(--navy);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;}
.ui-rules ol li:last-child{border-bottom:none;}

@media(max-width:768px){
  .coc-grid{grid-template-columns:1fr !important;}
  .houses-grid{grid-template-columns:1fr 1fr !important;}
  .ui-lead,.ui-fancy-card{padding:1.3rem 1.2rem !important;}
  .song-card{padding:1.8rem 1.3rem !important;}
  .song-lyrics{font-size:1rem !important;line-height:1.9 !important;}
}
@media(max-width:430px){
  .houses-grid{grid-template-columns:1fr !important;}
}

/* ============================================================
   BOARD RESULTS — year main div + small student cards
   ============================================================ */
.result-hero{
  text-align:center;background:linear-gradient(135deg,var(--navy,#0b2447),#13325f);
  color:#fff;border-radius:18px;padding:2.4rem 1.6rem;margin-bottom:2rem;
  position:relative;overflow:hidden;box-shadow:0 12px 34px rgba(11,36,71,.22);
}
.result-hero:before{content:"";position:absolute;top:-40px;right:-30px;width:160px;height:160px;border-radius:50%;background:rgba(245,179,1,.12);}
.result-hero-icon{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center;font-size:1.7rem;color:var(--gold,#f5b301);margin-bottom:.9rem;position:relative;z-index:1;}
.result-hero h2{font-family:'Playfair Display',serif;font-size:1.5rem;margin:0 0 .5rem;position:relative;z-index:1;}
.result-hero p{max-width:680px;margin:0 auto;opacity:.9;line-height:1.7;font-size:.95rem;position:relative;z-index:1;}
.result-stats{display:flex;justify-content:center;gap:1.2rem;margin-top:1.6rem;flex-wrap:wrap;position:relative;z-index:1;}
.result-stat{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:1rem 1.6rem;min-width:108px;}
.rs-num{display:block;font-size:1.9rem;font-weight:800;color:var(--gold,#f5b301);line-height:1;}
.rs-lbl{display:block;font-size:.78rem;opacity:.85;margin-top:.3rem;letter-spacing:.4px;text-transform:uppercase;}

/* Year filter tabs */
.result-year-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem;justify-content:center;}
.ryt-btn{border:1.5px solid #dde;background:#fff;color:var(--navy,#0b2447);padding:.5rem 1.2rem;border-radius:22px;font-weight:600;font-size:.85rem;cursor:pointer;transition:all .2s;}
.ryt-btn:hover{border-color:var(--navy,#0b2447);}
.ryt-btn.active{background:var(--navy,#0b2447);color:#fff;border-color:var(--navy,#0b2447);}

/* YEAR main div */
.result-year-block{margin-bottom:2.4rem;}
.result-year-banner{
  display:flex;align-items:center;gap:1rem;
  background:linear-gradient(135deg,var(--navy,#0b2447),#1a4480);
  color:#fff;border-radius:14px;padding:1.1rem 1.5rem;margin-bottom:1.4rem;
  box-shadow:0 8px 22px rgba(11,36,71,.2);position:relative;overflow:hidden;
}
.result-year-banner:before{content:"";position:absolute;right:-20px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(245,179,1,.13);}
.ryb-icon{width:52px;height:52px;flex-shrink:0;border-radius:12px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--gold,#f5b301);position:relative;z-index:1;}
.ryb-label{display:block;font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;opacity:.8;}
.ryb-year{display:block;font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:800;line-height:1.1;}
.ryb-count{margin-left:auto;background:var(--gold,#f5b301);color:var(--navy,#0b2447);font-weight:800;font-size:.78rem;padding:.35rem .9rem;border-radius:20px;position:relative;z-index:1;white-space:nowrap;}

/* Small student cards grid */
.result-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;}
.result-card{
  position:relative;background:#fff;border:1px solid #e9eef6;border-radius:14px;
  padding:1.4rem 1rem 1.2rem;text-align:center;
  box-shadow:0 3px 12px rgba(0,0,0,.05);transition:transform .25s,box-shadow .25s,border-color .25s;
  overflow:hidden;
}
.result-card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(11,36,71,.16);border-color:var(--gold,#f5b301);}
.result-card:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--navy,#0b2447),var(--gold,#f5b301));}
.rc-class{display:inline-block;background:#eef3fb;color:var(--navy,#0b2447);font-weight:700;font-size:.7rem;padding:.25rem .8rem;border-radius:20px;margin-bottom:.8rem;letter-spacing:.3px;}
.rc-photo{display:block;width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid var(--gold,#f5b301);margin:0 auto .7rem;box-shadow:0 4px 12px rgba(0,0,0,.12);}
.rc-avatar{display:flex;width:84px;height:84px;border-radius:50%;background:var(--navy,#0b2447);color:#fff;align-items:center;justify-content:center;font-size:2rem;font-weight:700;margin:0 auto .7rem;border:3px solid var(--gold,#f5b301);}
.rc-name{margin:0 0 .4rem;color:var(--navy,#0b2447);font-size:1rem;font-weight:700;line-height:1.3;}
.rc-pct{display:inline-block;background:#eafaf0;color:#1e7e34;font-weight:800;font-size:1.05rem;padding:.22rem .85rem;border-radius:8px;margin-bottom:.45rem;}
.rc-remark{margin:.35rem 0 0;color:#b8860b;font-size:.78rem;font-weight:600;line-height:1.45;}

.result-empty{text-align:center;padding:4rem 2rem;background:#f8f9fc;border-radius:12px;border:2px dashed #dde;}
.result-empty h3{color:var(--navy,#0b2447);margin-bottom:.5rem;}
.result-empty p{color:#888;}

@media(max-width:768px){
  .result-hero{padding:1.9rem 1.2rem;}
  .result-hero h2{font-size:1.25rem;}
  .result-stat{padding:.8rem 1.1rem;min-width:90px;}
  .rs-num{font-size:1.5rem;}
  .result-year-banner{padding:.9rem 1.1rem;gap:.8rem;}
  .ryb-icon{width:44px;height:44px;font-size:1.25rem;}
  .ryb-year{font-size:1.25rem;}
  .result-cards{grid-template-columns:repeat(2,1fr);gap:.8rem;}
}
@media(max-width:430px){
  .ryb-count{display:none;}
  .result-cards{grid-template-columns:repeat(2,1fr);gap:.7rem;}
  .result-card{padding:1.1rem .7rem 1rem;}
  .rc-photo,.rc-avatar{width:68px;height:68px;}
  .rc-avatar{font-size:1.6rem;}
  .rc-name{font-size:.9rem;}
  .result-stats{gap:.7rem;}
}

/* ============================================================
   MOBILE / COMPACT HEADER + NAV (2026) — utility menu + buttons stay visible,
   ONLY the primary menu collapses into the hamburger.
   Kicks in at <=1260px: below this the full two-tier menu no longer fits on
   one line beside the logo, so we switch to the hamburger to avoid wrapping.
   ============================================================ */
@media(max-width:1260px){
  #header{padding:7px 0}
  .header-inner{padding:0 12px;column-gap:8px;row-gap:6px;position:relative;flex-wrap:wrap;align-items:center}
  /* Row 1: logo grows/shrinks but is capped so the hamburger ALWAYS stays on the same line */
  .logo-area{order:1;flex:1 1 auto;min-width:0;max-width:calc(100% - 56px);gap:10px}
  .logo-text{min-width:0}
  .logo-img{height:60px}
  .logo-text h1{font-size:15px;line-height:1.12}
  .logo-text .school-sub{font-size:10px}
  .logo-text small{display:none}

  /* Row 1: hamburger pinned to the RIGHT — toggles ONLY the primary menu */
  .hamburger{display:flex;align-items:center;justify-content:center;width:44px;height:42px;border-radius:8px;background:var(--grad-blue);color:#fff;font-size:21px;padding:0;border:none;cursor:pointer;flex:0 0 auto;order:2;margin-left:auto}

  /* Right cluster drops to a full-width row 2 (menu links, then the two buttons) */
  .header-right{order:3;width:100%;flex-basis:100%;flex-direction:column;align-items:stretch;gap:6px;margin-top:6px}

  /* LINE 1: Utility text links — WRAP so all links are visible, tight spacing */
  .top-menu{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:2px;padding:5px 5px 4px;border-top:1px solid var(--border);background:#f6f9ff;border-radius:10px}
  .top-menu>li{flex:0 0 auto}
  .top-menu>li>a{color:var(--navy);padding:5px 8px;border-right:none;font-size:11.5px;font-weight:600;white-space:nowrap;border-radius:6px;line-height:1.12}
  .top-menu>li>a:hover{color:var(--sky);background:#eaf1ff}
  /* LINE 2: Mandatory Public Disclosure + Alumni Form — ALWAYS one line, text fully visible */
  .top-buttons{display:flex;flex-wrap:nowrap;gap:8px;width:100%}
  .top-buttons .hdr-btn{flex:1 1 50%;min-width:0}
  .hdr-btn{display:flex;align-items:center;justify-content:center;text-align:center;white-space:normal;line-height:1.2;padding:9px 8px!important;font-size:12px!important}
  .hdr-btn i{flex-shrink:0}

  /* Primary menu — collapses into hamburger drawer */
  #navbar{order:1;width:100%;position:absolute;top:100%;left:0;right:0;z-index:9998}
  #nav-menu{display:none;flex-direction:column;width:100%;background:var(--navy2);border-radius:0;box-shadow:0 12px 30px rgba(0,0,0,.4);padding:4px 0 10px;border-top:3px solid var(--gold);max-height:78vh;overflow-y:auto}
  #navbar.open #nav-menu{display:flex}
  #nav-menu>li{position:static;width:100%}
  #nav-menu>li>a{color:#fff;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.07);border-left:3px solid transparent;border-radius:0;font-size:14px}
  #nav-menu>li>a:hover,#nav-menu>li.active>a,#nav-menu>li.open>a{color:var(--gold);border-left-color:var(--gold);background:rgba(255,255,255,.06)}
  .has-dropdown>a::after{float:right;margin-top:4px}
  .dropdown{display:none;position:static;box-shadow:none;border-top:none;border-radius:0;background:rgba(0,0,0,.28);padding:0 0 0 8px;min-width:0;width:100%}
  #nav-menu>li:hover>.dropdown{display:none}
  #nav-menu>li.open>.dropdown{display:block}
  .dropdown li a{padding:12px 18px;font-size:13px}
}

/* Very small phones */
@media(max-width:480px){
  .logo-img{height:56px}
  .logo-text h1{font-size:14px}
  .logo-text .school-sub{display:none}
  .top-menu>li>a{padding:5px 7px;font-size:11px}
}

/* ============================================================
   CONTACT PAGE — full mobile responsiveness (2026)
   ============================================================ */
@media(max-width:820px){
  /* Stack the info column above the form */
  .contact-layout{grid-template-columns:1fr !important;gap:20px !important;}
}
@media(max-width:560px){
  /* Quick call/whatsapp cards stack on small phones */
  .contact-quick-cards{grid-template-columns:1fr !important;}
  /* Name + phone fields stack so inputs aren't cramped */
  .contact-form-row{grid-template-columns:1fr !important;}
}

/* =====================================================================
   2026 UPDATE — static styles: hero logo band,
   useful links, redesigned footer, video gallery, alumni form
   ===================================================================== */

/* ---- CARD HOVER (subtle, no continuous animation) ---- */
.achieve-card,.club-card,.infra-card,.step-card,.content-card{transition:transform .25s ease,box-shadow .25s ease}
.achieve-card:hover,.club-card:hover,.infra-card:hover,.content-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(6,24,58,.14)}

/* ---- TOPBAR ALUMNI QUICK LINK (static) ---- */
.tb-alumni-link{background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff!important;padding:3px 12px;border-radius:20px;font-weight:700;letter-spacing:.4px;box-shadow:0 3px 10px rgba(249,115,22,.35);width:auto!important}
.tb-alumni-link i{margin-right:4px}

/* ---- HERO LOGO BAND (solid white chips — smaller boxes) ---- */
.hero-logos{position:relative;z-index:5;margin-top:-58px;padding:0 16px}
.hl-inner{max-width:1000px;margin:0 auto;background:none;border:none;border-radius:0;padding:0;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;box-shadow:none}
.hl-chip{width:82px;height:82px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;padding:8px;box-shadow:0 8px 20px rgba(6,24,58,.22);border:1px solid #eef2f8;transition:transform .2s}
.hl-chip:hover{transform:translateY(-4px)}
.hl-chip img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}

/* ---- USEFUL LINKS SECTION (Point 3: 5 columns per row on desktop) ---- */
.ul-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.ul-card{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#fff;border:1px solid var(--border);border-radius:10px;text-decoration:none;transition:.2s;position:relative;overflow:hidden}
.ul-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .2s}
.ul-card:hover{border-color:var(--sky);box-shadow:0 10px 26px rgba(6,24,58,.12);transform:translateY(-3px)}
.ul-card:hover::before{transform:scaleY(1)}
.ul-ico{width:46px;height:46px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;color:#fff;background:var(--grad-blue)}
.ul-card:nth-child(3n+2) .ul-ico{background:linear-gradient(135deg,#f59e0b,#f97316)}
.ul-card:nth-child(3n+3) .ul-ico{background:linear-gradient(135deg,#0ea5e9,#2563eb)}
.ul-txt b{display:block;color:var(--navy);font-size:14.5px;font-weight:700}
.ul-txt small{color:var(--gray);font-size:12px}
.ul-card .ul-ext{position:absolute;top:10px;right:12px;color:#cbd5e1;font-size:11px}

/* ---- REDESIGNED FOOTER (tafssp-style, condensed) ---- */
#footer{background:var(--navy);color:var(--gray2);margin-top:0;padding:0}
.footer-top{background:linear-gradient(180deg,#06183a,#081f47);border-top:3px solid var(--gold)}
.footer-grid{max-width:1200px;margin:0 auto;padding:44px 20px 30px;display:grid;grid-template-columns:1.7fr 1fr 1.2fr 1.3fr;gap:34px}
.footer-brand .footer-logo-img{height:66px;margin-bottom:12px;display:block}
.footer-brand h3{color:#fff;font-family:'Playfair Display',serif;font-size:17px;margin-bottom:8px}
.footer-brand p{font-size:13px;line-height:1.7;color:#a9b6cc}
.footer-social{display:flex;gap:9px;margin-top:14px}
.footer-social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;transition:.2s;font-size:14px}
.footer-social a:hover{background:var(--gold);color:var(--navy)}
.footer-col h4{color:#fff;font-size:14px;font-weight:700;margin-bottom:14px;position:relative;padding-bottom:8px}
.footer-col h4::after{content:'';position:absolute;left:0;bottom:0;width:32px;height:2px;background:var(--gold)}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col ul li{margin-bottom:9px}
.footer-col ul li a{color:#a9b6cc;text-decoration:none;font-size:13px;transition:.2s;display:inline-flex;align-items:center}
.footer-col ul li a::before{content:'\f105';font-family:'Font Awesome 6 Free';font-weight:900;margin-right:8px;color:var(--gold);font-size:11px}
.footer-col ul li a:hover{color:#fff;padding-left:3px}
.footer-contact .footer-contact-item{display:flex;gap:10px;margin-bottom:12px;font-size:13px;color:#a9b6cc;align-items:flex-start}
.footer-contact .footer-contact-item i{color:var(--gold);margin-top:3px;flex-shrink:0}
.footer-contact .footer-contact-item a{color:#a9b6cc;text-decoration:none}
.footer-contact .footer-contact-item a:hover{color:#fff}
.footer-map-col .footer-map{line-height:0;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 22px rgba(0,0,0,.28)}
.footer-map iframe{display:block;width:100%;filter:grayscale(.18)}
.footer-bottom{max-width:1280px;margin:0 auto;padding:18px clamp(20px,5vw,48px);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;color:#8296b3;border-top:1px solid rgba(255,255,255,.06)}
.footer-bottom .fb-left{text-align:left}
.footer-bottom .fb-right{text-align:right;margin-left:auto}
.footer-bottom a{color:var(--gold2);text-decoration:none}
.footer-bottom a:hover{color:#fff}
.gtab-bar{display:flex;gap:.5rem;margin-bottom:1.4rem;border-bottom:2px solid #e6ecf7}
.gtab-btn{appearance:none;border:none;background:none;cursor:pointer;padding:.7rem 1.4rem;font-size:.95rem;font-weight:700;color:#64748b;border-bottom:3px solid transparent;margin-bottom:-2px;transition:.2s;display:flex;align-items:center;gap:7px}
.gtab-btn.active{color:var(--navy);border-bottom-color:var(--gold)}
.gtab-btn:hover{color:var(--blue)}

/* ---- VIDEO GALLERY GRID + YOUTUBE-LIKE PLAYER ---- */
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem}
.video-card{position:relative;border-radius:12px;overflow:hidden;background:#0b1220;box-shadow:0 6px 20px rgba(6,24,58,.14);cursor:pointer;transition:transform .3s,box-shadow .3s}
.video-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(6,24,58,.24)}
.video-thumb{position:relative;aspect-ratio:16/9;background:#0b1220 center/cover no-repeat;display:flex;align-items:center;justify-content:center}
.video-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.video-thumb .vt-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#38bdf8;font-size:2.6rem;background:linear-gradient(135deg,#0d2a5e,#06183a)}
/* Hidden until the video genuinely fails to load (see gallery.php JS) */
.video-thumb .vt-fallback-hidden{display:none}
/* Inline first-frame preview for uploaded videos with no stored poster —
   behaves exactly like a poster image so the card always shows a picture
   with the play button on top, never a blank black box. */
.video-thumb .vt-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;pointer-events:none;background:#0b1220;z-index:0}
.video-thumb img{position:relative;z-index:1}
.video-play{z-index:2}
.video-badge{z-index:2}
.video-play{position:absolute;inset:0;margin:auto;width:66px;height:66px;border-radius:50%;background:rgba(255,0,0,.86);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.4);transition:.2s}
.video-card:hover .video-play{background:#ff0000;transform:scale(1.08)}
.video-play i{color:#fff;font-size:1.5rem;margin-left:4px}
.video-badge{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.8);color:#fff;font-size:.72rem;font-weight:600;padding:2px 7px;border-radius:4px;letter-spacing:.3px}
.video-title{padding:.75rem .9rem;font-size:.92rem;font-weight:600;color:var(--navy);line-height:1.4}
/* modal player */
.vplayer-overlay{display:none;position:fixed;inset:0;background:rgba(4,10,26,.92);z-index:99999;align-items:center;justify-content:center;padding:16px}
.vplayer-overlay.open{display:flex}
.vplayer-box{width:min(960px,96vw);background:#000;border-radius:12px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);position:relative}
.vplayer-box video,.vplayer-box iframe{display:block;width:100%;aspect-ratio:16/9;background:#000;border:0}
.vplayer-close{position:absolute;top:-46px;right:0;background:rgba(255,255,255,.12);border:none;color:#fff;width:40px;height:40px;border-radius:50%;font-size:1.3rem;cursor:pointer;transition:.2s}
.vplayer-close:hover{background:var(--gold);color:var(--navy)}

/* ---- ALUMNI FORM PAGE ---- */
.alumni-hero{background:var(--grad-blue);border-radius:16px;padding:36px 30px;color:#fff;position:relative;overflow:hidden;margin-bottom:28px}
.alumni-hero::after{content:'\f19d';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;right:-10px;bottom:-30px;font-size:170px;opacity:.08}
.alumni-hero h2{font-family:'Playfair Display',serif;font-size:30px;margin-bottom:8px}
.alumni-hero p{color:#dbe7ff;max-width:680px;line-height:1.7}
.alumni-card{background:#fff;border-radius:16px;box-shadow:0 14px 40px rgba(6,24,58,.10);padding:30px;border:1px solid #eef2fb}
.alumni-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.alumni-field{display:flex;flex-direction:column}
.alumni-field.full{grid-column:1/-1}
.alumni-field label{font-weight:600;color:var(--navy);margin-bottom:.4rem;font-size:.9rem}
.alumni-field label .req{color:#dc2626}
.alumni-field input,.alumni-field select,.alumni-field textarea{width:100%;padding:.72rem .9rem;border:1.5px solid #d8e0f0;border-radius:8px;font-size:.95rem;font-family:inherit;transition:.2s;background:#fbfcff}
.alumni-field input:focus,.alumni-field select:focus,.alumni-field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(56,189,248,.18);background:#fff}
.alumni-submit{margin-top:22px;background:linear-gradient(135deg,var(--blue),var(--gold));color:#fff;border:none;padding:14px 40px;border-radius:8px;font-weight:700;font-size:1rem;cursor:pointer;transition:.25s;box-shadow:0 10px 24px rgba(30,79,163,.3)}
.alumni-submit:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(30,79,163,.45)}
@media (max-width:640px){.alumni-grid{grid-template-columns:1fr}.alumni-card{padding:20px}}

/* ---- CAREER IN AIRFORCE accent ---- */
.cia-hero{background:linear-gradient(135deg,#06183a,#0d2a5e 55%,#1e4fa3);color:#fff;border-radius:16px;padding:34px;position:relative;overflow:hidden;margin-bottom:24px}
.cia-hero::after{content:'\f0fb';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:150px;opacity:.10}
.cia-hero h2{font-family:'Playfair Display',serif;font-size:28px;position:relative;z-index:1}

/* ---- ADMIN: video + alumni helpers ---- */
.admin-video-item{position:relative;background:rgba(255,255,255,.05);border-radius:8px;overflow:hidden}
.admin-video-item .avi-thumb{width:100%;height:120px;object-fit:cover;background:#0b1220}
.admin-video-item .avi-thumb.ph{display:flex;align-items:center;justify-content:center;color:#38bdf8;font-size:1.8rem}
.alumni-table{width:100%;border-collapse:collapse;font-size:13px}
.alumni-table th,.alumni-table td{padding:10px 12px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08);color:#cdd5e0;vertical-align:top}
.alumni-table th{color:var(--gold2);text-transform:uppercase;letter-spacing:1px;font-size:11px}
.alumni-table tr:hover td{background:rgba(255,255,255,.03)}

/* ---- RESPONSIVE HERO tweaks (full-width, uncropped banner) ---- */
@media (max-width:768px){
  .slide-content{left:12px;right:12px;bottom:8px;padding:0;max-width:none}
  .slide-content h2{font-size:clamp(14px,4.2vw,20px)}
  .slider-nav{right:10px;bottom:6px}
}
@media (max-width:480px){
  .slide-content{left:10px;right:10px;bottom:6px}
  .slide-content h2{font-size:clamp(13px,4vw,17px)}
  .slide-content .btn{padding:8px 16px;font-size:11px}
  .slide-eyebrow{font-size:9px;padding:3px 9px}
}

/* ---- RESPONSIVE: hero logo band, footer, useful links ---- */
@media(max-width:1024px){
  .hero-logos{margin-top:-44px}
  .hl-chip{width:74px;height:74px}
}
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:26px;padding:34px 20px 24px}
  .hl-inner{gap:12px}
}
@media(max-width:768px){
  /* logo band stops overlapping — becomes a normal band under the slider;
     chips shrink so all six stay visible on phones */
  .hero-logos{margin-top:0;padding:16px 10px 0}
  .hl-inner{gap:10px;flex-wrap:wrap}
  .hl-chip{width:64px;height:64px;padding:7px;border-radius:12px}
  .footer-bottom{flex-direction:column;text-align:center;gap:6px}
  .footer-bottom .fb-left,.footer-bottom .fb-right{text-align:center;margin-left:0}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr;gap:22px;text-align:center}
  .footer-brand .footer-logo-img{margin-left:auto;margin-right:auto}
  .footer-social{justify-content:center}
  .footer-col h4::after{left:50%;transform:translateX(-50%)}
  .footer-contact .footer-contact-item{justify-content:center;text-align:left}
  .footer-map-col .footer-map{max-width:340px;margin:0 auto}
  /* all six logos in two tidy, evenly-spaced rows of three */
  .hero-logos{padding:14px 10px 2px}
  .hl-inner{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:12px}
  .hl-chip{width:60px;height:60px;padding:7px;border-radius:12px}
  .ul-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:360px){
  .hl-inner{gap:10px}
  .hl-chip{width:54px;height:54px;padding:6px}
}

/* ---- QUICK INFO spacing (req 4: margin-top for the 4 cards) ---- */
/* req 4: tighten white space after Admission Open + About sections */
#quick-info{margin-top:0}
/* Point 2: Nurturing Excellence sits in a padded container with clear left/right margin */
.about-bg{padding-top:24px!important;padding-bottom:34px;padding-left:clamp(20px,5vw,60px)!important;padding-right:clamp(20px,5vw,60px)!important}
.about-bg .container{max-width:1200px;margin-left:auto;margin-right:auto}
@media(max-width:768px){.about-bg{padding-bottom:24px;padding-left:16px!important;padding-right:16px!important}}

/* ---- ABOUT SECTION BACKGROUND (tafssp-style: tricolour brush + aircraft) ---- */
.about-bg{position:relative;overflow:hidden}
.about-bg .container{position:relative;z-index:2}
.abg-flag{position:absolute;top:-6px;width:340px;opacity:.5;pointer-events:none;z-index:1}
.abg-flag-left{left:-30px}
.abg-flag-right{right:-30px;transform:scaleX(-1)}
.abg-plane{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:520px;opacity:.16;pointer-events:none;z-index:1}
@media(max-width:1024px){.abg-flag{width:240px;opacity:.4}.abg-plane{width:400px}}
@media(max-width:768px){.abg-flag{width:170px;opacity:.32}.abg-plane{width:300px;opacity:.12}}
@media(max-width:480px){.abg-flag{width:120px}.abg-plane{display:none}}

/* ---- ABOUT SECTION VISUAL (realistic flag + chopper) ---- */
.about-visual{position:relative;margin-bottom:22px;border-radius:14px;overflow:visible}
.about-main-img{width:100%;max-height:280px;object-fit:cover;border-radius:14px;box-shadow:0 14px 34px rgba(6,24,58,.18);display:block}
.about-chopper{position:absolute;right:-10px;bottom:-24px;width:180px;filter:drop-shadow(0 10px 16px rgba(6,24,58,.28));pointer-events:none}
@media(max-width:1024px){.about-chopper{width:140px;bottom:-16px}}
@media(max-width:560px){.about-chopper{width:110px;right:0;bottom:-10px}.about-main-img{max-height:210px}}

/* ============================================================
   MOBILE SLIDER — show the FULL image (no cropping) + bottom-left text
   (authoritative: overrides earlier fixed-height hero rules)
   ============================================================ */
@media(max-width:768px){
  #hero{height:auto !important;min-height:0}
  .slide{height:auto}
  .slide.active{display:block}
  .slide-bg{position:relative !important;width:100% !important;height:auto !important;object-fit:contain !important;display:block}
  #hero::after{background:linear-gradient(to top,rgba(6,24,58,.5) 0%,rgba(6,24,58,.06) 34%,transparent 60%)}
  .slide-content{position:absolute;left:4%;right:4%;bottom:12px;max-width:none;padding:0}
  .slide-content>*{max-width:100%}
  .slide-eyebrow{margin-bottom:6px;font-size:9.5px;padding:3px 10px;letter-spacing:1.2px}
  .slide-content h2{font-size:clamp(14px,4.2vw,22px);line-height:1.2}
  .slide-content p{font-size:clamp(11px,3vw,13px);margin-top:5px}
  .slide-content .btn{margin-top:9px;padding:8px 16px;font-size:11.5px}
  .slider-nav{bottom:8px;right:4%}
  .slider-arrow{width:34px;height:34px}
}
@media(max-width:480px){
  .slide-content{bottom:8px}
  .slider-arrow{display:none}
}

/* ============================================================
   2026 FEATURE UPDATES
   Useful Links reveal + interactivity, Admin flashes,
   School Song sections, Mandatory-Disclosure docs, Results banner
   ============================================================ */

/* ---- USEFUL LINKS: scroll-reveal + animated icons + interactive boxes ---- */
.ul-card{will-change:transform,opacity;transform-style:preserve-3d}
.ul-card.ul-pre{opacity:0;transform:translateY(22px) scale(.97)}
.ul-card.ul-show{opacity:1;transform:none;transition:opacity .55s cubic-bezier(.2,.75,.3,1),transform .3s cubic-bezier(.2,.75,.3,1),box-shadow .25s,border-color .25s}
/* animated shine sweep on hover */
.ul-card::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(115deg,transparent,rgba(56,189,248,.22),transparent);transform:skewX(-18deg);transition:left .6s ease;pointer-events:none}
.ul-card:hover::after{left:130%}
.ul-card:hover{border-color:var(--sky);box-shadow:0 18px 40px rgba(37,99,235,.22)}
/* icon: continuous gentle float + pulsing halo, energetic pop on hover */
.ul-ico{position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;animation:ulFloat 3.6s ease-in-out infinite}
.ul-card:nth-child(3n+2) .ul-ico{animation-delay:.5s}
.ul-card:nth-child(3n+3) .ul-ico{animation-delay:1s}
.ul-ico::before{content:'';position:absolute;inset:-6px;border-radius:14px;border:2px solid currentColor;color:var(--sky);opacity:0;transform:scale(.7)}
.ul-card:hover .ul-ico{transform:translateY(-4px) rotate(-8deg) scale(1.14);box-shadow:0 12px 24px rgba(37,99,235,.4)}
.ul-card:hover .ul-ico::before{animation:ulHalo .7s ease-out}
.ul-ico i{transition:transform .35s}
.ul-card:hover .ul-ico i{animation:ulIconPop .5s ease}
@keyframes ulFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ulHalo{0%{opacity:.6;transform:scale(.7)}100%{opacity:0;transform:scale(1.35)}}
@keyframes ulIconPop{0%{transform:scale(1)}40%{transform:scale(1.25) rotate(6deg)}100%{transform:scale(1)}}
.ul-card:active{transform:translateY(-2px) scale(.99)}
.ul-card:focus-visible{outline:3px solid rgba(56,189,248,.5);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .ul-card.ul-pre{opacity:1;transform:none}
  .ul-card::after,.ul-ico{animation:none}
}
/* better responsive columns for Useful Links (Point 3: mobile responsive) */
@media(max-width:1100px){.ul-grid{grid-template-columns:repeat(4,1fr);gap:14px}}
@media(max-width:900px){.ul-grid{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(max-width:640px){.ul-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .ul-card{padding:14px;flex-direction:column;text-align:center;gap:10px}
  .ul-ico{width:46px;height:46px;font-size:19px}
  .ul-txt b{font-size:13.5px}.ul-txt small{font-size:11px}
  .ul-card .ul-ext{top:8px;right:8px}
}
@media(max-width:360px){.ul-grid{grid-template-columns:1fr}}

/* ---- ADMIN FLASH MESSAGES (beautiful, dismissible) ---- */
.admin-flash-stack{margin-bottom:20px;display:flex;flex-direction:column;gap:12px}
.admin-flash-stack:empty{display:none;margin:0}
.admin-alert{position:relative;display:flex;align-items:center;gap:14px;padding:15px 46px 15px 15px;border-radius:14px;font-size:14px;font-weight:500;overflow:hidden;
  background:#fff;box-shadow:0 10px 30px rgba(6,24,58,.12);border:1px solid var(--border);
  animation:flashIn .45s cubic-bezier(.2,.9,.25,1) both}
.admin-alert::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px}
.admin-alert .aa-ico{flex-shrink:0;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff}
.admin-alert .aa-msg{flex:1;line-height:1.45}
.admin-alert .flash-close{position:absolute;top:50%;right:12px;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:8px;background:rgba(0,0,0,.05);color:#334155;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.admin-alert .flash-close:hover{background:rgba(0,0,0,.12);transform:translateY(-50%) rotate(90deg)}
/* success */
.admin-alert.alert-success{color:#065f46}
.admin-alert.alert-success::before{background:#10b981}
.admin-alert.alert-success .aa-ico{background:linear-gradient(135deg,#10b981,#059669)}
/* error / danger */
.admin-alert.alert-error{color:#991b1b}
.admin-alert.alert-error::before{background:#ef4444}
.admin-alert.alert-error .aa-ico{background:linear-gradient(135deg,#f43f5e,#dc2626)}
/* warning */
.admin-alert.alert-warning{color:#92400e}
.admin-alert.alert-warning::before{background:#f59e0b}
.admin-alert.alert-warning .aa-ico{background:linear-gradient(135deg,#fbbf24,#d97706)}
/* info */
.admin-alert.alert-info{color:#075985}
.admin-alert.alert-info::before{background:#0ea5e9}
.admin-alert.alert-info .aa-ico{background:linear-gradient(135deg,#38bdf8,#0284c7)}
@keyframes flashIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
/* keep any legacy inline alert boxes readable too */
.alert-warning{background:#fef3c7;border:1px solid #fcd34d;color:#92400e;padding:14px 20px;border-radius:8px;display:flex;align-items:center;gap:10px;font-size:14px}
.alert-info{background:#e0f2fe;border:1px solid #7dd3fc;color:#075985;padding:14px 20px;border-radius:8px;display:flex;align-items:center;gap:10px;font-size:14px}

/* ---- SCHOOL SONG & PLEDGE — on-brand, animated ---- */
.song-page{position:relative}
.song-intro{text-align:center;max-width:720px;margin:0 auto 2.4rem}
.song-intro-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.18);padding:6px 16px;border-radius:30px;margin-bottom:14px}
.song-intro-eyebrow i{color:var(--gold)}
.song-intro h2{font-family:'Playfair Display',serif;font-size:clamp(24px,4vw,36px);color:var(--navy);margin-bottom:10px}
.song-intro p{color:var(--gray);font-size:15.5px;line-height:1.75}
.song-stack{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:1.9rem}
.song-card{position:relative;overflow:hidden;border-radius:22px;padding:2.4rem 2.2rem;color:#fff;
  box-shadow:0 22px 50px rgba(6,24,58,.28);
  opacity:0;transform:translateY(34px) scale(.98);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.song-card.is-visible{opacity:1;transform:none}
.song-card::after{content:'';position:absolute;inset:0;border-radius:22px;border:1px solid rgba(255,255,255,.12);pointer-events:none}
/* brand gradients */
.song-card--pledge{background:linear-gradient(140deg,#06183a 0%,#0d2a5e 55%,#1e4fa3 100%)}
.song-card--song{background:linear-gradient(140deg,#0d2a5e 0%,#1e4fa3 60%,#2563eb 100%)}
.song-card--custom{background:linear-gradient(140deg,#06183a 0%,#123a72 60%,#0ea5e9 120%)}
/* moving glow accent */
.song-card-glow{position:absolute;width:340px;height:340px;border-radius:50%;top:-140px;right:-120px;
  background:radial-gradient(circle,rgba(56,189,248,.45),transparent 65%);filter:blur(10px);
  animation:songGlow 7s ease-in-out infinite alternate;pointer-events:none}
@keyframes songGlow{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-26px,22px) scale(1.15)}}
/* header row */
.song-card-head{display:flex;align-items:center;gap:16px;margin-bottom:1.3rem;position:relative;z-index:1}
.song-card-badge{flex-shrink:0;display:inline-flex;width:60px;height:60px;border-radius:16px;background:rgba(255,255,255,.14);align-items:center;justify-content:center;font-size:1.5rem;color:var(--gold2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);animation:songFloat 4s ease-in-out infinite}
@keyframes songFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.song-card-kicker{display:block;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold2);opacity:.85;margin-bottom:2px}
.song-card-title{font-family:'Playfair Display',serif;font-size:1.7rem;color:#fff;margin:0}
.song-card-body{font-size:1.1rem;line-height:2;opacity:.98;position:relative;z-index:1}
.song-card-body p{margin-bottom:1rem}
.song-card--song .song-lyrics{font-style:italic;line-height:2.15}
/* floating music notes on the song card */
.song-note{position:absolute;color:rgba(255,255,255,.16);font-size:1.6rem;z-index:0;animation:noteRise 6s ease-in-out infinite}
.song-note-1{top:40%;right:9%;animation-delay:.4s}
.song-note-2{bottom:16%;right:20%;font-size:1.15rem;animation-delay:1.6s}
@keyframes noteRise{0%,100%{transform:translateY(0) rotate(-6deg);opacity:.14}50%{transform:translateY(-16px) rotate(8deg);opacity:.3}}
/* motto */
.song-motto{margin-top:1.9rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.2);position:relative;z-index:1}
.song-motto-label{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;letter-spacing:2px;text-transform:uppercase;color:var(--gold2);margin-bottom:.4rem}
.song-motto-text{display:block;font-size:1.3rem;font-weight:700;font-family:'Playfair Display',serif}
@media(max-width:560px){
  .song-card{padding:1.9rem 1.35rem;border-radius:18px}
  .song-card-head{gap:12px}
  .song-card-badge{width:50px;height:50px;font-size:1.25rem}
  .song-card-title{font-size:1.35rem}
  .song-card-body{font-size:1.02rem;line-height:1.95}
}
@media (prefers-reduced-motion: reduce){
  .song-card-glow,.song-card-badge,.song-note{animation:none}
  .song-card{transition:opacity .3s ease}
}

/* ---- MANDATORY DISCLOSURE: Documents & Certificates (responsive list) ---- */
.md-doc-list{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.md-doc-row{display:flex;align-items:center;gap:16px;padding:14px 18px;background:#fff;border:1px solid var(--border);border-left:5px solid var(--sky);border-radius:12px;
  transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
.md-doc-row::after{content:'';position:absolute;top:0;left:-120%;width:45%;height:100%;background:linear-gradient(115deg,transparent,rgba(56,189,248,.12),transparent);transform:skewX(-18deg);transition:left .6s ease;pointer-events:none}
.md-doc-row:hover{transform:translateX(4px);box-shadow:0 12px 26px rgba(6,24,58,.12);border-color:var(--sky)}
.md-doc-row:hover::after{left:130%}
.md-doc-row.is-available{border-left-color:#dc2626}
.md-doc-row.is-pending{border-left-color:#94a3b8}
.md-doc-num{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--navy);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.md-doc-file-ico{flex:0 0 auto;font-size:20px;width:24px;text-align:center}
.md-doc-row.is-available .md-doc-file-ico{color:#dc2626}
.md-doc-row.is-pending .md-doc-file-ico{color:#94a3b8}
.md-doc-title{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--navy);line-height:1.4}
.md-doc-view{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;background:var(--grad-sky);color:#fff;text-decoration:none;font-size:13.5px;font-weight:700;padding:9px 18px;border-radius:9px;box-shadow:0 6px 16px rgba(37,99,235,.28);transition:filter .2s,transform .2s}
.md-doc-view:hover{filter:brightness(1.08);transform:translateY(-2px)}
.md-doc-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#475569;background:var(--light);border:1px solid var(--border);padding:8px 14px;border-radius:9px}
.md-doc-chip i{color:var(--blue)}
@media(max-width:640px){
  .md-doc-row{flex-wrap:wrap;gap:10px 12px;padding:14px}
  .md-doc-title{flex:1 1 auto;order:1;font-size:14px}
  .md-doc-num{order:0}
  .md-doc-file-ico{order:0}
  .md-doc-view,.md-doc-chip{order:2;flex:1 1 100%;justify-content:center;padding:11px 14px}
}

/* ---- RESULTS TOPPERS BANNER (Point 6: image always FULLY visible, never cropped) ---- */
.result-banner{margin:0 auto 2.2rem;max-width:900px;padding:0 4px;width:100%}
.result-banner-frame{position:relative;border-radius:20px;overflow:hidden;
  background:linear-gradient(135deg,#06183a,#1e4fa3);
  padding:8px;box-shadow:0 22px 50px rgba(6,24,58,.28)}
/* caption bar ABOVE the image so it never covers any part of it */
.result-banner-cap{display:flex;align-items:center;justify-content:center;gap:9px;
  color:#04264f;font-weight:800;font-size:14px;letter-spacing:.5px;text-transform:uppercase;
  background:linear-gradient(135deg,var(--gold),var(--sky));
  padding:10px 16px;border-radius:13px 13px 6px 6px;line-height:1;margin-bottom:8px}
.result-banner-cap i{color:#04264f}
/* media wrapper — no fixed height / aspect ratio, so nothing gets clipped */
.result-banner-media{position:relative;border-radius:6px 6px 13px 13px;overflow:hidden;line-height:0;background:#0a1c3d;height:auto;aspect-ratio:auto}
/* the WHOLE image shows at its natural ratio — NO cropping from top/bottom or sides */
.result-banner-img{display:block;width:100%!important;height:auto!important;max-width:100%;max-height:none!important;object-fit:contain!important;object-position:center;margin:0 auto}
/* one-time sweeping shine over the image */
.result-banner-shine{position:absolute;top:0;left:-60%;width:40%;height:100%;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.30),transparent);transform:skewX(-18deg);
  animation:bannerShine 5s ease-in-out 1.2s infinite}
@keyframes bannerShine{0%{left:-60%}35%,100%{left:140%}}
.result-banner:hover .result-banner-frame{box-shadow:0 28px 60px rgba(37,99,235,.34)}
@media(max-width:768px){
  .result-banner{max-width:100%;margin-bottom:1.8rem}
}
@media(max-width:560px){
  .result-banner{margin-bottom:1.5rem;padding:0}
  .result-banner-frame{border-radius:15px;padding:6px}
  .result-banner-cap{font-size:12px;padding:9px 12px}
}
@media (prefers-reduced-motion: reduce){.result-banner-shine{display:none}}

/* ============================================================
   SITE-WIDE MODERN UI  ·  flag + jets background  ·  3D + motion
   ============================================================ */

/* ---- Global decorative background (CSS-only; never renders before the topbar) ---- */
.site-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:radial-gradient(1100px 560px at 88% -6%,rgba(37,99,235,.10),transparent 60%),
             radial-gradient(950px 520px at -6% 112%,rgba(56,189,248,.10),transparent 60%)}
/* faint waving-flag watermark, pinned to the bottom-right, well below the header */
.site-bg::after{content:'';position:fixed;right:-30px;bottom:-24px;width:340px;height:230px;
  background:url('../images/flag_wave.png') no-repeat center/contain;opacity:.08;transform:rotate(-4deg);
  animation:bgFlag 9s ease-in-out infinite}
/* faint IAF jet formation flying right-to-left, low and subtle */
.site-bg::before{content:'';position:fixed;left:-280px;top:20%;width:280px;height:150px;
  background:url('../images/jets.svg') no-repeat center/contain;opacity:.10;
  animation:bgJets 38s linear infinite}
@keyframes bgFlag{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-1.5deg) translateY(-12px)}}
@keyframes bgJets{0%{transform:translate(124vw,0)}50%{transform:translate(52vw,-18px)}100%{transform:translate(-6vw,0)}}
@media(max-width:768px){.site-bg::after{width:200px;opacity:.06}.site-bg::before{display:none}}
@media (prefers-reduced-motion: reduce){.site-bg::after,.site-bg::before{animation:none}}
/* keep structural blocks above the background layer.
   NOTE: .page-wrap must NOT get a z-index here — doing so creates a stacking
   context that traps the home popup below the sticky header. In-flow content
   already paints above the z-index:-1 background, so it isn't needed. */
#topbar,#header,#footer{position:relative;z-index:1}
#header{z-index:1000}
/* scroll-to-top button: ensure it stays a fixed floating circle above everything */
#scrolltop{position:fixed;z-index:1200}

/* ---- Site-wide scroll reveal (added by JS to many elements) ---- */
.reveal-init{opacity:0;transform:translateY(28px)}
.reveal-in{opacity:1 !important;transform:none !important;transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion: reduce){.reveal-init{opacity:1;transform:none}}

/* ---- 3D tilt base (JS sets the rotation) ---- */
.tilt-3d{transform-style:preserve-3d;will-change:transform;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
@media (hover:none){.tilt-3d{transform:none !important}}

/* ---- Modernised PAGE BANNER ---- */
.page-banner{height:260px;background:linear-gradient(135deg,#06183a 0%,#0d2a5e 42%,#1e4fa3 100%);position:relative;overflow:hidden}
.page-banner::before{content:'';position:absolute;inset:0;
  background:radial-gradient(600px 300px at 80% 0%,rgba(56,189,248,.28),transparent 60%),
            repeating-linear-gradient(45deg,transparent,transparent 30px,rgba(255,255,255,.03) 30px,rgba(255,255,255,.03) 60px)}
.page-banner::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--gold),var(--gold2),var(--gold))}
.page-banner .container{position:relative;z-index:2}
.page-banner-title,.page-banner h1{animation:pbUp .7s cubic-bezier(.2,.8,.2,1) both}
.page-banner .breadcrumb{animation:pbUp .7s cubic-bezier(.2,.8,.2,1) .12s both}
@keyframes pbUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* soft floating orbs in banner */
.page-banner .container::before{content:'';position:absolute;right:-40px;top:-30px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.35),transparent 70%);animation:songGlow 8s ease-in-out infinite alternate;z-index:-1}

/* ---- Modernised CONTENT CARDS ---- */
.content-card{border-radius:18px;box-shadow:0 10px 34px rgba(6,24,58,.10);border:1px solid rgba(219,228,243,.7);
  background:rgba(255,255,255,.94);backdrop-filter:blur(4px);transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,border-color .28s}
.content-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(6,24,58,.16);border-color:rgba(56,189,248,.4)}
.content-card-header{border-bottom:2px solid var(--light);padding-bottom:12px;margin-bottom:6px;position:relative}
.content-card-title{position:relative;display:inline-block}
.content-card-title::after{content:'';position:absolute;left:0;bottom:-13px;width:52px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--sky))}

/* ---- Buttons with shine ---- */
.btn-primary{position:relative;overflow:hidden;border-radius:10px;background:linear-gradient(135deg,var(--gold),var(--sky));color:#04264f;border:0;box-shadow:0 8px 20px rgba(37,99,235,.28)}
.btn-primary:hover{color:#04264f;transform:translateY(-2px);box-shadow:0 12px 26px rgba(37,99,235,.38)}
.btn-primary::after{content:'';position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(115deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);transition:left .6s ease}
.btn-primary:hover::after{left:150%}

/* ---- Section header underline accent ---- */
.section-header h2{position:relative;display:block}
.section-header h2::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:-10px;width:64px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--sky))}
/* keep the blue section badge on its own line, centred, above the heading */
.section-header .section-badge{display:inline-flex;align-items:center}

/* ---- Generic card hover polish (achievements / events / results / papers) ---- */
.achieve-card,.result-card,.md-doc-card,.paper-card{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,border-color .28s}
.achieve-card:hover{transform:translateY(-6px)}

/* ---- Respect reduced motion globally ---- */
@media (prefers-reduced-motion: reduce){
  .page-banner-title,.page-banner h1,.page-banner .breadcrumb,.page-banner .container::before{animation:none}
  .btn-primary::after{display:none}
}

/* ---- Footer flush + scroll-to-top polish (Round 4) ---- */
body{overflow-x:hidden}
#footer{margin-bottom:0}
.footer-bottom{margin-bottom:0}
/* nicer floating back-to-top button (stays fixed bottom-right) */
#scrolltop{background:linear-gradient(135deg,var(--gold),var(--sky));color:#04264f;box-shadow:0 8px 22px rgba(37,99,235,.45);}
#scrolltop i{line-height:1}
#scrolltop:hover{background:linear-gradient(135deg,var(--sky),var(--gold));color:#04264f;transform:translateY(-3px)}
#scrolltop.show{display:flex;animation:stPop .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes stPop{from{opacity:0;transform:translateY(12px) scale(.8)}to{opacity:1;transform:none}}
@media(max-width:560px){#scrolltop{bottom:20px;right:18px;width:42px;height:42px}}

/* ============================================================
   FULL MOBILE-RESPONSIVE + INTERACTIVE REINFORCEMENT (Round 5)
   ============================================================ */

/* --- Never allow horizontal overflow anywhere --- */
html,body{max-width:100%;overflow-x:hidden}
*{-webkit-tap-highlight-color:rgba(37,99,235,.15)}

/* --- Responsive media by default (won't override class-set sizes) --- */
img,svg,video,iframe{max-width:100%}
img{height:auto}
.container,.header-inner,.footer-grid,.topbar-inner{max-width:100%}
table{max-width:100%}

/* --- Snappier, tactile interactions site-wide --- */
a,button,.btn,.btn-primary,.ul-card,.quick-card,.house-card,.achieve-card,.result-card,
.md-doc-row,.notice-card,.event-card,.paper-card{transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease,filter .2s ease}
button:active,.btn:active,.btn-primary:active,a.btn:active{transform:scale(.97)}
.ul-card:active,.quick-card:active,.house-card:active,.achieve-card:active,.result-card:active{transform:scale(.98)}

/* --- Hero content gentle entrance --- */
.slide.active .slide-content{animation:heroIn .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* --- Mobile & tablet refinements --- */
@media(max-width:768px){
  /* comfortable section rhythm */
  .section{padding:40px 16px}
  .page-content-area{padding:26px 14px}
  /* topbar wraps neatly, stays tappable */
  #topbar{font-size:11px}
  .topbar-inner{justify-content:center;text-align:center}
  .topbar-left{gap:12px;flex-wrap:wrap;justify-content:center}
  /* bigger finger targets in the mobile menu */
  #nav-menu a,.top-menu a{padding-top:12px;padding-bottom:12px}
  .dropdown a{padding:12px 18px}
  /* forms & inputs full width and readable (prevents iOS zoom) */
  input,select,textarea,.btn,.btn-primary{font-size:16px}
  /* grids collapse safely */
  .quick-cards{grid-template-columns:repeat(2,1fr) !important;transform:none}
  .achieve-grid{grid-template-columns:repeat(2,1fr)}
  /* tables scroll rather than break layout */
  .content-card table,.fee-table,.timing-table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:560px){
  .section{padding:34px 14px}
  .quick-cards{grid-template-columns:1fr !important}
  .achieve-grid{grid-template-columns:1fr}
  .section-header h2{font-size:24px}
  .btn-primary{width:auto}
}
@media(max-width:430px){
  .logo-text h1{font-size:15px}
  .school-sub,.logo-text small{font-size:10.5px}
}

/* --- Admin panel: usable and tidy on phones --- */
@media(max-width:768px){
  .admin-sidebar{width:100%;height:auto;position:relative;flex-direction:column}
  .admin-nav{display:flex;flex-wrap:wrap;gap:4px}
  .admin-nav a{flex:1 1 auto;justify-content:center;text-align:center;min-width:120px}
  .admin-main{margin-left:0;padding:16px}
  .admin-two-col{grid-template-columns:1fr !important}
  .admin-topbar{flex-wrap:wrap;gap:10px}
  .admin-table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .admin-flash-stack{margin-bottom:14px}
}

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce){
  .slide.active .slide-content{animation:none}
  a,button,.btn,.btn-primary{transition:none}
}

/* ============================================================
   MOBILE RESPONSIVENESS HARDENING (Round 5)
   Defensive rules only — does NOT change the design, colours or layout.
   Prevents horizontal scroll, keeps media fluid, lets wide tables scroll.
   ============================================================ */
html{-webkit-text-size-adjust:100%}
body{max-width:100%;overflow-x:hidden}
img,svg,video,iframe,embed,object,canvas{max-width:100%}
p,li,td,th,dd,dt,a,span,h1,h2,h3,h4,h5,blockquote,figcaption{overflow-wrap:break-word;word-wrap:break-word}
/* wide CMS/content tables scroll horizontally on small screens instead of overflowing */
@media(max-width:768px){
  .content-card-body,.page-content-area .content-card-body{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .content-card table,.fee-table,.timing-table{max-width:none}
  /* comfortable tap targets */
  .top-menu a,#nav-menu>li>a,.dropdown a,.btn-primary,.hdr-btn{min-height:40px}
}

/* ============================================================
   ROUND 7 — UNIVERSAL MOBILE RESPONSIVENESS (every page, every device)
   Appended last so it takes precedence. 100% inside @media queries,
   so the desktop layout, content and features are completely unaffected.
   Covers: Code of Conduct, School Timings, About, Career, Contact,
   Admission, Fee Structure, Infrastructure, Academic Calendar, Clubs/
   Houses, Exam Papers, Holiday Homework, Notices, Gallery, Results, etc.
   ============================================================ */

/* ---- TABLETS & DOWN (<=820px): collapse content grids, keep photo grids at 2 ---- */
@media(max-width:820px){
  /* Any inline multi-column grid inside a page section becomes ONE column */
  .page-content-area [style*="display:grid"]{grid-template-columns:1fr !important}
  /* ...but photo / paper / card auto-grids stay at 2 columns (nicer than 1) */
  .page-content-area [style*="minmax(200px"],
  .page-content-area [style*="minmax(220px"],
  .page-content-area [style*="minmax(240px"],
  .page-content-area [style*="minmax(260px"],
  .page-content-area [style*="minmax(280px"],
  .page-content-area [style*="minmax(300px"]{grid-template-columns:repeat(2,1fr) !important}
  /* named page grids collapse cleanly */
  .about-two-col,.coc-grid,.contact-layout,.apply-grid,.field-grid,
  .contact-form-row,.contact-quick-cards{grid-template-columns:1fr !important}
}

/* ---- PHONES (<=768px): tighten spacing, full-width buttons, scrollable tables ---- */
@media(max-width:768px){
  .page-content-area{padding:26px 12px}
  .content-card{padding:18px 15px}
  .content-card h2,.content-card-title{font-size:1.25rem;line-height:1.3}
  .content-card h3{font-size:1.05rem}
  .content-card p,.content-card li{font-size:14px}
  /* CTA / action buttons become full-width for easy tapping */
  .page-content-area .btn-primary,.page-content-area .btn-outline{width:100%;justify-content:center;text-align:center}
  /* Any wide table scrolls sideways in its own box instead of breaking the page */
  .content-card table,.page-content-area table{
    display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* short-cell schedule/fee tables keep rows intact and scroll if needed */
  .timing-table,.fee-table,.admin-table{
    display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  /* Stats bar wraps two-up */
  .stats-bar{gap:1rem !important}
  .stats-bar .stat-item{min-width:0 !important;flex:1 1 42% !important;padding:1.1rem .8rem !important}
}

/* ---- SMALL PHONES (<=560px): single column everywhere ---- */
@media(max-width:560px){
  .page-content-area{padding:20px 12px}
  .content-card{padding:16px 13px;border-radius:14px}
  /* photo / paper / card grids drop to a single column on small phones */
  .page-content-area [style*="minmax(200px"],
  .page-content-area [style*="minmax(220px"],
  .page-content-area [style*="minmax(240px"],
  .page-content-area [style*="minmax(260px"],
  .page-content-area [style*="minmax(280px"],
  .page-content-area [style*="minmax(300px"],
  .houses-grid,.house-grid{grid-template-columns:1fr !important}
  .stats-bar .stat-item{flex:1 1 100% !important}
  .stat-item div:first-child{font-size:1.7rem !important}
  /* Breadcrumb never overflows */
  .breadcrumb,.breadcrumb-inner{flex-wrap:wrap}
}

/* ---- EXTRA SMALL (<=380px): give text a touch more room ---- */
@media(max-width:380px){
  .page-content-area{padding:16px 10px}
  .content-card{padding:14px 12px}
  .content-card h2,.content-card-title{font-size:1.15rem}
}

/* ============================================================
   2026 UX REFRESH — "Navy & Gold" premium polish layer
   CSS-only override (no markup / content / JS changes).
   Elevates the whole site toward a warm ceremonial navy+gold
   palette with softer elevation, tighter type and refined cards.
   ============================================================ */
:root{
  /* Real ceremonial gold replaces the old cold-cyan "gold" */
  --gold:#d3a029;          /* primary gold — rich on white & navy   */
  --gold2:#f2cf63;         /* light gold — text/icons/glows on navy  */
  --gold-deep:#a9781a;     /* deep gold — hover/press                */
  --gold-grad:linear-gradient(135deg,#f6d572 0%,#d9a52b 52%,#b8841d 100%);
  --gold-glow:rgba(211,160,41,.35);
  /* Elevation + shape tokens */
  --e1:0 4px 14px rgba(6,24,58,.06);
  --e2:0 10px 30px rgba(6,24,58,.09);
  --e3:0 18px 44px rgba(6,24,58,.16);
  --r-sm:10px; --r:16px; --r-lg:22px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- Typography refinement ---------- */
.section-header h2,.about-content h2,.slide-content h2,.adm-banner-text h3,
.content-card h2,.page-banner h1,.notice-header h3{letter-spacing:-.4px}
.section-header h2{font-size:clamp(27px,3.4vw,42px);line-height:1.14;font-weight:700}
.about-content h2{font-size:clamp(24px,2.8vw,34px);line-height:1.2}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ---------- Section rhythm ---------- */
.section{padding:84px 20px}
.section-header{margin-bottom:44px}
.section-header p{font-size:16px;color:var(--gray);max-width:620px}
/* Eyebrow badge — gold gradient pill */
.section-badge{background:var(--gold-grad);color:#3a2a05;border-radius:100px;
  padding:7px 20px;letter-spacing:2.5px;font-size:11px;
  box-shadow:0 6px 16px var(--gold-glow);border:1px solid rgba(255,255,255,.35)}
/* Divider — gold gradient bar with a centred diamond */
.section-divider{width:74px;height:3px;background:var(--gold-grad);border-radius:3px;position:relative;margin-top:18px}
.section-divider::after{content:'';position:absolute;top:50%;left:50%;width:8px;height:8px;
  background:var(--gold);border-radius:2px;transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 0 4px var(--light)}
.section-alt .section-divider::after{box-shadow:0 0 0 4px #fff}

/* ---------- Buttons ---------- */
.btn-primary,.slide-content .btn{background:var(--gold-grad)!important;color:#2a1e04!important;
  border:none!important;border-radius:var(--r-sm)!important;font-weight:700;letter-spacing:.4px;
  box-shadow:0 10px 24px var(--gold-glow)!important;transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .2s}
.btn-primary:hover,.slide-content .btn:hover{filter:brightness(1.05);transform:translateY(-3px);
  color:#2a1e04!important;box-shadow:0 16px 34px var(--gold-glow)!important}
.btn-outline{border:2px solid var(--navy);border-radius:var(--r-sm);transition:.25s var(--ease)}
.btn-outline:hover{transform:translateY(-3px);box-shadow:var(--e2)}
.slide-content .btn{padding:12px 30px}

/* ---------- Hero ---------- */
.slide::after{background:linear-gradient(to top,rgba(4,14,34,.72) 0%,rgba(4,14,34,.28) 40%,transparent 68%),
  linear-gradient(90deg,rgba(4,14,34,.45) 0%,transparent 55%)}
.slide-eyebrow{background:var(--gold-grad);color:#2a1e04;box-shadow:0 6px 16px var(--gold-glow)}
.slide-content h2{font-size:clamp(20px,3vw,38px);letter-spacing:-.3px}
.slider-arrow{width:48px;height:48px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25)}
.slider-arrow:hover{background:var(--gold-grad);color:#2a1e04;border-color:transparent}
.slider-dot.active{background:var(--gold);border-color:var(--gold)}

/* ---------- Affiliation chips ---------- */
/* Chips only lightly overlap the hero's bottom EDGE — they must never collide
   with the slide caption, which sits at bottom:38px. A ~26px overlap keeps a
   clear gap above the caption while preserving the floating-chip look. */
.hero-logos{margin-top:-26px}
.hl-inner{gap:18px}
.hl-chip{width:94px;height:94px;border-radius:20px;padding:11px;
  background:linear-gradient(180deg,#ffffff 0%,#f3f8ff 100%);
  box-shadow:0 10px 26px rgba(6,24,58,.16);border:1px solid #e6eef9;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s}
.hl-chip:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(6,24,58,.24);border-color:var(--gold2)}
/* Make every crest fill the chip uniformly. The source PNGs vary in intrinsic
   size and transparent padding; width:auto left small ones tiny. Filling the
   box with object-fit:contain scales them up while preserving aspect ratio. */
.hl-chip img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.06))}
/* Give the caption headroom above the chip band + cap its width so long titles
   wrap on the left instead of running under the centred chips. */
.slide-content{bottom:clamp(40px,7vh,64px);max-width:560px}
.slide-content h2{max-width:520px}

/* ---------- Quick-info band ----------
   The original -40px translate made this navy strip float UP over whatever sat
   above it. With the notice ticker directly above, that caused an overlap, so
   the strip now sits flush as a clean full-width band below the ticker. */
#quick-info{padding:0}
.quick-cards{transform:none;border-radius:0;box-shadow:none;border:none}
.quick-card{padding:30px 20px;transition:background .3s var(--ease),transform .3s var(--ease)}
.quick-card:hover{background:var(--gold-grad);color:#2a1e04}
.quick-icon{color:var(--gold2);transition:.3s var(--ease)}
.quick-card:hover .quick-icon{color:#2a1e04;transform:translateY(-2px)}

/* ---------- Stat boxes ---------- */
.stat-box{background:linear-gradient(160deg,#0d2a5e,#06183a);border:1px solid rgba(242,207,99,.14);
  border-radius:var(--r-sm);box-shadow:var(--e1);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.stat-box:hover{transform:translateY(-4px);box-shadow:var(--e2)}
.stat-num{color:var(--gold2)}

/* ---------- Cards: unified elevation + hover ---------- */
.event-card,.achieve-card,.notice-board,.ul-card{border-radius:var(--r);box-shadow:var(--e2)}
.event-card{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.event-card:hover{transform:translateY(-8px);box-shadow:var(--e3)}
.event-tag{color:var(--gold-deep)}
.achieve-card{border-top:4px solid var(--gold)}
.achieve-card:hover{transform:translateY(-8px);box-shadow:var(--e3);border-top-color:var(--gold-deep)}
.achieve-num{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.achieve-icon{color:var(--gold)}

/* ---------- Notice board ---------- */
.notice-board{border:1px solid #eef2f8}
.notice-header{background:linear-gradient(135deg,#0d2a5e,#06183a)}
.notice-item{transition:background .2s var(--ease),padding-left .2s var(--ease)}
.notice-item:hover{background:var(--light);padding-left:22px}
.badge-high{background:#fee2e2;color:#b91c1c}
.badge-normal{background:#fef3c7;color:var(--gold-deep)}

/* ---------- Gallery ---------- */
.gallery-item{border-radius:var(--r-sm)}
.gallery-overlay{background:linear-gradient(to top,rgba(6,24,58,.55),rgba(6,24,58,.12));opacity:0;transition:.3s var(--ease)}
.gallery-item:hover .gallery-overlay{opacity:1}
.gallery-overlay i{width:52px;height:52px;border-radius:50%;background:var(--gold-grad);color:#2a1e04;
  display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.gallery-item:hover img{transform:scale(1.06);opacity:1}

/* ---------- Useful links ---------- */
.ul-card{border:1px solid var(--border);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.ul-card::before{background:var(--gold-grad);width:4px}
.ul-card:hover{border-color:var(--gold2);box-shadow:var(--e2);transform:translateY(-4px)}
.ul-ico{color:var(--navy);background:linear-gradient(135deg,#eef4ff,#dce8ff);width:46px;height:46px;
  border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;transition:.25s var(--ease)}
.ul-card:hover .ul-ico{background:var(--gold-grad);color:#2a1e04}

/* ---------- Admission banner ---------- */
#admission-banner{background:linear-gradient(135deg,#0d2a5e 0%,#1e4fa3 60%,#2563eb 100%)}
.adm-pill{background:var(--gold-grad);color:#2a1e04}
.adm-banner-btn{background:var(--gold-grad);color:#2a1e04}

/* ---------- Marquee ---------- */
#marquee-bar{background:var(--gold-grad);border-top:1px solid rgba(255,255,255,.3);border-bottom:1px solid rgba(0,0,0,.06)}

/* ---------- Footer ---------- */
.footer-col h4{color:var(--gold2)}
.footer-social a:hover{background:var(--gold-grad);color:#2a1e04}

/* ---------- Compact-desktop header (768–1260px) ----------
   In this range the primary nav is already collapsed to the hamburger (the full
   two-tier menu no longer fits beside the logo). Keep the header looking like a
   desktop header rather than a phone one: bigger logo, and buttons sized to
   their content and centred instead of stretching to 50% each. Phones (<768)
   keep the full-width 50/50 buttons. */
@media(min-width:768px) and (max-width:1260px){
  .logo-img{height:76px}
  .logo-text h1{font-size:21px}
  .logo-text .school-sub{font-size:11px}
  .logo-text small{display:block;font-size:11.5px}
  .header-right{align-items:center}
  .top-menu{justify-content:center}
  .top-buttons{width:auto;align-self:center;justify-content:center}
  .top-buttons .hdr-btn{flex:0 1 auto;white-space:nowrap;padding:9px 18px!important;font-size:12.5px!important}
}

/* ---------- Responsive tuning ---------- */
@media(max-width:1024px){
  .section{padding:66px 18px}
}
@media(max-width:768px){
  .section{padding:50px 16px}
  .section-header{margin-bottom:30px}
  .hero-logos{margin-top:-16px}
  .hl-inner{gap:12px}
  .hl-chip{width:64px;height:64px;border-radius:14px;padding:8px}
  .quick-cards{border-radius:14px}
  .btn-primary,.btn-outline{padding:12px 22px}
}
@media(max-width:480px){
  .section{padding:40px 14px}
  .hl-chip{width:56px;height:56px;padding:7px}
  .section-badge{letter-spacing:1.5px;padding:6px 15px}
}
@media (prefers-reduced-motion: reduce){
  .btn-primary,.slide-content .btn,.event-card,.achieve-card,.ul-card,.hl-chip,.stat-box,.quick-card{transition:none}
}

/* ---------- Mobile overflow hardening + layout tidy ---------- */
@media(max-width:768px){
  html,body{max-width:100%;overflow-x:hidden}
  /* grid children must be allowed to shrink below their content size,
     otherwise long words push the column past the viewport (right-edge clip) */
  .home-grid,.home-grid>*{min-width:0}
  .about-content,.notice-board{min-width:0;max-width:100%}
  .about-content p,.notice-text,.marquee-item,.event-body h3,.ul-txt b,.ul-txt small{overflow-wrap:anywhere}
  /* stats: one clean compact row of three KPIs */
  .stats-row{grid-template-columns:repeat(3,1fr)!important;gap:10px}
  .stat-box{padding:14px 6px}
  .stat-num{font-size:clamp(18px,6vw,24px)}
  .stat-label{font-size:10.5px}
  /* admission banner: keep the CTA fully on-screen */
  .adm-banner-inner{flex-wrap:wrap;justify-content:center;gap:12px}
  .adm-banner-btn{width:auto;max-width:100%}
}
@media(max-width:380px){
  .stats-row{gap:7px}
  .stat-box{padding:12px 4px}
}

/* ============================================================
   HOME PAGE 3D UPGRADE — taller uncropped hero, no blue colour
   wash, bigger animated jet formation, new left-side fighter jet,
   glass-style Quick Info band. All rules below intentionally sit
   at the end of the file so they win the cascade over earlier
   (and duplicated) hero / quick-info / background rules.
   ============================================================ */

/* ---- HERO: no flat colour behind the slider; the blurred copy of
   the photo itself fills any extra space, so nothing "blue" shows ---- */
#hero{background:transparent}

/* Blurred backdrop = same photo, softly blurred, sits behind the
   sharp image and fills the taller frame with no crop and no flat
   colour of any kind (replaces the old navy/blue background). */
.slide-bg-blur{position:absolute;inset:-10%;background-size:cover;background-position:center;
  filter:blur(36px) brightness(.55) saturate(1.15);transform:scale(1.15);z-index:0;pointer-events:none}

/* Sharp foreground image: the WHOLE photo, never cropped, on every device */
.slide-bg{object-fit:contain !important;object-position:center;z-index:1}

/* Caption stays pinned bottom-left on desktop AND mobile */
.slide-content{left:4% !important;right:auto !important;bottom:32px !important;max-width:min(560px,58%) !important;z-index:4}
.slide-content>*{max-width:100%}

@media(max-width:768px){
  .slide-bg-blur{display:none}                 /* mobile already shows the full image at natural size */
  .slide-content{left:4% !important;right:auto !important;bottom:14px !important;max-width:82% !important}
}
@media(max-width:480px){
  .slide-content{left:4% !important;bottom:10px !important;max-width:86% !important}
}

/* ---- QUICK INFO BAND: transparent, glassy card instead of the solid
   navy/blue strip — no more flat blue background or blue shadow ---- */
#quick-info{background:transparent}
.quick-cards{background:rgba(255,255,255,.72);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.6);border-radius:20px;box-shadow:0 18px 46px rgba(6,24,58,.10);overflow:hidden}
.quick-card{color:var(--navy) !important;border-right-color:rgba(6,24,58,.08)}
.quick-card p{color:var(--gray) !important}
.quick-icon{color:var(--gold-deep,#a9781a) !important}
.quick-card:hover{background:var(--gold-grad,var(--gold));color:#2a1e04 !important}
.quick-card:hover p,.quick-card:hover .quick-icon{color:#2a1e04 !important}
@media(max-width:768px){
  .quick-cards{border-radius:16px}
  .quick-card{color:var(--navy) !important;border-bottom-color:rgba(6,24,58,.08)}
}

/* ---- SITE-WIDE DECORATIVE LAYER: remove the blue radial-gradient
   colour wash; keep only the airforce watermark graphics (flag + jets) ---- */
.site-bg{background:transparent}

/* Flag watermark — slightly bigger, crisper 3D lift */
.site-bg::after{width:380px;height:260px;filter:drop-shadow(0 14px 22px rgba(6,24,58,.22))}
@keyframes bgFlag{
  0%,100%{transform:perspective(700px) rotate(-4deg) rotateY(0deg) translateY(0)}
  50%{transform:perspective(700px) rotate(-1.5deg) rotateY(10deg) translateY(-12px)}
}

/* Three-jet formation — a little bigger, still crossing the screen
   right-to-left, now with a gentle 3D roll as it flies */
.site-bg::before{width:340px;height:182px;filter:drop-shadow(0 10px 16px rgba(6,24,58,.18))}
@keyframes bgJets{
  0%{transform:perspective(900px) translate(124vw,0) rotateZ(0deg)}
  50%{transform:perspective(900px) translate(52vw,-20px) rotateZ(-2deg)}
  100%{transform:perspective(900px) translate(-8vw,0) rotateZ(0deg)}
}
@media(max-width:1024px){.site-bg::before{width:280px;height:150px}}
@media(max-width:768px){
  /* show a smaller formation on mobile instead of hiding it outright */
  .site-bg::before{display:block;width:190px;height:102px;opacity:.08}
  .site-bg::after{width:220px;height:150px}
}

/* ---- NEW: single fighter jet, fixed on the LEFT, gently floating in
   3D — the mirror-image companion to the flag already on the right ---- */
.site-bg-jet-left{position:fixed;left:-36px;top:36%;width:260px;height:141px;
  background:url('../images/fighter_jet_left.svg') no-repeat center/contain;
  opacity:.16;pointer-events:none;z-index:-1;
  filter:drop-shadow(0 12px 20px rgba(6,24,58,.24));
  animation:jetLeftDrift 7.5s ease-in-out infinite}
@keyframes jetLeftDrift{
  0%,100%{transform:perspective(700px) rotateY(10deg) rotateZ(-2deg) translateY(0)}
  50%{transform:perspective(700px) rotateY(4deg) rotateZ(2deg) translateY(-16px)}
}
@media(max-width:1024px){.site-bg-jet-left{width:200px;height:108px;top:32%}}
@media(max-width:768px){.site-bg-jet-left{width:150px;height:81px;top:26%;opacity:.12}}
@media(max-width:480px){.site-bg-jet-left{width:120px;height:65px}}
@media (prefers-reduced-motion: reduce){
  .site-bg::before,.site-bg::after,.site-bg-jet-left{animation:none}
}

/* ---- Extra 3D touch on the affiliation-logo chips ---- */
.hl-inner{perspective:900px}
.hl-chip{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.hl-chip:hover{transform:translateY(-6px) rotateY(10deg)}

/* ============================================================
   ROUND 2 REFINEMENTS — clearer slider images, smaller caption
   text, no light-blue section tint, realistic chopper + flag,
   a few extra scroll-reveal animations on the home page.
   ============================================================ */

/* ---- HERO: drop the full-image dark wash entirely so the photo
   itself is completely clear; legibility now comes from a small
   backdrop chip that sits only behind the caption text ---- */
.slide::after{display:none !important}
.slide-content{background:linear-gradient(180deg,rgba(6,24,58,0) 0%,rgba(6,24,58,.5) 78%) !important;
  padding:10px 16px 8px !important;border-radius:12px 12px 4px 4px !important}
.slide-bg-blur{filter:blur(36px) brightness(.72) saturate(1.1) !important}

/* ---- HERO: smaller caption text on every device ---- */
.slide-eyebrow{font-size:9.5px !important;padding:4px 11px !important;margin-bottom:6px !important;letter-spacing:1.6px !important}
.slide-content h2{font-size:clamp(14px,1.8vw,22px) !important;line-height:1.2 !important}
.slide-content p{font-size:clamp(10px,1vw,12px) !important;margin-top:4px !important}
.slide-content .btn{padding:8px 18px !important;font-size:10.5px !important;margin-top:8px !important}
@media(max-width:768px){
  .slide-eyebrow{font-size:8px !important;padding:3px 8px !important}
  .slide-content h2{font-size:clamp(11.5px,3.2vw,15px) !important}
  .slide-content .btn{padding:6px 14px !important;font-size:9.5px !important}
}
@media(max-width:480px){
  .slide-content h2{font-size:clamp(10.5px,3vw,13px) !important}
}

/* ---- Remove the light-blue tint from About Our School / Snapshot
   Life in Pictures / YouTube sections (all use .section-alt, which
   is exclusive to the home page) ---- */
.section-alt{background:transparent !important}

/* ---- LEFT DECORATIVE ELEMENT: realistic helicopter (was a jet) ---- */
.site-bg-jet-left{background-image:url('../images/chopper_left.svg');width:250px;height:144px;opacity:.2}
@media(max-width:1024px){.site-bg-jet-left{width:196px;height:113px}}
@media(max-width:768px){.site-bg-jet-left{width:150px;height:87px;opacity:.14}}
@media(max-width:480px){.site-bg-jet-left{width:118px;height:68px}}

/* ---- RIGHT DECORATIVE ELEMENT: realistic waving tricolour flag
   (was a flat PNG) — richer detail, gentle fabric ripple built into
   the SVG itself, plus a light 3D sway from the existing animation ---- */
.site-bg::after{background-image:url('../images/flag_realistic.svg');width:300px;height:214px;opacity:.9;
  filter:drop-shadow(0 14px 20px rgba(6,24,58,.18))}
@media(max-width:768px){.site-bg::after{width:190px;height:136px;opacity:.55}}

/* ---- A few extra home-page animations ---- */
.quick-card.reveal-init,.gallery-item.reveal-init,.stat-box.reveal-init,
.notice-board.reveal-init,.about-content.reveal-init{opacity:0;transform:translateY(24px)}
.quick-card.reveal-in,.gallery-item.reveal-in,.stat-box.reveal-in,
.notice-board.reveal-in,.about-content.reveal-in{opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.quick-cards .quick-card:nth-child(1){transition-delay:0s}
.quick-cards .quick-card:nth-child(2){transition-delay:.08s}
.quick-cards .quick-card:nth-child(3){transition-delay:.16s}
.quick-cards .quick-card:nth-child(4){transition-delay:.24s}
#galleryGrid .gallery-item:nth-child(1){transition-delay:0s}
#galleryGrid .gallery-item:nth-child(2){transition-delay:.05s}
#galleryGrid .gallery-item:nth-child(3){transition-delay:.1s}
#galleryGrid .gallery-item:nth-child(4){transition-delay:.15s}
#galleryGrid .gallery-item:nth-child(5){transition-delay:.2s}
#galleryGrid .gallery-item:nth-child(6){transition-delay:.25s}
#galleryGrid .gallery-item:nth-child(7){transition-delay:.3s}
#galleryGrid .gallery-item:nth-child(8){transition-delay:.35s}
.gallery-item{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,opacity .6s,transform .6s}
.gallery-item:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 16px 34px rgba(6,24,58,.2)}
@media (prefers-reduced-motion: reduce){
  .quick-card.reveal-init,.gallery-item.reveal-init,.stat-box.reveal-init,
  .notice-board.reveal-init,.about-content.reveal-init{opacity:1;transform:none}
}

/* ============================================================
   HERO BANNER UPDATE (latest) —
   1) Bigger, mobile-responsive caption text bottom-left of the
      hero image banner slider.
   2) Left-side chopper watermark removed.
   3) Right-side flag watermark removed.
   4) Three-jet formation enlarged, still mobile responsive.
   These rules are appended last on purpose so they win the
   cascade over every earlier hero / watermark rule above.
   ============================================================ */

/* ---- 1) Hero caption text — reduced 2-3px from the previous pass,
   still responsive on desktop and mobile ---- */
.slide-eyebrow{font-size:clamp(9px,1.1vw,12px) !important;padding:5px 13px !important;margin-bottom:7px !important;letter-spacing:1.6px !important}
.slide-content h2{font-size:clamp(19px,3.6vw,39px) !important;line-height:1.2 !important;font-weight:700 !important}
.slide-content p{font-size:clamp(11px,1.4vw,16px) !important;margin-top:7px !important;line-height:1.5 !important}
.slide-content .btn{padding:10px 22px !important;font-size:12px !important;margin-top:12px !important}

@media(max-width:1024px){
  .slide-content h2{font-size:clamp(16px,3vw,27px) !important}
  .slide-content p{font-size:clamp(10px,1.3vw,13px) !important}
}
@media(max-width:768px){
  .slide-eyebrow{font-size:8.5px !important;padding:4px 10px !important;margin-bottom:5px !important}
  .slide-content h2{font-size:clamp(15px,4.9vw,23px) !important}
  .slide-content p{font-size:clamp(10px,2.8vw,12px) !important;margin-top:5px !important}
  .slide-content .btn{padding:8px 16px !important;font-size:10px !important;margin-top:8px !important}
}
@media(max-width:480px){
  .slide-eyebrow{font-size:7.5px !important;padding:3px 8px !important}
  .slide-content h2{font-size:clamp(13px,5.2vw,19px) !important}
  .slide-content p{font-size:9.5px !important}
  .slide-content .btn{padding:7px 14px !important;font-size:9px !important}
}

/* ---- 1b) Remove the dark top/bottom shadow wash from the banner so the
   slider images show with full, clear visibility ---- */
.slide::after{display:none !important}
.slide-bg-blur{display:none !important}
.slide-content{background:none !important;padding:0 !important;box-shadow:none !important}
#hero::after{display:none !important}
#hero{background:#fff !important}

/* ---- 2) Remove left-side chopper watermark entirely ---- */
.site-bg-jet-left{display:none !important}

/* ---- 3) Remove right-side flag watermark entirely ---- */
.site-bg::after{display:none !important}

/* ---- 4) Enlarge the three-jet formation, kept mobile responsive ---- */
.site-bg::before{
  width:480px !important;
  height:257px !important;
  opacity:.14 !important;
  display:block !important;
}
@media(max-width:1024px){
  .site-bg::before{width:380px !important;height:204px !important;opacity:.12 !important}
}
@media(max-width:768px){
  .site-bg::before{width:270px !important;height:145px !important;opacity:.11 !important}
}
@media(max-width:480px){
  .site-bg::before{width:200px !important;height:107px !important;opacity:.10 !important}
}
@media (prefers-reduced-motion: reduce){
  .site-bg::before{animation:none !important}
}

/* ============================================================
   HOME PAGE UPDATE 3 —
   1) Flag-wave strip above Events & Activities REMOVED per request.
   2) Decorative flag graphic on the left side of Useful Links.
   3) Badge showcase (flags + sunburst medallion + school logo),
      now fully animated: waving flags at full clarity/opacity,
      a floating glowing logo medallion, and a pulsing halo — a
      much more attractive, lively presentation.
   4) Mobile-responsive rules for all of the above.
   ============================================================ */

.events-section{position:relative}

/* ---- Left-side decorative flag — Useful Links ---- */
.ul-section{position:relative;overflow:hidden}
.ul-flag-left{position:absolute;left:-50px;top:6px;width:260px;opacity:.32;
  pointer-events:none;z-index:0;filter:drop-shadow(0 8px 14px rgba(6,24,58,.15))}
.ul-section .container{position:relative;z-index:1}
@media(max-width:1024px){.ul-flag-left{width:200px;left:-40px}}
@media(max-width:768px){.ul-flag-left{width:150px;opacity:.22;left:-30px;top:-4px}}
@media(max-width:480px){.ul-flag-left{width:110px;opacity:.18}}

/* ---- Badge showcase — liquid-glass panel. The tricolour flags are
   anchored to the FULL-BLEED section itself (not the inner content box),
   so they always sit flush against the true left/right edges and are
   fully visible on both sides, at every screen size. The old vertical
   tricolour "strip" next to the badge has been removed — the medallion
   now stands alone, centred, with the logo gently drifting left/right
   inside it for a soft floating feel. ---- */
.badge-showcase{position:relative;overflow:hidden;
  background:#06183a;
  padding:60px 20px 68px;perspective:1400px}

/* ---- Animated scene layer (children + aircraft GIF) ----
   Replaces the former tricolour gradient. The GIF is object-fit:cover so it
   always fills the band edge-to-edge on every screen, and object-position is
   nudged on small screens so the children + jets stay in frame on phones. */
.bsw-scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bsw-scene picture{display:block;width:100%;height:100%}
.bsw-scene-img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block;
  transform:scale(1.02)}
/* Soft veil: keeps the medallion readable over the artwork without hiding it */
.bsw-scene-veil{position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 52%, rgba(6,24,58,.44) 0%, rgba(6,24,58,.16) 38%, rgba(6,24,58,0) 66%),
    linear-gradient(180deg, rgba(6,24,58,.30) 0%, rgba(6,24,58,.05) 32%, rgba(6,24,58,.34) 100%)}
/* frosted "liquid glass" card sitting behind the flags/badge content */
.badge-showcase::before{content:'';position:absolute;inset:18px;border-radius:34px;z-index:1;
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04) 50%, rgba(255,255,255,.10));
  -webkit-backdrop-filter:blur(2px) saturate(115%);backdrop-filter:blur(2px) saturate(115%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 8px 40px rgba(6,24,58,.22), inset 0 1px 1px rgba(255,255,255,.22);
  pointer-events:none}
.badge-showcase-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;min-height:280px;
  display:flex;align-items:center;justify-content:center}

/* Badge / medallion — centred, pulsing glow halo behind a floating logo,
   inside a slowly spinning sunburst; the whole badge also gets a real 3D
   pointer tilt via JS (see initTilt in main.js) for an interactive feel.
   NOTE: no CSS transform-animation is applied directly to .bsw-badge
   itself, since JS sets its transform inline on pointer move — the
   left/right drift instead lives on the inner .bsw-logo-ring so both
   effects can run together without fighting over the same property. */
.bsw-badge{position:relative;width:172px;height:172px;flex-shrink:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  transform-style:preserve-3d}
.bsw-badge::before{content:'';position:absolute;inset:22px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,179,1,.24),transparent 70%);
  animation:bswGlowPulse 3.2s ease-in-out infinite;z-index:0}
@keyframes bswGlowPulse{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}

.bsw-sunburst{position:absolute;inset:0;width:100%;height:100%;
  animation:bswSpin 30s linear infinite;z-index:1}
@keyframes bswSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Logo gently floats left <-> right and drifts up/down, always
   returning to dead-centre inside the ring — a soft "floating" motion
   without ever leaving the medallion */
.bsw-logo-ring{position:relative;width:78px;height:78px;border-radius:50%;background:#fff;
  border:3px solid #0d2a5e;display:flex;align-items:center;justify-content:center;
  overflow:hidden;z-index:2;animation:bswLogoFloat 5.5s ease-in-out infinite}
@keyframes bswLogoFloat{
  0%    {transform:translate(0,0);        box-shadow:0 12px 30px rgba(6,24,58,.2),0 0 18px rgba(245,179,1,.18)}
  25%   {transform:translate(-10px,-6px); box-shadow:0 16px 34px rgba(6,24,58,.22),0 0 26px rgba(245,179,1,.28)}
  50%   {transform:translate(0,-10px);    box-shadow:0 22px 42px rgba(6,24,58,.26),0 0 36px rgba(245,179,1,.4)}
  75%   {transform:translate(10px,-6px);  box-shadow:0 16px 34px rgba(6,24,58,.22),0 0 26px rgba(245,179,1,.28)}
  100%  {transform:translate(0,0);        box-shadow:0 12px 30px rgba(6,24,58,.2),0 0 18px rgba(245,179,1,.18)}
}
.bsw-logo{width:80%;height:80%;object-fit:contain}

/* Scroll-reveal entrance (class added by initGlobalReveal in main.js) */
.badge-showcase-inner.reveal-init{opacity:0;transform:translateY(30px) scale(.96)}
.badge-showcase-inner.reveal-in{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}

@media(max-width:1024px){
  .bsw-badge{width:148px;height:148px}
  .bsw-logo-ring{width:66px;height:66px}
}
@media(max-width:768px){
  .badge-showcase{padding:52px 14px 52px;perspective:none;min-height:340px}
  .badge-showcase::before{inset:10px;border-radius:24px}
  .badge-showcase-inner{min-height:230px}
  /* Pull the framing down slightly so the children stay visible on phones */
  .bsw-scene-img{object-position:center 46%}
  .bsw-badge{width:118px;height:118px}
  .bsw-logo-ring{width:52px;height:52px;border-width:3px}
}
@media(max-width:480px){
  .badge-showcase{padding:44px 10px 44px;min-height:300px}
  .badge-showcase-inner{min-height:200px}
  .bsw-scene-img{object-position:center 48%}
  .bsw-badge{width:98px;height:98px}
  .bsw-logo-ring{width:44px;height:44px;border-width:2px}
}
@media (prefers-reduced-motion: reduce){
  .bsw-sunburst,.bsw-logo-ring,.bsw-badge::before{animation:none}
}

/* ---- Home page: transparent page background so the site-wide
   decorative jets layer reads through cleanly ---- */
body.home-page{background:transparent !important}

/* ---- Hero slider: no top/bottom whitespace bars (JS now sizes the
   container to the image's exact natural ratio — see fitHero in
   main.js); this CSS keeps the transition subtle and 3D-feeling ---- */
.slide.active .slide-bg{animation:heroImgIn 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes heroImgIn{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.slide.active .slide-bg{animation:none}}

/* ---- Extra 3D pop on homepage cards when JS tilt is active
   (classes added dynamically by initTilt in main.js) ---- */
.quick-card.tilt-3d,.event-card.tilt-3d,.gallery-item.tilt-3d,.ul-card.tilt-3d{transform-style:preserve-3d}

/* =====================================================================
   SMC (School Management Committee) — Administration page
   Dynamic, admin-editable section (Admin Panel -> SMC Members)
   ===================================================================== */
.smc-section{margin:8px 0 0}
.smc-section-head{text-align:center;max-width:640px;margin:0 auto 26px}
.smc-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(245,179,1,.12);color:#b8860b;
  font-size:12.5px;font-weight:700;letter-spacing:.4px;padding:6px 16px;border-radius:20px;
  border:1px solid rgba(245,179,1,.28);margin-bottom:12px}
.smc-section-head h2{font-family:'Playfair Display',serif;font-size:clamp(22px,3vw,30px);color:var(--navy);margin-bottom:8px}
.smc-section-head p{color:var(--gray);font-size:14.5px;line-height:1.7}

.smc-lead-card{position:relative;display:flex;align-items:center;gap:20px;padding:22px 26px;border-radius:16px;
  margin-bottom:20px;overflow:hidden;box-shadow:0 10px 30px rgba(6,24,58,.1);
  border:1px solid rgba(219,228,243,.7);transition:transform .25s ease,box-shadow .25s ease}
.smc-lead-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(6,24,58,.16)}
.smc-chairman{background:linear-gradient(120deg,#fff8e6 0%,#ffffff 55%,#fdf3e0 100%)}
.smc-secretary{background:linear-gradient(120deg,#eef4ff 0%,#ffffff 55%,#e9f0ff 100%)}
.smc-lead-avatar{flex-shrink:0;width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-weight:700;font-size:22px;color:#fff;
  box-shadow:0 8px 18px rgba(6,24,58,.22);letter-spacing:.5px}
.smc-chairman .smc-lead-avatar{background:linear-gradient(135deg,#f5b301,#c9860a)}
.smc-secretary .smc-lead-avatar{background:linear-gradient(135deg,#0d2a5e,#163b7e)}
.smc-lead-info{flex:1;min-width:0}
.smc-lead-role{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:3px 11px;border-radius:12px;margin-bottom:6px}
.smc-chairman .smc-lead-role{background:rgba(245,179,1,.18);color:#9a6b00}
.smc-secretary .smc-lead-role{background:rgba(13,42,94,.12);color:#0d2a5e}
.smc-lead-info h3{font-size:19px;color:var(--navy);margin:0 0 3px;font-weight:700}
.smc-lead-info p{margin:0;color:var(--gray);font-size:14px}
.smc-lead-ico{position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:44px;opacity:.08;color:var(--navy)}

.smc-table-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(6,24,58,.09);
  border:1px solid rgba(219,228,243,.7);margin-bottom:20px}
.smc-table{width:100%;border-collapse:collapse}
.smc-table thead th{background:linear-gradient(120deg,var(--navy),#163b7e);color:#fff;padding:14px 18px;
  text-align:left;font-size:12.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.smc-table tbody td{padding:13px 18px;border-bottom:1px solid #eef1f7;font-size:14.5px;color:var(--text);vertical-align:middle}
.smc-table tbody tr:last-child td{border-bottom:none}
.smc-table tbody tr:nth-child(even) td{background:#f8fafd}
.smc-table tbody tr:hover td{background:#eef6ff}
.smc-row-avatar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#38bdf8,#0d2a5e);color:#fff;font-size:12px;font-weight:700;letter-spacing:.3px}
.smc-name{font-weight:600;color:var(--navy)}
.smc-tag{display:inline-block;background:rgba(19,136,8,.1);color:#1e7e34;font-size:12px;font-weight:600;
  padding:3px 12px;border-radius:20px;border:1px solid rgba(19,136,8,.2);white-space:nowrap}

@media(max-width:700px){
  .smc-lead-card{flex-wrap:wrap;padding:20px}
  .smc-lead-ico{display:none}
  /* Responsive card-stack table on small screens */
  .smc-table thead{display:none}
  .smc-table, .smc-table tbody, .smc-table tr, .smc-table td{display:block;width:100%}
  .smc-table tbody tr{padding:14px 16px;border-bottom:8px solid #f3f6fb}
  .smc-table tbody td{border-bottom:none;padding:6px 0;display:flex;align-items:center;gap:10px;justify-content:space-between}
  .smc-table tbody td::before{content:attr(data-label);font-size:11px;font-weight:700;color:var(--gray2,#8a93a6);
    text-transform:uppercase;letter-spacing:.4px;flex-shrink:0}
  .smc-table tbody td[data-label="#"]::before{display:none}
  .smc-table tbody td[data-label="#"]{justify-content:flex-start}
}

/* =====================================================================
   SYLLABUS PAGE  (?page=syllabus)
   Class-wise / subject-wise PDF listing. Fully responsive: the filter row
   collapses to a single column, the accordion heads reflow, and the subject
   cards drop from a multi-column grid to one column on phones.
   ===================================================================== */

/* ---- Hero strip ---- */
.syl-hero{display:flex;align-items:center;gap:1.2rem;
  background:linear-gradient(120deg,#0d2a5e 0%,#123a7a 55%,#0d2a5e 100%);
  border-radius:14px;padding:1.5rem 1.6rem;margin-bottom:1.6rem;position:relative;overflow:hidden;
  box-shadow:0 10px 30px rgba(6,24,58,.22)}
.syl-hero::after{content:'';position:absolute;right:-40px;top:-60px;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,179,1,.28),transparent 70%);pointer-events:none}
.syl-hero-ico{flex-shrink:0;width:62px;height:62px;border-radius:14px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;color:#f5b301;font-size:1.7rem}
.syl-hero-txt{flex:1;min-width:0;position:relative;z-index:1}
.syl-hero-txt h2{color:#fff;font-size:1.4rem;margin:0 0 .3rem;line-height:1.25}
.syl-hero-txt p{color:rgba(255,255,255,.82);font-size:.9rem;margin:0;line-height:1.6}
.syl-hero-stat{flex-shrink:0;text-align:center;padding:.7rem 1.1rem;border-radius:12px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);position:relative;z-index:1}
.syl-hero-num{display:block;color:#f5b301;font-size:1.7rem;font-weight:700;line-height:1}
.syl-hero-lbl{display:block;color:rgba(255,255,255,.8);font-size:.7rem;margin-top:.25rem;
  text-transform:uppercase;letter-spacing:.5px}

/* ---- Filters ---- */
.syl-filter{background:#fff;border:1px solid #e9ecef;border-radius:12px;padding:1.1rem 1.2rem;
  margin-bottom:1.2rem;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.syl-filter-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:1rem;align-items:end}
.syl-field label{display:block;font-weight:600;color:var(--navy,#0d2a5e);margin-bottom:.4rem;font-size:.85rem}
.syl-field select,.syl-field input[type=text]{width:100%;padding:.65rem .8rem;border:1px solid #ced4da;
  border-radius:7px;font-size:.9rem;outline:none;box-sizing:border-box;background:#fff;color:#333;
  transition:border-color .2s,box-shadow .2s;font-family:inherit}
.syl-field select:focus,.syl-field input[type=text]:focus{border-color:var(--navy,#0d2a5e);
  box-shadow:0 0 0 3px rgba(13,42,94,.12)}
.syl-field-actions{display:flex;gap:.5rem}
.syl-btn-search{background:var(--navy,#0d2a5e);color:#fff;border:none;padding:.7rem 1.4rem;border-radius:7px;
  font-size:.9rem;font-weight:600;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;
  gap:.45rem;transition:background .2s,transform .15s;font-family:inherit}
.syl-btn-search:hover{background:#123a7a;transform:translateY(-1px)}
.syl-btn-reset{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:7px;background:#f0f2f5;color:#555;border:1px solid #dde;text-decoration:none;transition:.2s}
.syl-btn-reset:hover{background:#e4e8ee;color:var(--navy,#0d2a5e)}

/* ---- Quick class chips ---- */
.syl-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.syl-chip{padding:.42rem 1rem;border-radius:20px;font-size:.85rem;font-weight:600;text-decoration:none;
  background:#f0f2f5;color:#555;border:1px solid #dde;transition:.2s}
.syl-chip:hover{background:#e4e8ee;color:var(--navy,#0d2a5e)}
.syl-chip.active{background:var(--navy,#0d2a5e);color:#fff;border-color:var(--navy,#0d2a5e)}

/* ---- Class accordion ---- */
.syl-class-block{background:#fff;border:1px solid #e9ecef;border-radius:12px;margin-bottom:1rem;
  overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.syl-class-head{width:100%;display:flex;align-items:center;gap:.9rem;padding:1rem 1.2rem;background:#fff;
  border:none;cursor:pointer;text-align:left;font-family:inherit;transition:background .2s}
.syl-class-head:hover{background:#f7f9fc}
.syl-class-badge{flex-shrink:0;min-width:46px;height:46px;padding:0 .5rem;border-radius:10px;
  background:linear-gradient(135deg,var(--navy,#0d2a5e),#1a4a96);color:#fff;font-weight:700;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(13,42,94,.25)}
.syl-class-name{flex:1;min-width:0;font-size:1.02rem;font-weight:600;color:var(--navy,#0d2a5e)}
.syl-class-count{flex-shrink:0;font-size:.78rem;font-weight:600;color:#666;background:#f0f2f5;
  padding:.25rem .7rem;border-radius:12px;border:1px solid #e4e8ee}
.syl-class-arrow{flex-shrink:0;color:#8a93a3;transition:transform .3s;font-size:.85rem}
.syl-class-block.is-open .syl-class-arrow{transform:rotate(180deg)}
.syl-class-body{display:none;padding:0 1.2rem 1.2rem;border-top:1px solid #f0f2f5}
.syl-class-block.is-open .syl-class-body{display:block;animation:sylFade .28s ease}
@keyframes sylFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---- Subject cards ---- */
.syl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;padding-top:1.2rem}
.syl-card{background:#fff;border:1px solid #e9ecef;border-radius:10px;padding:1rem;display:flex;
  flex-direction:column;transition:box-shadow .25s,transform .25s,border-color .25s}
.syl-card:hover{box-shadow:0 10px 24px rgba(6,24,58,.13);transform:translateY(-3px);border-color:#d4dcea}
.syl-card-top{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.7rem}
.syl-card-ico{flex-shrink:0;width:40px;height:40px;border-radius:9px;background:#fdecec;color:#d32f2f;
  display:flex;align-items:center;justify-content:center;font-size:1.15rem}
.syl-card-meta{min-width:0;flex:1}
.syl-card-meta h3{color:var(--navy,#0d2a5e);font-size:.95rem;font-weight:600;margin:0 0 .18rem;line-height:1.3;
  word-break:break-word}
.syl-card-meta p{color:#8a93a3;font-size:.78rem;margin:0}
.syl-dot{opacity:.6;margin:0 .1rem}
.syl-card-title{font-size:.8rem;color:#555;font-weight:600;margin-bottom:.4rem;line-height:1.4}
.syl-card-desc{font-size:.78rem;color:#7a828f;line-height:1.5;margin:0 0 .8rem}
.syl-card-actions{display:flex;gap:.5rem;margin-top:auto;padding-top:.3rem}
.syl-act{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.55rem .5rem;
  border-radius:6px;text-decoration:none;font-size:.8rem;font-weight:600;transition:.2s;white-space:nowrap}
.syl-act-view{background:#f0f2f5;color:var(--navy,#0d2a5e);border:1px solid #dde}
.syl-act-view:hover{background:#e4e8ee}
.syl-act-dl{background:var(--navy,#0d2a5e);color:#fff;border:1px solid var(--navy,#0d2a5e)}
.syl-act-dl:hover{background:#123a7a}

/* ---- Empty state ---- */
.syl-empty{text-align:center;padding:3.5rem 1.5rem;background:#f8f9fc;border-radius:12px;border:2px dashed #dde}
.syl-empty-ico{font-size:2.8rem;display:block;margin-bottom:1rem;color:var(--navy,#0d2a5e);opacity:.4}
.syl-empty h3{color:var(--navy,#0d2a5e);margin-bottom:.5rem;font-size:1.15rem}
.syl-empty p{color:#888;font-size:.9rem;margin:0}

/* ---- Responsive ---- */
@media(max-width:900px){
  .syl-filter-row{grid-template-columns:1fr 1fr;gap:.8rem}
  .syl-field-actions{grid-column:1/-1}
  .syl-btn-search{flex:1;justify-content:center}
}
@media(max-width:768px){
  .syl-hero{flex-direction:column;text-align:center;gap:.9rem;padding:1.3rem 1.1rem}
  .syl-hero-txt h2{font-size:1.2rem}
  .syl-hero-stat{width:100%}
  .syl-grid{grid-template-columns:1fr;padding-top:1rem}
  .syl-class-head{padding:.85rem .9rem;gap:.7rem}
  .syl-class-name{font-size:.94rem}
  .syl-class-count{font-size:.7rem;padding:.2rem .5rem}
  .syl-class-body{padding:0 .9rem 1rem}
}
@media(max-width:480px){
  .syl-filter{padding:.9rem}
  .syl-filter-row{grid-template-columns:1fr}
  .syl-hero-ico{width:52px;height:52px;font-size:1.4rem}
  .syl-class-badge{min-width:40px;height:40px;font-size:.8rem}
  .syl-chip{font-size:.78rem;padding:.35rem .8rem}
  .syl-card-actions{flex-direction:column}
  .syl-act{width:100%}
}