/* ============================================================
   ROYAL HERITAGE INTERNATIONAL SCHOOL
   Complete Stylesheet — 2026 Edition
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand — Slate & Champagne */
  --blue:          #1e3a5a;   /* desaturated steel-blue: authoritative, not vivid */
  --blue-dark:     #122840;   /* deeper steel for hover/pressed states */
  --blue-light:    #2a5480;   /* lighter steel for gradients & icon bgs */
  --blue-faint:    #e8f0f8;   /* pale steel tint for tag backgrounds */
  --gold:          #b89550;   /* champagne gold: warm, aged, not yellow */
  --gold-dark:     #9a7b3c;   /* deeper champagne for hover */
  --gold-light:    #caa864;   /* lighter champagne for gradients */
  --gold-faint:    #f8f3e6;   /* warm parchment tint for backgrounds */

  /* Neutrals — slate-toned scale */
  --black:         #080f18;
  --gray-900:      #0e1c2c;   /* deep midnight: footer bg & dark sections */
  --gray-800:      #1c2e40;
  --gray-700:      #2c4055;
  --gray-600:      #435668;
  --gray-500:      #627080;
  --gray-400:      #90a4b4;
  --gray-300:      #bccad4;
  --gray-200:      #d4dce4;   /* borders */
  --gray-100:      #e8eff4;
  --gray-50:       #f4f2ee;   /* warm parchment — light section bg */
  --white:         #ffffff;

  /* Semantic */
  --text:          #2c3440;   /* slate charcoal — readable, not harsh black */
  --text-secondary:#3d4a58;
  --text-muted:    #617080;
  --text-on-dark:  #ffffff;

  /* Backgrounds */
  --bg-white:      #fefcf9;   /* barely-warm off-white: removes stark harshness */
  --bg-light:      #f4f2ee;   /* warm stone/parchment for alternating sections */
  --bg-dark:       #0e1c2c;   /* same as gray-900: consistent dark sections */

  /* Typography */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;

  /* Fluid type scale */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   clamp(1.75rem, 3vw, 2.25rem);
  --text-4xl:   clamp(2rem,    4vw, 3rem);
  --text-hero:  clamp(2.5rem,  6vw, 5.25rem);

  /* Spacing */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;
  --section-py: clamp(3rem, 9vw, 7rem);

  /* Radii */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 9999px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:   0 4px 12px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg:   0 10px 30px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
  --shadow-xl:   0 24px 60px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.07);
  --shadow-card: 0 4px 20px rgba(30,58,90,.08), 0 1px 6px rgba(0,0,0,.04);
  --shadow-card-hover: 0 16px 48px rgba(30,58,90,.13), 0 4px 16px rgba(0,0,0,.06);
  --shadow-gold: 0 8px 24px rgba(184,149,80,.28);

  /* Transitions */
  --ease:        cubic-bezier(.16,1,.3,1);
  --t-fast:      150ms ease;
  --t-base:      250ms ease;
  --t-slow:      400ms ease;
  --t-smooth:    600ms var(--ease);

  /* Z-index */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-toast:    500;

  /* Layout */
  --container:  1200px;
  --container-sm: 800px;
  --nav-h:      72px;
  --bar-h:      42px;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

address {
  font-style: normal;
}

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

em {
  font-style: italic;
  font-family: var(--font-serif);
}

p {
  line-height: 1.7;
}

.text-accent { color: var(--gold); }


/* ============================================================
   4. ACCESSIBILITY
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  background: var(--blue);
  color: var(--white);
  padding: var(--sp-2) var(--sp-6);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 600;
  z-index: 9999;
  transition: top var(--t-base);
}
.skip-link:focus {
  top: var(--sp-2);
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

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


/* ============================================================
   5. LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.section {
  padding-block: var(--section-py);
}

.bg-white { background: var(--bg-white); }
.bg-light  { background: var(--bg-light); }

.section-header {
  max-width: 680px;
  margin-bottom: var(--sp-16);
}
.section-header.center {
  margin-inline: auto;
  text-align: center;
}

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-4);
}
.section-eyebrow.center { display: block; }

.section-title {
  font-size: var(--text-4xl);
  color: var(--gray-900);
  margin-bottom: var(--sp-5);
  letter-spacing: -.02em;
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 560px;
  margin-inline: auto;
}
.section-header:not(.center) .section-subtitle {
  margin-inline: 0;
}

.section-lead {
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--sp-6);
}

.section-body {
  color: var(--text-muted);
  margin-bottom: var(--sp-8);
}

.section-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mt-8 { margin-top: var(--sp-8); }

.me-2 { margin-right: .5rem; }


/* ============================================================
   6. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base), border-color var(--t-base), color var(--t-base);
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
}
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Primary */
.btn-primary {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}
.btn-primary:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(30,58,90,.28);
}

/* Gold / Accent */
.btn-gold {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}
.btn-gold:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

/* Outline White */
.btn-outline-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.55);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--white);
  transform: translateY(-2px);
}

/* Full width */
.btn-full { width: 100%; justify-content: center; }


/* ============================================================
   7. FORMS
   ============================================================ */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.form-group label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-700);
}

.required { color: var(--gold); }

.form-input {
  width: 100%;
  padding: .75rem 1rem;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text);
  transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.form-input::placeholder { color: var(--gray-400); }
.form-input:hover { border-color: var(--gray-300); }
.form-input:focus {
  border-color: var(--blue);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(30,58,90,.10);
}
.form-textarea {
  resize: vertical;
  min-height: 140px;
}


/* ============================================================
   8. ANNOUNCEMENT BAR
   ============================================================ */
.announcement-bar {
  position: relative;
  background: linear-gradient(90deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: .625rem var(--sp-6);
  min-height: var(--bar-h);
  z-index: var(--z-sticky);
}

.announcement-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
}

.announcement-icon {
  color: var(--gold);
  font-size: .9rem;
  flex-shrink: 0;
}

.announcement-bar p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.9);
  margin: 0;
  line-height: 1.4;
}

.announcement-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.announcement-cta:hover {
  color: var(--gold-light);
  border-color: var(--gold-light);
}

.announcement-close {
  position: absolute;
  right: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.6);
  font-size: .85rem;
  padding: var(--sp-2);
  line-height: 1;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.announcement-close:hover {
  color: var(--white);
  background: rgba(255,255,255,.12);
}


