/* ============================================================
   VIDHYA PARTHI HIGHER SECONDARY SCHOOL
   Base Stylesheet — Phase 1
   ============================================================ */

/* ── Google Fonts Import ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,700&family=Poppins:wght@300;400;500;600;700&display=swap');

/* ── CSS Custom Properties ───────────────────────────────── */
:root {
  /* Primary Palette */
  --blue-900:   #0a1628;
  --blue-800:   #0f2347;
  --blue-700:   #163672;
  --blue-600:   #1d4a9e;
  --blue-500:   #2563c8;
  --blue-400:   #4a80e0;
  --blue-300:   #7aaae8;
  --blue-100:   #dce9fc;
  --blue-50:    #f0f6ff;

  /* Gold Palette */
  --gold-700:   #8a6200;
  --gold-600:   #b07d00;
  --gold-500:   #d4a017;
  --gold-400:   #e8b83a;
  --gold-300:   #f0cc72;
  --gold-100:   #fdf3d0;
  --gold-50:    #fffbee;

  /* Neutral */
  --white:      #ffffff;
  --gray-50:    #f8f9fc;
  --gray-100:   #eef0f5;
  --gray-200:   #dde1ec;
  --gray-300:   #c4cad9;
  --gray-500:   #7a839e;
  --gray-700:   #3d4561;
  --gray-900:   #141928;

  /* Semantic */
  --color-primary:        var(--blue-700);
  --color-primary-dark:   var(--blue-900);
  --color-primary-light:  var(--blue-400);
  --color-accent:         var(--gold-500);
  --color-accent-dark:    var(--gold-700);
  --color-accent-light:   var(--gold-300);
  --color-text:           var(--gray-900);
  --color-text-muted:     var(--gray-500);
  --color-bg:             var(--white);
  --color-bg-alt:         var(--gray-50);
  --color-border:         var(--gray-200);

  /* Typography */
  --font-display:   'Playfair Display', Georgia, serif;
  --font-body:      'Poppins', system-ui, sans-serif;

  --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:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Spacing */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* Layout */
  --container-max:   1280px;
  --container-wide:  1440px;
  --nav-height:      80px;
  --nav-height-sm:   68px;

  /* Effects */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  --shadow-sm:   0 1px 3px rgba(10,22,40,0.08), 0 1px 2px rgba(10,22,40,0.04);
  --shadow-md:   0 4px 16px rgba(10,22,40,0.10), 0 2px 6px rgba(10,22,40,0.06);
  --shadow-lg:   0 12px 40px rgba(10,22,40,0.14), 0 4px 12px rgba(10,22,40,0.08);
  --shadow-xl:   0 24px 64px rgba(10,22,40,0.18), 0 8px 24px rgba(10,22,40,0.10);
  --shadow-gold: 0 4px 20px rgba(212,160,23,0.30);

  --transition-fast:   150ms cubic-bezier(0.4,0,0.2,1);
  --transition-base:   250ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow:   400ms cubic-bezier(0.4,0,0.2,1);
  --transition-spring: 350ms cubic-bezier(0.34,1.56,0.64,1);
}

/* ── Reset & Base ────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--nav-height);
}

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

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

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

ul, ol { list-style: none; }

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
}

/* ── Utility Classes ─────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

@media (max-width: 768px) {
  .container { padding-inline: var(--space-4); }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── ░░░ NAVBAR ░░░ ──────────────────────────────────────── */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-height);
  background: transparent;
  transition: background var(--transition-base),
              box-shadow var(--transition-base),
              height var(--transition-base);
}

#navbar.scrolled {
  background: var(--blue-900);
  box-shadow: 0 2px 24px rgba(10,22,40,0.25);
  height: var(--nav-height-sm);
  border-bottom: 1px solid rgba(212,160,23,0.18);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--space-8);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}
.nav-logo:hover { opacity: 0.88; }

.nav-logo img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  transition: width var(--transition-base), height var(--transition-base);
}

#navbar.scrolled .nav-logo img {
  width: 44px;
  height: 44px;
}

.nav-logo-text {
  display: flex;
  flex-direction: column;
}

.nav-school-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--white);
  line-height: var(--leading-tight);
  letter-spacing: 0.01em;
}

.nav-school-sub {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--gold-300);
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* Nav Links */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav-link {
  position: relative;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%;
  width: 0; height: 2px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  transform: translateX(-50%);
  transition: width var(--transition-base);
}

.nav-link:hover {
  color: var(--white);
  background: rgba(255,255,255,0.07);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: calc(100% - var(--space-6));
}

.nav-link.active {
  color: var(--gold-300);
}

/* Nav CTA */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  color: var(--blue-900);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-gold);
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              filter var(--transition-fast);
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(212,160,23,0.40);
  filter: brightness(1.06);
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.nav-hamburger:hover { background: rgba(255,255,255,0.08); }

.nav-hamburger span {
  display: block;
  width: 100%; height: 2px;
  background: var(--white);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base), opacity var(--transition-base);
  transform-origin: center;
}

.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Menu */
.nav-mobile {
  position: fixed;
  top: var(--nav-height-sm); left: 0; right: 0;
  background: var(--blue-900);
  padding: var(--space-4) var(--space-6) var(--space-6);
  border-top: 1px solid rgba(212,160,23,0.15);
  box-shadow: var(--shadow-xl);
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-mobile.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.nav-mobile .nav-link {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.nav-mobile .nav-cta {
  margin-top: var(--space-4);
  justify-content: center;
  padding: var(--space-3) var(--space-6);
}

/* ── ░░░ HERO SECTION ░░░ ─────────────────────────────────── */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--blue-900);
}

/* Hero Background Layers */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-image {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.18;
}

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(22,54,114,0.65) 0%, transparent 70%),
    linear-gradient(170deg, var(--blue-900) 0%, rgba(10,22,40,0.92) 55%, rgba(15,35,71,0.98) 100%);
}

/* Decorative grid pattern */
.hero-bg-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(212,160,23,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,160,23,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
}

/* Decorative orbs */
.hero-orb {
  position: absolute;
  border-radius: var(--radius-full);
  pointer-events: none;
}

.hero-orb-1 {
  width: 500px; height: 500px;
  top: -120px; right: -80px;
  background: radial-gradient(circle, rgba(29,74,158,0.25) 0%, transparent 70%);
  animation: orbFloat 8s ease-in-out infinite;
}

.hero-orb-2 {
  width: 350px; height: 350px;
  bottom: 40px; left: -100px;
  background: radial-gradient(circle, rgba(212,160,23,0.12) 0%, transparent 70%);
  animation: orbFloat 10s ease-in-out infinite reverse;
}

.hero-orb-3 {
  width: 200px; height: 200px;
  top: 35%; right: 15%;
  background: radial-gradient(circle, rgba(212,160,23,0.08) 0%, transparent 70%);
  animation: orbFloat 6s ease-in-out infinite 2s;
}

@keyframes orbFloat {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-24px) scale(1.03); }
}

/* Hero Content */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--space-20) var(--space-6);
  max-width: 900px;
  margin-inline: auto;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(212,160,23,0.12);
  border: 1px solid rgba(212,160,23,0.30);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gold-300);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
  animation: fadeInDown 0.7s ease both;
}

