/* =========================================================
   BLUE MOON ACADEMY — DESIGN SYSTEM
   Deep Royal Blue + Navy + Golden Yellow, on white/soft-grey
   Display: Fraunces (serif, warm, editorial)
   Body/UI: Plus Jakarta Sans (clean, humanist sans)
   ========================================================= */

:root{
  /* --- Color tokens --- */
  --royal:        #1E3E8C;
  --royal-deep:   #152C66;
  --navy:         #0B1A3D;
  --navy-2:       #0F2250;
  --gold:         #E7A825;
  --gold-soft:    #F6D686;
  --ink:          #10162B;
  --slate:        #5B6479;
  --slate-light:  #8891A5;
  --mist:         #F4F6FB;
  --mist-2:       #EAF0FB;
  --line:         #E4E8F1;
  --white:        #FFFFFF;
  --red-accent:   #C1443B;

  /* --- Playful school palette (accents) --- */
  --sun:    #FFB833;
  --sun-bg: #FFF3D6;
  --sky:    #2E9BE6;
  --sky-bg: #DCEFFE;
  --coral:  #F1614B;
  --coral-bg:#FCE1DC;
  --leaf:   #3FAF6B;
  --leaf-bg:#DCF3E4;
  --grape:  #9B6BCE;
  --grape-bg:#EDE1F9;
  --font-hand: "Caveat", cursive;

  /* --- Type --- */
  --font-display: "Baloo 2", "Fredoka", sans-serif;
  --font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- Radii / shadow --- */
  --r-sm: 10px;
  --r-md: 20px;
  --r-lg: 30px;
  --shadow-soft: 0 20px 50px -25px rgba(11,26,61,0.35);
  --shadow-card: 0 12px 30px -18px rgba(11,26,61,0.28);

  --container-w: min(1320px, 94vw);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; margin:0; padding:0; overflow-x:hidden; overflow-x:clip; width:100%; }
body{
  margin:0; padding:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  width:100%;
  position:relative;
}
/* NOTE: overflow-x is intentionally set on <html> only, not <body> —
   overflow set on body breaks position:sticky for descendants (the
   site header would stop sticking to the top while scrolling). */
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; }

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

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

.container-bma{
  width:100%;
  max-width: var(--container-w);
  margin:0 auto;
  padding: 0 clamp(16px, 2.2vw, 32px);
}

/* --- Typography scale --- */
h1,h2,h3,h4,.font-display{ font-family: var(--font-display); font-weight:700; color: var(--navy); line-height:1.15; letter-spacing:0; }
h1{ font-size: clamp(2.3rem, 4.4vw, 3.8rem); }
h2{ font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
h3{ font-size: clamp(1.3rem, 2vw, 1.6rem); }
p{ color: var(--slate); }

.section-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-hand); font-size: 1.35rem; line-height:1; color: var(--royal); font-weight:700;
  margin-bottom: 16px; background: var(--sun-bg); padding:8px 20px 10px; border-radius:100px;
  transform: rotate(-2deg);
}
.section-tag::before{
  content:"\2726"; font-family: var(--font-body); width:auto; height:auto; background:none; color: var(--coral); font-size:1rem; display:inline-block;
}
.section-head.center .section-tag{ justify-content:center; }
.section-head{ max-width: 640px; margin-bottom: 46px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ margin-top:14px; font-size:1.05rem; }

section{ position:relative; }
.pad-xl{ padding: 100px 0; }
.pad-lg{ padding: 80px 0; }
@media (max-width:768px){
  .pad-xl{ padding: 64px 0; }
  .pad-lg{ padding: 56px 0; }
}