/* ============================================================
   9. NAVIGATION
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.navbar {
  background: rgba(14, 28, 52, .82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background var(--t-slow), box-shadow var(--t-slow);
}
.navbar.is-scrolled {
  background: rgba(7, 13, 26, .95);
  box-shadow: 0 4px 24px rgba(0,0,0,.24);
}
.navbar.is-open {
  background: var(--gray-900);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  height: var(--nav-h);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

/* Brand */
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  flex-shrink: 0;
}
.nav-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.nav-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.nav-brand-name {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}
.nav-brand-sub {
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

/* Desktop links */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  position: relative;
  display: inline-block;
  padding: .45rem .7rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255,255,255,.75);
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: .7rem;
  right: .7rem;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
  border-radius: 2px;
}
.nav-link:hover,
.nav-link.is-active {
  color: var(--white);
}
.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
}

.nav-cta-btn {
  display: inline-flex;
  align-items: center;
  margin-left: var(--sp-3);
  padding: .55rem 1.3rem;
  background: var(--gold);
  color: var(--black);
  font-size: var(--text-sm);
  font-weight: 700;
  border-radius: var(--r-pill);
  transition: background var(--t-base), transform var(--t-base), box-shadow var(--t-base);
  white-space: nowrap;
}
.nav-cta-btn:hover {
  background: var(--gold-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold);
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
  flex-shrink: 0;
}
.nav-toggle:hover { background: rgba(255,255,255,.08); }
.nav-toggle:focus-visible { outline: 2px solid var(--gold); }

.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--t-base) var(--ease), opacity var(--t-base);
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Menu */
.mobile-menu {
  display: none;
  background: var(--gray-900);
  border-top: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--t-smooth);
}
.mobile-menu.is-open {
  max-height: 600px;
}

.mobile-menu ul {
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.mobile-link {
  display: block;
  padding: .75rem var(--sp-4);
  font-size: var(--text-base);
  font-weight: 500;
  color: rgba(255,255,255,.8);
  border-radius: var(--r-md);
  transition: color var(--t-fast), background var(--t-fast);
}
.mobile-link:hover {
  color: var(--white);
  background: rgba(255,255,255,.06);
}
.mobile-link-cta {
  margin-top: var(--sp-3);
  background: var(--gold);
  color: var(--black) !important;
  font-weight: 700;
  text-align: center;
  border-radius: var(--r-pill);
}
.mobile-link-cta:hover {
  background: var(--gold-dark) !important;
}


/* ============================================================
   10. HERO SECTION
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Background */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    rgba(8,15,24,.88) 0%,
    rgba(18,40,64,.78) 45%,
    rgba(30,58,90,.55) 80%,
    rgba(184,149,80,.12) 100%
  );
}

/* Content layout */
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
  padding-block: calc(var(--nav-h) + var(--sp-12)) var(--sp-24);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--sp-16);
}

/* Text side */
.hero-text {
  color: var(--white);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .4rem 1rem;
  background: rgba(184,149,80,.18);
  border: 1px solid rgba(184,149,80,.4);
  border-radius: var(--r-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: var(--sp-6);
}
.hero-badge i { font-size: .7rem; }

.hero-title {
  font-family: var(--font-serif);
  font-size: var(--text-hero);
  font-weight: 800;
  line-height: 1.1;
  color: var(--white);
  letter-spacing: -.025em;
  margin-bottom: var(--sp-6);
}
.hero-title-accent {
  display: block;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: var(--text-xl);
  color: rgba(255,255,255,.78);
  line-height: 1.6;
  max-width: 520px;
  margin-bottom: var(--sp-10);
}

.hero-actions {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-12);
}

/* Inline stats */
.hero-stats {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.hero-stat strong {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}
.hero-stat span {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.hero-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.2);
}

/* Visual side */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-image-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: visible;
}

.hero-school-img {
  width: 100%;
  max-width: 480px;
  border-radius: var(--r-xl);
  box-shadow: 0 32px 80px rgba(0,0,0,.4);
  object-fit: cover;
  aspect-ratio: 4/5;
}

.hero-floating-badge {
  position: absolute;
  bottom: -1.5rem;
  left: -1.5rem;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  animation: floatBadge 3.5s ease-in-out infinite;
}
.hero-badge-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 100%);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.hero-badge-text {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.hero-badge-text strong {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--blue);
  line-height: 1;
}
.hero-badge-text span {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

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

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: var(--sp-10);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  justify-content: center;
}
.hero-scroll-dot {
  display: block;
  width: 20px;
  height: 32px;
  border: 2px solid rgba(255,255,255,.4);
  border-radius: var(--r-pill);
  position: relative;
}
.hero-scroll-dot::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 6px;
  background: rgba(255,255,255,.8);
  border-radius: var(--r-pill);
  animation: scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot {
  0%   { transform: translateX(-50%) translateY(0); opacity: 1; }
  100% { transform: translateX(-50%) translateY(12px); opacity: 0; }
}


/* ============================================================
   11. ABOUT SECTION
   ============================================================ */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(3rem, 6vw, 6rem);
}

/* Image frame */
.image-frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: visible;
}
.section-img {
  width: 100%;
  border-radius: var(--r-xl);
  object-fit: cover;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-xl);
}
.image-badge-pill {
  position: absolute;
  bottom: var(--sp-6);
  right: calc(-1 * var(--sp-6));
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .6rem 1.25rem;
  background: var(--white);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
}
.image-badge-pill i { color: var(--gold); }

/* Feature list */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}
.feature-item {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}
.feature-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: var(--blue-faint);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 1rem;
  transition: background var(--t-base), color var(--t-base), transform var(--t-base);
}
.feature-item:hover .feature-icon {
  background: var(--blue);
  color: var(--white);
  transform: scale(1.08);
}
.feature-text {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding-top: .1rem;
}
.feature-text strong {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--gray-900);
  font-family: var(--font-sans);
}
.feature-text span {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
}


/* ============================================================
   12. PROGRAMS SECTION
   ============================================================ */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}

.program-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--sp-8) var(--sp-6);
  border: 1.5px solid var(--gray-200);
  transition: transform var(--t-smooth), box-shadow var(--t-smooth), border-color var(--t-base);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  animation-delay: var(--card-delay, 0ms);
}
.program-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--blue-faint);
}