.hero-badge-dot {
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  background: var(--gold-400);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 5.5vw, var(--text-7xl));
  font-weight: 900;
  line-height: var(--leading-tight);
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
  animation: fadeInUp 0.8s ease 0.15s both;
}

.hero-title-accent {
  color: var(--gold-400);
  font-style: italic;
  display: block;
}

.hero-subtitle {
  font-size: clamp(var(--text-base), 2vw, var(--text-xl));
  font-weight: 300;
  color: rgba(255,255,255,0.72);
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  line-height: var(--leading-relaxed);
  animation: fadeInUp 0.8s ease 0.28s both;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  animation: fadeInUp 0.8s ease 0.4s both;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  color: var(--blue-900);
  box-shadow: var(--shadow-gold);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(212,160,23,0.45);
  filter: brightness(1.06);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.35);
}

.btn-outline:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.60);
  transform: translateY(-2px);
}

/* Hero Stats Strip */
.hero-stats {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  background: rgba(10,22,40,0.70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(212,160,23,0.15);
  animation: fadeInUp 0.8s ease 0.55s both;
}

.hero-stats-inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.hero-stat {
  flex: 1;
  max-width: 200px;
  padding: var(--space-5) var(--space-4);
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.07);
  transition: background var(--transition-fast);
}

.hero-stat:last-child { border-right: none; }
.hero-stat:hover { background: rgba(255,255,255,0.04); }

.hero-stat-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--gold-400);
  line-height: 1.1;
}

.hero-stat-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: var(--space-1);
}

/* Scroll indicator */
.hero-scroll-hint {
  position: absolute;
  bottom: 90px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  opacity: 0.5;
  animation: fadeIn 1s ease 1.2s both;
  transition: opacity var(--transition-fast);
}

.hero-scroll-hint:hover { opacity: 0.8; }

.hero-scroll-hint span {
  font-size: var(--text-xs);
  color: var(--white);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.scroll-mouse {
  width: 22px; height: 34px;
  border: 2px solid rgba(255,255,255,0.45);
  border-radius: 11px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.scroll-mouse-dot {
  width: 4px; height: 4px;
  background: var(--gold-400);
  border-radius: var(--radius-full);
  animation: scrollDot 2s ease-in-out infinite;
}

@keyframes scrollDot {
  0% { opacity: 1; transform: translateY(0); }
  60% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0; transform: translateY(0); }
}

/* ── ░░░ FOOTER ░░░ ───────────────────────────────────────── */
#footer {
  background: var(--blue-900);
  border-top: 1px solid rgba(212,160,23,0.15);
  padding-top: var(--space-16);
  padding-bottom: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-12);
  padding-bottom: var(--space-16);
}

/* Footer Brand */
.footer-brand {}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.footer-logo img {
  width: 56px; height: 56px;
  object-fit: contain;
}

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

.footer-school-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--white);
  line-height: var(--leading-tight);
}

.footer-school-sub {
  font-size: var(--text-xs);
  color: var(--gold-400);
  letter-spacing: 0.04em;
}

.footer-description {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.footer-iso {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(212,160,23,0.10);
  border: 1px solid rgba(212,160,23,0.25);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--gold-300);
  font-weight: 500;
}

.footer-iso svg {
  flex-shrink: 0;
}

/* Footer Columns */
.footer-col-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--gold-500);
  display: inline-block;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.footer-link::before {
  content: '›';
  color: var(--gold-500);
  font-size: var(--text-base);
  line-height: 1;
  transition: transform var(--transition-fast);
}

.footer-link:hover {
  color: rgba(255,255,255,0.90);
  gap: var(--space-3);
}

.footer-link:hover::before {
  transform: translateX(3px);
}

/* Footer Contact */
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.60);
  line-height: var(--leading-snug);
}

.footer-contact-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  background: rgba(212,160,23,0.12);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
}

.footer-contact-text strong {
  display: block;
  color: var(--white);
  font-weight: 500;
  margin-bottom: 2px;
}

/* Footer Bottom */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: var(--space-5) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.footer-copyright {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.40);
}

.footer-copyright strong {
  color: rgba(255,255,255,0.65);
  font-weight: 600;
}

.footer-bottom-links {
  display: flex;
  gap: var(--space-5);
}

.footer-bottom-link {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.40);
  transition: color var(--transition-fast);
}

.footer-bottom-link:hover { color: var(--gold-300); }

/* ── ░░░ SCROLL TO TOP ░░░ ────────────────────────────────── */
#scroll-top {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 900;
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  color: var(--blue-900);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 16px rgba(212,160,23,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(16px) scale(0.85);
  pointer-events: none;
  transition: opacity var(--transition-base),
              transform var(--transition-spring),
              box-shadow var(--transition-fast);
  cursor: pointer;
  border: none;
}

#scroll-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

#scroll-top:hover {
  box-shadow: 0 6px 24px rgba(212,160,23,0.50);
  transform: translateY(-2px) scale(1.05);
}

#scroll-top svg {
  width: 18px; height: 18px;
  stroke: var(--blue-900);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── ░░░ ANIMATIONS ░░░ ───────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── ░░░ RESPONSIVE ░░░ ───────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

@media (max-width: 768px) {
  :root {
    --nav-height: 68px;
  }

  .nav-links,
  .nav-cta {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .hero-stats-inner {
    flex-wrap: wrap;
  }

  .hero-stat {
    min-width: 50%;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }

  .hero-stat:nth-child(even) { border-right: none; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    justify-content: center;
  }
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  #navbar, #scroll-top { display: none !important; }
  #hero { min-height: auto; padding: var(--space-8) 0; }
}


/* ============================================================
   PHASE 2 — HERO UPGRADES
   Parallax · Shapes · Animations · Glow Buttons · Scroll Indicator
   ============================================================ */

/* ── Page Load Fade ─────────────────────────────────────────
   Body starts invisible; .page-ready class fades it in via JS
──────────────────────────────────────────────────────────── */
body {
  opacity: 0;
  transition: opacity 0.55s ease;
}
body.page-ready {
  opacity: 1;
}

/* ── Parallax Background ─────────────────────────────────── */
.hero-parallax {
  position: absolute;
  inset: -15%;          /* extra height for parallax travel room */
  z-index: 0;
  overflow: hidden;
  will-change: transform;
}

.hero-parallax-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform-origin: center center;
  will-change: transform;
  /* Subtle Ken Burns on load */
  animation: kenBurns 20s ease-in-out infinite alternate;
}

@keyframes kenBurns {
  0%   { transform: scale(1.0) translateY(0); }
  100% { transform: scale(1.08) translateY(-2%); }
}

/* ── Dark Gradient Overlay ───────────────────────────────── */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(10,22,40,0.55)   0%,
      rgba(10,22,40,0.40)  35%,
      rgba(10,22,40,0.65)  70%,
      rgba(10,22,40,0.92) 100%
    ),
    radial-gradient(
      ellipse 90% 70% at 50% 40%,
      rgba(22,54,114,0.40) 0%,
      transparent 70%
    );
}

/* ── Grid Pattern (re-declared for Phase 2 hero structure) ── */
#hero .hero-bg-pattern {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(rgba(212,160,23,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,160,23,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%);
  pointer-events: none;
}

/* ── Decorative Floating Shapes ─────────────────────────── */
.hero-shapes {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.hero-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: shapeReveal 1s ease forwards, shapeFloat var(--float-dur, 7s) ease-in-out infinite var(--float-delay, 0s);
}