.bg-mist{ background: var(--mist); }
.bg-navy{ background: var(--navy); color: #cfd7ec; }
.bg-navy h2, .bg-navy h3, .bg-navy .font-display{ color: var(--white); }
.bg-navy p{ color: #A9B4D0; }

/* --- Buttons — pill with circular arrow badge (eye-catching, reference-style) --- */
.btn-bma{
  display:inline-flex; align-items:center; gap:16px;
  padding: 7px 8px 7px 28px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn-bma:hover{ transform: translateY(-3px); }
.btn-bma.btn-plain{ padding: 15px 30px; }

.btn-circle{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), background .3s, color .3s;
}
.btn-bma:hover .btn-circle{ transform: rotate(-45deg); }

.btn-primary{ background: var(--gold); color: var(--navy); box-shadow: 0 16px 32px -14px rgba(231,168,37,0.7); }
.btn-primary:hover{ background:#d99c1c; box-shadow: 0 20px 36px -14px rgba(231,168,37,0.85); }
.btn-primary .btn-circle{ background:#fff; color: var(--navy); }

.btn-white{ background:#fff; color: var(--navy); box-shadow: 0 16px 32px -16px rgba(0,0,0,0.35); }
.btn-white:hover{ background: var(--mist); }
.btn-white .btn-circle{ background: var(--navy); color:#fff; }

.btn-outline{ border-color: rgba(255,255,255,0.5); color:#fff; background:transparent; }
.btn-outline:hover{ background: rgba(255,255,255,0.12); }
.btn-outline .btn-circle{ background: rgba(255,255,255,0.16); color:#fff; }

.btn-outline-navy{ border-color: var(--line); color: var(--navy); background: var(--white); }
.btn-outline-navy:hover{ background: var(--mist); border-color: var(--royal); }
.btn-outline-navy .btn-circle{ background: var(--mist-2); color: var(--royal); }

.btn-royal{ background: var(--royal); color:#fff; box-shadow: 0 16px 32px -14px rgba(30,62,140,0.6); }
.btn-royal:hover{ background: var(--royal-deep); }
.btn-royal .btn-circle{ background: rgba(255,255,255,0.18); color:#fff; }

.btn-sm{ padding: 5px 6px 5px 20px; font-size: 0.78rem; }
.btn-sm.btn-plain{ padding: 11px 22px; }
.btn-sm .btn-circle{ width:34px; height:34px; font-size:0.9rem; }

/* =========================================================
   TOP BAR
   ========================================================= */
.topbar{
  background: var(--navy);
  color: #B9C3E0;
  font-size: 0.86rem;
}
.topbar .container-bma{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:9px; padding-bottom:9px;
  gap: 16px;
}
.topbar-left{ font-weight:500; color:#DCE3F5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-right{ display:flex; align-items:center; gap:24px; flex-shrink:0; }
.topbar-right a{ display:flex; align-items:center; gap:7px; color:#B9C3E0; transition:color .2s; white-space:nowrap; }
.topbar-right a:hover{ color: var(--gold); }
.topbar-right i{ color: var(--gold); font-size: 0.95rem; }

@media (max-width: 860px){
  .topbar-right a.topbar-item-web{ display:none; }
}
@media (max-width: 650px){
  .topbar-right a.topbar-item-mail{ display:none; }
  .topbar{ font-size:0.78rem; }
  .topbar-left{ max-width: 46%; }
}
@media (max-width: 480px){
  .topbar-left{ display:none; }
  .topbar .container-bma{ justify-content:center; }
  .topbar-right{ gap:18px; }
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 999;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: padding .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled{ box-shadow: 0 12px 30px -20px rgba(11,26,61,0.4); }
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 0; gap: 24px;
  transition: padding .3s ease;
}
.site-header.is-scrolled .header-inner{ padding: 10px 0; }

.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand-mark{
  width:64px; height:64px; aspect-ratio: 1 / 1; border-radius: 50%;
  background: var(--white);
  display:flex; align-items:center; justify-content:center;
  overflow:visible;
  flex-shrink:0; box-shadow: 0 8px 18px -8px rgba(21,44,102,.6);
  border: 2px solid var(--mist-2);
  transition: width .3s, height .3s;
  padding: 3px;
}
/* object-fit:contain guarantees the whole logo is always visible, never cropped */
.brand-mark img{ width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; display:block; border-radius:50%; }
.site-header.is-scrolled .brand-mark{ width:54px; height:54px; }
/* Footer logo shown bigger & fully uncropped (full badge visible) */
.site-footer .brand-mark{ width:80px; height:80px; padding:4px; }
.brand-text{ line-height:1.1; white-space:nowrap; }
.brand-text .name{ font-family: var(--font-display); font-weight:700; font-size: 1.28rem; color: var(--navy); white-space:nowrap; }
.brand-text .tagline{ font-size:0.72rem; font-weight:600; color: var(--slate); letter-spacing:0.01em; white-space:nowrap; margin-top:2px; }

.main-nav{ display:flex; align-items:center; gap:2px; flex:1; justify-content:center; min-width:0; }
.main-nav > ul{ display:flex; align-items:center; gap:0; flex-wrap:nowrap; }
.main-nav > ul > li{ position:relative; }
.main-nav > ul > li > a{
  display:flex; align-items:center; gap:5px; white-space:nowrap;
  padding: 10px 15px;
  font-weight:600; font-size:0.93rem; color: var(--navy);
  border-radius: var(--r-sm);
  transition: color .2s;
}
.main-nav > ul > li > a i{ font-size:0.62rem; color: var(--slate-light); transition: transform .25s; }
.main-nav > ul > li:hover > a{ color: var(--royal); }
.main-nav > ul > li:hover > a i{ transform: rotate(180deg); color: var(--royal); }

.dropdown-panel{
  position:absolute; top: calc(100% + 10px); left:0;
  min-width: 260px;
  background:#fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
  padding: 10px;
  opacity:0; visibility:hidden; transform: translateY(8px);
  transition: all .25s ease;
  z-index: 50;
}
.main-nav > ul > li:hover .dropdown-panel{ opacity:1; visibility:visible; transform: translateY(0); }
.dropdown-panel a{
  display:block; padding: 10px 14px; border-radius: 8px;
  font-size:0.92rem; font-weight:500; color: var(--ink); white-space:nowrap;
  transition: background .2s, color .2s, padding-left .2s;
}
.dropdown-panel a:hover{ background: var(--mist-2); color: var(--royal); padding-left:18px; }

.header-actions{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.nav-toggle{
  display:none; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); background:#fff; align-items:center; justify-content:center; font-size:1.2rem; color:var(--navy); cursor:pointer;
}
@media (max-width: 1240px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .header-actions .btn-bma > span:not(.btn-circle){ display:none; }
  .header-actions .btn-bma{ padding:6px; }
  .site-header .brand-text .tagline{ font-size:0.64rem; }
}
@media (max-width: 560px){
  /* Keep the trust tagline visible next to the logo on mobile instead of
     hiding it — it wraps to two tidy lines rather than overflowing. */
  .header-inner{ gap:10px; }
  .brand{ gap:9px; min-width:0; flex:1 1 auto; }
  .brand-mark{ width:44px; height:44px; }
  .brand-text{ white-space:normal; min-width:0; }
  .brand-text .name{ font-size:0.96rem; white-space:normal; line-height:1.15; }
  .site-header .brand-text .tagline{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
    white-space:normal; font-size:0.6rem; line-height:1.25; letter-spacing:0.005em;
    max-width:52vw; margin-top:3px; font-weight:700; color: var(--royal);
    text-transform:uppercase; letter-spacing:0.02em;
  }
}
@media (max-width: 420px){
  .header-inner{ gap:8px; }
  .brand{ gap:8px; min-width:0; }
  .brand-mark{ width:40px; height:40px; }
  .brand-text{ min-width:0; }
  .brand-text .name{ font-size:0.88rem; max-width: 40vw; }
  .site-header .brand-text .tagline{ font-size:0.56rem; max-width:40vw; }
  .header-actions{ gap:8px; }
  .nav-toggle{ width:38px; height:38px; font-size:1rem; }
}
@media (max-width: 400px){
  /* Keep only the logo + menu button in the bar; the same Admission
     Enquiry CTA is already available at the bottom of the menu drawer,
     so nothing is lost — this just stops the header from overflowing
     on small-width phones. */
  .header-actions .btn-bma{ display:none; }
  /* With the CTA button gone there's room for the brand block again */
  .brand-text .name{ max-width: 56vw; }
  .site-header .brand-text .tagline{ max-width:56vw; }
}

/* Offcanvas mobile nav
   NOTE: hidden with transform (not right:-100%) so it never expands the
   document's scrollable area — that was the cause of the extra/duplicate
   horizontal scrollbar across the site. */
.offcanvas-nav{
  position: fixed; top:0; right:0; width: min(380px, 90vw); height:100%;
  background:
    linear-gradient(165deg, rgba(30,62,140,0.97), rgba(11,26,61,0.99) 60%),
    var(--navy);
  z-index: 1200; padding: 0; overflow-y:auto;
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), visibility 0s linear .45s;
  display:flex; flex-direction:column;
  box-shadow: -20px 0 60px rgba(0,0,0,0.35);
  visibility: hidden;
}
.offcanvas-nav.open{ transform: translateX(0); visibility: visible; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.offcanvas-backdrop{
  position:fixed; inset:0; background:rgba(9,15,33,0.6); backdrop-filter: blur(2px); z-index:1150;
  opacity:0; visibility:hidden; transition: opacity .3s;
}
.offcanvas-backdrop.open{ opacity:1; visibility:visible; }

.offcanvas-head{
  position:relative; padding:26px 22px 22px; flex-shrink:0;
  background: linear-gradient(90deg, var(--coral), var(--sun));
}
.offcanvas-head .brand{ margin-bottom:0 !important; }
.offcanvas-head .brand-mark{ border-color:#fff !important; }
.offcanvas-close{
  position:absolute; top:18px; right:18px; color:#fff; font-size:1.15rem; background:rgba(255,255,255,0.2);
  border:none; width:36px; height:36px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition: transform .3s, background .3s;
}
.offcanvas-close:hover{ background:rgba(255,255,255,0.35); transform: rotate(90deg); }

.offcanvas-body{ padding: 18px 18px 10px; flex:1; }
.offcanvas-nav .brand-text .name{ color:#fff; }
.offcanvas-nav .brand-text .tagline{ color: rgba(255,255,255,0.72); white-space:normal; max-width:200px; }
.offcanvas-nav details{ border-bottom: 1px solid rgba(255,255,255,0.1); padding: 2px 0; }
.offcanvas-nav summary{
  color:#fff; font-weight:700; padding:14px 10px; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  list-style:none; border-radius:12px; transition: background .25s;
}
.offcanvas-nav summary:hover{ background: rgba(255,255,255,0.06); }
.offcanvas-nav summary i{ transition: transform .3s; color: var(--sun); font-size:0.85rem; }
.offcanvas-nav details[open] summary i{ transform: rotate(180deg); }
.offcanvas-nav summary::-webkit-details-marker{ display:none; }
.offcanvas-nav a{ color:#fff; }
.offcanvas-nav .nav-link-icon{
  display:flex; align-items:center; gap:12px; padding:14px 10px; font-weight:700; border-radius:12px;
  border-bottom:1px solid rgba(255,255,255,0.1); transition: background .25s, padding-left .25s;
}
.offcanvas-nav .nav-link-icon:hover{ background: rgba(255,255,255,0.06); padding-left:16px; }
.offcanvas-nav .nav-link-icon i{ color: var(--sun); font-size:1.05rem; width:20px; text-align:center; }
.offcanvas-nav summary span{ display:flex; align-items:center; gap:12px; }
.offcanvas-nav summary span i.bi-house-door-fill, .offcanvas-nav summary span > i:first-child{ color: var(--sun); font-size:1.05rem; width:20px; text-align:center; }
.offcanvas-nav .sub-links{ padding-left: 32px; padding-bottom:8px; }
.offcanvas-nav .sub-links a{ display:flex; align-items:center; gap:8px; padding: 10px 4px; color:#B9C3E0; font-weight:500; font-size:0.92rem; transition: color .2s; }
.offcanvas-nav .sub-links a::before{ content:""; width:5px; height:5px; border-radius:50%; background: var(--sky); flex-shrink:0; }
.offcanvas-nav .sub-links a:hover{ color:#fff; }
.offcanvas-foot{ padding:18px 22px 26px; border-top:1px solid rgba(255,255,255,0.1); flex-shrink:0; }
.offcanvas-foot .oc-call{ display:flex; align-items:center; gap:12px; color:#fff; font-weight:700; margin-bottom:16px; }
.offcanvas-foot .oc-call i{ width:40px; height:40px; border-radius:50%; background: rgba(255,184,51,0.18); color: var(--sun); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.offcanvas-nav .btn-bma{ margin-top:0; width:100%; justify-content:center; }

/* =========================================================
   HERO SLIDER — full-bleed image, overlay content (Eduka-style)
   ========================================================= */
.hero-slider{
  position:relative; height: 88vh; min-height:600px; max-height:820px;
  overflow:hidden; background: var(--navy);
}
.hero-slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition: opacity 1.1s ease;
  display:flex; align-items:center;
}
.hero-slide.active{ opacity:1; visibility:visible; z-index:2; }
.hero-slide .slide-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform: scale(1.08);
  transition: transform 7s linear;
}
.hero-slide.active .slide-bg{ transform: scale(1); }
.hero-slide::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(95deg, rgba(6,14,36,0.88) 8%, rgba(6,14,36,0.6) 42%, rgba(6,14,36,0.22) 78%, rgba(6,14,36,0.35) 100%);
}

.hero-content{ position:relative; z-index:3; color:#fff; max-width: 640px; padding: 0 24px; }
.hero-mobile-badge{ display:none; }

.hero-eyebrow-line{
  display:inline-flex; align-items:center; gap:10px;
  color: var(--gold); font-weight:700; font-size:0.92rem; letter-spacing:0.06em; text-transform:uppercase;
  padding-bottom:12px; margin-bottom:22px; border-bottom: 3px solid var(--gold);
  opacity:0; transform: translateY(16px);
}
.hero-eyebrow-line i{ font-size:1.05rem; }
.hero-slide.active .hero-eyebrow-line{ animation: heroUp .8s .1s cubic-bezier(.2,.8,.2,1) forwards; }

.hero-content h1, .hero-content h2{
  color:#fff; margin-bottom:22px; font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  opacity:0; transform: translateY(24px);
}
.hero-content h1 .accent, .hero-content h2 .accent{ color: var(--gold); }
.hero-slide.active .hero-content h1, .hero-slide.active .hero-content h2{ animation: heroUp .9s .25s cubic-bezier(.2,.8,.2,1) forwards; }

.hero-content p{ color:#D7DEF0; font-size:1.12rem; max-width:520px; margin-bottom:36px;
  opacity:0; transform: translateY(20px);
}
.hero-slide.active .hero-content p{ animation: heroUp .9s .42s cubic-bezier(.2,.8,.2,1) forwards; }

.hero-btns{ display:flex; gap:16px; flex-wrap:wrap; opacity:0; transform: translateY(20px); }
.hero-slide.active .hero-btns{ animation: heroUp .9s .58s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes heroUp{ to{ opacity:1; transform:translateY(0); } }

.btn-white{ background:#fff; color: var(--navy); }
.btn-white:hover{ background: var(--mist); }

.hero-nav{
  position:absolute; z-index:4; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  border:none; background: rgba(20,28,54,0.45); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: background .25s, transform .25s;
}
.hero-nav:hover{ background: var(--gold); color: var(--navy); }
.hero-prev{ left: 30px; } .hero-next{ right: 30px; }

.hero-dots{
  position:absolute; z-index:4; bottom: 30px; left:50%; transform: translateX(-50%);
  display:flex; gap:10px;
}
.hero-dots button{
  width:32px; height:4px; border-radius:3px; background: rgba(255,255,255,0.35); border:none; cursor:pointer;
  transition: background .25s;
}
.hero-dots button.active{ background: var(--gold); }

@media (max-width: 700px){
  /* Mobile hero rebuilt to size itself to whatever content a slide actually
     has, instead of forcing every slide into one fixed viewport-height box.
     That old fixed-height + overflow:hidden combo is what was cutting off
     the caption / buttons on slides with longer text (e.g. the "Governed by
     Noor Educational and Welfare Trust" slide) — the layout that "wasn't
     coming right" on mobile. Slides are switched with display none/flex
     instead of being cross-faded on top of one another, so the section's
     height simply follows the active slide's real content height. */
  .hero-slider{
    height:auto; min-height:0; max-height:none; overflow:visible;
    touch-action: pan-y; display:block; padding-bottom:34px;
    background: linear-gradient(180deg, var(--navy) 0%, var(--royal-deep) 100%);
  }
  .hero-slide{
    position:static; display:none; opacity:1; visibility:visible;
    flex-direction:column; justify-content:flex-start; align-items:stretch;
    transition:none;
  }
  .hero-slide.active{ display:flex; }

  /* Photo presented as a rounded, shadowed card near the top — a proper
     "school website" hero photo rather than a cropped sliver or a
     letterboxed image floating on plain navy. */
  .hero-slide .slide-bg{
    position:relative; inset:auto;
    height:46vw; min-height:200px; max-height:300px;
    width:100%; object-fit:cover; object-position:center 30%;
    border-radius: 0 0 28px 28px;
    box-shadow: 0 18px 34px -18px rgba(6,14,36,0.55);
    transform:none !important;
  }
  .hero-slide.active .slide-bg{ transform:none; }
  .hero-slide::after{
    border-radius: 0 0 28px 28px;
    background: linear-gradient(180deg, rgba(6,14,36,0.05) 55%, rgba(6,14,36,0.85) 92%, var(--navy) 100%);
  }

  /* Small premium badge sitting on the photo's bottom edge */
  .hero-mobile-badge{
    position:relative; z-index:5; margin:-22px auto 0; width:max-content; max-width:88%;
    display:flex; align-items:center; gap:8px;
    background: var(--gold); color: var(--navy); font-weight:800; font-size:0.72rem;
    letter-spacing:0.03em; text-transform:uppercase;
    padding:9px 18px; border-radius:100px;
    box-shadow: 0 10px 22px -8px rgba(231,168,37,0.6);
  }
  .hero-mobile-badge i{ font-size:0.9rem; }

  .hero-content{ max-width:100%; padding:26px 24px 0; }
  .hero-eyebrow-line{ margin-bottom:14px; padding-bottom:9px; }
  .hero-content h1, .hero-content h2{ margin-bottom:14px; font-size: clamp(1.7rem, 6.4vw, 2.3rem); }
  .hero-content p{ margin-bottom:22px; font-size:0.98rem; }
  .hero-btns{ width:100%; }
  .hero-btns .btn-bma{ flex:1 1 auto; justify-content:center; }

  /* Side arrows collide with the CTA buttons on narrow screens — swipe + dots take over */
  .hero-nav{ display:none; }
  /* Floating confetti / decor shapes no longer needed on the simplified mobile layout */
  .hero-slider .confetti-wrap, .hero-slider .spin-badge{ display:none; }

  /* Dots move into normal document flow below the content instead of
     being absolutely pinned to a box whose height now varies per slide */
  .hero-dots{
    position:static; transform:none; margin:26px auto 0;
    display:flex; justify-content:center;
  }
}
@media (max-width: 420px){
  .hero-content{ padding:22px 20px 0; }
  .hero-content p{ font-size:0.93rem; }
}
/* The "playful pill" eyebrow badge (theme override further below) needs
   its own mobile sizing so long captions like "Governed by Noor
   Educational and Welfare Trust" wrap into two tidy centered lines
   instead of ballooning into a 3-line blob. */
@media (max-width: 700px){
  .hero-eyebrow-line{
    font-size:0.86rem !important; padding:7px 16px !important; gap:7px !important;
    line-height:1.3; text-align:center; max-width:94%;
    white-space:normal !important;
  }
  .hero-eyebrow-line i{ flex-shrink:0; }
}

/* Premium quick-fact bar — animated blue gradient, sits below hero */
.hero-float-bar{
  position: relative; z-index: 10; max-width: var(--container-w); margin: 56px auto 0;
  background: linear-gradient(120deg, var(--royal) 0%, var(--navy) 55%, var(--royal-deep) 100%);
  background-size: 220% 220%;
  animation: floatBarGradient 9s ease infinite;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  display: flex; padding: 0 12px;
  overflow: hidden;
}
@keyframes floatBarGradient{ 0%,100%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } }
.hero-float-bar::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
}
.hero-float-bar::after{
  content: ""; position: absolute; top: 0; left: -40%; width: 30%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.14), transparent);
  transform: skewX(-20deg);
  animation: floatBarSheen 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes floatBarSheen{ 0%{ left: -40%; } 55%,100%{ left: 130%; } }
.hfb-item{
  position: relative; z-index: 1;
  flex: 1; display: flex; align-items: center; gap: 14px; padding: 30px 20px;
  border-right: 1px solid rgba(255,255,255,0.14);
}
.hfb-item:last-child{ border-right: none; }
.hfb-item i{
  font-size: 1.4rem; color: var(--gold); flex-shrink: 0;
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(231,168,37,0.14);
  display: flex; align-items: center; justify-content: center;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), background .35s, color .35s;
}
.hfb-item:hover i{ transform: rotate(-8deg) scale(1.1); background: var(--gold); color: var(--navy); }
.hfb-item strong{ display: block; font-family: var(--font-display); font-size: 1.15rem; color: #fff; }
.hfb-item span{ display: block; font-size: 0.78rem; color: #B9C3E0; }
@media (max-width: 900px){
  .hero-float-bar{ flex-wrap: wrap; margin: 0; border-radius: 0; box-shadow: none; }
  .hfb-item{ width: 50%; flex: none; padding: 18px 16px; }
  .hfb-item:nth-child(2n){ border-right: none; }
  .hfb-item:nth-child(-n+2){ border-bottom: 1px solid rgba(255,255,255,0.14); }
}

.scroll-progress{
  position: fixed; top:0; left:0; height:3px; background: var(--gold); z-index: 2000; width:0%;
}

/* Diagonal section divider (used once, deliberately) */
.section-divider{ display:block; width:100%; height:56px; }
.section-divider path{ fill:#fff; }

/* =========================================================
   WELCOME / INTRO
   ========================================================= */
.welcome-media{ position:relative; }
.welcome-media img.main-img{ border-radius: 26px 110px 26px 110px; width:100%; height: 460px; object-fit:cover; box-shadow: var(--shadow-soft); border: 8px solid #fff; outline:1px solid var(--line); }
.welcome-media img.float-img{
  position:absolute; width: 46%; border-radius: 16px 60px 16px 60px;
  bottom: -36px; left: -32px; border: 6px solid #fff; box-shadow: var(--shadow-card);
}
@media (max-width: 480px){
  .welcome-media img.float-img{ left: 12px; width:44%; }
}
@media (max-width: 700px){
  .welcome-media img.main-img{ height: 360px; }
}
@media (max-width: 480px){
  .welcome-media img.main-img{ height: 300px; }
  .est-badge{ width:86px; height:86px; top:-14px; right:6px; }
  .est-badge .est-year{ font-size:1.05rem; }
  .est-badge .est-label{ font-size:0.55rem; }
}
.est-badge{
  position:absolute; top: -22px; right: 10px;
  background: var(--gold); color: var(--navy);
  border-radius:50%; width:112px; height:112px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; font-family:var(--font-display); font-weight:700; box-shadow: var(--shadow-card);
  z-index:2;
}
.est-badge span{ display:block; }
.est-badge .est-year{ font-size:1.35rem; }
.est-badge .est-label{ font-size:0.62rem; font-family:var(--font-body); font-weight:700; letter-spacing:0.03em; }
@media (max-width: 991px){
  .welcome-media{ margin-bottom:70px; }
}
.welcome-list{ margin: 26px 0 30px; display:grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.welcome-list li{ display:flex; align-items:flex-start; gap:10px; color: var(--ink); font-weight:500; font-size:0.96rem; }
.welcome-list li i{ color: var(--royal); font-size:1.05rem; margin-top:2px; }
@media (max-width:520px){ .welcome-list{ grid-template-columns:1fr; } }

/* =========================================================
   FEATURE STRIP — editorial numbered list (not identical cards)
   ========================================================= */
.feature-strip{ display:flex; align-items:flex-start; }
.feature-strip-item{
  flex:1; padding: 6px 32px; border-right: 1px solid var(--line);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.feature-strip-item:first-child{ padding-left:0; }
.feature-strip-item:last-child{ border-right:none; padding-right:0; }
.feature-strip-item:hover{ transform: translateY(-6px); }
.fs-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.fs-num{ font-family: var(--font-display); font-size:1.1rem; color: var(--gold); font-weight:700; }
.fs-icon{
  width:52px; height:52px; border-radius: var(--r-sm); background: var(--mist-2);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; color: var(--royal);
  transition: background .3s, color .3s, transform .3s;
}
.feature-strip-item:hover .fs-icon{ background: var(--royal); color:#fff; transform: rotate(-6deg); }
.feature-strip-item h3{ margin-bottom:10px; font-size:1.12rem; }
.feature-strip-item p{ font-size:0.92rem; margin:0; }
@media (max-width: 900px){
  .feature-strip{ flex-wrap:wrap; }
  .feature-strip-item{ flex:1 1 50%; border-right:none; border-bottom:1px solid var(--line); padding: 26px 22px; margin-bottom:0; }
}
@media (max-width: 560px){
  .feature-strip-item{ flex:1 1 100%; }
}

/* =========================================================
   ABOUT
   ========================================================= */
.about-media{ position:relative; }
.about-media img{ border-radius: var(--r-lg); width:100%; height:520px; object-fit:cover; }
.about-check-list{ margin: 24px 0 32px; }
.about-check-list li{ display:flex; gap:12px; padding: 12px 0; border-bottom:1px solid var(--line); }
.about-check-list li:last-child{ border-bottom:none; }
.about-check-list i{ color: var(--gold); font-size:1.2rem; margin-top:2px; }
.about-check-list strong{ color: var(--navy); display:block; font-size:1rem; }
.about-check-list span{ color: var(--slate); font-size:0.92rem; }

/* =========================================================
   STATS
   ========================================================= */
.stats-section{
  background: linear-gradient(120deg, var(--navy) 0%, var(--royal-deep) 100%);
  padding: 70px 0;
}
.stat-item{ text-align:center; padding: 16px; }
.stat-num{
  font-family: var(--font-display); font-weight:700; color:#fff;
  font-size: clamp(2.2rem,4vw,3.2rem); display:flex; align-items:baseline; justify-content:center; gap:4px;
}
.stat-num .suffix{ color: var(--gold); font-size: 0.55em; }
.stat-label{ color:#AEB9D8; margin-top:8px; font-weight:500; letter-spacing:0.01em; }

/* =========================================================
   WHY CHOOSE US — full-width animated icon-card grid
   ========================================================= */
.why-choose-section{ position:relative; }

/* Floating school-themed doodles in the section background */
.why-deco{
  position:absolute; z-index:0; pointer-events:none; opacity:0.16;
  filter: drop-shadow(0 6px 10px rgba(11,26,61,0.12));
}
.why-deco-1{ top:10%; left:5%; font-size:2.6rem; color: var(--royal); animation: floatY 6s ease-in-out infinite; }
.why-deco-2{ bottom:12%; right:7%; font-size:3rem; color: var(--coral); animation: floatY 7s ease-in-out infinite -2s; }
.why-deco-3{ top:46%; right:3%; font-size:1.8rem; color: var(--gold); animation: floatSpin 9s ease-in-out infinite; }
@media (max-width: 900px){ .why-deco{ display:none; } }

/* ---- Why-choose cards — centered, icon-first, playful & animated ---- */
.why-choose-grid{ display:flex; flex-wrap:wrap; align-items:center; gap:56px; margin-top:44px; position:relative; z-index:1; }
.why-choose-media{ flex:1 1 400px; }
.why-choose-content{ flex:1.15 1 460px; }
.why-choose-content .section-tag, .why-choose-content h2{ margin-top:0; }
.why-media-frame{ position:relative; border-radius: 26px 100px 26px 100px; overflow:hidden; box-shadow: var(--shadow-soft); border: 8px solid #fff; outline:1px solid var(--line); }
.why-media-frame img{ width:100%; height:460px; object-fit:cover; display:block; }
.why-list{ margin-top:30px; display:flex; flex-direction:column; gap:22px; }
.why-row{ display:flex; gap:18px; align-items:flex-start; padding-bottom:22px; border-bottom:1px dashed var(--line); }
.why-row:last-child{ border-bottom:none; padding-bottom:0; }
.why-row-icon{
  width:52px; height:52px; border-radius:16px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; transition: transform .35s cubic-bezier(.34,1.56,.64,1), border-radius .35s;
}
.why-row:hover .why-row-icon{ transform: scale(1.1) rotate(-6deg); border-radius:50% 18% 50% 50%; }
.why-row h4{ font-family:var(--font-body); font-weight:800; font-size:1rem; color: var(--navy); margin-bottom:5px; }
.why-row p{ font-size:0.88rem; margin:0; }
@media (max-width: 900px){
  .why-media-frame img{ height:360px; }
}
@media (max-width: 600px){
  .why-media-frame{ border-radius: 20px 60px 20px 60px; }
  .why-media-frame img{ height:280px; }
}

/* =========================================================
   ACADEMICS — class cards
   ========================================================= */
.class-card{
  position:relative; border-radius: var(--r-lg); overflow:hidden; height: 420px;
  outline: 6px solid #fff; outline-offset: 0;
  filter: drop-shadow(0 14px 26px rgba(11,26,61,0.22));
  transition: outline-color .35s, transform .35s, filter .35s;
}
.class-card img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.class-card:hover img{ transform: scale(1.08); }
.class-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(6,14,36,0.92) 10%, rgba(6,14,36,0.15) 65%);
}
.class-card-body{ position:absolute; left:0; right:0; bottom:0; padding: 26px; z-index:2; }
.class-card-icon{
  position:absolute; top:18px; left:18px; z-index:3; width:52px; height:52px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; box-shadow: var(--shadow-card);
}
.class-card-body h3{ color:#fff; margin-bottom:8px; }
.class-card-body p{ color:#C9D2EA; font-size:0.9rem; margin-bottom:14px; }
.class-card-body a{ color: var(--gold); font-weight:700; font-size:0.9rem; display:inline-flex; align-items:center; gap:6px; }

/* ---- Graphic (image-free) class cards ---- */
.class-card-graphic{ display:flex; flex-direction:column; justify-content:flex-end; transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s; }
.class-card-graphic:hover{ transform: translateY(-8px); }
.class-card-graphic::after{ display:none; }
.class-card-graphic.grad-sun{ background: linear-gradient(150deg, #FFB833 0%, #C97F00 100%); }
.class-card-graphic.grad-sky{ background: linear-gradient(150deg, #6FC3FF 0%, #1E6FD9 100%); }
.class-card-graphic.grad-leaf{ background: linear-gradient(150deg, #7ED9A6 0%, #1F9D5C 100%); }
.class-card-graphic.grad-coral{ background: linear-gradient(150deg, #FF8A5C 0%, #E9552C 100%); }
.class-card-graphic.grad-grape{ background: linear-gradient(150deg, #C39EE8 0%, #7C4DB0 100%); }
.class-card-num{
  position:absolute; top:18px; right:22px; z-index:2; font-family:var(--font-display); font-weight:800;
  font-size:2.6rem; color:rgba(255,255,255,0.35); line-height:1;
}
.class-card-ghost{
  position:absolute; bottom:-30px; right:-20px; z-index:1; font-size:11rem; color:rgba(255,255,255,0.12);
  transform: rotate(-12deg); pointer-events:none; transition: transform .5s ease;
}
.class-card-graphic:hover .class-card-ghost{ transform: rotate(-4deg) scale(1.06); }
.class-card-graphic .class-card-icon{ box-shadow: 0 10px 22px -8px rgba(6,14,36,0.4); }
.class-card-graphic .class-card-body p{ color: rgba(255,255,255,0.88); }
.class-card-graphic .class-card-body a{ color:#fff; text-decoration: underline; text-underline-offset:3px; }
@media (max-width: 640px){
  .class-card{ height:320px; }
  .class-card-ghost{ font-size:8rem; }
}


/* =========================================================
   ACADEMIC PILLARS — full-size premium grid
   ========================================================= */
.academic-pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:56px; }
.pillar-card{
  background:#fff; border-radius: var(--r-lg); padding: 34px 28px;
  border:1px solid var(--line); display:flex; gap:18px; align-items:flex-start;
  box-shadow: 0 10px 30px -24px rgba(11,26,61,0.28);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
.pillar-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card); border-color:transparent; }
.pillar-icon{
  width:60px; height:60px; border-radius: var(--r-md); flex-shrink:0;
  background: var(--mist-2); color: var(--royal);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  transition: background .3s, color .3s, transform .3s;
}
.pillar-card:hover .pillar-icon{ background: var(--gold); color: var(--navy); transform: rotate(-6deg); }
.pillar-card h4{ font-family: var(--font-body); font-weight:700; font-size:1.03rem; color: var(--navy); margin-bottom:6px; }
.pillar-card p{ font-size:0.88rem; margin:0; }
@media (max-width: 991px){ .academic-pillars{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 620px){ .academic-pillars{ grid-template-columns:1fr; } }
.facility-card{
  position:relative; border-radius: var(--r-md); overflow:hidden; height:280px;
  outline: 5px solid #fff; outline-offset: 0;
  filter: drop-shadow(0 12px 22px rgba(11,26,61,0.2));
  transition: transform .4s cubic-bezier(.2,.8,.2,1), outline-color .4s, filter .4s;
}
.facility-card:hover{ transform: translateY(-6px); outline-color: var(--gold); filter: drop-shadow(0 18px 34px rgba(11,26,61,0.26)); }
.facility-card img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.facility-card:hover img{ transform: scale(1.1); }
.facility-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(6,14,36,0.88), rgba(6,14,36,0) 55%); }
.facility-body{ position:absolute; left:0; right:0; bottom:0; padding:20px; z-index:2; display:flex; align-items:center; gap:12px; }
.facility-body i{ color: var(--gold); font-size:1.3rem; flex-shrink:0; width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; }
.facility-body h4{ color:#fff; font-family:var(--font-body); font-weight:700; font-size:1rem; margin:0; }

/* ---- Image-free graphic facility tiles (homepage) ---- */
.facility-tile{
  background:#fff; border-radius: var(--r-lg); padding: 36px 18px 28px; text-align:center;
  border:1px solid var(--line); box-shadow: 0 10px 26px -22px rgba(11,26,61,0.28);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
.facility-tile:hover{ transform: translateY(-8px); box-shadow: var(--shadow-card); border-color:transparent; }
.facility-tile-icon{
  width:72px; height:72px; border-radius:50%; margin:0 auto 18px; font-size:1.9rem;
  background: var(--tile-bg); color: var(--tile-color);
  display:flex; align-items:center; justify-content:center;
  animation: tileFloat 3.6s ease-in-out infinite;
}
.facility-tile:nth-child(4n+2) .facility-tile-icon{ animation-delay: -0.9s; }
.facility-tile:nth-child(4n+3) .facility-tile-icon{ animation-delay: -1.8s; }
.facility-tile:nth-child(4n+4) .facility-tile-icon{ animation-delay: -2.7s; }
.facility-tile h4{ font-family:var(--font-body); font-weight:800; font-size:0.98rem; color: var(--navy); margin:0; }
@keyframes tileFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-9px); } }

/* =========================================================
   CAMPUS LIFE — masonry
   ========================================================= */
.masonry{ column-count: 4; column-gap: 16px; }
.masonry .m-item{ break-inside: avoid; margin-bottom:16px; border-radius: var(--r-md); overflow:hidden; position:relative; }
.masonry .m-item img{ width:100%; display:block; transition: transform .5s; }
.masonry .m-item:hover img{ transform: scale(1.06); }
@media (max-width: 991px){ .masonry{ column-count:3; } }
@media (max-width: 700px){ .masonry{ column-count:2; } }

/* =========================================================
   VIDEO SHOWCASE
   ========================================================= */
.video-section{
  position:relative; height: 480px; border-radius: var(--r-lg); overflow:hidden;
}
@media (max-width: 700px){ .video-section{ height:340px; } }
.video-section img{ width:100%; height:100%; object-fit:cover; }
.video-section::after{ content:""; position:absolute; inset:0; background: rgba(6,14,36,0.55); }
.video-content{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2; text-align:center; padding: 0 20px; }
.play-btn{
  width: 92px; height:92px; border-radius:50%; background: rgba(255,255,255,0.16);
  border: 1.5px solid rgba(255,255,255,0.5); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.6rem; cursor:pointer; margin-bottom:22px;
  transition: transform .3s, background .3s;
  animation: pulseRing 2.6s infinite;
}
.play-btn:hover{ transform: scale(1.08); background: var(--gold); color: var(--navy); }
@keyframes pulseRing{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,0.35);} 70%{ box-shadow:0 0 0 26px rgba(255,255,255,0);} 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0);} }
.video-content h3{ color:#fff; font-size: clamp(1.4rem,2.6vw,2rem); }

/* =========================================================
   GALLERY
   ========================================================= */
.gallery-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 38px; }
.gallery-filters button{
  padding: 10px 20px; border-radius:100px; border:1px solid var(--line); background:#fff;
  font-weight:600; font-size:0.9rem; color: var(--slate); cursor:pointer; transition: all .25s;
}
.gallery-filters button:hover{ border-color: var(--royal); color: var(--royal); }
.gallery-filters button.active{ background: var(--royal); color:#fff; border-color: var(--royal); }
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.gallery-item{
  position:relative; border-radius: var(--r-md); overflow:hidden; cursor:pointer;
  border: 1px solid rgba(11,26,61,0.08); aspect-ratio: 1 / 1;
  box-shadow: 0 10px 24px -14px rgba(11,26,61,0.28);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.gallery-item:hover{ transform: translateY(-6px); box-shadow: 0 22px 40px -16px rgba(11,26,61,0.32), 0 0 0 3px var(--gold); }
.gallery-item > a{ display:block; position:relative; height:100%; }
.gallery-item img{ width:100%; height:100%; display:block; object-fit:cover; transition: transform .6s ease; }
.gallery-item:hover img{ transform: scale(1.08); }
.gallery-overlay{
  position:absolute; inset:0; background: linear-gradient(0deg, rgba(6,14,36,0.88), rgba(6,14,36,0.05) 65%);
  display:flex; align-items:flex-end; padding:18px; opacity:0; transition: opacity .35s;
}
.gallery-item:hover .gallery-overlay{ opacity:1; }
.gallery-overlay span{
  color:#fff; font-weight:700; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.05em;
  display:inline-flex; align-items:center; gap:8px;
}
.gallery-overlay span::before{ content:""; width:16px; height:2px; background: var(--gold); display:inline-block; }
.gallery-item.hide{ display:none; }
/* Zoom cue so it's clear the gallery opens a lightbox */
.gallery-overlay::after{
  content:"\26f6"; position:absolute; top:16px; right:16px;
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.18);
  backdrop-filter: blur(4px); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; opacity:0; transform:scale(.7); transition: opacity .3s, transform .3s;
}
.gallery-item:hover .gallery-overlay::after{ opacity:1; transform:scale(1); }
@media (max-width: 900px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } }

/* =========================================================
   VISION / MISSION — single split panel (not twin cards)
   ========================================================= */
.vm-panel{
  background: linear-gradient(135deg, var(--navy) 0%, var(--royal-deep) 100%);
  border-radius: var(--r-lg); padding: 56px clamp(24px,5vw,64px);
  display:flex; position:relative; overflow:hidden;
}
.vm-panel::before{
  content:""; position:absolute; top:-60px; right:-60px; width:220px; height:220px; border-radius:50%;
  background: rgba(231,168,37,0.1);
}
.vm-col{ flex:1; position:relative; z-index:1; padding: 0 clamp(16px,3vw,40px); }
.vm-col + .vm-col{ border-left: 1px solid rgba(255,255,255,0.15); }
.vm-icon{
  width:56px; height:56px; border-radius: var(--r-sm); display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; margin-bottom:20px;
}
.vm-col.vision .vm-icon{ background: rgba(255,255,255,0.12); color: var(--gold); }
.vm-col.mission .vm-icon{ background: var(--gold); color: var(--navy); }
.vm-col h3{ color:#fff; margin-bottom:14px; }
.vm-col p{ color:#C7D1EC; font-size:1.02rem; }
@media (max-width: 800px){
  .vm-panel{ flex-direction:column; gap:36px; }
  .vm-col + .vm-col{ border-left:none; border-top:1px solid rgba(255,255,255,0.15); padding-top:36px; }
}

/* =========================================================
   DIRECTOR MESSAGE
   ========================================================= */
.director-photo{ position:relative; }
.director-photo img{ border-radius: var(--r-lg); width:100%; height:480px; object-fit:cover; box-shadow: var(--shadow-soft); }
.director-quote-mark{ font-family: var(--font-display); font-size:5rem; color: var(--gold); line-height:0.5; opacity:0.5; }
.director-sign{ margin-top:26px; }
.director-sign .d-name{ font-family: var(--font-display); font-size:1.3rem; color: var(--navy); font-weight:700; }
.director-sign .d-role{ color: var(--slate); font-size:0.9rem; line-height:1.5; }
.director-sign .d-qualification{ color: var(--royal); font-weight:700; font-size:0.86rem; line-height:1.5; margin-top:4px; }

/* =========================================================
   ADMISSION CTA
   ========================================================= */
.cta-band{
  background: linear-gradient(120deg, var(--royal) 0%, var(--navy) 100%);
  border-radius: var(--r-lg);
  padding: 64px 50px;
  position:relative; overflow:hidden;
}
@media (max-width: 700px){ .cta-band{ padding: 40px 26px; } }
.cta-band::before{
  content:""; position:absolute; width:340px; height:340px; border-radius:50%;
  background: rgba(231,168,37,0.12); top:-140px; right:-100px;
}
.cta-band-grid{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; position:relative; z-index:1; }
.cta-band h2{ color:#fff; margin-bottom:14px; }
.cta-band p{ color:#CBD5EE; max-width:480px; }
.cta-phone{ display:flex; align-items:center; gap:12px; color:#fff; font-weight:700; font-size:1.15rem; margin-top:18px; }
.cta-phone i{ color: var(--gold); font-size:1.3rem; }
.cta-buttons{ display:flex; gap:14px; flex-wrap:wrap; }

/* =========================================================
   ADMISSION PROCESS — timeline
   ========================================================= */
.process-track{ display:flex; justify-content:space-between; position:relative; margin-top:20px; }
.process-track::before{
  content:""; position:absolute; top:34px; left:5%; right:5%; height:2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 18px);
  z-index:0;
}
.process-step{ position:relative; z-index:1; text-align:center; flex:1; padding: 0 12px; }
.process-num{
  width:68px; height:68px; border-radius:50%; background:#fff; border:2px solid var(--royal);
  color: var(--royal); font-family:var(--font-display); font-weight:700; font-size:1.3rem;
  display:flex; align-items:center; justify-content:center; margin: 0 auto 20px; transition: all .3s;
}
.process-step:hover .process-num{ background: var(--royal); color:#fff; }
.process-step h4{ font-family:var(--font-body); font-weight:700; color:var(--navy); margin-bottom:8px; }
.process-step p{ font-size:0.88rem; margin:0; }
@media (max-width: 800px){
  .process-track{ flex-direction:column; gap:34px; }
  .process-track::before{ display:none; }
}

/* =========================================================
   TESTIMONIALS — premium 3-up card grid
   ========================================================= */
.testi-section{ overflow: visible; }
.testi-slider{
  position:relative; max-width: 1180px; margin: 64px auto 0; z-index:1;
  display:flex; align-items:center; gap:14px;
}
.testi-track-wrap{
  overflow-x:auto; overflow-y:hidden; flex:1; min-width:0;
  scroll-behavior:smooth; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.testi-track-wrap::-webkit-scrollbar{ display:none; }
.testi-track{ display:flex; gap:24px; }
.testi-slide{ flex:0 0 calc((100% - 2 * 24px) / 3); max-width:calc((100% - 2 * 24px) / 3); padding: 46px 0 10px; box-sizing:border-box; scroll-snap-align:start; }
.testi-nav{
  flex-shrink:0; width:48px; height:48px; border-radius:50%; border:1px solid var(--line);
  background:#fff; color:var(--navy); display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; cursor:pointer; box-shadow: var(--shadow-card); transition: background .25s, color .25s, transform .25s;
}
.testi-nav:hover{ background: var(--navy); color:#fff; transform: translateY(-2px); }
.testi-nav:disabled{ opacity:0.35; cursor:default; pointer-events:none; }
.testi-card{
  position:relative; background:#fff; border-radius: 22px; padding: 40px 26px 30px;
  text-align:center; box-shadow: var(--shadow-card); border:1px solid var(--line);
  transition: transform .35s, box-shadow .35s; height:100%; box-sizing:border-box;
}
.testi-card::after{
  content:""; position:absolute; inset: 14px -14px -14px 14px; z-index:-1;
  border-radius: 22px; transform: rotate(-2.2deg); transition: transform .35s;
}
.testi-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-soft); }
.testi-card:hover::after{ transform: rotate(-4.5deg); }
.testi-card.c-coral::after{ background: var(--coral-bg); }
.testi-card.c-sky::after{ background: var(--sky-bg); }
.testi-card.c-sun::after{ background: var(--sun-bg); }
.testi-card.c-leaf::after{ background: var(--leaf-bg); }
.testi-card.c-grape::after{ background: var(--grape-bg); }
.testi-card.c-royal::after{ background: var(--sky-bg); }
.testi-card-top{ height:34px; }
.testi-avatar-wrap{ position:absolute; top:-38px; left:50%; transform:translateX(-50%); }
.testi-avatar{
  width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:#fff;
  border:5px solid #fff; box-shadow: var(--shadow-card); position:relative; z-index:1;
}
.testi-card.c-coral .testi-avatar{ background: linear-gradient(135deg, var(--coral), #ff8a5c); }
.testi-card.c-sky .testi-avatar{ background: linear-gradient(135deg, var(--sky), #6fc3ff); }
.testi-card.c-sun .testi-avatar{ background: linear-gradient(135deg, #C97F00, var(--sun)); }
.testi-card.c-leaf .testi-avatar{ background: linear-gradient(135deg, var(--leaf), #7ed9a6); }
.testi-card.c-grape .testi-avatar{ background: linear-gradient(135deg, var(--grape), #c39ee8); }
.testi-card.c-royal .testi-avatar{ background: linear-gradient(135deg, var(--royal), var(--sky)); }
.testi-quote-badge{
  position:absolute; bottom:-2px; right:-6px; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:0.9rem;
  border:3px solid #fff; z-index:2;
}
.testi-card.c-coral .testi-quote-badge{ background: var(--leaf); }
.testi-card.c-sky .testi-quote-badge{ background: var(--coral); }
.testi-card.c-sun .testi-quote-badge{ background: var(--royal); }
.testi-card.c-leaf .testi-quote-badge{ background: var(--sun); }
.testi-card.c-grape .testi-quote-badge{ background: var(--coral); }
.testi-card.c-royal .testi-quote-badge{ background: var(--gold); }
.testi-stars{ color: var(--gold); font-size:0.9rem; margin-bottom:16px; }
.testi-quote{ font-size:0.95rem; color: var(--slate); line-height:1.7; margin-bottom:24px; min-height: 96px; }
.testi-person{ padding-top:16px; border-top:1px dashed var(--line); }
.testi-name{ font-family: var(--font-display); font-weight:700; color:var(--navy); font-size:1.02rem; }
.testi-role{ font-size:0.82rem; color: var(--slate-light); margin-top:2px; }
@media (max-width: 900px){
  .testi-slide{ flex:0 0 calc((100% - 24px) / 2); max-width:calc((100% - 24px) / 2); }
}
@media (max-width: 640px){
  .testi-slider{ gap:6px; }
  /* Side arrows were squeezing the card into a narrow column — swipe + scroll-snap handle nav on mobile */
  .testi-nav{ display:none; }
  .testi-slide{ flex:0 0 100%; max-width:100%; padding: 44px 4px 10px; }
  .testi-card{ padding: 36px 20px 26px; }
}

/* =========================================================
   EVENTS SLIDER — swipes on mobile; on desktop shows 3 in a
   row and only becomes a slider once a 4th event is added
   ========================================================= */
.events-slider{
  position:relative; max-width: 1180px; margin: 0 auto; z-index:1;
  display:flex; align-items:center; gap:14px;
}
.events-track-wrap{
  overflow-x:auto; overflow-y:hidden; flex:1; min-width:0;
  scroll-behavior:smooth; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.events-track-wrap::-webkit-scrollbar{ display:none; }
.events-track{ display:flex; gap:24px; }
.events-slide{ flex:0 0 calc((100% - 2 * 24px) / 3); max-width:calc((100% - 2 * 24px) / 3); box-sizing:border-box; scroll-snap-align:start; }
.events-nav{
  flex-shrink:0; width:48px; height:48px; border-radius:50%; border:1px solid var(--line);
  background:#fff; color:var(--navy); display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; cursor:pointer; box-shadow: var(--shadow-card); transition: background .25s, color .25s, transform .25s;
}
.events-nav:hover{ background: var(--navy); color:#fff; transform: translateY(-2px); }
.events-nav:disabled{ opacity:0.35; cursor:default; pointer-events:none; }
@media (max-width: 900px){
  .events-slide{ flex:0 0 calc((100% - 24px) / 2); max-width:calc((100% - 24px) / 2); }
}
@media (max-width: 640px){
  .events-slider{ gap:6px; }
  /* Same approach as testimonials — swipe + scroll-snap handle nav on mobile */
  .events-nav{ display:none; }
  .events-slide{ flex:0 0 88%; max-width:88%; }
}

/* =========================================================
   NOTICE BOARD & NEWS
   ========================================================= */
.notice-item{
  display:flex; align-items:center; gap:20px; padding: 20px; border-radius: var(--r-md);
  border:1px solid var(--line); margin-bottom:14px; transition: box-shadow .3s, transform .3s;
}
.notice-item:hover{ box-shadow: var(--shadow-card); transform: translateX(4px); }
.notice-date{
  flex-shrink:0; width:64px; height:64px; border-radius: var(--r-sm); background: var(--mist-2);
  color: var(--royal); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.notice-date .d{ font-family:var(--font-display); font-weight:700; font-size:1.25rem; line-height:1; }
.notice-date .m{ font-size:0.68rem; font-weight:700; letter-spacing:0.03em; }
.notice-tag{ display:inline-block; font-size:0.72rem; font-weight:700; color: var(--red-accent); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:4px; }
.notice-item h4{ font-family:var(--font-body); font-weight:700; font-size:0.98rem; color:var(--navy); margin:0; }
.notice-arrow{ margin-left:auto; color: var(--slate-light); font-size:1.1rem; flex-shrink:0; }

.news-card{ border-radius: var(--r-lg); overflow:hidden; border:1px solid var(--line); height:100%; filter: drop-shadow(0 8px 18px rgba(11,26,61,0.14)); transition: filter .3s, transform .3s; }
.news-card:hover{ filter: drop-shadow(0 16px 30px rgba(11,26,61,0.22)); transform: translateY(-6px); }
.news-img{ position:relative; height:210px; overflow:hidden; }
.news-img img{ width:100%; height:100%; object-fit:cover; transition: transform .5s; }
.news-card:hover .news-img img{ transform: scale(1.08); }
.news-date-badge{
  position:absolute; top:14px; left:14px; background:#fff; border-radius: var(--r-sm); padding: 8px 12px; text-align:center;
}
.news-date-badge .d{ font-family:var(--font-display); font-weight:700; color: var(--navy); font-size:1.1rem; line-height:1; }
.news-date-badge .m{ font-size:0.65rem; color: var(--royal); font-weight:700; }
.news-body{ padding: 22px; }
.news-cat{ font-size:0.75rem; color: var(--royal); font-weight:700; text-transform:uppercase; letter-spacing:0.03em; }
.news-body h4{ font-family:var(--font-display); font-size:1.1rem; margin: 8px 0 10px; color:var(--navy); }
.news-body p{ font-size:0.9rem; margin-bottom:14px; }
.news-link{ font-weight:700; font-size:0.88rem; color: var(--royal); display:inline-flex; align-items:center; gap:6px; }

/* =========================================================
   FAQ
   ========================================================= */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; padding: 22px 4px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer;
  font-family: var(--font-body); font-weight:700; font-size:1.02rem; color: var(--navy);
}
.faq-q i{ transition: transform .3s; color: var(--royal); flex-shrink:0; }
.faq-item.open .faq-q i{ transform: rotate(135deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .35s ease; }
.faq-a p{ padding: 0 4px 22px; margin:0; font-size:0.95rem; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-info-item{ display:flex; gap:16px; align-items:flex-start; margin-bottom:26px; }
.contact-info-item i{ width:46px; height:46px; border-radius:50%; background: var(--mist-2); color: var(--royal); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-item strong{ display:block; color: var(--navy); font-size:0.98rem; margin-bottom:2px; }
.contact-info-item span, .contact-info-item a{ color: var(--slate); font-size:0.92rem; }
.contact-quick-btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }

.contact-form{ background:#fff; border-radius: var(--r-lg); padding: 40px; box-shadow: var(--shadow-soft); border:1px solid var(--line); position:relative; overflow:hidden; }
.contact-form.premium::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background: linear-gradient(90deg, var(--gold), var(--royal), var(--coral));
}
.form-control-bma{
  width:100%; padding: 14px 16px; border-radius: var(--r-sm); border:1px solid var(--line);
  background: var(--mist); font-family:inherit; font-size:0.95rem; margin-bottom:16px; transition: border-color .25s, background .25s;
}
.form-control-bma:focus{ outline:none; border-color: var(--royal); background:#fff; }
textarea.form-control-bma{ resize:vertical; min-height:110px; }

.form-alert{ display:flex; align-items:flex-start; gap:10px; padding:14px 16px; border-radius:12px; margin-bottom:18px; font-size:0.95rem; line-height:1.5; }
.form-alert i{ margin-top:2px; flex-shrink:0; }
.form-alert-success{ background:#EAF7EF; color:#1E7A42; border:1px solid #BEE6CC; }
.form-alert-error{ background:#FDEDEC; color:#B3261E; border:1px solid #F5C6C2; }

.map-wrap{ border-radius: var(--r-lg); overflow:hidden; margin-top: 30px; box-shadow: var(--shadow-card); border: 6px solid #fff; outline: 1px solid var(--line); }
.map-wrap iframe{ width:100%; height:420px; border:0; display:block; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:
    linear-gradient(180deg, rgba(11,26,61,0.94), rgba(11,26,61,0.97) 40%, var(--navy) 75%),
    url("images/campus-lawn.jpeg") center 30%/cover no-repeat;
  color:#AEB9D8; padding-top: 80px;
}
.footer-brand .brand-text .name{ color:#fff; }
.footer-about{ font-size:0.9rem; margin: 18px 0 22px; max-width:280px; }
.footer-reg-info{ font-size:0.78rem; line-height:1.6; color:var(--slate); opacity:0.75; max-width:280px; margin: -12px 0 22px; }
.footer-social{ display:flex; gap:12px; }
.footer-social a{
  width:42px; height:42px; border-radius:50%; border:none;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.05rem;
  transition: transform .25s, box-shadow .25s; box-shadow: 0 8px 18px -8px rgba(0,0,0,0.5);
}
.footer-social a:nth-child(1){ background: linear-gradient(135deg, #1877F2, #0E5FCB); }
.footer-social a:nth-child(2){ background: linear-gradient(135deg, #F58529, #DD2A7B 45%, #8134AF 75%, #515BD4); }
.footer-social a:nth-child(3){ background: linear-gradient(135deg, #FF0000, #CC0000); }
.footer-social a:nth-child(4){ background: linear-gradient(135deg, #25D366, #128C4A); }
.footer-social a:hover{ transform: translateY(-4px) scale(1.06); box-shadow: 0 12px 22px -8px rgba(0,0,0,0.6); }
.footer-col h5{ font-family: var(--font-body); font-weight:700; color:#fff; font-size:1rem; margin-bottom:22px; }
.footer-col ul li{ margin-bottom:12px; }
.footer-col ul li a{ font-size:0.92rem; color:#AEB9D8; transition: color .2s, padding-left .2s; display:inline-block; }
.footer-col ul li a:hover{ color: var(--gold); padding-left:4px; }
.footer-col .f-contact li{ display:flex; gap:10px; align-items:flex-start; font-size:0.9rem; }
.footer-col .f-contact i{ color: var(--gold); margin-top:3px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.12); margin-top:60px; padding: 24px 0; }
.footer-bottom .container-bma{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:0.85rem; }
.footer-bottom a{ color:#AEB9D8; }
.footer-bottom a:hover{ color: var(--gold); }

/* =========================================================
   BACK TO TOP
   ========================================================= */
.back-to-top{
  position: fixed; right: 26px; bottom: 26px; z-index: 900;
  width:50px; height:50px; border-radius:50%; background: var(--royal); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  border:none; cursor:pointer; box-shadow: 0 14px 30px -12px rgba(21,44,102,0.7);
  opacity:0; visibility:hidden; transform: translateY(10px); transition: all .3s;
}
.back-to-top.show{ opacity:1; visibility:visible; transform: translateY(0); }
.back-to-top:hover{ background: var(--navy); }

/* =========================================================
   REVEAL ANIMATION (lightweight, IntersectionObserver driven)
   ========================================================= */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform: translateY(0); }
.reveal-delay-1.in{ transition-delay: .1s; }
.reveal-delay-2.in{ transition-delay: .2s; }
.reveal-delay-3.in{ transition-delay: .3s; }
.reveal-delay-4.in{ transition-delay: .4s; }

/* =========================================================
   RESPONSIVE GRID UTILITIES
   ========================================================= */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.grid-classes{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
@media (max-width: 1100px){ .grid-classes{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 700px){ .grid-classes{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 480px){ .grid-classes{ grid-template-columns:1fr; } }
.grid-why{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.grid-academic-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px 40px; }
.flex-row-wrap{ display:flex; flex-wrap:wrap; }

@media (max-width: 991px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-why{ grid-template-columns:repeat(2,1fr); }
  .grid-academic-features{ grid-template-columns:repeat(2,1fr); }
  .stats-section .grid-4{ grid-template-columns:repeat(2,1fr); gap:32px 20px; }
}
@media (max-width: 620px){
  .grid-4{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .grid-why{ grid-template-columns:1fr; }
  .grid-academic-features{ grid-template-columns:1fr; }
  .stats-section .grid-4{ grid-template-columns:1fr 1fr; gap:28px 16px; }
  .form-grid-2{ grid-template-columns:1fr !important; gap:0 !important; }
}

.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr; gap:32px; }
@media (max-width: 991px){
  .footer-grid{ grid-template-columns: 1fr 1fr; gap:40px 24px; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; gap:36px; }
}

/* Utility */
.text-royal{ color: var(--royal); }
.text-gold{ color: var(--gold); }
.mb-0{ margin-bottom:0 !important; }
.g-panel{ background:#fff; border-radius: var(--r-lg); }
hr.thin{ border:none; border-top:1px solid var(--line); margin: 0; }

/* =========================================================
   PREMIUM SCHOOL-FEEL ENHANCEMENTS
   Animated ticker, floating school icons, shimmering gold
   borders, notebook/diploma textures — layered on top of the
   existing design system without touching it.
   ========================================================= */
:root{ --font-hand: "Caveat", cursive; }

/* ---------- Announcement ticker strip (notice-board feel) ---------- */
.announce-ticker{
  background: var(--navy);
  border-top: 1px dashed rgba(231,168,37,0.45);
  border-bottom: 1px dashed rgba(231,168,37,0.45);
  overflow: hidden;
  white-space: nowrap;
}
.announce-ticker .ticker-track{
  display: inline-flex;
  align-items: center;
  gap: 52px;
  padding: 11px 0;
  animation: tickerScroll 28s linear infinite;
  will-change: transform;
}
.announce-ticker:hover .ticker-track{ animation-play-state: paused; }
.announce-ticker span{
  display: inline-flex; align-items: center; gap: 10px;
  color: #DCE3F5; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em;
}
.announce-ticker span i{ color: var(--gold); }
@keyframes tickerScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (max-width: 600px){ .announce-ticker span{ font-size: 0.78rem; } .announce-ticker .ticker-track{ gap:36px; } }

/* ---------- Floating school-themed decorative icons (hero) ---------- */
.hero-deco{
  position: absolute; z-index: 3; pointer-events: none;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.28));
}
.hero-deco-1{ top: 15%; right: 10%; font-size: 2.5rem; color: var(--gold); animation: floatY 5s ease-in-out infinite; }
.hero-deco-2{ top: 60%; right: 22%; font-size: 1.7rem; color: #fff; animation: floatY 6.5s ease-in-out infinite .6s; }
.hero-deco-3{ top: 34%; right: 30%; font-size: 1.35rem; color: var(--gold-soft); animation: floatSpin 8s ease-in-out infinite; }
@keyframes floatY{ 0%,100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(-18px) rotate(6deg); } }
@keyframes floatSpin{ 0%,100%{ transform: translateY(0) rotate(-8deg); } 50%{ transform: translateY(-14px) rotate(10deg); } }
@media (max-width: 900px){ .hero-deco{ display: none; } }

/* ---------- Handwritten "stamp" badge — diploma / notebook feel ---------- */
.stamp-badge{
  position: absolute; z-index: 4; top: 10%; right: 9%;
  width: 118px; height: 118px; border-radius: 50%;
  border: 2.5px dashed var(--gold);
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: rgba(11,26,61,0.35); backdrop-filter: blur(2px);
  transform: rotate(-10deg);
  animation: stampFloat 4.5s ease-in-out infinite, stampIn .8s .5s cubic-bezier(.2,.8,.2,1) backwards;
}
.stamp-badge span{ font-family: var(--font-hand); color: #fff; font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
@keyframes stampFloat{ 0%,100%{ transform: rotate(-10deg) translateY(0); } 50%{ transform: rotate(-6deg) translateY(-8px); } }
@keyframes stampIn{ from{ opacity: 0; transform: rotate(-30deg) scale(.6); } to{ opacity: 1; transform: rotate(-10deg) scale(1); } }
@media (max-width: 900px){ .stamp-badge{ display: none; } }

/* ---------- (top-accent hover bar removed per request) ---------- */
.pillar-card, .contact-form, .feature-card, .news-card, .testi-card{ position: relative; }

/* ---------- Corner ribbon accent (diploma feel) ---------- */
.feature-strip-item{ position: relative; }
.feature-strip-item::after{
  content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-style: solid; border-width: 0 22px 22px 0;
  border-color: transparent var(--gold) transparent transparent;
  opacity: 0; transition: opacity .3s;
}
.feature-strip-item:hover::after{ opacity: 0.9; }

/* ---------- Gold ring glow on class cards (stylish border on hover) ---------- */
.class-card:hover{ outline-color: var(--gold); transform: translateY(-6px); filter: drop-shadow(0 22px 40px rgba(11,26,61,0.28)); }

/* ---------- Washi-tape accent on welcome image ---------- */
.welcome-media::before{
  content: ""; position: absolute; top: -14px; left: 40px; width: 80px; height: 24px;
  background: rgba(231,168,37,0.55); transform: rotate(-4deg);
  box-shadow: 0 4px 10px rgba(0,0,0,0.12); z-index: 2; pointer-events: none;
}

/* ---------- Dashed gold inner frame for the vision/mission panel ---------- */
.vm-panel::after{
  content: ""; position: absolute; inset: 14px; border: 1px dashed rgba(255,255,255,0.18);
  border-radius: calc(var(--r-lg) - 10px); pointer-events: none;
}

/* ---------- Notebook-ruled background texture (subtle, school feel) ---------- */
#why-choose{
  background-image: repeating-linear-gradient(0deg, transparent, transparent 34px, rgba(30,62,140,0.045) 35px);
}

/* ---------- Gold top edge on the floating quick-fact bar ---------- */
/* (hero-float-bar top border removed — replaced by premium gradient design above) */

/* ---------- Crest pulse ring on the logo mark ---------- */
.brand-mark{ position: relative; }
.brand-mark::after{
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid var(--gold); opacity: 0;
  animation: crestPulse 2.6s ease-in-out infinite;
}
.brand:hover .brand-mark::after{ opacity: 1; }
@keyframes crestPulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.12); } }

/* ---------- Button sheen sweep on hover (premium feel) ---------- */
.btn-bma{ position: relative; overflow: hidden; }
.btn-bma::after{
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease; pointer-events: none;
}
.btn-bma:hover::after{ left: 130%; }

/* ---------- Handwritten accent utility ---------- */
.hand-accent{ font-family: var(--font-hand); font-weight: 700; }

/* ---------- Feature highlight cards (big icon, premium, no numbers) ---------- */
.feature-card-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 10px; }
.feature-card{
  position: relative; background: #fff; border-radius: var(--r-lg); padding: 44px 30px;
  border: 1px solid var(--line); text-align: center;
  box-shadow: 0 10px 30px -24px rgba(11,26,61,0.28);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.feature-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-card); }
.feature-card-icon{
  width: 92px; height: 92px; margin: 0 auto 24px; border-radius: 50%;
  background: var(--mist-2); color: var(--royal);
  display: flex; align-items: center; justify-content: center; font-size: 2.3rem;
  transition: background .35s, color .35s, transform .45s cubic-bezier(.2,.8,.2,1);
}
.feature-card:hover .feature-card-icon{ background: var(--gold); color: var(--navy); transform: rotate(-8deg) scale(1.08); }
.feature-card h3{ margin-bottom: 10px; font-size: 1.12rem; }
.feature-card p{ font-size: 0.92rem; margin: 0; }
@media (max-width: 991px){ .feature-card-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .feature-card-grid{ grid-template-columns: 1fr; } }

/* ---------- Campus Showcase slider (featured slide + thumbnails) ---------- */
.showcase-slider{ position: relative; }
.showcase-stage{
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 16 / 8; background: var(--navy);
  box-shadow: 0 30px 60px -28px rgba(11,26,61,0.45);
}
.showcase-slide{
  position: absolute; inset: 0; opacity: 0; visibility: hidden; z-index: 1;
  transition: opacity .9s ease;
}
.showcase-slide.active{ opacity: 1; visibility: visible; z-index: 2; }
.showcase-slide > a{ position:absolute; inset:0; display:block; overflow:hidden; }
.showcase-slide img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.05);
}
.showcase-slide.active img{ animation: showcaseKenburns 9s ease-in-out infinite alternate; }
@keyframes showcaseKenburns{
  0%{ transform: scale(1.03) translate3d(0,0,0); }
  100%{ transform: scale(1.16) translate3d(-1.5%,-1%,0); }
}
.showcase-caption{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none;
  padding: 70px 26px 22px;
  background: linear-gradient(0deg, rgba(6,14,36,0.85) 0%, rgba(6,14,36,0.35) 55%, rgba(6,14,36,0) 100%);
}
.showcase-caption span{
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.14); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25); color: #fff;
  padding: 8px 16px; border-radius: 100px; font-size: 0.85rem; font-weight: 600;
}
.showcase-caption span i{ color: var(--gold); }
.showcase-counter{
  position: absolute; top: 18px; right: 18px; z-index: 4;
  background: rgba(6,14,36,0.55); backdrop-filter: blur(6px); color: #fff;
  padding: 6px 14px; border-radius: 100px; font-size: 0.78rem; font-weight: 700;
  border: 1px solid rgba(255,255,255,0.2); letter-spacing: 0.02em;
}
.showcase-arrow{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.16); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.35); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.05rem; transition: all .25s;
}
.showcase-arrow:hover{ background: var(--gold); color: var(--navy); border-color: transparent; }
.showcase-prev{ left: 18px; } .showcase-next{ right: 18px; }
.showcase-dots{
  position: absolute; left: 0; right: 0; bottom: 20px; z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.showcase-dots button{
  width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0;
  background: rgba(255,255,255,0.45); cursor: pointer; transition: all .3s;
}
.showcase-dots button.active{ width: 26px; border-radius: 6px; background: var(--gold); }

.showcase-thumbs{
  display: flex; gap: 14px; margin-top: 18px; overflow-x: auto; padding: 4px 2px 10px;
  scrollbar-width: thin; scrollbar-color: var(--royal) var(--mist);
}
.showcase-thumb{
  flex: 0 0 auto; width: 130px; border: none; padding: 0; cursor: pointer;
  border-radius: var(--r-sm); overflow: hidden; position: relative;
  background: var(--mist); opacity: 0.6; transition: opacity .3s, box-shadow .3s, transform .3s;
  box-shadow: 0 0 0 2px transparent;
}
.showcase-thumb img{ width: 100%; height: 76px; object-fit: cover; display: block; transition: transform .4s; }
.showcase-thumb span{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 8px;
  font-size: 0.68rem; font-weight: 700; color: #fff; text-align: left;
  background: linear-gradient(0deg, rgba(6,14,36,0.85), rgba(6,14,36,0));
}
.showcase-thumb:hover{ opacity: 0.9; }
.showcase-thumb:hover img{ transform: scale(1.06); }
.showcase-thumb.active{
  opacity: 1; box-shadow: 0 0 0 2px var(--gold); transform: translateY(-3px);
}
@media (max-width: 700px){
  .showcase-stage{ aspect-ratio: 4 / 3.6; border-radius: var(--r-md); }
  .showcase-caption{ padding: 50px 16px 16px; }
  .showcase-arrow{ width: 40px; height: 40px; font-size: 0.95rem; }
  .showcase-prev{ left: 10px; } .showcase-next{ right: 10px; }
  .showcase-thumb{ width: 96px; }
  .showcase-thumb img{ height: 58px; }
}

/* ---------- Campus Carousel (4-up row slider) ---------- */
.cc-carousel{
  display: flex;
  align-items: center;
  gap: 18px;
}
.cc-viewport{
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cc-viewport::-webkit-scrollbar{ display: none; }
.cc-track{
  display: flex;
  gap: 24px;
}
.cc-card{
  flex: 0 0 calc((100% - 3 * 24px) / 4);
  scroll-snap-align: start;
}
.cc-card > a{ display: block; }
.cc-img{
  position: relative;
  aspect-ratio: 4 / 4.6;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 16px 32px -18px rgba(11,26,61,0.4);
  background: var(--mist-2);
  border: 1px solid rgba(255,255,255,0.5);
}
.cc-img::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(6,14,36,0.9) 0%, rgba(6,14,36,0.35) 42%, rgba(6,14,36,0) 68%);
}
.cc-img img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.cc-card:hover .cc-img img{ transform: scale(1.1); }
.cc-card:hover .cc-img{ box-shadow: 0 22px 40px -16px rgba(11,26,61,0.48), 0 0 0 3px var(--gold); transform: translateY(-6px); }
.cc-img{ transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.cc-badge{
  position:absolute; top:14px; left:14px; z-index:2;
  width: 38px; height: 38px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.22); backdrop-filter: blur(6px);
  color:#fff; font-size:0.95rem; border:1px solid rgba(255,255,255,0.35);
  transition: background .3s, color .3s, transform .3s;
}
.cc-card:hover .cc-badge{ background: var(--gold); color: var(--navy); transform: rotate(-8deg); }
.cc-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px 16px;
}
.cc-caption h4{
  margin:0; font-size:1.05rem; font-family: var(--font-display); color:#fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.cc-arrow{
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--royal);
  font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s, transform .2s;
}
.cc-arrow:hover{ background: var(--royal); color: var(--white); border-color: transparent; transform: translateY(-2px); }
.cc-arrow:disabled{ opacity: 0.35; cursor: default; pointer-events: none; }
.cc-progress{
  max-width: 320px;
  margin: 34px auto 0;
  height: 5px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.cc-progress-fill{
  display: block;
  height: 100%;
  width: 25%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--coral));
  transition: width .35s ease, transform .35s ease;
}
@media (max-width: 992px){
  .cc-card{ flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 700px){
  .cc-carousel{ gap: 10px; }
  .cc-card{ flex-basis: 82%; }
  .cc-arrow{ width: 42px; height: 42px; font-size: 0.9rem; }
  .cc-badge{ width: 32px; height: 32px; font-size: 0.85rem; }
  .cc-caption h4{ font-size: 0.95rem; }
}

/* ---------- Premium footer ---------- */
.site-footer{ position: relative; overflow: hidden; }
.site-footer::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--royal), var(--gold), var(--royal));
  background-size: 200% 100%; animation: footerGradientMove 6s linear infinite;
}
@keyframes footerGradientMove{ to{ background-position: 200% 0; } }
.site-footer > .container-bma{ position: relative; z-index: 1; }

/* Floating school-themed decorative icons in footer background */
.footer-deco{ position: absolute; z-index: 0; color: rgba(231,168,37,0.09); pointer-events: none; }
.footer-deco-1{ top: 10%; left: 6%; font-size: 5.5rem; animation: floatY 8s ease-in-out infinite; }
.footer-deco-2{ bottom: 10%; right: 8%; font-size: 6.5rem; animation: floatY 10s ease-in-out infinite 1.2s; }
.footer-deco-3{ top: 42%; left: 46%; font-size: 3.6rem; color: rgba(255,255,255,0.05); animation: floatSpin 11s ease-in-out infinite; }
@media (max-width: 900px){ .footer-deco{ display: none; } }

.footer-col h5{ position: relative; padding-bottom: 14px; }
.footer-col h5::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 2px; background: var(--gold); }
.footer-social a{ position: relative; }
.footer-social a::after{
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--gold);
  opacity: 0; transform: scale(.8); transition: opacity .25s, transform .25s;
}
.footer-social a:hover::after{ opacity: 1; transform: scale(1); }
.footer-bottom{ border-top-style: dashed; border-top-color: rgba(231,168,37,0.25); }


/* =========================================================
   PREMIUM ADD-ONS — backgrounds, image framing, timeline,
   process steps, notices, events, underline draw, img reveal
   ========================================================= */

/* ---- Background variety ---- */
:root{
  --cream: #FBF6EB;
  --cream-line: #EFE3C4;
}
.bg-cream{ background: var(--cream); }
.bg-cream h2, .bg-cream h3{ color: var(--navy); }

.bg-dots{
  position: relative;
  background-image: radial-gradient(rgba(30,62,140,0.14) 1.6px, transparent 1.6px);
  background-size: 26px 26px;
}
.bg-dots.on-navy{ background-image: radial-gradient(rgba(255,255,255,0.09) 1.6px, transparent 1.6px); }

.bg-mesh{
  position: relative; overflow: hidden;
  background: var(--mist);
}
.bg-mesh::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(480px 300px at 8% 10%, rgba(231,168,37,0.10), transparent 60%),
    radial-gradient(560px 360px at 96% 92%, rgba(30,62,140,0.10), transparent 60%);
}
.bg-mesh > .container-bma{ position: relative; z-index: 1; }

.bg-navy-mesh{ background: var(--navy); color:#cfd7ec; position:relative; overflow:hidden; }
.bg-navy-mesh::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(520px 340px at 90% 0%, rgba(231,168,37,0.14), transparent 60%),
    radial-gradient(480px 320px at 4% 100%, rgba(30,62,140,0.5), transparent 60%);
}
.bg-navy-mesh h2, .bg-navy-mesh h3, .bg-navy-mesh h4, .bg-navy-mesh .font-display{ color:#fff; }
.bg-navy-mesh p{ color:#A9B4D0; }
.bg-navy-mesh > .container-bma{ position: relative; z-index: 1; }
/* Admission-process zig-steps look premium against the navy mesh */
.bg-navy-mesh .zig-steps::before{ background-image: linear-gradient(90deg, var(--gold) 60%, transparent 40%); opacity:0.55; }
.bg-navy-mesh .zig-step-circle{ border-color: rgba(255,255,255,0.85); box-shadow: 0 16px 34px -10px rgba(0,0,0,0.55), 0 0 0 6px rgba(231,168,37,0.12); }

/* Diagonal split band, used deliberately once per page */
.diagonal-band{
  position: relative; background: var(--navy); overflow: hidden;
}
.diagonal-band::after{
  content:""; position:absolute; right:-10%; top:0; bottom:0; width:55%;
  background: linear-gradient(160deg, var(--royal), var(--royal-deep));
  transform: skewX(-9deg);
  z-index:0;
}
.diagonal-band > .container-bma{ position:relative; z-index:1; }

/* ---- Page header / hero banner for inner pages ---- */
.page-hero{
  position: relative; padding: 150px 0 90px; overflow: hidden;
  background:
    linear-gradient(100deg, rgba(6,14,36,0.92) 20%, rgba(6,14,36,0.62) 75%),
    var(--navy);
  background-size: cover; background-position: center;
  color: #fff;
}
.page-hero .container-bma{ position: relative; z-index: 2; }
.page-hero-eyebrow{ color: var(--gold); font-weight:700; font-size:0.92rem; letter-spacing:0.04em; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.page-hero-eyebrow::before{ content:""; width:26px; height:3px; background:var(--gold); border-radius:2px; }
.page-hero h1{ color:#fff; margin-bottom: 16px; }
.page-hero p{ color:#D7DEF0; max-width:600px; font-size:1.05rem; }
.breadcrumb{ display:flex; align-items:center; gap:8px; margin-top:22px; font-size:0.9rem; color:#B9C3E0; }
.breadcrumb a{ color:#B9C3E0; transition:color .2s; }
.breadcrumb a:hover{ color: var(--gold); }
.breadcrumb i{ font-size:0.7rem; color:var(--gold); }
.page-hero-deco{ position:absolute; z-index:1; color: rgba(231,168,37,0.10); pointer-events:none; }

/* ---- Premium image framing ---- */
.img-frame{ position: relative; display:inline-block; width:100%; }
.img-frame img{ position:relative; z-index:2; width:100%; border-radius: var(--r-lg); box-shadow: var(--shadow-soft); display:block; }
.img-frame::before{
  content:""; position:absolute; z-index:1; inset: 18px -18px -18px 18px;
  border: 3px solid var(--gold); border-radius: var(--r-lg);
}
.img-frame .corner-badge{
  position:absolute; z-index:3; bottom:-24px; left:-24px;
  background: var(--gold); color: var(--navy); width:104px; height:104px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  font-family: var(--font-display); font-weight:700; box-shadow: var(--shadow-card);
}
@media (max-width:700px){ .img-frame::before{ inset:12px -12px -12px 12px; } .img-frame .corner-badge{ width:82px; height:82px; bottom:-16px; left:-16px; font-size:0.85rem; } }

/* Image reveal-on-scroll (clip-path wipe) */
.img-reveal{ overflow:hidden; border-radius: var(--r-lg); }
.img-reveal img{ display:block; width:100%; clip-path: inset(0 0 0 0); transform: scale(1.16); transition: transform 1.3s cubic-bezier(.2,.8,.2,1); }
.img-reveal::after{
  content:""; position:absolute; inset:0; background: var(--navy); transform-origin: right; z-index:2;
  transform: scaleX(1); transition: transform 1s cubic-bezier(.65,0,.35,1);
}
.img-reveal{ position:relative; }
.img-reveal.in::after{ transform: scaleX(0); }
.img-reveal.in img{ transform: scale(1); }

/* Hand-drawn underline draw-in (used sparingly, once per page) */
.underline-draw{ position:relative; display:inline-block; }
.underline-draw svg{ position:absolute; left:-2%; right:-2%; bottom:-0.14em; width:104%; height:0.5em; overflow:visible; }
.underline-draw svg path{
  fill:none; stroke: var(--gold); stroke-width:6; stroke-linecap:round;
  stroke-dasharray: 340; stroke-dashoffset:340;
  transition: stroke-dashoffset 1s ease .3s;
}
.underline-draw.in svg path{ stroke-dashoffset:0; }

/* ---- Timeline (About / history) ---- */
.timeline{ position:relative; max-width:760px; margin:0 auto; padding-left:0; }
.timeline::before{ content:""; position:absolute; left:26px; top:8px; bottom:8px; width:2px; background: var(--line); }
.timeline-item{ position:relative; padding-left:70px; margin-bottom:44px; }
.timeline-item:last-child{ margin-bottom:0; }
.timeline-dot{
  position:absolute; left:8px; top:0; width:38px; height:38px; border-radius:50%;
  background: var(--royal); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:0.92rem; box-shadow: 0 0 0 6px var(--white), 0 0 0 7px var(--line);
}
.timeline-item h4{ margin-bottom:8px; }
.timeline-item p{ margin:0; font-size:0.95rem; }

/* ---- Process steps (Admissions) ---- */
.adm-steps{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; counter-reset: step; }
.adm-step{ position:relative; background:#fff; border:1px solid var(--line); border-radius: var(--r-md); padding:32px 24px; }
.adm-step::before{
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-size:2.2rem; color: var(--mist-2); font-weight:700;
  -webkit-text-stroke: 1.5px var(--gold); color: transparent;
  display:block; margin-bottom:14px;
}
.adm-step h4{ margin-bottom:10px; }
.adm-step p{ font-size:0.9rem; margin:0; }
.adm-arrow{ position:absolute; top:44px; right:-30px; color: var(--gold); font-size:1.3rem; display:none; }
@media (min-width:993px){ .adm-step:not(:last-child) .adm-arrow{ display:block; } }
@media (max-width:992px){ .adm-steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .adm-steps{ grid-template-columns:1fr; } }

/* ---- Fee / info table ---- */
.info-table{ width:100%; border-collapse: collapse; background:#fff; border-radius: var(--r-md); overflow:hidden; box-shadow: var(--shadow-card); border: 1px solid var(--line); }
.info-table th, .info-table td{ padding:18px 24px; text-align:left; border-bottom:1px solid var(--line); font-size:0.95rem; }
.info-table th{
  background: linear-gradient(135deg, var(--navy), var(--royal-deep));
  color:#fff; font-family:var(--font-display); font-weight:700;
  font-size:0.82rem; text-transform:uppercase; letter-spacing:0.05em;
  border-bottom:2px solid var(--gold);
}
.info-table td:first-child{ font-family:var(--font-display); font-weight:700; color:var(--ink); }
.info-table td:last-child{ color: var(--royal); font-weight:600; }
.info-table tr:last-child td{ border-bottom:none; }
.info-table tr{ transition: background .25s; }
.info-table tr:hover td{ background: var(--mist); }

/* Stacked "card" layout on mobile — avoids any horizontal scroll */
@media (max-width: 680px){
  .info-table, .info-table thead, .info-table tbody, .info-table tr, .info-table td{ display:block; width:100%; }
  .info-table{ border:none; box-shadow:none; background:transparent; }
  .info-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .info-table tbody{ display:flex; flex-direction:column; gap:16px; }
  .info-table tr{
    background:#fff; border-radius: var(--r-md); box-shadow: var(--shadow-card);
    border:1px solid var(--line); border-top:3px solid var(--gold); overflow:hidden;
  }
  .info-table td{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:14px 20px; border-bottom:1px solid var(--line); text-align:right;
  }
  .info-table td::before{
    content: attr(data-label);
    font-family:var(--font-display); font-weight:700; color: var(--slate);
    font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em;
    text-align:left;
  }
  .info-table td:first-child{ background: var(--mist-2); font-size:1.02rem; }
  .info-table tr:last-child td:last-child, .info-table td:last-child{ border-bottom:none; }
}

/* ---- Document checklist ---- */
.doc-list{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.doc-list li{ display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--line); border-radius: var(--r-md); padding:18px 20px; font-weight:600; font-size:0.94rem; color:var(--navy); box-shadow: 0 10px 24px -18px rgba(11,26,61,0.25); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.doc-list li:hover{ transform: translateY(-4px); box-shadow: 0 18px 32px -16px rgba(11,26,61,0.32); }
.doc-icon{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex-shrink:0; }
@media (max-width:620px){ .doc-list{ grid-template-columns:1fr; } }

/* ---- Empty state (used for notice/news when nothing posted) ---- */
.empty-state{ text-align:center; padding: 60px 20px; max-width:480px; margin:0 auto; }
.empty-state i{ font-size:2.6rem; color: var(--gold); margin-bottom:18px; display:inline-block; }
.empty-state h4{ margin-bottom:10px; }
.empty-state p{ margin:0; }

/* ---- Value / mission cards (Vision & Mission) ---- */
.value-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.value-card{ text-align:center; padding:34px 22px; border-radius: var(--r-md); background:#fff; border:1px solid var(--line); box-shadow: 0 10px 30px -24px rgba(11,26,61,0.28); transition: transform .35s, box-shadow .35s, border-color .35s; }
.value-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card); border-color:transparent; }
.value-icon{ width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background: var(--mist-2); color: var(--royal); display:flex; align-items:center; justify-content:center; font-size:1.5rem; transition: background .3s, color .3s, transform .3s; }
.value-card:hover .value-icon{ background: var(--gold); color: var(--navy); transform: rotate(-8deg) scale(1.05); }
.value-card h4{ font-size:1rem; margin-bottom:8px; }
.value-card p{ font-size:0.88rem; margin:0; }
@media (max-width:992px){ .value-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .value-grid{ grid-template-columns:1fr; } }

/* ---- Contact page cards ---- */
.contact-info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.contact-info-card{ background:#fff; border-radius: var(--r-md); padding:30px 26px; text-align:center; box-shadow: var(--shadow-card); transition: transform .3s; }
.contact-info-card:hover{ transform: translateY(-5px); }
.contact-info-card i{ width:58px; height:58px; border-radius:50%; background: var(--mist-2); color: var(--royal); display:flex; align-items:center; justify-content:center; font-size:1.35rem; margin:0 auto 16px; }
.contact-info-card h4{ font-size:1rem; margin-bottom:8px; }
.contact-info-card p{ margin:0; font-size:0.9rem; }
@media (max-width:768px){ .contact-info-grid{ grid-template-columns:1fr; } }

/* ---- Two-column form row helper (reuses .contact-form / .form-control-bma) ---- */
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.form-grid-2 .form-control-bma{ margin-bottom:16px; }
@media (max-width:620px){ .form-grid-2{ grid-template-columns:1fr; } }

/* ---- Active nav link ---- */
.main-nav > ul > li.is-active > a{ color: var(--royal); }
.main-nav > ul > li.is-active > a::after{ content:""; }

/* =========================================================
   SCHOOL-Y MAKEOVER — playful colour, shapes & motion
   (keeps the same layout/components, adds warmth)
   ========================================================= */

/* ---- Rainbow icon circles (kindergarten colour wheel) ---- */
.academic-pillars .pillar-card:nth-child(4n+1) .pillar-icon,
.feature-card-grid .feature-card:nth-child(4n+1) .feature-card-icon,
.value-grid .value-card:nth-child(4n+1) .value-icon,
.feature-strip .feature-strip-item:nth-child(4n+1) .fs-icon,
.grid-4 .facility-card:nth-child(4n+1) .facility-body i{ background: var(--sky-bg); color: var(--sky); }

.academic-pillars .pillar-card:nth-child(4n+2) .pillar-icon,
.feature-card-grid .feature-card:nth-child(4n+2) .feature-card-icon,
.value-grid .value-card:nth-child(4n+2) .value-icon,
.feature-strip .feature-strip-item:nth-child(4n+2) .fs-icon,
.grid-4 .facility-card:nth-child(4n+2) .facility-body i{ background: var(--coral-bg); color: var(--coral); }

.academic-pillars .pillar-card:nth-child(4n+3) .pillar-icon,
.feature-card-grid .feature-card:nth-child(4n+3) .feature-card-icon,
.value-grid .value-card:nth-child(4n+3) .value-icon,
.feature-strip .feature-strip-item:nth-child(4n+3) .fs-icon,
.grid-4 .facility-card:nth-child(4n+3) .facility-body i{ background: var(--leaf-bg); color: var(--leaf); }

.academic-pillars .pillar-card:nth-child(4n) .pillar-icon,
.feature-card-grid .feature-card:nth-child(4n) .feature-card-icon,
.value-grid .value-card:nth-child(4n) .value-icon,
.feature-strip .feature-strip-item:nth-child(4n) .fs-icon,
.grid-4 .facility-card:nth-child(4n) .facility-body i{ background: var(--sun-bg); color: #C97F00; }

.pillar-card:hover .pillar-icon, .feature-card:hover .feature-card-icon,
.value-card:hover .value-icon, .feature-strip-item:hover .fs-icon{
  background: var(--coral) !important; color:#fff !important; transform: rotate(-8deg) scale(1.1);
}

/* ---- Chunkier, rounder, bouncier cards ---- */
.pillar-card, .value-card, .feature-card, .class-card, .adm-step, .contact-info-card, .news-card, .event-card, .timeline-dot{
  border-radius: var(--r-md) !important;
}
.pillar-card:hover, .value-card:hover, .facility-card:hover, .class-card:hover, .gallery-item:hover, .contact-info-card:hover{
  transform: translateY(-6px) rotate(-0.6deg) !important;
}
.facility-card, .gallery-item, .news-card{ border-radius: var(--r-md) !important; }

/* ---- Chunky pill buttons with a playful pop ---- */
.btn-bma{ border-radius: 100px !important; font-weight:700 !important; }
.btn-bma:hover{ transform: translateY(-3px) scale(1.035); }
.btn-circle{ border-radius:50% !important; }

/* ---- Warmer, colourful page-hero banners (less "corporate navy") ---- */
.page-hero{
  background:
    linear-gradient(120deg, rgba(11,26,61,0.90) 15%, rgba(30,62,140,0.55) 70%),
    radial-gradient(600px 400px at 90% 110%, rgba(255,184,51,0.35), transparent 60%),
    var(--navy) !important;
}
.page-hero-eyebrow{
  display:inline-flex; background: rgba(255,184,51,0.16); color: var(--sun) !important;
  padding:8px 18px; border-radius:100px; font-family: var(--font-hand); font-size:1.2rem; font-weight:700;
}
.page-hero-eyebrow::before{ display:none; }
.page-hero-deco{ color: rgba(255,255,255,0.18) !important; animation: floatY 5s ease-in-out infinite; }
.page-hero-deco:nth-of-type(2){ animation-delay: -2.4s; color: rgba(255,184,51,0.28) !important; }

/* ---- Confetti dots — sprinkle on light sections for a playful corner ---- */
.confetti{ position:relative; overflow:hidden; }
.confetti::before, .confetti::after{
  content:""; position:absolute; width:14px; height:14px; border-radius:50%; z-index:0; opacity:0.7;
}
.confetti::before{ top:8%; left:4%; background: var(--sky); box-shadow: 60px 40px 0 -3px var(--coral), 120px -10px 0 -5px var(--sun), 40px 140px 0 -6px var(--leaf); }
.confetti::after{ bottom:6%; right:4%; background: var(--grape); box-shadow: -50px -30px 0 -3px var(--sun), -100px 50px 0 -5px var(--sky), -30px -120px 0 -6px var(--coral); }

/* ---- Hand-drawn crayon underline for headings (rainbow, playful) ---- */
h2 .crayon, h1 .crayon{ position:relative; display:inline-block; }
h2 .crayon::after, h1 .crayon::after{
  content:""; position:absolute; left:-4%; right:-4%; bottom:-0.08em; height:0.35em;
  background: linear-gradient(90deg, var(--sun), var(--coral) 35%, var(--sky) 70%, var(--leaf));
  opacity:0.35; z-index:-1; border-radius: 30px; transform: rotate(-1deg);
}

/* ---- Stat numbers get a "sticker" pop instead of flat text ---- */
.stat-item{ transition: transform .3s; }
.stat-item:hover{ transform: translateY(-4px) rotate(-2deg); }

/* ---- Brand mark gets a friendly coloured ring ---- */
.brand-mark{ border-color: var(--sun) !important; }

/* ---- Est / corner badges: friendlier tilt ---- */
.est-badge, .img-frame .corner-badge{ transform: rotate(-6deg); background: var(--coral) !important; color:#fff !important; }
.est-badge:hover, .img-frame .corner-badge:hover{ transform: rotate(0deg) scale(1.05); }

/* ---- FAQ / notice accents in playful colours ---- */
.notice-tag{ background: var(--sky-bg) !important; color: var(--sky) !important; }
.news-cat{ background: var(--coral) !important; }

/* ---- Section tag rotation variety so it doesn't look too samey ---- */
.bg-mist .section-tag, .bg-cream .section-tag{ background: var(--sky-bg); }
.bg-navy-mesh .section-tag, section[class*="bg-navy"] .section-tag{ background: rgba(255,255,255,0.14); color: var(--sun); }

/* ---- Underline-draw gets a playful coral instead of flat gold ---- */
.underline-draw svg path{ stroke: var(--coral) !important; }
.hero-eyebrow-line{
  text-transform:none !important; letter-spacing:0 !important; border-bottom:none !important;
  background: rgba(255,184,51,0.18); color: var(--sun) !important; font-family: var(--font-hand); font-size:1.25rem !important;
  padding:8px 20px !important; border-radius:100px; font-weight:700 !important;
}
.hero-content h1 .accent, .hero-content h2 .accent{ color: var(--sun) !important; }

/* ---- Nav + footer: soften the "corporate crest" navy a touch ---- */
.main-nav > ul > li > a{ font-weight:700; }
.social-links a{ transition: transform .3s, background .3s; }
.social-links a:hover{ background: var(--coral) !important; transform: translateY(-4px) rotate(-8deg); }

/* ---- Playful wobble keyframe, used sparingly on hero decor ---- */
@keyframes wobble{ 0%,100%{ transform: rotate(-4deg); } 50%{ transform: rotate(4deg); } }
.hero-deco{ animation: floatY 6s ease-in-out infinite, wobble 6s ease-in-out infinite; }

/* =========================================================
   CREATIVE SECTION KIT — notebook paper, chalkboard, polaroid,
   torn-paper dividers, crayon badges (premium-but-playful)
   ========================================================= */

/* ---- Notebook paper section ---- */
.bg-notebook{
  position:relative; overflow:hidden;
  background:
    linear-gradient(90deg, transparent 68px, rgba(241,97,75,0.28) 68px, rgba(241,97,75,0.28) 71px, transparent 71px),
    repeating-linear-gradient(#FFFDF7 0px, #FFFDF7 37px, #DCE6F5 38px, #FFFDF7 39px),
    #FFFDF7;
}
.bg-notebook::before{
  content:""; position:absolute; left:76px; top:0; bottom:0; width:26px; z-index:0; pointer-events:none;
  background-image: radial-gradient(circle, #fff 5px, transparent 5.5px);
  background-size: 26px 76px; background-position: 0 20px;
  box-shadow: inset 0 0 0 1px rgba(11,26,61,0.06);
}
.bg-notebook > .container-bma{ position:relative; z-index:1; }
@media (max-width:700px){ .bg-notebook, .bg-notebook::before{ background-image:none; } .bg-notebook{ background: repeating-linear-gradient(#FFFDF7 0px, #FFFDF7 37px, #DCE6F5 38px, #FFFDF7 39px); } }

/* ---- Chalkboard section ---- */
.bg-chalkboard{
  position:relative; overflow:hidden; background: #2B4A3E; color:#E9F2EC;
}
.bg-chalkboard::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.5;
  background-image:
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px; background-position: 0 0, 2px 3px;
}
.bg-chalkboard::after{
  content:""; position:absolute; inset:10px; z-index:0; pointer-events:none;
  border: 10px solid #6B4A32; border-radius:8px; box-shadow: 0 0 0 2px #4d3423 inset;
}
.bg-chalkboard > .container-bma{ position:relative; z-index:1; }
.bg-chalkboard h2, .bg-chalkboard h3{ color:#fff; font-family: var(--font-hand); font-weight:700; font-size: clamp(2.2rem,4.4vw,3.4rem); }
.bg-chalkboard p{ color:#CBD9D1; }
.bg-chalkboard .section-tag{ background: rgba(255,255,255,0.1); color: var(--sun); }

/* ---- Polaroid / taped photo frame ---- */
.polaroid{
  background:#fff; padding:12px 12px 42px; box-shadow: var(--shadow-card);
  border-radius:4px; position:relative; transition: transform .35s ease, box-shadow .35s ease;
}
.polaroid img{ border-radius:2px; width:100%; display:block; }
.polaroid::before{
  content:""; position:absolute; top:-14px; left:calc(50% - 34px); width:68px; height:26px;
  background: rgba(255,184,51,0.55); border:1px solid rgba(255,184,51,0.8);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15); transform: rotate(-3deg);
}
.polaroid:nth-child(even){ transform: rotate(2.5deg); }
.polaroid:nth-child(odd){ transform: rotate(-2.5deg); }
.polaroid:nth-child(even)::before{ transform: rotate(4deg); }
.polaroid:hover{ transform: rotate(0deg) scale(1.05) translateY(-6px); box-shadow: var(--shadow-soft); z-index:5; }
.polaroid-cap{ position:absolute; bottom:10px; left:12px; right:12px; text-align:center; font-family: var(--font-hand); font-size:1.15rem; color: var(--navy); font-weight:700; }
.polaroid-grid{ display:flex; flex-wrap:wrap; gap:38px 28px; justify-content:center; padding:10px 20px 30px; }
.polaroid-grid .polaroid{ width:230px; }
@media (max-width:560px){ .polaroid-grid .polaroid{ width:44%; } }

/* ---- Torn paper divider between sections ---- */
.torn-divider{ position:relative; height:46px; margin-top:-1px; z-index:2; }
.torn-divider svg{ width:100%; height:100%; display:block; }

/* ---- Crayon-drawn circle badges for numbered steps ---- */
.process-num, .adm-step::before{
  border: 3px dashed var(--coral) !important; background: var(--coral-bg) !important; color: var(--coral) !important;
  -webkit-text-stroke: 0 !important;
}
.timeline-dot{ border: 3px dashed var(--sky) !important; background: var(--sky-bg) !important; color: var(--sky) !important; box-shadow:none !important; }
.notice-date, .value-icon{ border-radius: 16px !important; }

/* ---- Premium hand-drawn quote marks ---- */
.director-quote-mark{ font-family: var(--font-hand) !important; color: var(--coral) !important; }

/* ---- A "sticky note" callout box (usable anywhere) ---- */
.sticky-note{
  background: var(--sun-bg); border-radius: 4px 20px 4px 20px; padding:26px 28px; position:relative;
  box-shadow: var(--shadow-card); transform: rotate(-1.5deg);
  font-family: var(--font-hand); font-size:1.3rem; color: var(--navy); line-height:1.4;
}
.sticky-note::before{ content:""; position:absolute; top:-10px; left:24px; width:40px; height:18px; background: rgba(46,155,230,0.55); border:1px solid rgba(46,155,230,0.8); transform: rotate(-6deg); }

/* ---- Section heading with crayon-underline helper class (adds automatically) ---- */
.section-head h2{ position:relative; display:inline-block; }

/* =========================================================
   BOLD TEMPLATE-STYLE UPGRADE — marquee, blobs, floating
   cards, ghost numbers, diagonal colour blocks
   ========================================================= */

/* ---- Scrolling marquee ticker (signature template element) ---- */
.marquee-strip{
  background: linear-gradient(90deg, var(--coral), #ff8a5c 50%, var(--sun));
  overflow:hidden; padding:16px 0; white-space:nowrap; position:relative; z-index:5;
}
.marquee-track{ display:inline-flex; animation: marqueeScroll 26s linear infinite; }
.marquee-track:hover{ animation-play-state: paused; }
.marquee-track .m-set{ display:inline-flex; align-items:center; flex-shrink:0; }
.marquee-track span{
  display:inline-flex; align-items:center; gap:14px; padding:0 30px;
  font-family: var(--font-hand); font-size:1.55rem; font-weight:700; color:#fff;
  text-shadow: 0 2px 0 rgba(0,0,0,0.08);
}
.marquee-track span i{ font-size:0.65rem; color: rgba(255,255,255,0.75); }
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---- Big organic blob shapes (background decoration) ---- */
.blob-decor{ position:absolute; z-index:0; opacity:0.5; filter: blur(0px); pointer-events:none; }
.blob-decor.b1{ border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
.blob-decor.b2{ border-radius: 63% 37% 30% 70% / 50% 45% 55% 50%; }
.section-blobs{ position:relative; overflow:hidden; }
.section-blobs > .container-bma{ position:relative; z-index:2; }

/* ---- Blob-shaped photo frame (organic, not a plain rectangle) ---- */
/* ---- Fancy asymmetric-corner image with offset colour panel (replaces the old blob shape) ---- */
.img-fancy-wrap{ position:relative; }
.img-fancy-wrap::before{
  content:""; position:absolute; z-index:0; width:42%; height:42%; border-radius: 16px 60px 16px 60px;
}
.img-fancy-wrap.pos-tr::before{ top:-16px; right:-16px; }
.img-fancy-wrap.pos-bl::before{ bottom:-16px; left:-16px; }
.img-fancy-wrap.tone-sun::before{ background: var(--sun-bg); }
.img-fancy-wrap.tone-sky::before{ background: var(--sky-bg); }
.img-fancy-wrap.tone-coral::before{ background: var(--coral-bg); }
.img-fancy-wrap.tone-leaf::before{ background: var(--leaf-bg); }
.img-fancy{ position:relative; z-index:1; border-radius: 20px 90px 20px 90px; overflow:hidden; box-shadow: var(--shadow-soft); }
.img-fancy img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio: 4 / 3.3; }
@media (max-width:700px){ .img-fancy{ border-radius: var(--r-lg); } .img-fancy img{ aspect-ratio:4/3; } }

/* Backward-compat alias so any remaining .blob-img usage still renders sanely */
.blob-img{ position:relative; border-radius: 20px 90px 20px 90px; overflow:hidden; box-shadow: var(--shadow-soft); }
.blob-img img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio: 4 / 3.3; }
@media (max-width:700px){ .blob-img{ border-radius: var(--r-lg); } .blob-img img{ aspect-ratio:4/3; } }

/* ---- Floating overlap stat card (classic premium-template hero decoration) ---- */
.float-stat-card{
  position:absolute; z-index:6; background:#fff; border-radius: var(--r-md);
  box-shadow: var(--shadow-soft); padding:16px 22px; display:flex; align-items:center; gap:14px;
  animation: floatY 4.5s ease-in-out infinite;
  top:24px; left:24px;
  border: 1px solid rgba(11,26,61,0.05);
}
.float-stat-card .fsc-icon{
  width:50px; height:50px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; flex-shrink:0; background: var(--sun-bg); color:#C97F00;
}
.float-stat-card .fsc-num{ font-family: var(--font-display); font-weight:800; font-size:1.4rem; color: var(--navy); line-height:1; }
.float-stat-card .fsc-label{ font-size:0.78rem; color: var(--slate); font-weight:700; white-space:nowrap; }
/* On small screens the washi-tape accent and "SINCE" badge live in the top corners,
   so move the stat card to the bottom-right of the image instead of hiding it. */
@media (max-width:768px){
  .float-stat-card{
    top:auto; left:auto; right:16px; bottom:16px;
    padding:10px 16px; gap:10px; border-radius: var(--r-sm);
  }
  .float-stat-card .fsc-icon{ width:36px; height:36px; border-radius:11px; font-size:1.05rem; }
  .float-stat-card .fsc-num{ font-size:1.1rem; }
  .float-stat-card .fsc-label{ font-size:0.68rem; }
}
@media (max-width:420px){
  .float-stat-card{ padding:8px 12px; gap:8px; }
  .float-stat-card .fsc-icon{ width:32px; height:32px; font-size:0.95rem; }
  .float-stat-card .fsc-label{ white-space:normal; max-width:110px; line-height:1.2; }
}

/* ---- Ghost numbers behind headings (oversized faded numerals) ---- */
.ghost-num{
  position:absolute; top:-0.5em; font-family: var(--font-display); font-weight:800;
  font-size: clamp(6rem,14vw,11rem); color: var(--mist-2); z-index:0; line-height:1; user-select:none; pointer-events:none;
}
.ghost-num.left{ left:-0.1em; }
.ghost-num.right{ right:-0.1em; }
.ghost-host{ position:relative; z-index:1; }

/* ---- Diagonal colour-block section (half navy / half white, bold) ---- */
.split-block{ position:relative; overflow:hidden; background: #fff; }
.split-block::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:60%;
  background: linear-gradient(155deg, var(--royal), var(--navy));
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0% 100%);
  z-index:0;
}
.split-block .container-bma{ padding-top:20px; padding-bottom:20px; }
.split-block > .container-bma{ position:relative; z-index:1; }
@media (max-width:900px){ .split-block::before{ display:none; } .split-block{ background: linear-gradient(155deg, var(--royal), var(--navy)); } }

/* ---- Trust registration info box ---- */
.reg-info-box{
  margin-top:26px; padding:16px 20px; border-radius:14px;
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16);
  display:flex; flex-direction:column; gap:10px;
}
.reg-info-row{ display:flex; justify-content:space-between; gap:16px; font-size:0.92rem; flex-wrap:wrap; }
.reg-info-row span{ color:#B9C3E0; }
.reg-info-row strong{ color:#fff; letter-spacing:0.02em; }

/* ---- Icon-in-blob (replacing plain circle icons on selected showcase cards) ---- */
.icon-blob{
  width:76px; height:76px; display:flex; align-items:center; justify-content:center; font-size:1.7rem;
  border-radius: 38% 62% 65% 35% / 45% 40% 60% 55%; margin-bottom:18px; transition: transform .35s, border-radius .35s;
}
.icon-blob:hover, .showcase-card:hover .icon-blob{ border-radius: 62% 38% 35% 65% / 55% 60% 40% 45%; transform: scale(1.08) rotate(-6deg); }

/* ---- Showcase card (bold alternative to plain pillar-card) ---- */
.showcase-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.showcase-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:992px){ .showcase-grid.cols-4{ grid-template-columns:repeat(2,1fr); } }
.showcase-card{
  background:#fff; border-radius: 28px; padding:34px 30px; position:relative; overflow:hidden;
  box-shadow: var(--shadow-card); border: 1px solid var(--line); transition: transform .4s, box-shadow .4s;
}
.showcase-card::after{
  content:""; position:absolute; top:-40px; right:-40px; width:120px; height:120px; border-radius:50%;
  background: var(--sky-bg); z-index:0; transition: transform .5s;
}
.showcase-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-soft); }
.showcase-card:hover::after{ transform: scale(2.4); }
.showcase-card > *{ position:relative; z-index:1; }
.showcase-card h3{ margin-bottom:10px; font-size:1.3rem; }
.showcase-card p{ margin:0; font-size:0.95rem; }
.showcase-card .sc-num{ position:absolute; top:20px; right:26px; font-family:var(--font-display); font-weight:800; font-size:1.6rem; color: var(--line); z-index:0; }
@media (max-width:992px){ .showcase-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .showcase-grid{ grid-template-columns:1fr; } }

/* ---- Bold zig-zag connector for process steps (dotted curved path) ---- */
.zig-steps{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:36px; position:relative; }
.zig-steps::before{
  content:""; position:absolute; top:38px; left:8%; right:8%; height:3px; z-index:0;
  background-image: linear-gradient(90deg, var(--coral) 60%, transparent 40%);
  background-size: 18px 3px; background-repeat: repeat-x;
}
@media (max-width:900px){ .zig-steps::before{ display:none; } }
.zig-step{ flex:1 1 200px; text-align:center; position:relative; z-index:1; }
.zig-step-circle{
  width:78px; height:78px; border-radius:50%; margin:0 auto 18px; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:800; font-size:1.6rem; color:#fff;
  background: linear-gradient(135deg, var(--coral), var(--sun)); box-shadow: 0 14px 28px -12px rgba(241,97,75,0.55);
  border:5px solid #fff;
}
.zig-step h4{ margin-bottom:8px; }
.zig-step p{ font-size:0.88rem; max-width:220px; margin:0 auto; }

/* ---- Angled section divider (bold, colourful, replaces plain wave) ---- */
.angle-divider{ height:64px; margin-bottom:-1px; position:relative; z-index:2; }
.angle-divider svg{ width:100%; height:100%; display:block; }

/* ---- Marquee-style badge row (logos/USPs as pill chips) ---- */
.usp-row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.usp-chip{
  display:inline-flex; align-items:center; gap:10px; background:#fff; border:2px solid var(--line);
  padding:12px 22px; border-radius:100px; font-weight:700; font-size:0.92rem; color: var(--navy);
  box-shadow: var(--shadow-card); transition: transform .3s, border-color .3s;
}
.usp-chip:hover{ transform: translateY(-4px); border-color: var(--coral); }
.usp-chip i{ color: var(--coral); font-size:1.1rem; }

/* =========================================================
   PREMIUM FOOTER REDESIGN + FINAL CTA BAND
   ========================================================= */

/* ---- Footer: 4-column grid variant ---- */
.footer-grid-4{ grid-template-columns: 1.4fr 1.15fr 1fr 1fr; }
@media (max-width:991px){ .footer-grid-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid-4{ grid-template-columns:1fr; } }

/* ---- Footer top CTA strip ---- */
.footer-cta-strip{
  background: linear-gradient(100deg, var(--coral), #ff8a5c 60%, var(--sun));
  padding: 34px 0; position:relative; z-index:2;
}
.footer-cta-strip-inner{ display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between; }
.fcs-eyebrow{ font-family: var(--font-hand); font-size:1.15rem; color:#fff; display:block; margin-bottom:4px; }
.footer-cta-strip h3{ color:#fff; margin:0; font-size: clamp(1.35rem,2.6vw,1.8rem); }
.fcs-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-white{ background:#fff !important; color: var(--navy) !important; border:none !important; }
.btn-white:hover{ background: var(--navy) !important; color:#fff !important; }
.btn-white i{ margin-right:4px; }

/* ---- Footer contact list — icon chips instead of bare icons ---- */
.footer-col-contact .f-contact li{ display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; }
.fc-ico{
  flex-shrink:0; width:38px; height:38px; border-radius:12px; background: rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center; color: var(--sun); font-size:1rem;
}
.footer-col-contact .f-contact span a{ color:#AEB9D8; }
.footer-col-contact .f-contact span a:hover{ color: var(--sun); }

/* ---- Footer column heading accent ---- */
.footer-col h5{ position:relative; padding-bottom:14px; margin-bottom:20px; }
.footer-col h5::after{ content:""; position:absolute; left:0; bottom:0; width:34px; height:3px; border-radius:3px; background: linear-gradient(90deg, var(--sun), var(--coral)); }

/* ---- Footer bottom links ---- */
.footer-bottom-links{ display:flex; align-items:center; gap:10px; }
.footer-bottom-links span{ color:#5C6A8E; }

/* ---- FINAL CTA (photo band, replaces the old contact section on homepage) ---- */
.final-cta{ position:relative; padding: 110px 0; overflow:hidden; }
.final-cta-bg{ position:absolute; inset:0; z-index:0; }
.final-cta-bg img{ width:100%; height:100%; object-fit:cover; }
.final-cta-overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(100deg, rgba(11,26,61,0.94) 30%, rgba(30,62,140,0.75) 75%), radial-gradient(500px 320px at 85% 20%, rgba(255,184,51,0.25), transparent 60%);
}
.final-cta .container-bma{ position:relative; z-index:2; }
.final-cta-inner{ max-width:700px; }
.final-cta-inner h2{ color:#fff; margin:16px 0 14px; font-size: clamp(1.9rem,4vw,2.8rem); }
.final-cta-inner p{ color:#D7DEF0; font-size:1.08rem; margin-bottom:30px; }
.final-cta-btns{ display:flex; flex-wrap:wrap; gap:14px; }

/* =========================================================
   SIGNATURE KIDS-SCHOOL TEMPLATE KIT — confetti shapes,
   spinning badge, thick colour-framed images, bold wave
   ========================================================= */

/* ---- Floating confetti shapes (the classic kindergarten-template signature) ---- */
.confetti-wrap{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.hero-slider .confetti-wrap{ z-index:4; }
.shape{ position:absolute; display:flex; align-items:center; justify-content:center; }
.shape-circle{ border-radius:50%; }
.shape-star i, .shape-plus i{ display:block; }

.shape.s1{ top:12%; left:6%;  animation: floatY 5s ease-in-out infinite; }
.shape.s2{ top:20%; right:10%; animation: floatY 6s ease-in-out infinite -1.5s; }
.shape.s3{ bottom:22%; left:12%; animation: wobble 7s ease-in-out infinite; }
.shape.s4{ bottom:14%; right:16%; animation: floatY 5.5s ease-in-out infinite -2s; }
.shape.s5{ top:48%; left:2%; animation: spinSlow 12s linear infinite; }
.shape.s6{ top:8%; left:42%; animation: floatY 4.5s ease-in-out infinite -1s; }
.shape.s7{ bottom:8%; left:46%; animation: wobble 6s ease-in-out infinite -2s; }

.shape-star{ color: var(--sun); font-size:1.6rem; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15)); }
.shape-plus{ color: var(--coral); font-size:1.5rem; }
.shape-triangle{ width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent; border-bottom:24px solid var(--sky); filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15)); }
.shape-zigzag{ width:46px; height:18px; }
.shape-zigzag svg{ width:100%; height:100%; }
.shape-dot-lg{ width:20px; height:20px; background: var(--leaf); box-shadow:0 4px 10px rgba(0,0,0,0.18); }
.shape-dot-md{ width:13px; height:13px; background: var(--grape); }
.shape-ring{ width:34px; height:34px; border:5px solid var(--sun); background:transparent; }

@keyframes spinSlow{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

/* Confetti sizing on mobile: shrink & thin out so it doesn't clutter */
@media (max-width:700px){ .shape{ transform: scale(0.7); } }

/* ---- Rotating circular text badge (signature premium element) ---- */
.spin-badge{ position:relative; width:150px; height:150px; z-index:6; }
.spin-badge .spin-ring{ width:100%; height:100%; animation: spinSlow 16s linear infinite; }
.spin-badge .spin-ring text{ fill:#fff; font-family:var(--font-body); font-weight:700; letter-spacing:2px; }
.spin-badge-center{
  position:absolute; inset:0; margin:auto; width:56px; height:56px; border-radius:50%;
  background: var(--coral); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  box-shadow: 0 10px 22px -8px rgba(241,97,75,0.7);
}
@media (max-width:900px){ .spin-badge{ display:none; } }

/* ---- Thick colour-framed image treatment (bold, not hairline gold) ---- */
.frame-thick{ position:relative; padding:10px; background:#fff; border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.frame-thick img{ border-radius: calc(var(--r-lg) - 8px); width:100%; display:block; }
.frame-thick.c-sky{ box-shadow: 0 0 0 6px var(--sky), var(--shadow-card); }
.frame-thick.c-coral{ box-shadow: 0 0 0 6px var(--coral), var(--shadow-card); }
.frame-thick.c-sun{ box-shadow: 0 0 0 6px var(--sun), var(--shadow-card); }
.frame-thick.c-leaf{ box-shadow: 0 0 0 6px var(--leaf), var(--shadow-card); }
.frame-thick::before{
  content:""; position:absolute; inset:-16px; z-index:-1; border-radius: calc(var(--r-lg) + 10px);
  border: 3px dashed currentColor; opacity:0.35; animation: spinSlow 30s linear infinite;
}
.frame-thick.c-sky::before{ color: var(--sky); }
.frame-thick.c-coral::before{ color: var(--coral); }
.frame-thick.c-sun::before{ color: var(--sun); }
.frame-thick.c-leaf::before{ color: var(--leaf); }

/* ---- Director photo frame (static — no animation, no auto-zoom) ---- */
.director-frame{
  position:relative;
  max-width:400px; margin:0 auto 34px;
  padding:16px;
  background:#fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
}
.director-frame img{
  display:block; width:100%; height:460px;
  object-fit:cover; object-position: top center;
  border-radius: calc(var(--r-lg) - 12px);
}
.director-frame-corner{
  position:absolute; width:32px; height:32px;
  border: 3px solid var(--gold); pointer-events:none;
}
.director-frame .corner-tl{ top:-3px; left:-3px; border-right:none; border-bottom:none; border-radius: 12px 0 0 0; }
.director-frame .corner-tr{ top:-3px; right:-3px; border-left:none; border-bottom:none; border-radius: 0 12px 0 0; }
.director-frame .corner-bl{ bottom:-3px; left:-3px; border-right:none; border-top:none; border-radius: 0 0 0 12px; }
.director-frame .corner-br{ bottom:-3px; right:-3px; border-left:none; border-top:none; border-radius: 0 0 12px 0; }
.director-frame-badge{
  position:absolute; bottom:-20px; left:50%; transform:translateX(-50%);
  width:60px; height:60px; border-radius:50%;
  background: var(--royal); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  border: 4px solid #fff; box-shadow: 0 10px 22px -8px rgba(30,62,140,0.55);
}

/* ---- Photo stack (overlapping tilted photos — hero-style collage) ---- */
.photo-stack{ position:relative; width:100%; max-width:460px; margin:0 auto; }
.photo-stack .ps-main{ position:relative; z-index:3; border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-soft); border:8px solid #fff; }
.photo-stack .ps-main img{ width:100%; display:block; }
.photo-stack .ps-back1{
  position:absolute; z-index:1; width:72%; top:-26px; right:-30px; border-radius: var(--r-md); overflow:hidden;
  transform: rotate(9deg); border:8px solid #fff; box-shadow: var(--shadow-card);
}
.photo-stack .ps-back1 img{ width:100%; display:block; }
.photo-stack .ps-back2{
  position:absolute; z-index:2; width:56%; bottom:-30px; left:-36px; border-radius: var(--r-md); overflow:hidden;
  transform: rotate(-10deg); border:8px solid #fff; box-shadow: var(--shadow-card);
}
.photo-stack .ps-back2 img{ width:100%; display:block; }
@media (max-width:700px){ .photo-stack{ max-width:320px; } .photo-stack .ps-back1, .photo-stack .ps-back2{ display:none; } }

/* ---- Bold colourful wave divider (used at hero bottom instead of plain white tear) ---- */
.wave-divider-color{ position:relative; height:80px; margin-top:-2px; z-index:3; }
.wave-divider-color svg{ width:100%; height:100%; display:block; }

/* ---- Upgrade: page-hero decorations become bold shape confetti automatically ---- */
.page-hero{ padding-bottom: 130px !important; }

/* =========================================================
   FOOTER REFINEMENTS — curved top edge, tagline, enquire btn
   ========================================================= */
.footer-tagline{ font-family: var(--font-hand); color: var(--sun); font-size:1.3rem; margin:4px 0 14px; }
.footer-enquire-btn{ margin-top:22px; display:inline-flex; }
.footer-enquire-btn:hover{ background: var(--coral) !important; color:#fff !important; }

/* =========================================================
   FOOTER — LIGHT PREMIUM VARIANT (LeBari-style)
   Admission CTA strip + clean white footer body
   ========================================================= */
.footer-cta-row{
  background: linear-gradient(105deg, var(--royal-deep), var(--royal) 55%, #2a4ea6);
  padding: 44px 0; position:relative; overflow:hidden; z-index:2;
}
.footer-cta-row-blob{
  position:absolute; width:130px; height:130px; background: var(--sun); opacity:0.16;
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; top:-46px; right:6%; pointer-events:none;
}
.footer-cta-row-inner{
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  position:relative; z-index:1;
}
.fcr-text .section-tag{ background: rgba(255,255,255,0.14); color: var(--sun); }
.fcr-text h2{ color:#fff; margin: 10px 0 8px; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.fcr-text p{ color:#C9D3EE; margin:0; max-width: 480px; font-size:0.98rem; }
.fcr-btn{ flex-shrink:0; }
@media (max-width: 760px){
  .footer-cta-row-inner{ flex-direction:column; align-items:flex-start; text-align:left; }
}

.site-footer-light{
  background: #fff; color: var(--slate); padding-top: 60px;
}
.site-footer-light .footer-cta-row{ box-shadow: 0 22px 44px -26px rgba(11,26,61,0.5); }
.site-footer-light .footer-brand .brand-text .name{ color: var(--navy); }
.site-footer-light .footer-social a{ box-shadow: 0 8px 18px -10px rgba(11,26,61,0.45); }
.site-footer-light .footer-col{ transition: transform .3s ease; }
.site-footer-light .footer-col h5{ color: var(--navy); }
.site-footer-light .footer-col h5::after{ background: linear-gradient(90deg, var(--gold), var(--coral)); }
.site-footer-light .footer-col ul li a{ color: var(--slate); }
.site-footer-light .footer-col ul li a:hover{ color: var(--royal); padding-left:4px; }
.site-footer-light .f-contact li{ color: var(--slate); }
.site-footer-light .f-contact span a{ color: var(--slate); }
.site-footer-light .f-contact span a:hover{ color: var(--royal); }
.site-footer-light .fc-ico{
  background: linear-gradient(135deg, var(--mist-2), #fff); color: var(--royal); border-radius: 50%;
  box-shadow: 0 6px 14px -6px rgba(30,62,140,0.35), inset 0 0 0 1px rgba(30,62,140,0.08);
}
.site-footer-light .footer-bottom{ border-top: 1px dashed var(--line); margin-top: 40px; padding-bottom: 4px; }
.site-footer-light .footer-bottom .container-bma{ color: var(--slate-light); }
.site-footer-light .footer-bottom a{ color: var(--slate); }
.site-footer-light .footer-bottom a:hover{ color: var(--royal); }
.site-footer-light .footer-bottom-links span{ color: var(--line); }
.site-footer-light .footer-doodle{
  position:absolute; left: 6%; top: 108px; width:70px; opacity:0.9; transform: rotate(-8deg);
  pointer-events:none; color: var(--sun);
}
@media (max-width: 700px){ .site-footer-light .footer-doodle{ display:none; } }