.program-card-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 100%);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.5rem;
  transition: transform var(--t-base);
  box-shadow: 0 8px 20px rgba(30,58,90,.2);
}
.program-card:hover .program-card-icon {
  transform: scale(1.08) rotate(-3deg);
}

.program-card-title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--gray-900);
}

.program-card-body {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.65;
  flex: 1;
}

.program-tags {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: auto;
}
.tag {
  display: inline-block;
  padding: .25rem .75rem;
  background: var(--blue-faint);
  color: var(--blue);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  transition: background var(--t-fast), color var(--t-fast);
}
.program-card:hover .tag {
  background: var(--blue);
  color: var(--white);
}


/* ============================================================
   13. FACILITIES SECTION
   ============================================================ */
.facilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 320px;
  gap: var(--sp-5);
}

.facility-card {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-smooth), box-shadow var(--t-smooth);
  display: flex;
  flex-direction: column;
  animation-delay: var(--card-delay, 0ms);
}
.facility-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

.facility-card-wide {
  grid-column: span 2;
}

.facility-img-wrap {
  position: relative;
  overflow: hidden;
  flex: 1;
}
.facility-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.facility-card:hover .facility-img-wrap img {
  transform: scale(1.06);
}
.facility-label {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .85rem;
  background: rgba(8,15,24,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.12);
}
.facility-label i { color: var(--gold); }

.facility-body {
  padding: var(--sp-5) var(--sp-6);
  background: var(--white);
  flex-shrink: 0;
}
.facility-body h3 {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--sp-2);
}
.facility-body p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.55;
}


/* ============================================================
   14. STATISTICS SECTION
   ============================================================ */
.stats-section {
  position: relative;
  background: linear-gradient(135deg, var(--gray-900) 0%, var(--blue-dark) 50%, var(--gray-900) 100%);
  overflow: hidden;
  padding-block: var(--sp-24);
}

.stats-bg-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(184,149,80,.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(30,58,90,.3) 0%, transparent 50%);
  pointer-events: none;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8);
  position: relative;
  z-index: 1;
}

.stat-item {
  text-align: center;
  padding: var(--sp-8) var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  transition: background var(--t-slow), transform var(--t-slow), border-color var(--t-slow);
  animation-delay: var(--card-delay, 0ms);
}
.stat-item:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(184,149,80,.25);
  transform: translateY(-4px);
}

.stat-number {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  margin-bottom: var(--sp-3);
  background: linear-gradient(135deg, var(--white) 0%, var(--gold-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-suffix {
  font-size: .65em;
  -webkit-text-fill-color: var(--gold-light);
  color: var(--gold-light);
}

.stat-label {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

.stat-line {
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  border-radius: var(--r-pill);
  margin: var(--sp-4) auto 0;
}


/* ============================================================
   15. ADMISSIONS SECTION
   ============================================================ */
.admissions-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: start;
}

/* Steps */
.admissions-steps {
  display: flex;
  flex-direction: column;
}

.admission-step {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
}

.step-number {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 2px var(--blue);
  line-height: 1;
  min-width: 56px;
  transition: -webkit-text-stroke-color var(--t-base), color var(--t-base);
  padding-top: .1rem;
}
.admission-step:hover .step-number {
  -webkit-text-stroke-color: transparent;
  color: var(--blue);
}

.step-body {
  padding-top: .3rem;
}
.step-body h3 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--sp-2);
}
.step-body p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.65;
}

.admission-btn { margin-top: 2.5rem; }

.admission-step-connector {
  width: 2px;
  height: 36px;
  background: linear-gradient(to bottom, var(--gray-200), transparent);
  margin-left: 26px;
  margin-block: var(--sp-2);
  border-radius: var(--r-pill);
}

/* Dates card */
.admissions-dates-card {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-xl);
  border: 1.5px solid var(--gray-200);
}

.dates-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
  flex-wrap: wrap;
}
.dates-card-header i {
  font-size: 1.5rem;
  color: var(--blue);
}
.dates-card-header h3 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  flex: 1;
}
.dates-year-badge {
  padding: .2rem .75rem;
  background: var(--blue-faint);
  color: var(--blue);
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--r-pill);
  letter-spacing: .05em;
}

.dates-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--sp-6);
}

.date-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--gray-200);
}
.date-item:last-child { border-bottom: none; }

.date-dot {
  width: 12px;
  height: 12px;
  min-width: 12px;
  border-radius: 50%;
  background: var(--gray-300);
  margin-top: .35rem;
  transition: background var(--t-base), transform var(--t-base);
}
.date-dot-active {
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(184,149,80,.2);
  transform: scale(1.2);
}
.date-item:hover .date-dot {
  background: var(--blue);
  transform: scale(1.2);
}

.date-info {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.date-info strong {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gray-900);
}
.date-info time {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.date-item-active .date-info strong {
  color: var(--blue);
}


/* ============================================================
   15b. GALLERY CAROUSEL
   ============================================================ */

/* Gallery section — tight bottom padding; overflow guard for full-bleed */
.gallery-section {
  padding-bottom: 0;
  overflow: hidden;
}
.gallery-section > .container {
  padding-bottom: var(--sp-10);
}

.gallery-carousel {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

/* ── Main viewport — full-bleed, full viewport height ── */
.carousel-viewport {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  height: 100vh;
  min-height: 480px;
  background: var(--gray-900);
  cursor: pointer;
  user-select: none;
}

/* ── Slides ── */
/* ── Ken Burns keyframes — 4 rotating directions ── */
@keyframes kb-1 {
  from { transform: scale(1.0)  translate(0%,     0%);    }
  to   { transform: scale(1.10) translate(-2.5%, -1.5%);  }
}
@keyframes kb-2 {
  from { transform: scale(1.08) translate(2.5%,  -1.5%); }
  to   { transform: scale(1.0)  translate(-1.5%,  2.5%); }
}
@keyframes kb-3 {
  from { transform: scale(1.05) translate(-2%, 1.5%); }
  to   { transform: scale(1.12) translate(2%,  -2%);  }
}
@keyframes kb-4 {
  from { transform: scale(1.10) translate(1.5%,   2%);   }
  to   { transform: scale(1.0)  translate(-2%,  -2.5%); }
}

/* Caption entrance */
@keyframes caption-rise {
  from { opacity: 0; transform: translateY(26px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0);   }
}

/* Active dot breathe */
@keyframes dot-breathe {
  0%, 100% { box-shadow: 0 0 0 0   rgba(184,149,80,.55); }
  50%       { box-shadow: 0 0 0 6px rgba(184,149,80,.0);  }
}

/* Progress bar fill */
@keyframes progress-run {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Slides ── */
.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .8s cubic-bezier(.4,0,.2,1),
              transform .8s cubic-bezier(.4,0,.2,1);
  z-index: 0;
  pointer-events: none;
}
.carousel-slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
  pointer-events: auto;
}

/* Cinematic edge vignette */
.carousel-viewport::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(8,15,24,.22) 100%);
  pointer-events: none;
  z-index: 2;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  will-change: transform;
  transform-origin: center center;
}