/* Ring shapes */
.hero-shape-1 {
  width: 320px; height: 320px;
  top: 8%; right: 6%;
  border: 1.5px solid rgba(212,160,23,0.18);
  background: transparent;
  --float-dur: 9s; --float-delay: 0s;
  animation-delay: 0.3s, 0.3s;
}

.hero-shape-2 {
  width: 180px; height: 180px;
  top: 12%; right: 10%;
  border: 1px solid rgba(212,160,23,0.12);
  background: transparent;
  --float-dur: 7s; --float-delay: 1s;
  animation-delay: 0.5s, 0.5s;
}

.hero-shape-3 {
  width: 500px; height: 500px;
  bottom: 60px; left: -120px;
  border: 1px solid rgba(29,74,158,0.20);
  background: radial-gradient(circle, rgba(29,74,158,0.07) 0%, transparent 70%);
  --float-dur: 11s; --float-delay: 0.5s;
  animation-delay: 0.2s, 0.2s;
}

/* Solid glow orbs */
.hero-shape-4 {
  width: 80px; height: 80px;
  top: 28%; right: 18%;
  background: radial-gradient(circle, rgba(212,160,23,0.20) 0%, transparent 70%);
  border-radius: 50%;
  --float-dur: 5s; --float-delay: 2s;
  animation-delay: 0.8s, 0.8s;
}

.hero-shape-5 {
  width: 140px; height: 140px;
  bottom: 130px; right: 8%;
  background: radial-gradient(circle, rgba(37,99,200,0.18) 0%, transparent 70%);
  border-radius: 50%;
  --float-dur: 8s; --float-delay: 0.3s;
  animation-delay: 0.6s, 0.6s;
}

/* Diamond shape */
.hero-shape-6 {
  width: 28px; height: 28px;
  top: 55%; left: 8%;
  background: rgba(212,160,23,0.35);
  border-radius: 4px;
  transform: rotate(45deg);
  --float-dur: 6s; --float-delay: 1.5s;
  animation-delay: 1s, 1s;
  animation-name: shapeRevealDiamond, shapeFloatDiamond;
}

@keyframes shapeReveal {
  from { opacity: 0; transform: scale(0.75); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shapeRevealDiamond {
  from { opacity: 0; transform: rotate(45deg) scale(0.5); }
  to   { opacity: 1; transform: rotate(45deg) scale(1); }
}

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

@keyframes shapeFloatDiamond {
  0%, 100% { transform: rotate(45deg) translateY(0px); }
  50%       { transform: rotate(45deg) translateY(-14px); }
}

/* ── Hero Content v2 ─────────────────────────────────────── */
.hero-content-v2 {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: calc(var(--nav-height) + var(--space-20)) var(--space-6) var(--space-24);
  max-width: 920px;
  margin-inline: auto;
}

/* Staggered entrance animation classes */
.hero-anim-1 { opacity: 0; animation: heroFadeUp 0.75s cubic-bezier(0.22,1,0.36,1) 0.20s forwards; }
.hero-anim-2 { opacity: 0; animation: heroFadeUp 0.80s cubic-bezier(0.22,1,0.36,1) 0.40s forwards; }
.hero-anim-3 { opacity: 0; animation: heroFadeUp 0.80s cubic-bezier(0.22,1,0.36,1) 0.60s forwards; }
.hero-anim-4 { opacity: 0; animation: heroFadeUp 0.75s cubic-bezier(0.22,1,0.36,1) 0.80s forwards; }
.hero-anim-5 { opacity: 0; animation: heroFadeIn 1.00s ease                         1.05s forwards; }
.hero-anim-6 { opacity: 0; animation: heroSlideUp 0.70s cubic-bezier(0.22,1,0.36,1) 1.00s forwards; }

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 0.75; }
}
@keyframes heroSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Headline word split animation ──────────────────────── */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 5.5vw, var(--text-7xl));
  font-weight: 900;
  line-height: var(--leading-tight);
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}

.hero-title-accent {
  display: block;
  background: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-500) 50%, var(--gold-300) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
  animation: shimmer 4s linear 1.5s infinite;
}

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

/* ── Button Glow Effect ──────────────────────────────────── */
.btn-glow {
  position: relative;
  overflow: hidden;
}

.btn-glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500), var(--gold-300));
  background-size: 200% 200%;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--transition-base);
  animation: rotatGrad 3s linear infinite;
}

.btn-glow:hover::before {
  opacity: 1;
}

.btn-glow-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(212,160,23,0.6);
  animation: glowPulse 2.5s ease-out 2s infinite;
}

@keyframes glowPulse {
  0%   { box-shadow: 0 0 0 0 rgba(212,160,23,0.55); }
  70%  { box-shadow: 0 0 0 18px rgba(212,160,23,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,160,23,0); }
}

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

/* Outline button shimmer on hover */
.btn-outline-anim {
  position: relative;
  overflow: hidden;
}

.btn-outline-anim::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
}

.btn-outline-anim:hover::after {
  left: 150%;
}

/* ── Scroll Down Indicator ───────────────────────────────── */
.hero-scroll-indicator {
  position: absolute;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--transition-base);
}

.hero-scroll-indicator:hover { opacity: 0.9 !important; }

.scroll-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.scroll-arrow-wrap {
  width: 30px; height: 44px;
  border: 2px solid rgba(212,160,23,0.45);
  border-radius: 15px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 7px;
  position: relative;
  overflow: hidden;
}

.scroll-arrow-wrap::after {
  content: '';
  position: absolute;
  bottom: -100%;
  left: 50%; transform: translateX(-50%);
  width: 100%; height: 100%;
  background: linear-gradient(to bottom, transparent 0%, rgba(212,160,23,0.10) 100%);
  animation: scrollFill 2s ease-in-out infinite;
}

@keyframes scrollFill {
  0%, 100% { bottom: -100%; }
  50%       { bottom: 0%; }
}

.scroll-arrow {
  width: 6px; height: 6px;
  border-right: 2px solid var(--gold-400);
  border-bottom: 2px solid var(--gold-400);
  transform: rotate(45deg);
  animation: scrollBounce 2s ease-in-out infinite;
  margin-top: 1px;
}

@keyframes scrollBounce {
  0%, 100% { opacity: 1;   transform: rotate(45deg) translateY(0); }
  50%       { opacity: 0.4; transform: rotate(45deg) translateY(8px); }
}

/* ── Navbar: enhanced scroll transition ─────────────────── */
/* (Augments Phase 1 — adds blur + border glow) */
#navbar.scrolled {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(212,160,23,0.22);
}

/* ── Responsive Phase 2 ──────────────────────────────────── */
@media (max-width: 768px) {
  .hero-shape-1,
  .hero-shape-2 { display: none; }

  .hero-shape-3 {
    width: 300px; height: 300px;
    left: -80px;
  }

  .hero-content-v2 {
    padding-top: calc(var(--nav-height) + var(--space-16));
    padding-bottom: var(--space-20);
  }

  .hero-scroll-indicator {
    bottom: 80px;
  }
}

@media (max-width: 480px) {
  .hero-shape-4,
  .hero-shape-5,
  .hero-shape-6 { opacity: 0.5; }
}


/* ============================================================
   PHASE 3 — ABOUT · ACADEMICS · FACILITIES
   ============================================================ */