/* ── Caption overlay ── */
.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-12) var(--sp-8) var(--sp-6);
  background: linear-gradient(
    to top,
    rgba(8,15,24,.88) 0%,
    rgba(8,15,24,.45) 55%,
    transparent 100%
  );
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  z-index: 2;
}
.carousel-label {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: .3rem;
  opacity: 0; /* revealed by JS .cap-in class */
}
.carousel-desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.72);
  margin: 0;
  opacity: 0;
}

/* Caption animation — triggered by .cap-in class added via JS */
.carousel-caption.cap-in .carousel-label {
  animation: caption-rise .7s cubic-bezier(.16,1,.3,1) .22s both;
}
.carousel-caption.cap-in .carousel-desc {
  animation: caption-rise .7s cubic-bezier(.16,1,.3,1) .40s both;
}
.carousel-caption.cap-in .carousel-expand-btn {
  animation: caption-rise .6s cubic-bezier(.16,1,.3,1) .55s both;
}

/* ── Expand button ── */
.carousel-expand-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,255,255,.22);
  color: var(--white);
  font-size: .95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-base), transform var(--t-base);
}
.carousel-expand-btn:hover {
  background: rgba(255,255,255,.28);
  transform: scale(1.1);
}

/* ── Arrow controls ── */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,.22);
  color: var(--white);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-base), transform var(--t-base);
}
.carousel-arrow:hover {
  background: rgba(255,255,255,.28);
  transform: translateY(-50%) scale(1.1);
}
.carousel-arrow-prev { left: var(--sp-5); }
.carousel-arrow-next { right: var(--sp-5); }

/* ── Slide counter badge ── */
.carousel-counter {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  z-index: 3;
  background: rgba(8,15,24,.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.9);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  padding: .3rem .8rem;
  border-radius: var(--r-pill);
}

/* ── Dot navigation ── */
.carousel-dots {
  /* Overlaid inside the viewport at bottom-centre, above caption */
  position: absolute;
  bottom: var(--sp-10);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: rgba(8,15,24,.35);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.45);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--t-base), width var(--t-smooth), transform var(--t-base);
}
.carousel-dot.is-active {
  width: 28px;
  background: var(--gold);
}
.carousel-dot:hover:not(.is-active) {
  background: rgba(255,255,255,.75);
}

/* ── Thumbnail strip ── */
/* Filmstrip bar — dark, full-width */
.carousel-thumbs-wrap {
  background: var(--bg-dark);
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}
.carousel-thumbs {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: var(--sp-3) var(--sp-8);
  justify-content: center;
}
.carousel-thumbs::-webkit-scrollbar { display: none; }

.carousel-thumb {
  flex: 0 0 110px;
  height: 68px;
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding: 0;
  position: relative;
  scroll-snap-align: start;
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.carousel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform var(--t-slow);
}
.carousel-thumb:hover img { transform: scale(1.06); }
.carousel-thumb span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: .22rem .4rem;
  background: rgba(8,15,24,.68);
  color: rgba(255,255,255,.88);
  font-size: .62rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
  opacity: 0;
  transition: opacity var(--t-base);
}
.carousel-thumb:hover span { opacity: 1; }
.carousel-thumb.is-active {
  border-color: var(--gold);
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(184,149,80,.28);
}
.carousel-thumb.is-active span {
  opacity: 1;
  background: rgba(184,149,80,.55);
}

/* ── Expand button: default opacity 0, revealed by caption animation ── */
.carousel-expand-btn { opacity: 0; }

/* ── Progress bar ── */
.carousel-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 5;
  background: rgba(255,255,255,.1);
}
.carousel-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dark) 0%, var(--gold-light) 100%);
  transform-origin: left center;
  transform: scaleX(0);
  animation: progress-run 4.5s linear both;
}
.carousel-progress-fill.is-paused {
  animation-play-state: paused;
}

/* ── Active dot pulse ── */
.carousel-dot.is-active {
  animation: dot-breathe 2.2s ease-in-out infinite;
}

/* ── Thumbnail visibility is immediate (no scroll-triggered reveal) ── */
.carousel-thumb {
  opacity: 1;
  transition: transform .45s ease,
              border-color var(--t-base), box-shadow var(--t-base);
}


/* ============================================================
   15c. LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 26, .94);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  cursor: zoom-out;
}

.lightbox-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(90vw, 1100px);
  max-height: 92vh;
  width: 100%;
  padding: var(--sp-6);
}

/* Close button */
.lightbox-close {
  position: fixed;
  top: var(--sp-6);
  right: var(--sp-6);
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background var(--t-base), transform var(--t-base);
  z-index: 2;
  cursor: pointer;
}
.lightbox-close:hover {
  background: rgba(255,255,255,.2);
  transform: rotate(90deg) scale(1.1);
}
.lightbox-close:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Prev / Next arrows */
.lightbox-prev,
.lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background var(--t-base), transform var(--t-base);
  cursor: pointer;
  z-index: 2;
}
.lightbox-prev { left: var(--sp-6); }
.lightbox-next { right: var(--sp-6); }
.lightbox-prev:hover { background: rgba(255,255,255,.22); transform: translateY(-50%) translateX(-3px); }
.lightbox-next:hover { background: rgba(255,255,255,.22); transform: translateY(-50%) translateX(3px); }
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Image */
.lightbox-img-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: calc(92vh - 120px);
  width: 100%;
}
.lightbox-img {
  max-width: 100%;
  max-height: calc(92vh - 120px);
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
  transition: opacity .25s ease, transform .35s var(--ease);
  display: block;
}
.lightbox-img.is-loading { opacity: 0; transform: scale(.96); }
.lightbox-img.is-loaded  { opacity: 1; transform: scale(1); }

/* Spinner */
.lightbox-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.lightbox-loader.is-spinning { opacity: 1; }
.lightbox-loader span {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* Caption & counter */
.lightbox-caption {
  margin-top: var(--sp-5);
  font-size: var(--text-base);
  font-weight: 500;
  color: rgba(255,255,255,.85);
  text-align: center;
  letter-spacing: .01em;
  min-height: 1.5em;
  transition: opacity .2s ease;
}
.lightbox-counter {
  margin-top: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

/* ── Carousel responsive ── */
@media (max-width: 1024px) {
  .carousel-viewport { height: 100vh; min-height: 420px; }
  .carousel-arrow { width: 44px; height: 44px; font-size: .9rem; }
  .carousel-arrow-prev { left: var(--sp-3); }
  .carousel-arrow-next { right: var(--sp-3); }
  .carousel-thumb { flex: 0 0 96px; height: 62px; }
  .lightbox-prev { left: var(--sp-3); }
  .lightbox-next { right: var(--sp-3); }
}
@media (max-width: 640px) {
  .carousel-viewport { height: 85vh; min-height: 340px; }
  .carousel-arrow { width: 38px; height: 38px; font-size: .8rem; }
  .carousel-arrow-prev { left: var(--sp-2); }
  .carousel-arrow-next { right: var(--sp-2); }
  .carousel-caption { padding: var(--sp-8) var(--sp-4) var(--sp-5); }
  .carousel-label { font-size: var(--text-base); }
  .carousel-desc { display: none; }
  .carousel-thumb { flex: 0 0 80px; height: 52px; }
  .carousel-thumb span { display: none; }
  .carousel-dots { bottom: var(--sp-6); }
  .lightbox-inner { padding: var(--sp-3); }
  .lightbox-prev,
  .lightbox-next { width: 40px; height: 40px; font-size: .85rem; }
  .lightbox-prev { left: var(--sp-2); }
  .lightbox-next { right: var(--sp-2); }
  .lightbox-close { top: var(--sp-3); right: var(--sp-3); width: 40px; height: 40px; }
}
@media (max-width: 480px) {
  .carousel-viewport { height: 75vh; min-height: 280px; }
  .carousel-dots { gap: 6px; bottom: var(--sp-4); }
  .carousel-dot { width: 6px; height: 6px; }
  .carousel-dot.is-active { width: 20px; }
  .carousel-thumb { flex: 0 0 66px; height: 44px; }
  .carousel-thumbs { padding: var(--sp-2) var(--sp-4); }
}

/* ============================================================
   16. CONTACT SECTION
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: start;
}

/* Info column */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.contact-info-item {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.contact-info-item:hover {
  border-color: var(--blue-faint);
  box-shadow: var(--shadow-card);
  transform: translateX(4px);
}

.contact-info-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 100%);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1rem;
  box-shadow: 0 6px 16px rgba(30,58,90,.2);
}

.contact-info-body {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.contact-info-body h4 {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gray-900);
}
.contact-info-body a,
.contact-info-body address {
  font-size: var(--text-sm);
  color: var(--text-muted);
  transition: color var(--t-fast);
  line-height: 1.5;
}
.contact-info-body a:hover { color: var(--blue); }

.contact-social-block {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--gray-200);
  background: var(--white);
}
.contact-social-block h4 {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--sp-4);
}

.social-links {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.social-links a {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  color: var(--gray-600);
  border-radius: var(--r-md);
  font-size: .95rem;
  transition: background var(--t-base), color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
  border: 1.5px solid var(--gray-200);
}
.social-links a:hover {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(30,58,90,.25);
}

/* Form card */
.contact-form-card {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: var(--sp-10);
  box-shadow: var(--shadow-xl);
  border: 1.5px solid var(--gray-200);
}
.contact-form-card h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--sp-8);
}

.contact-form-card .form-group {
  margin-bottom: var(--sp-5);
}
.contact-form-card .btn {
  margin-top: var(--sp-2);
}


/* ============================================================
   17. FOOTER
   ============================================================ */
.site-footer {
  background: var(--gray-900);
  color: rgba(255,255,255,.8);
}

.footer-top {
  padding-block: var(--sp-20) var(--sp-16);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
  gap: var(--sp-10);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.footer-brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.footer-brand-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}
.footer-brand-sub {
  display: block;
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.4;
}

.footer-tagline {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.55);
  line-height: 1.65;
  margin-bottom: var(--sp-5);
}

.footer-address {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.5);
  line-height: 1.6;
}
.footer-address i {
  color: var(--gold);
  margin-right: var(--sp-2);
}

.footer-heading {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--sp-6);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.footer-links a {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.55);
  transition: color var(--t-fast), padding-left var(--t-base);
}
.footer-links a:hover {
  color: var(--white);
  padding-left: .35rem;
}

.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  color: rgba(255,255,255,.55);
}
.footer-contact-list i {
  color: var(--gold);
  font-size: .8rem;
  margin-top: .2rem;
  flex-shrink: 0;
}
.footer-contact-list a {
  color: rgba(255,255,255,.55);
  transition: color var(--t-fast);
  line-height: 1.5;
}
.footer-contact-list a:hover { color: var(--white); }

.footer-social-text {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.45);
  margin-bottom: var(--sp-5);
  line-height: 1.6;
}

.footer-social-links {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.footer-social-links a {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.65);
  border-radius: var(--r-md);
  font-size: .9rem;
  transition: background var(--t-base), color var(--t-base), transform var(--t-base);
  border: 1px solid rgba(255,255,255,.08);
}
.footer-social-links a:hover {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
  transform: translateY(-3px);
}

.footer-bottom {
  padding-block: var(--sp-6);
  display: flex;
  align-items: center;
}
.footer-bottom .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.footer-bottom p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.35);
  margin: 0;
}


/* ============================================================
   18. SCROLL TO TOP
   ============================================================ */