/* ── Shared Section Utilities ────────────────────────────── */
.section {
  padding: var(--space-24) 0;
  position: relative;
  overflow: hidden;
}

.section-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: var(--space-4);
}

.eyebrow-line {
  display: block;
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-500));
  border-radius: var(--radius-full);
}
.eyebrow-line:last-child {
  background: linear-gradient(90deg, var(--gold-500), transparent);
}

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

.section-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-5xl));
  font-weight: 800;
  line-height: var(--leading-tight);
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  font-weight: 300;
}

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

/* ── Scroll Reveal Animations ────────────────────────────── */
.reveal-up,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1),
              transform 0.75s cubic-bezier(0.22,1,0.36,1);
  transition-delay: var(--delay, 0s);
}

.reveal-up    { transform: translateY(48px); }
.reveal-left  { transform: translateX(-56px); }
.reveal-right { transform: translateX(56px); }

.reveal-up.in-view,
.reveal-left.in-view,
.reveal-right.in-view {
  opacity: 1;
  transform: translate(0);
}

/* ── ░░░ ABOUT SECTION ░░░ ───────────────────────────────── */
.about-section {
  background: var(--color-bg);
}

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

/* Image Column */
.about-image-col {
  position: relative;
}

.about-img-frame {
  position: relative;
  padding: var(--space-5);
}

.about-img-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--gray-100);
  box-shadow: var(--shadow-xl);
}

.about-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.6s ease;
}

.about-img-wrap:hover .about-img {
  transform: scale(1.04);
}

/* fallback if image missing */
.about-img-wrap.img-placeholder {
  background: linear-gradient(135deg, var(--blue-800), var(--blue-600));
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-img-wrap.img-placeholder::after {
  content: '🏫';
  font-size: 5rem;
  opacity: 0.4;
}

.about-img-border {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  border: 2px solid rgba(212,160,23,0.25);
  pointer-events: none;
}

/* Decorative elements */
.about-chairman-tag {
  position: absolute;
  bottom: -12px;
  right: -8px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  color: var(--blue-900);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: var(--shadow-gold);
  letter-spacing: 0.03em;
}

.about-deco-dot {
  position: absolute;
  border-radius: var(--radius-full);
  background: var(--gold-400);
  opacity: 0.6;
}

.about-deco-dot-1 {
  width: 12px; height: 12px;
  top: 16px; left: 8px;
  animation: floatDot 4s ease-in-out infinite;
}

.about-deco-dot-2 {
  width: 8px; height: 8px;
  top: 40%; right: 0;
  background: var(--blue-400);
  animation: floatDot 5s ease-in-out infinite 1s;
}

.about-deco-ring {
  position: absolute;
  width: 90px; height: 90px;
  border-radius: var(--radius-full);
  border: 2px dashed rgba(212,160,23,0.25);
  bottom: 24px; left: -20px;
  animation: spinSlow 18s linear infinite;
}

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

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

/* Text Column */
.about-text-col {}

.about-lead {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--gray-700);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.about-body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
}

/* Stats row */
.about-stats-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--blue-50);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--gold-500);
  margin-bottom: var(--space-6);
}

.about-stat-item {
  text-align: center;
  flex: 1;
}

.about-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--blue-700);
  line-height: 1;
}

.about-stat-lbl {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 500;
  margin-top: 4px;
  letter-spacing: 0.04em;
}

.about-stat-divider {
  width: 1px;
  height: 40px;
  background: var(--color-border);
  flex-shrink: 0;
}

/* Values pills */
.about-values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.value-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-700);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.value-pill:hover {
  border-color: var(--gold-400);
  background: var(--gold-50);
  color: var(--gold-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ── ░░░ ACADEMICS SECTION ░░░ ───────────────────────────── */
.academics-section {
  background: var(--blue-900);
  position: relative;
}

.academics-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(212,160,23,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,160,23,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.academics-section .section-title { color: var(--white); }
.academics-section .section-subtitle { color: rgba(255,255,255,0.55); }

/* Medium Tabs */
.medium-tabs {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-12);
  flex-wrap: wrap;
}

.medium-tab {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.60);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
  transition: all var(--transition-base);
  letter-spacing: 0.03em;
}

.medium-tab:hover {
  color: var(--white);
  background: rgba(255,255,255,0.12);
}

.medium-tab.active {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  color: var(--blue-900);
  border-color: transparent;
  box-shadow: var(--shadow-gold);
}

/* Academics Grid */
.academics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

/* Academic Card */
.acad-card {
  position: relative;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  cursor: default;
  overflow: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  transform-style: preserve-3d;
  will-change: transform;
}

.acad-card:hover {
  border-color: rgba(212,160,23,0.30);
  box-shadow: 0 20px 48px rgba(0,0,0,0.40);
}

.acad-card-highlight {
  background: rgba(212,160,23,0.06);
  border-color: rgba(212,160,23,0.18);
}

/* Hidden by medium filter */
.acad-card.hidden-medium {
  display: none;
}

.acad-card-inner {
  position: relative;
  z-index: 2;
  transform: translateZ(20px);
}

.acad-card-icon {
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: var(--space-3);
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
  transition: transform var(--transition-spring);
}

.acad-card:hover .acad-card-icon {
  transform: scale(1.15) translateY(-4px);
}

.acad-card-badge {
  display: inline-block;
  padding: 3px var(--space-3);
  background: rgba(37,99,200,0.30);
  border: 1px solid rgba(74,128,224,0.35);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  color: var(--blue-300);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.badge-gold {
  background: rgba(212,160,23,0.18);
  border-color: rgba(212,160,23,0.35);
  color: var(--gold-300);
}

.acad-card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}

.acad-card-desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.acad-card-metas {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.acad-card-metas li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.50);
  font-weight: 500;
}

.meta-dot {
  width: 5px; height: 5px;
  background: var(--gold-400);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* 3D tilt shine overlay */
.tilt-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255,255,255,0.08) 0%,
    transparent 60%
  );
  z-index: 1;
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}

.acad-card:hover .tilt-shine {
  opacity: 1;
}

/* ── ░░░ FACILITIES SECTION ░░░ ──────────────────────────── */
.facilities-section {
  background: var(--gray-50);
  position: relative;
}

.facilities-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-300), transparent);
}

/* Facilities Grid */
.facilities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

/* Glassmorphism Card */
.glass-card {
  position: relative;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.90);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  box-shadow:
    0 4px 24px rgba(10,22,40,0.07),
    inset 0 1px 0 rgba(255,255,255,0.8);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base);
  overflow: hidden;
  cursor: default;
}

/* Hover lift */
.glass-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow:
    0 24px 48px rgba(10,22,40,0.14),
    0 4px 12px rgba(10,22,40,0.06),
    inset 0 1px 0 rgba(255,255,255,0.9);
  border-color: rgba(212,160,23,0.35);
  background: rgba(255,255,255,0.92);
}

/* Glass card shimmer on hover */
.glass-card::after {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 40%; height: 200%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,0.45) 50%,
    transparent 70%
  );
  transform: skewX(-15deg);
  transition: left 0.55s ease;
  pointer-events: none;
}

.glass-card:hover::after {
  left: 130%;
}

/* Gold top accent line */
.glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-300), var(--gold-400));
  border-radius: var(--radius-full) var(--radius-full) 0 0;
  opacity: 0;
  transition: opacity var(--transition-base);
}

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