.scroll-top-btn {
  position: fixed;
  bottom: var(--sp-8);
  right: var(--sp-8);
  width: 48px;
  height: 48px;
  background: var(--blue);
  color: var(--white);
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  box-shadow: 0 8px 24px rgba(30,58,90,.35);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t-base), visibility var(--t-base), transform var(--t-base), background var(--t-base), box-shadow var(--t-base);
  border: 2px solid rgba(255,255,255,.15);
}
.scroll-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-top-btn:hover {
  background: var(--blue-dark);
  box-shadow: 0 12px 32px rgba(30,58,90,.45);
  transform: translateY(-3px);
}


/* ============================================================
   18b. WHATSAPP FLOATING BUTTON
   ============================================================ */
.whatsapp-float {
  position: fixed;
  right: var(--sp-8);
  bottom: calc(var(--sp-8) + 56px);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .42);
  border: 2px solid rgba(255,255,255,.85);
  z-index: var(--z-overlay);
  transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base);
}

.whatsapp-float:hover {
  background: #20ba5a;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 32px rgba(37, 211, 102, .5);
}

.whatsapp-float:focus-visible {
  outline: 3px solid rgba(37, 211, 102, .45);
  outline-offset: 3px;
}


/* ============================================================
   19. TOAST NOTIFICATIONS
   ============================================================ */
.toast-container {
  position: fixed;
  top: var(--sp-6);
  right: var(--sp-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-width: 300px;
  max-width: 420px;
  padding: var(--sp-4) var(--sp-5);
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  border-left: 4px solid var(--blue);
  pointer-events: auto;
  animation: toastIn .35s var(--ease) forwards;
}
.toast.toast-success { border-left-color: #10b981; }
.toast.toast-warning { border-left-color: var(--gold); }
.toast.toast-error   { border-left-color: #ef4444; }
.toast.toast-out     { animation: toastOut .3s ease forwards; }

.toast-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  background: var(--blue-faint);
  color: var(--blue);
}
.toast-success .toast-icon { background: #d1fae5; color: #059669; }
.toast-warning .toast-icon { background: var(--gold-faint); color: var(--gold-dark); }
.toast-error   .toast-icon { background: #fee2e2; color: #dc2626; }

.toast-body {
  flex: 1;
  min-width: 0;
}
.toast-body p {
  font-size: var(--text-sm);
  color: var(--gray-700);
  margin: 0;
  line-height: 1.5;
}
.toast-body strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: .15rem;
}

.toast-close {
  color: var(--gray-400);
  font-size: .75rem;
  padding: .2rem;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
  align-self: flex-start;
  flex-shrink: 0;
}
.toast-close:hover {
  color: var(--gray-700);
  background: var(--gray-100);
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(30px) scale(.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(30px) scale(.96); }
}


/* ============================================================
   20. SCROLL REVEAL ANIMATIONS
   ============================================================ */
.reveal-fade-up,
.reveal-fade-left,
.reveal-fade-right {
  opacity: 0;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-fade-up    { transform: translateY(32px); }
.reveal-fade-left  { transform: translateX(-32px); }
.reveal-fade-right { transform: translateX(32px); }

.reveal-fade-up.is-visible,
.reveal-fade-left.is-visible,
.reveal-fade-right.is-visible {
  opacity: 1;
  transform: translate(0);
}

/* Staggered children */
.programs-grid   .program-card,
.facilities-grid .facility-card,
.stats-grid      .stat-item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--card-delay, 0ms);
}
.programs-grid.is-visible   .program-card,
.facilities-grid.is-visible .facility-card,
.stats-grid.is-visible      .stat-item {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   21. SCROLLBAR
   ============================================================ */
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }


/* ============================================================
   21a. SECTION WAVE DIVIDERS
   ============================================================ */

/* The wave sits at the very bottom of its parent section */
.section-wave {
  position: absolute;
  bottom: -1px;       /* -1px prevents hairline gap */
  left: 0;
  right: 0;
  z-index: 2;         /* above hero bg but below nav */
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
}
.section-wave svg {
  display: block;
  width: 100%;
  height: clamp(48px, 6vw, 80px);
}

/* Hero needs position:relative so wave anchors correctly */
.hero { position: relative; }

/* The bg-white and bg-light sections below the hero/stats need
   enough top padding so the wave doesn't overlap their content */
#about  { padding-top: calc(var(--section-py) + 40px); }
#admissions { padding-top: calc(var(--section-py) + 40px); }

/* Facilities section must be positioned for its wave */
#facilities { position: relative; }

/* Stats section must be positioned for its wave */
#stats { position: relative; }

/* ============================================================
   21b. FORM VALIDATION STATES
   ============================================================ */
.form-input.is-valid {
  border-color: #10b981;
  background: #f0fdf4;
}
.form-input.is-valid:focus {
  box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}
.form-input.is-invalid {
  border-color: #ef4444;
  background: #fff5f5;
}
.form-input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}

/* Hero bg — initial scale for smooth parallax start */
.hero-bg-img {
  transform: scale(1.05);
  transform-origin: center center;
}

/* Spinner for form submit loading state */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.btn[aria-busy="true"] .btn-text::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  margin-left: .5rem;
  vertical-align: middle;
  animation: spin .7s linear infinite;
}

/* ============================================================
   22. RESPONSIVE — TABLET (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {

  :root { --nav-h: 68px; }

  /* Nav */
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .mobile-menu { display: block; }

  /* Hero */
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    padding-block: calc(var(--nav-h) + var(--sp-16)) var(--sp-16);
  }
  .hero-text { align-items: center; display: flex; flex-direction: column; }
  .hero-subtitle { max-width: 600px; }
  .hero-actions { justify-content: center; }
  .hero-stats  { justify-content: center; }
  .hero-visual { justify-content: center; order: -1; }
  .hero-school-img { max-width: 360px; aspect-ratio: 3/2; }
  .hero-floating-badge {
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .hero-scroll { display: none; }

  /* Two-col */
  .two-col-grid { grid-template-columns: 1fr; }
  .section-img { aspect-ratio: 16/9; max-width: 100%; }
  .image-badge-pill { right: var(--sp-4); bottom: var(--sp-4); }

  /* Programs */
  .programs-grid { grid-template-columns: repeat(2, 1fr); }

  /* Facilities */
  .facilities-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 280px;
  }
  .facility-card-wide { grid-column: span 1; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Admissions */
  .admissions-layout { grid-template-columns: 1fr; }

  /* Contact */
  .contact-layout { grid-template-columns: 1fr; }
  .contact-info { flex-direction: row; flex-wrap: wrap; }
  .contact-info-item,
  .contact-social-block { flex: 1 1 280px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand-col { grid-column: span 2; }

}


/* ============================================================
   23. RESPONSIVE — MOBILE (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {

  :root {
    --nav-h: 64px;
    --bar-h: 48px;
  }

  /* Announcement bar */
  .announcement-bar { padding: .5rem var(--sp-4); }
  .announcement-inner { gap: var(--sp-2); }
  .announcement-bar p { font-size: .75rem; text-align: center; }
  .announcement-close { right: var(--sp-2); }

  /* Hero */
  .hero-title { font-size: clamp(2rem, 9vw, 3rem); }
  .hero-subtitle { font-size: var(--text-base); }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-stats { gap: var(--sp-4); }
  .hero-school-img { max-width: 100%; aspect-ratio: 16/10; }
  .hero-floating-badge { padding: var(--sp-3) var(--sp-4); }

  /* Section headers */
  .section-title { font-size: clamp(1.75rem, 7vw, 2.5rem); }
  .section-subtitle { font-size: var(--text-base); }

  /* About */
  .image-frame { border-radius: var(--r-lg); }
  .section-img { border-radius: var(--r-lg); }

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

  /* Facilities */
  .facilities-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 260px;
  }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .stat-item { padding: var(--sp-6) var(--sp-4); }

  /* Admissions steps */
  .admission-step { flex-direction: column; gap: var(--sp-2); }
  .step-number { font-size: 2rem; min-width: auto; }
  .admissions-dates-card { padding: var(--sp-6); }

  /* Contact */
  .contact-form-card { padding: var(--sp-5); }
  .form-row { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand-col { grid-column: span 1; }
  .footer-bottom .container { flex-direction: column; text-align: center; }

  /* Scroll top */
  .scroll-top-btn { bottom: var(--sp-6); right: var(--sp-5); }

  /* WhatsApp float */
  .whatsapp-float {
    right: var(--sp-5);
    bottom: calc(var(--sp-6) + 52px);
  }

  /* Toast */
  .toast-container { right: var(--sp-4); left: var(--sp-4); }
  .toast { min-width: unset; }
}


/* ============================================================
   23b. RESPONSIVE — TABLET PORTRAIT (≤ 768px)
   Fills the gap between laptop (1024px) and large mobile (640px)
   ============================================================ */
@media (max-width: 768px) {

  /* Programs: 2-col becomes uncomfortably tight below 768 — keep 2 but reduce gap */
  .programs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }
  .program-card { padding: var(--sp-6); }

  /* Footer: 2-col layout can get narrow — stack brand + links early */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }

  /* Facilities: single column at this width avoids overly narrow cards */
  .facilities-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 240px;
  }

  /* Stats numbers stay 2-col but reduce padding */
  .stat-item { padding: var(--sp-8) var(--sp-5); }

  /* Hero floating badge: reposition for narrower hero image */
  .hero-school-img { max-width: 100%; }

  /* Contact: stack cards vertically, compact padding */
  .contact-info { flex-direction: column; gap: var(--sp-3); }
  .contact-info-item { flex: none; padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
  .contact-info-icon { width: 40px; height: 40px; min-width: 40px; font-size: .9rem; }
  .contact-social-block { flex: none; padding: var(--sp-4); }

}


/* ============================================================
   23c. RESPONSIVE — SMALL MOBILE (≤ 480px)
   iPhone SE, small Android phones
   ============================================================ */
@media (max-width: 480px) {

  :root { --nav-h: 60px; --section-py: 2.5rem; }

  /* Announcement bar: single line, icon hidden */
  .announcement-icon { display: none; }
  .announcement-bar p { font-size: .7rem; }

  /* Hero: tighter padding, smaller stats row */
  .hero-content { padding-block: calc(var(--nav-h) + var(--sp-10)) var(--sp-12); }
  .hero-title { font-size: clamp(1.9rem, 10vw, 2.6rem); }
  .hero-stats { flex-wrap: wrap; gap: var(--sp-3); }
  .hero-stat-divider { display: none; }
  .hero-stat { flex: 1 1 40%; text-align: center; }
  .hero-floating-badge { padding: var(--sp-2) var(--sp-3); font-size: var(--text-xs); }

  /* Section headers */
  .section-title { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .section-header { margin-bottom: var(--sp-10); }

  /* Programs: single column */
  .programs-grid { grid-template-columns: 1fr; }
  .program-card { padding: var(--sp-5); }

  /* Facilities: single column */
  .facilities-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }

  /* Stats: 2-col with tighter cells */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .stat-item { padding: var(--sp-5) var(--sp-3); }
  .stat-number { font-size: clamp(2rem, 9vw, 2.8rem); }

  /* Admissions */
  .admissions-dates-card { padding: var(--sp-5); }

  /* Contact: tightest size on very small phones */
  .contact-info { gap: var(--sp-2); }
  .contact-info-item { padding: var(--sp-3) var(--sp-3); }
  .contact-info-icon { width: 36px; height: 36px; min-width: 36px; font-size: .8rem; }
  .contact-form-card { padding: var(--sp-4); border-radius: var(--r-lg); }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-top { padding-block: var(--sp-12) var(--sp-10); }
  .footer-social-links { gap: var(--sp-2); }
  .footer-social-links a { width: 38px; height: 38px; font-size: .85rem; }

  /* Scroll top */
  .scroll-top-btn { width: 44px; height: 44px; font-size: .9rem; bottom: var(--sp-5); right: var(--sp-4); }

  /* WhatsApp float */
  .whatsapp-float {
    width: 52px;
    height: 52px;
    font-size: 1.5rem;
    right: var(--sp-4);
    bottom: calc(var(--sp-5) + 48px);
  }

  /* Lightbox */
  .lightbox-close { top: var(--sp-2); right: var(--sp-2); width: 36px; height: 36px; font-size: .8rem; }
  .lightbox-prev,
  .lightbox-next { width: 36px; height: 36px; font-size: .75rem; }
  .lightbox-caption { font-size: var(--text-xs); }

}