.fac-icon-wrap {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, var(--blue-50), var(--blue-100));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  border: 1px solid var(--blue-100);
  transition: all var(--transition-base);
}

.glass-card:hover .fac-icon-wrap {
  background: linear-gradient(135deg, var(--gold-50), var(--gold-100));
  border-color: var(--gold-300);
  transform: scale(1.1) rotate(-4deg);
}

.fac-icon {
  font-size: 1.75rem;
  line-height: 1;
  display: block;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.15));
}

.fac-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-2);
  transition: color var(--transition-fast);
}

.glass-card:hover .fac-title {
  color: var(--blue-700);
}

.fac-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* ── Responsive Phase 3 ──────────────────────────────────── */
@media (max-width: 1200px) {
  .academics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .facilities-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
  .about-image-col {
    max-width: 420px;
    margin-inline: auto;
  }
  .about-img-wrap {
    aspect-ratio: 3/2;
  }
  .academics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .facilities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .section { padding: var(--space-16) 0; }
  .section-header { margin-bottom: var(--space-10); }
  .academics-grid {
    grid-template-columns: 1fr;
  }
  .facilities-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  .about-stats-row {
    flex-wrap: wrap;
    gap: var(--space-4);
  }
  .about-stat-divider { display: none; }
  .medium-tabs { gap: var(--space-2); }
  .medium-tab { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); }
}

@media (max-width: 420px) {
  .facilities-grid {
    grid-template-columns: 1fr;
  }
  .glass-card { text-align: left; display: flex; align-items: flex-start; gap: var(--space-4); }
  .fac-icon-wrap { flex-shrink: 0; margin: 0; }
}

/* ============================================================
   PHASE 4 — ADMISSIONS HIGHLIGHT · ACHIEVEMENTS · CHAIRMAN
   ============================================================ */

/* ── ░░░ ADMISSION HIGHLIGHT SECTION ░░░ ─────────────────── */
.admission-section{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden;background:var(--blue-900);padding:var(--space-24) 0}
.adm-bg{position:absolute;inset:0;z-index:0}
.adm-bg-img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:.22;transform:scale(1.04);animation:admBgBreath 10s ease-in-out infinite alternate}
@keyframes admBgBreath{from{transform:scale(1.04)}to{transform:scale(1.10)}}
.adm-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(10,22,40,.90) 0%,rgba(15,35,71,.82) 50%,rgba(10,22,40,.92) 100%)}
.adm-overlay-radial{position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(212,160,23,.06) 0%,transparent 70%);animation:radialPulse 5s ease-in-out infinite}
@keyframes radialPulse{0%,100%{opacity:.6}50%{opacity:1}}

.adm-particles{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.adm-particle{position:absolute;border-radius:50%;opacity:0;animation:particleRise var(--dur,8s) ease-in-out infinite var(--dly,0s)}
.adm-p1{width:4px;height:4px;background:var(--gold-400);bottom:10%;left:12%;--dur:7s;--dly:0s}
.adm-p2{width:6px;height:6px;background:var(--blue-300);bottom:20%;left:30%;--dur:9s;--dly:1.5s}
.adm-p3{width:3px;height:3px;background:var(--gold-300);bottom:5%;left:55%;--dur:6s;--dly:.8s}
.adm-p4{width:5px;height:5px;background:var(--white);bottom:15%;left:72%;--dur:10s;--dly:2.2s}
.adm-p5{width:4px;height:4px;background:var(--gold-400);bottom:8%;left:85%;--dur:8s;--dly:1s}
.adm-p6{width:7px;height:7px;background:var(--blue-400);bottom:25%;left:92%;--dur:11s;--dly:3s}
@keyframes particleRise{0%{opacity:0;transform:translateY(0) scale(.5)}10%{opacity:.7}90%{opacity:.4}100%{opacity:0;transform:translateY(-400px) scale(1.2)}}

.adm-rings{position:absolute;inset:0;z-index:3;pointer-events:none}
.adm-ring{position:absolute;border-radius:50%;border:1px solid rgba(212,160,23,.12);animation:ringExpand var(--ring-dur,6s) ease-out infinite var(--ring-dly,0s)}
.adm-ring-1{width:200px;height:200px;top:50%;left:8%;--ring-dur:8s;--ring-dly:0s;transform:translate(-50%,-50%)}
.adm-ring-2{width:300px;height:300px;top:50%;right:5%;--ring-dur:10s;--ring-dly:2s;transform:translate(50%,-50%)}
.adm-ring-3{width:140px;height:140px;bottom:10%;left:50%;--ring-dur:7s;--ring-dly:1s;transform:translateX(-50%)}
@keyframes ringExpand{0%{opacity:.6;transform:scale(.8)}100%{opacity:0;transform:scale(2.2)}}

.adm-content{position:relative;z-index:5;text-align:center;max-width:760px;margin-inline:auto}
.adm-eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:rgba(212,160,23,.12);border:1px solid rgba(212,160,23,.30);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:700;color:var(--gold-300);letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--space-6)}
.adm-live-dot{width:7px;height:7px;border-radius:50%;background:var(--gold-400);box-shadow:0 0 8px var(--gold-400);animation:liveBlink 1.4s ease-in-out infinite}
@keyframes liveBlink{0%,100%{opacity:1;box-shadow:0 0 8px var(--gold-400)}50%{opacity:.4;box-shadow:0 0 2px var(--gold-400)}}

.adm-title{font-family:var(--font-display);font-size:clamp(var(--text-3xl),5.5vw,4rem);font-weight:900;color:var(--white);line-height:var(--leading-tight);letter-spacing:-.02em;margin-bottom:var(--space-4)}
.adm-year{display:block;background:linear-gradient(135deg,var(--gold-300),var(--gold-500),var(--gold-300));background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 3.5s linear infinite}
.adm-subtitle{font-size:var(--text-lg);color:rgba(255,255,255,.65);line-height:var(--leading-relaxed);font-weight:300;max-width:560px;margin-inline:auto;margin-bottom:var(--space-7)}

.adm-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-8)}
.adm-chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-full);font-size:var(--text-sm);color:rgba(255,255,255,.80);font-weight:500;transition:all var(--transition-fast)}
.adm-chip svg{color:var(--gold-400);flex-shrink:0}
.adm-chip:hover{background:rgba(212,160,23,.12);border-color:rgba(212,160,23,.35);color:var(--white)}