/* ============================================================
   24. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal-fade-up,
  .reveal-fade-left,
  .reveal-fade-right {
    opacity: 1;
    transform: none;
  }
  .programs-grid .program-card,
  .facilities-grid .facility-card,
  .stats-grid .stat-item {
    opacity: 1;
    transform: none;
  }
  .stats-section { animation: none; }
  .date-dot-active { animation: none; }
  .scroll-top-btn.is-visible::before { animation: none; }
  /* Carousel: disable Ken Burns + all slide animations */
  .carousel-slide img { animation: none !important; }
  .carousel-slide { transform: none !important; transition: opacity .3s ease !important; }
  .carousel-caption.cap-in .carousel-label,
  .carousel-caption.cap-in .carousel-desc,
  .carousel-caption.cap-in .carousel-expand-btn { animation: none !important; opacity: 1 !important; }
  .carousel-progress-fill { animation: none !important; }
  .carousel-dot.is-active { animation: none !important; }
  .carousel-thumb { opacity: 1 !important; transform: none !important; }
  .hero-bg-img { transform: none; }
  .hero-floating-badge { animation: none; }
}


/* ============================================================
   25. AESTHETIC POLISH & MICRO-INTERACTIONS
   ============================================================ */

/* ── Hero: subtle noise texture overlay for depth ── */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: .4;
  pointer-events: none;
}

/* ── bg-light sections: very subtle dot grid for texture ── */
.bg-light {
  background-image: radial-gradient(circle, rgba(30,58,90,.045) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ── Program cards: animated gradient border on hover ── */
.program-card {
  background-clip: padding-box;
  position: relative;
}
.program-card::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: calc(var(--r-lg) + 1.5px);
  background: linear-gradient(135deg, var(--blue-faint), var(--gold-faint));
  opacity: 0;
  transition: opacity var(--t-slow);
  z-index: -1;
}
.program-card:hover::before { opacity: 1; }

/* ── Contact info items: left-accent bar on hover ── */
.contact-info-item {
  border-left: 3px solid transparent;
  transition: border-color var(--t-base), box-shadow var(--t-base),
              transform var(--t-base), background var(--t-base);
}
.contact-info-item:hover {
  border-left-color: var(--blue);
  background: var(--gray-50);
}

/* ── Facility cards: title gradient reveal on hover ── */
.facility-body h3 {
  transition: color var(--t-base);
}
.facility-card:hover .facility-body h3 {
  color: var(--blue);
}

/* ── Stat items: gold accent glow on hover ── */
.stat-item:hover {
  box-shadow: inset 0 0 0 1px rgba(184,149,80,.18),
              0 0 32px rgba(184,149,80,.08);
}

/* ── Buttons: pressed depth effect ── */
.btn:active {
  transform: scale(.965) translateY(1px);
  box-shadow: none !important;
}

/* ── Footer links: gold underline grow ── */
.footer-links a {
  position: relative;
}
.footer-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width var(--t-base) var(--ease);
}
.footer-links a:hover::after { width: 100%; }

/* ── Nav brand: subtle shimmer on hover ── */
.nav-brand:hover .nav-brand-name {
  background: linear-gradient(90deg, #fff 30%, var(--gold-light) 60%, #fff 90%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 1.4s linear;
}
@keyframes shimmer {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}

/* ── Feature icons: rotating hue shift on hover ── */
.feature-item:hover .feature-icon i {
  animation: iconPop .35s var(--ease);
}
@keyframes iconPop {
  0%   { transform: scale(1)    rotate(0deg); }
  50%  { transform: scale(1.25) rotate(-8deg); }
  100% { transform: scale(1)    rotate(0deg); }
}

/* ── Section eyebrow: animated underline ── */
.section-eyebrow {
  position: relative;
}
.section-eyebrow::after {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gold);
  border-radius: var(--r-pill);
  margin-top: 6px;
}
.section-eyebrow.center::after {
  margin-inline: auto;
}

/* ── Dates card: accent pulse on the active dot ── */
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0   rgba(184,149,80,.5); }
  50%      { box-shadow: 0 0 0 8px rgba(184,149,80,.0); }
}
.date-dot-active {
  animation: pulseDot 2s ease-in-out infinite;
}

/* ── Hero floating badge: deeper shadow on hover ── */
.hero-image-card:hover .hero-floating-badge {
  box-shadow: 0 32px 80px rgba(0,0,0,.5), 0 8px 24px rgba(30,58,90,.2);
}

/* ── Image frame decorative corner element ── */
.image-frame::after {
  content: '';
  position: absolute;
  top: -12px;
  left: -12px;
  width: 80px;
  height: 80px;
  border-top: 3px solid var(--gold);
  border-left: 3px solid var(--gold);
  border-radius: 4px 0 0 0;
  opacity: .6;
  pointer-events: none;
}
.image-frame::before {
  content: '';
  position: absolute;
  bottom: -12px;
  right: -12px;
  width: 80px;
  height: 80px;
  border-bottom: 3px solid var(--gold);
  border-right: 3px solid var(--gold);
  border-radius: 0 0 4px 0;
  opacity: .6;
  pointer-events: none;
}

/* ── Admission step: highlight on hover ── */
.admission-step {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  transition: background var(--t-base);
  margin-left: calc(-1 * var(--sp-4));
}
.admission-step:hover {
  background: var(--blue-faint);
}

/* ── Scroll to top: gold ring pulse when visible ── */
.scroll-top-btn.is-visible::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(30,58,90,.25);
  animation: ringPulse 2.5s ease-out infinite;
}
@keyframes ringPulse {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(1.7); opacity: 0; }
}
.scroll-top-btn { position: fixed; } /* ensure ::before positions correctly */

/* ── Glass card shimmer on form wrapper ── */
.contact-form-card {
  background: linear-gradient(145deg, #ffffff 0%, #fafbff 100%);
  border-color: rgba(30,58,90,.1);
}

/* ── Stats section: subtle animated gradient shift ── */
@keyframes gradientDrift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
.stats-section {
  background-size: 200% 200%;
  animation: gradientDrift 12s ease infinite;
}

/* ============================================================
   26. PRINT
   ============================================================ */
@media print {
  .announcement-bar,
  .site-header,
  .scroll-top-btn,
  .toast-container,
  .hero-scroll,
  .section-wave { display: none !important; }
  .hero { min-height: auto; padding: 2rem 0; }
  .hero-bg { display: none; }
  .hero-title, .hero-subtitle, .hero-stats { color: #000 !important; }
  * { box-shadow: none !important; animation: none !important; }
  #about, #admissions { padding-top: var(--section-py); }
}