.adm-actions{display:flex;align-items:center;justify-content:center;gap:var(--space-4);flex-wrap:wrap}
.adm-btn-primary{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-10);background:linear-gradient(135deg,var(--gold-500),var(--gold-400),var(--gold-500));background-size:200% auto;color:var(--blue-900);font-family:var(--font-body);font-size:var(--text-base);font-weight:700;border-radius:var(--radius-full);border:none;cursor:pointer;overflow:hidden;text-decoration:none;animation:btnGlowIdle 2.8s ease-in-out infinite 1s;transition:transform var(--transition-fast),filter var(--transition-fast),background-position .4s ease;box-shadow:var(--shadow-gold)}
.adm-btn-primary:hover{transform:translateY(-3px) scale(1.03);background-position:right center;filter:brightness(1.08);box-shadow:0 8px 32px rgba(212,160,23,.55)}
@keyframes btnGlowIdle{0%,100%{box-shadow:0 4px 20px rgba(212,160,23,.30),0 0 0 0 rgba(212,160,23,.30)}50%{box-shadow:0 4px 20px rgba(212,160,23,.50),0 0 0 14px rgba(212,160,23,0)}}
.adm-btn-glow-ring{position:absolute;inset:0;border-radius:inherit;pointer-events:none;animation:admRingPulse 2.8s ease-out 1s infinite}
@keyframes admRingPulse{0%{box-shadow:0 0 0 0 rgba(212,160,23,.55)}70%{box-shadow:0 0 0 22px rgba(212,160,23,0)}100%{box-shadow:0 0 0 0 rgba(212,160,23,0)}}
.adm-btn-outline{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-8);background:transparent;color:var(--white);font-family:var(--font-body);font-size:var(--text-base);font-weight:600;border-radius:var(--radius-full);border:2px solid rgba(255,255,255,.35);text-decoration:none;transition:all var(--transition-base)}
.adm-btn-outline:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.65);transform:translateY(-2px)}

/* ── ░░░ ACHIEVEMENTS SECTION ░░░ ───────────────────────── */
.achievements-section{background:linear-gradient(160deg,var(--blue-900) 0%,var(--blue-800) 60%,var(--blue-900) 100%);position:relative;overflow:hidden}
.ach-blob{position:absolute;border-radius:50%;pointer-events:none;filter:blur(80px)}
.ach-blob-1{width:500px;height:500px;top:-100px;left:-150px;background:radial-gradient(circle,rgba(29,74,158,.35) 0%,transparent 70%);animation:blobDrift 12s ease-in-out infinite}
.ach-blob-2{width:400px;height:400px;bottom:-80px;right:-100px;background:radial-gradient(circle,rgba(212,160,23,.12) 0%,transparent 70%);animation:blobDrift 15s ease-in-out infinite reverse 2s}
@keyframes blobDrift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-20px) scale(1.05)}66%{transform:translate(-20px,15px) scale(.96)}}

.achievements-section .section-title{color:var(--white)}
.achievements-section .section-subtitle{color:rgba(255,255,255,.55)}

.ach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);position:relative;z-index:2}

.ach-card{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius-xl);padding:var(--space-8) var(--space-6);text-align:center;overflow:hidden;transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base),background var(--transition-base)}
.ach-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold-400),transparent);opacity:0;transition:opacity var(--transition-base)}
.ach-card:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(0,0,0,.40);border-color:rgba(212,160,23,.25);background:rgba(255,255,255,.08)}
.ach-card:hover::before{opacity:1}

.ach-icon-ring{font-size:2.4rem;width:72px;height:72px;background:rgba(255,255,255,.06);border:1px solid rgba(212,160,23,.20);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-5);transition:all var(--transition-base)}
.ach-card:hover .ach-icon-ring{background:rgba(212,160,23,.12);border-color:rgba(212,160,23,.45);transform:scale(1.1) rotate(-6deg)}

.ach-number-wrap{margin-bottom:var(--space-2);line-height:1}
.ach-number{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,3.75rem);font-weight:900;background:linear-gradient(135deg,var(--gold-300),var(--gold-500));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em;display:inline-block}
.ach-label{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;color:var(--white);margin-bottom:var(--space-3)}
.ach-desc{font-size:var(--text-sm);color:rgba(255,255,255,.50);line-height:var(--leading-relaxed);margin-bottom:var(--space-5)}
.ach-progress-bar{height:4px;background:rgba(255,255,255,.08);border-radius:var(--radius-full);overflow:hidden}
.ach-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold-500),var(--gold-300));border-radius:var(--radius-full);transition:width 1.6s cubic-bezier(.22,1,.36,1)}

/* ── ░░░ CHAIRMAN MESSAGE SECTION ░░░ ───────────────────── */
.chairman-section{background:var(--color-bg);border-top:1px solid var(--color-border)}
.chairman-layout{display:grid;grid-template-columns:340px 1fr;gap:var(--space-16);align-items:flex-start}

.chairman-card{background:var(--white);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-lg);position:relative}
.chairman-img-wrap{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:3/4;background:var(--gray-100);margin-bottom:var(--space-5)}
.chairman-img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .6s ease}
.chairman-card:hover .chairman-img{transform:scale(1.04)}
.chairman-img-wrap.chairman-img-fallback{background:linear-gradient(160deg,var(--blue-700),var(--blue-900));display:flex;align-items:center;justify-content:center}
.chairman-img-wrap.chairman-img-fallback::after{content:'👤';font-size:5rem;opacity:.3}

.frame-corner{position:absolute;width:18px;height:18px;border-color:var(--gold-400);border-style:solid;border-radius:2px;z-index:2}
.fc-tl{top:var(--space-5);left:var(--space-5);border-width:2px 0 0 2px}
.fc-tr{top:var(--space-5);right:var(--space-5);border-width:2px 2px 0 0}
.fc-bl{bottom:calc(var(--space-5) + 82px);left:var(--space-5);border-width:0 0 2px 2px}
.fc-br{bottom:calc(var(--space-5) + 82px);right:var(--space-5);border-width:0 2px 2px 0}

.chairman-name-card{text-align:center;display:flex;flex-direction:column;gap:4px}
.ch-name{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;color:var(--gray-900);display:block}
.ch-role{font-size:var(--text-sm);font-weight:600;color:var(--gold-600);display:block}
.ch-school{font-size:var(--text-xs);color:var(--color-text-muted);display:block}

.chairman-sig{margin-top:var(--space-5);padding:var(--space-4) var(--space-5);background:var(--blue-50);border-radius:var(--radius-lg);border-left:3px solid var(--gold-500)}
.ch-sig-quote{font-family:var(--font-display);font-size:var(--text-sm);font-style:italic;color:var(--gray-700);line-height:var(--leading-relaxed);margin:0}

.ch-msg-header{display:flex;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-6);padding-bottom:var(--space-6);border-bottom:1px solid var(--color-border)}
.ch-msg-icon{width:44px;height:44px;flex-shrink:0;background:linear-gradient(135deg,var(--blue-700),var(--blue-600));color:var(--white);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center}
.ch-msg-greeting{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;color:var(--gray-900);line-height:var(--leading-snug)}

.ch-msg-body{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-7)}
.ch-msg-body p{font-size:var(--text-base);color:var(--color-text-muted);line-height:var(--leading-relaxed)}
.ch-msg-body strong{color:var(--gray-900);font-weight:600}

.ch-highlights{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-8)}
.ch-highlight-item{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--gray-50);border-radius:var(--radius-lg);border:1px solid var(--color-border);transition:all var(--transition-fast)}
.ch-highlight-item:hover{border-color:var(--gold-300);background:var(--gold-50);transform:translateX(4px)}
.ch-highlight-icon{font-size:1.5rem;flex-shrink:0;line-height:1.2}
.ch-highlight-item strong{display:block;font-size:var(--text-base);color:var(--gray-900);font-weight:700;margin-bottom:4px}
.ch-highlight-item p{margin:0;font-size:var(--text-sm);color:var(--color-text-muted);line-height:var(--leading-relaxed)}

.ch-sign-off{display:flex;flex-direction:column;gap:3px;padding-top:var(--space-5);border-top:1px solid var(--color-border)}
.ch-warm{font-size:var(--text-sm);color:var(--color-text-muted);font-style:italic}
.ch-sign-name{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;color:var(--blue-800)}
.ch-sign-school{font-size:var(--text-sm);color:var(--gold-600);font-weight:600}

/* ── Phase 4 Responsive ─────────────────────────────────── */
@media(max-width:1024px){
  .ach-grid{grid-template-columns:repeat(2,1fr)}
  .chairman-layout{grid-template-columns:280px 1fr;gap:var(--space-10)}
}
@media(max-width:768px){
  .admission-section{padding:var(--space-16) 0;min-height:auto}
  .adm-title{font-size:var(--text-3xl)}
  .adm-actions{flex-direction:column;align-items:stretch}
  .adm-btn-primary,.adm-btn-outline{justify-content:center;padding:var(--space-4) var(--space-6)}
  .ach-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
  .chairman-layout{grid-template-columns:1fr;gap:var(--space-10)}
  .chairman-photo-col{max-width:320px;margin-inline:auto}
  .chairman-img-wrap{aspect-ratio:3/3}
}
@media(max-width:520px){
  .ach-grid{grid-template-columns:1fr}
  .adm-chip{font-size:var(--text-xs);padding:6px var(--space-3)}
}


/* ============================================================
   PHASE 5 (FINAL) — GALLERY · LIGHTBOX · CONTACT · FOOTER+
   ============================================================ */

/* ── ░░░ GALLERY SECTION ░░░ ─────────────────────────────── */
.gallery-section{background:var(--gray-50);position:relative}
.gallery-section::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--color-border),transparent)}

.gallery-filter{display:flex;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-12);flex-wrap:wrap}
.gal-filter-btn{padding:var(--space-2) var(--space-5);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);background:var(--white);border:1px solid var(--color-border);cursor:pointer;transition:all var(--transition-base);letter-spacing:.02em;font-family:var(--font-body)}
.gal-filter-btn:hover{color:var(--blue-700);border-color:var(--blue-300);background:var(--blue-50)}
.gal-filter-btn.active{background:linear-gradient(135deg,var(--blue-700),var(--blue-600));color:var(--white);border-color:transparent;box-shadow:var(--shadow-md)}

.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:var(--space-3)}
.gal-item{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--gray-200)}
.gal-item-wide{grid-column:span 2}
.gal-item.hidden-gallery{display:none}
.gal-btn{display:block;width:100%;height:100%;padding:0;border:none;background:none;cursor:pointer;position:relative}
.gal-btn img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.25,.46,.45,.94)}
.gal-item:hover .gal-btn img{transform:scale(1.10)}

.gal-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,22,40,.80) 0%,rgba(10,22,40,.20) 50%,transparent 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);opacity:0;transition:opacity var(--transition-base);color:var(--white)}
.gal-overlay svg{width:36px;height:36px;stroke:var(--gold-300);transform:scale(.8) translateY(8px);transition:transform var(--transition-spring)}
.gal-overlay span{font-size:var(--text-sm);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--white);opacity:0;transform:translateY(8px);transition:opacity var(--transition-base),transform var(--transition-base)}
.gal-item:hover .gal-overlay{opacity:1}
.gal-item:hover .gal-overlay svg{transform:scale(1) translateY(0)}
.gal-item:hover .gal-overlay span{opacity:1;transform:translateY(0);transition-delay:.05s}

/* ── ░░░ LIGHTBOX ░░░ ────────────────────────────────────── */
.lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;animation:lbFadeIn .3s ease forwards}
@keyframes lbFadeIn{from{opacity:0}to{opacity:1}}

.lightbox-container{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;max-width:90vw;max-height:90vh;animation:lbScaleIn .35s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes lbScaleIn{from{opacity:0;transform:scale(.88) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}

.lightbox-close{position:fixed;top:var(--space-5);right:var(--space-5);width:44px;height:44px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);border-radius:var(--radius-full);color:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);z-index:3}
.lightbox-close:hover{background:rgba(255,255,255,.22);transform:rotate(90deg)}

.lightbox-prev,.lightbox-next{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);border-radius:var(--radius-full);color:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);z-index:3}
.lightbox-prev{left:var(--space-5)}
.lightbox-next{right:var(--space-5)}
.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,.22);border-color:rgba(212,160,23,.50)}

.lightbox-img-wrap{position:relative;max-width:88vw;max-height:78vh;border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.80);background:var(--gray-900)}
.lightbox-img{display:block;max-width:88vw;max-height:78vh;object-fit:contain;border-radius:var(--radius-xl);transition:opacity .25s ease}
.lightbox-img.loading{opacity:0}

.lightbox-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--gold-400);border-radius:50%;animation:lbSpin .8s linear infinite;opacity:0;transition:opacity .2s ease}
.lightbox-loader.visible{opacity:1}
@keyframes lbSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.lightbox-caption{margin-top:var(--space-4);font-family:var(--font-body);font-size:var(--text-sm);color:rgba(255,255,255,.75);font-weight:500;letter-spacing:.04em;text-align:center}
.lightbox-counter{font-size:var(--text-xs);color:rgba(255,255,255,.40);margin-top:var(--space-2);letter-spacing:.08em}

/* ── ░░░ CONTACT SECTION ░░░ ─────────────────────────────── */
.contact-section{background:var(--white)}

.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--space-16);align-items:flex-start}

/* Info card */
.contact-info-card{background:var(--gray-50);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);margin-bottom:var(--space-5)}

.contact-item{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border)}
.contact-item:last-child{border-bottom:none;padding-bottom:0}

.contact-icon-wrap{width:42px;height:42px;flex-shrink:0;background:linear-gradient(135deg,var(--blue-700),var(--blue-600));color:var(--white);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-top:2px}

.contact-item-body{display:flex;flex-direction:column;gap:4px}
.contact-item-body strong{font-size:var(--text-sm);font-weight:700;color:var(--gray-900);display:block}
.contact-item-body span,.contact-item-body a{font-size:var(--text-sm);color:var(--color-text-muted);line-height:var(--leading-relaxed)}
.contact-item-body a{color:var(--blue-600);text-decoration:none;transition:color var(--transition-fast)}
.contact-item-body a:hover{color:var(--gold-600)}

.contact-map{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--color-border)}

/* Contact form */
.contact-form-col{}

.contact-form{background:var(--white);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-10);box-shadow:var(--shadow-lg)}

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

.form-group{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-5)}
.form-group:last-of-type{margin-bottom:0}

.form-label{font-size:var(--text-sm);font-weight:600;color:var(--gray-700);letter-spacing:.02em}
.form-label span{color:var(--color-accent)}

.form-input-wrap{position:relative}

.form-icon{position:absolute;left:var(--space-4);top:50%;transform:translateY(-50%);color:var(--gray-300);pointer-events:none;transition:color var(--transition-fast);z-index:1}
.form-textarea ~ .form-icon,
.form-input-wrap:has(.form-textarea) .form-icon{top:var(--space-4);transform:none}

.form-input{width:100%;padding:var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4)*2 + 16px);font-family:var(--font-body);font-size:var(--text-base);color:var(--gray-900);background:var(--white);border:1.5px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);outline:none;-webkit-appearance:none;appearance:none}
.form-input::placeholder{color:var(--gray-300)}
.form-input:focus{border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(37,99,200,.12)}
.form-input:focus + .form-focus-line{width:100%}
.form-input.error{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.10)}

.form-textarea{min-height:140px;resize:vertical;padding-top:var(--space-4);padding-left:var(--space-4)}

.form-select{cursor:pointer}
.form-select-wrap::after{content:'';position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);width:10px;height:10px;border-right:2px solid var(--gray-300);border-bottom:2px solid var(--gray-300);transform:translateY(-65%) rotate(45deg);pointer-events:none}

/* Animated underline focus */
.form-focus-line{position:absolute;bottom:0;left:50%;width:0;height:2px;background:linear-gradient(90deg,var(--blue-500),var(--gold-400));border-radius:var(--radius-full);transition:width .35s ease,left .35s ease;transform:translateX(-50%)}
.form-input:focus ~ .form-focus-line{width:100%;left:50%}

.form-error{font-size:var(--text-xs);color:#ef4444;font-weight:500;min-height:16px;display:block}

/* Submit button */
.form-submit-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-4) var(--space-8);background:linear-gradient(135deg,var(--blue-700),var(--blue-600));color:var(--white);font-family:var(--font-body);font-size:var(--text-base);font-weight:700;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);margin-top:var(--space-6);position:relative;overflow:hidden}
.form-submit-btn:hover{background:linear-gradient(135deg,var(--blue-600),var(--blue-500));transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.form-submit-btn:active{transform:translateY(0)}
.form-submit-btn.loading .submit-text{opacity:0}
.form-submit-btn.loading .submit-loader{opacity:1}

.submit-loader{position:absolute;width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--white);border-radius:50%;opacity:0;animation:spinL .7s linear infinite;transition:opacity .2s}
@keyframes spinL{to{transform:rotate(360deg)}}

.form-success{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4);padding:var(--space-4);background:#f0fdf4;border:1px solid #86efac;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;color:#15803d;animation:fadeInUp .4s ease}
.form-success[hidden]{display:none}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── ░░░ FOOTER ENHANCED ░░░ ─────────────────────────────── */
footer{background:var(--blue-900)}

.footer-top{padding:var(--space-20) 0 var(--space-16);border-bottom:1px solid rgba(255,255,255,.08)}

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

.footer-logo{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5)}
.footer-logo img{filter:brightness(0) invert(1);opacity:.9}
.footer-logo-text{display:flex;flex-direction:column}
.footer-school-name{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;color:var(--white);line-height:1.1}
.footer-school-sub{font-size:var(--text-xs);color:rgba(255,255,255,.55);font-weight:400;letter-spacing:.04em}

.footer-description{font-size:var(--text-sm);color:rgba(255,255,255,.55);line-height:var(--leading-relaxed);margin-bottom:var(--space-5)}

.footer-iso{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:rgba(212,160,23,.12);border:1px solid rgba(212,160,23,.25);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;color:var(--gold-300);letter-spacing:.04em;margin-bottom:var(--space-5)}

/* Social Icons */
.footer-social{display:flex;gap:var(--space-2)}
.social-btn{width:38px;height:38px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.65);text-decoration:none;transition:all var(--transition-base)}
.social-btn:hover{background:rgba(212,160,23,.18);border-color:rgba(212,160,23,.40);color:var(--gold-300);transform:translateY(-3px)}

/* Footer columns */
.footer-col-title{font-family:var(--font-display);font-size:var(--text-base);font-weight:700;color:var(--white);margin-bottom:var(--space-5);padding-bottom:var(--space-3);border-bottom:1px solid rgba(255,255,255,.08);position:relative}
.footer-col-title::after{content:'';position:absolute;bottom:-1px;left:0;width:32px;height:2px;background:var(--gold-500);border-radius:var(--radius-full)}

.footer-links{display:flex;flex-direction:column;gap:var(--space-2)}
.footer-link{font-size:var(--text-sm);color:rgba(255,255,255,.55);text-decoration:none;transition:all var(--transition-fast);display:flex;align-items:center;gap:var(--space-2);padding:3px 0}
.footer-link::before{content:'';width:4px;height:4px;background:var(--gold-400);border-radius:50%;flex-shrink:0;opacity:0;transition:opacity var(--transition-fast),transform var(--transition-fast);transform:translateX(-4px)}
.footer-link:hover{color:var(--gold-300);padding-left:var(--space-2)}
.footer-link:hover::before{opacity:1;transform:translateX(0)}

/* Footer contact */
.footer-contact-item{display:flex;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-4)}
.footer-contact-icon{font-size:1rem;flex-shrink:0;margin-top:2px}
.footer-contact-text{display:flex;flex-direction:column;gap:2px}
.footer-contact-text strong{font-size:var(--text-xs);font-weight:700;color:rgba(255,255,255,.80);letter-spacing:.04em;text-transform:uppercase}
.footer-contact-text span,.footer-contact-text a{font-size:var(--text-sm);color:rgba(255,255,255,.55);text-decoration:none;line-height:var(--leading-relaxed);transition:color var(--transition-fast)}
.footer-contact-text a:hover{color:var(--gold-300)}

/* Footer bottom bar */
.footer-bottom{padding:var(--space-5) 0;background:rgba(0,0,0,.25)}
.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.footer-copyright{font-size:var(--text-sm);color:rgba(255,255,255,.40)}
.footer-copyright strong{color:rgba(255,255,255,.65);font-weight:600}
.footer-bottom-links{display:flex;gap:var(--space-5);align-items:center}
.footer-bottom-link{font-size:var(--text-xs);color:rgba(255,255,255,.35);text-decoration:none;transition:color var(--transition-fast);letter-spacing:.03em}
.footer-bottom-link:hover{color:var(--gold-300)}

/* ── ░░░ SCROLL TO TOP (ENHANCED) ░░░ ───────────────────── */
#scroll-top{position:fixed;bottom:var(--space-8);right:var(--space-8);width:48px;height:48px;background:linear-gradient(135deg,var(--gold-500),var(--gold-400));color:var(--blue-900);border:none;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(16px) scale(0.9);transition:all .35s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px 20px rgba(212,160,23,.40);z-index:500}
#scroll-top svg{width:20px;height:20px;stroke-width:2.5}
#scroll-top.visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
#scroll-top:hover{transform:translateY(-4px) scale(1.08);box-shadow:0 8px 28px rgba(212,160,23,.55)}
#scroll-top:active{transform:translateY(-2px) scale(1.02)}

/* ── Phase 5 Responsive ─────────────────────────────────── */
@media(max-width:1200px){
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-8)}
}

@media(max-width:900px){
  .contact-grid{grid-template-columns:1fr;gap:var(--space-10)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gal-item-wide{grid-column:span 2}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-8)}
}

@media(max-width:640px){
  .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .gal-item-wide{grid-column:span 2}
  .contact-form{padding:var(--space-6)}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:var(--space-8)}
  .footer-bottom-inner{flex-direction:column;text-align:center}
  .footer-bottom-links{justify-content:center}
  .lightbox-prev{left:var(--space-3)}
  .lightbox-next{right:var(--space-3)}
  #scroll-top{bottom:var(--space-5);right:var(--space-5);width:44px;height:44px}
}

@media(max-width:420px){
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:200px}
  .gal-item-wide{grid-column:span 1}
}

/* ── 3D Tilt Card (Academics) ───────────────────────────── */
.tilt-card{transform-style:preserve-3d;will-change:transform;transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow var(--transition-base),border-color var(--transition-base)}