/* ═══════════════════════════════════════════
   S.S. Jaygovinda World School – Theme v4
   Teal + Gold  |  Plus Jakarta Sans
   ═══════════════════════════════════════════ */

/* ─── 1. TOKENS ─── */
:root {
  --T:   #0e3a2f;
  --T1:  #15493c;
  --T2:  #1f5d4b;
  --M:   #8fd3b6;
  --MS:  #e1f1ea;
  --G:   #f4b73f;
  --GD:  #d99a1f;
  --GS:  #fdf6e3;
  --PG:  #f2f6f3;
  --INK: #16271f;
  --MUT: #6b7e75;
  --LN:  #dde8e2;
  --SH:  0 20px 56px -28px rgba(14,58,47,.36);
  --SHS: 0 6px 24px -8px  rgba(14,58,47,.16);
}

/* ─── 2. BASE RESET ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--PG);
  color: var(--INK);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
h1, h2, h3, h4, h5 { font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
button { font-family: inherit; }

/* ─── 3. UTILITIES ─── */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 28px;
}
.eyebrow {
  color: var(--GD);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  display: inline-block;
}
.sec-tag { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sec-tag-line { width: 32px; height: 3px; border-radius: 2px; background: var(--G); }
.sec-head-center { text-align: center; max-width: 580px; margin: 0 auto 52px; }
.sec-head-center h2 { font-size: clamp(1.85rem, 3.2vw, 2.55rem); margin: 10px 0; }
.sec-head-center p  { color: var(--MUT); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .93rem;
  cursor: pointer;
  transition: .22s;
  border: none;
  font-family: inherit;
  text-decoration: none;
}
.btn-gold    { background: var(--G);  color: var(--T); }
.btn-gold:hover  { background: var(--GD); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(217,154,31,.38); }
.btn-teal    { background: var(--T);  color: #fff; }
.btn-teal:hover  { background: var(--T1); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(14,58,47,.32); }
.btn-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.btn-outline:hover { background: rgba(255,255,255,.1); }
.btn-ghost   { background: transparent; color: var(--T); border: 1.5px solid var(--T); }
.btn-ghost:hover { background: var(--T); color: #fff; }

/* ─── KEYFRAMES ─── */
@keyframes fadeUp   { from { opacity:0; transform: translateY(32px); } to { opacity:1; transform: translateY(0); } }
@keyframes fadeDown { from { opacity:0; transform: translateY(-20px); } to { opacity:1; transform: translateY(0); } }
@keyframes fadeLeft { from { opacity:0; transform: translateX(36px);  } to { opacity:1; transform: translateX(0); } }
@keyframes fadeRight{ from { opacity:0; transform: translateX(-36px); } to { opacity:1; transform: translateX(0); } }
@keyframes scaleIn  { from { opacity:0; transform: scale(.88); } to { opacity:1; transform: scale(1); } }
@keyframes float    { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-9px); } }
@keyframes shimmer  { 0%{ background-position:-200% center; } 100%{ background-position:200% center; } }
@keyframes pulseDot { 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.5); opacity:.5; } }
@keyframes spinSlow { from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* ─── SCROLL PROGRESS BAR ─── */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--T), var(--G), var(--T));
  background-size: 200% auto;
  z-index: 9999; border-radius: 0 3px 3px 0;
  transition: width .08s linear;
  animation: shimmer 2s linear infinite;
}

/* ─── WORD MASK REVEAL ─── */
.split-h .word     { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 3px; }
.split-h .word-in  { display: inline-block; transform: translateY(110%); transition: transform .7s cubic-bezier(.22,1,.36,1); }
.split-h.words-on .word-in { transform: translateY(0); }

/* ─── 3D CARD TILT ─── */
.tilt-card { transform-style: preserve-3d; transition: transform .15s ease, box-shadow .3s ease; will-change: transform; }
.tilt-card:not(:hover) { transition: transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }

/* ─── MAGNETIC BUTTON ─── */
.btn-gold, .btn-teal { will-change: transform; }

/* ─── HERO ENTRANCE ─── */
@keyframes heroUp      { from { opacity:0; transform:translateY(36px); } to { opacity:1; transform:none; } }
@keyframes heroRight   { from { opacity:0; transform:translateX(44px); } to { opacity:1; transform:none; } }
@keyframes drawUnder   { from { width:0; } to { width:100%; } }
@keyframes orbFloat    { 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-22px) scale(1.04); } }
@keyframes orbFloat2   { 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-16px) rotate(8deg); } }
@keyframes heroBgShift { 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
@keyframes kenBurns    { from{ transform:scale(1); } to{ transform:scale(1.06); } }

.hero-body > div:first-child { animation: heroUp    .8s .1s cubic-bezier(.22,1,.36,1) both; }
.hero-card                   { animation: heroRight .8s .35s cubic-bezier(.22,1,.36,1) both; }
.hero-wave                   { animation: heroUp    .6s .6s cubic-bezier(.22,1,.36,1) both; }

/* floating orbs */
.hero-orb { position:absolute; border-radius:50%; pointer-events:none; }
.hero-orb-1 { width:340px; height:340px; top:-80px; right:28%; background:radial-gradient(circle, rgba(143,211,182,.18) 0%, transparent 70%); animation:orbFloat 7s ease-in-out infinite; }
.hero-orb-2 { width:220px; height:220px; bottom:80px; left:5%; background:radial-gradient(circle, rgba(212,168,72,.14) 0%, transparent 70%); animation:orbFloat2 9s ease-in-out infinite; animation-delay:-3s; }
.hero-orb-3 { width:150px; height:150px; top:30%; left:40%; background:radial-gradient(circle, rgba(255,255,255,.07) 0%, transparent 70%); animation:orbFloat 11s ease-in-out infinite; animation-delay:-6s; }

/* animated underline on "Bright" */
.home-hero h1 em::after { animation: drawUnder .7s .95s cubic-bezier(.22,1,.36,1) both; width:0; }


/* ─── SCROLL REVEAL ─── */
.reveal, .reveal-left, .reveal-right {
  opacity: 0;
  transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
  transition-delay: calc(var(--i, 0) * 0.09s);
}
.reveal       { transform: translateY(32px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.revealed     { opacity: 1 !important; transform: none !important; }

/* ─── PAGE LOAD: HOME HERO ─── */
.home-hero .hero-accent { animation: fadeUp .6s ease both .05s; }
.home-hero h1           { animation: fadeUp .7s ease both .18s; }
.home-hero .hero-sub    { animation: fadeUp .6s ease both .34s; }
.home-hero .hero-btns   { animation: fadeUp .6s ease both .48s; }
.home-hero .hero-trust  { animation: fadeUp .6s ease both .6s;  }
.home-hero .hero-card   { animation: fadeLeft .7s ease both .28s; }

/* ─── PAGE LOAD: INNER HERO ─── */
.inner-hero-left .eyebrow       { animation: fadeUp .55s ease both .08s; }
.inner-hero-left h1             { animation: fadeUp .65s ease both .2s;  }
.inner-hero-left .inner-breadcrumb { animation: fadeUp .55s ease both .32s; }
.inner-hero-left .inner-chips   { animation: fadeUp .55s ease both .44s; }
.inner-hero-right               { animation: fadeLeft .7s ease both .3s; }
.inner-hero::before             { animation: orbFloat 9s ease-in-out infinite; }
.inner-hero::after              { animation: orbFloat2 12s ease-in-out infinite; animation-delay:-5s; }
.contact-hero-v2 .eyebrow       { animation: fadeUp .55s ease both .08s; }
.contact-hero-v2 h1             { animation: fadeUp .65s ease both .2s;  }
.contact-hero-v2 p              { animation: fadeUp .55s ease both .34s; }
.contact-hero-v2 .inner-chips   { animation: fadeUp .55s ease both .46s; }

/* ─── FLOATING BADGE ─── */
.inner-hero-badge { animation: float 3.5s ease-in-out infinite; }
.disc-hero-card   { animation: fadeLeft .7s ease both .35s; }

/* ─── SHIMMER ON GOLD BUTTONS ─── */
.btn-gold {
  background-size: 200% auto;
  background-image: linear-gradient(90deg, var(--G) 0%, #f9d06a 40%, var(--G) 60%, var(--GD) 100%);
  animation: shimmer 3s linear infinite;
}
.btn-gold:hover { animation-play-state: paused; }

/* ─── HEADER FADE DOWN ─── */
.site-header { animation: fadeDown .5s ease both; }

/* ─── STATS BAND ─── */
.stats-band .stat-item { animation: scaleIn .5s ease both; }
.stats-band .stat-item:nth-child(1) { animation-delay: .05s; }
.stats-band .stat-item:nth-child(2) { animation-delay: .15s; }
.stats-band .stat-item:nth-child(3) { animation-delay: .25s; }
.stats-band .stat-item:nth-child(4) { animation-delay: .35s; }

/* ─── AMENITY NAV CARDS ─── */
.amenity-nav-card { transition: transform .25s, box-shadow .25s, background .25s; }
.amenity-nav-card:hover { transform: translateY(-4px) scale(1.04); }

/* ─── CARD HOVER LIFTS ─── */
.why-card-v2, .pcard, .tcard, .fcard { transition: transform .25s, box-shadow .25s; }
.why-card-v2:hover, .pcard:hover, .tcard:hover { transform: translateY(-6px); box-shadow: var(--SH); }
.fcard:hover { transform: translateY(-4px) scale(1.04); }

/* ─── GALLERY ZOOM ─── */
.gallery-item img { transition: transform .45s ease; }
.gallery-item:hover img { transform: scale(1.07); }

/* ─── IC-DOT PULSE ─── */
.ic-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--G); margin-right: 4px; animation: pulseDot 2s ease-in-out infinite; }

/* ─── FOOTER YEAR SPIN EASTER EGG ─── */

/* ─── 4. TOPBAR ─── */
.topbar {
  background: var(--T);
  overflow: hidden;
  max-height: 44px;
  transition: max-height .3s ease, padding .25s;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 7px;
  padding-bottom: 7px;
}
.topbar-links { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar-links a {
  color: var(--M);
  font-size: .78rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .2s;
}
.topbar-links a:hover { color: #fff; }
.topbar-links a svg   { width: 13px; height: 13px; flex-shrink: 0; }
.topbar-right { color: var(--M); font-size: .76rem; font-weight: 600; letter-spacing: .04em; }
.topbar-right span { color: var(--G); }

/* ─── 5. SITE HEADER ─── */
#site-header  { position: sticky; top: 0; z-index: 200; }
.site-header  { position: relative; }
.site-header.scrolled .topbar { max-height: 0; }
.header-main {
  background: rgba(14,58,47,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(143,211,182,.18);
  box-shadow: 0 8px 30px -12px rgba(0,0,0,.45);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
  gap: 20px;
}

/* Brand */
.brand-link { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-img {
  width: 48px; height: 48px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 2px;
}
.logo-text { line-height: 1.2; }
.logo-text b     { display: block; color: #fff; font-weight: 800; font-size: .97rem; }
.logo-text small { color: var(--M); font-size: .54rem; letter-spacing: .3em; text-transform: uppercase; }

/* Desktop nav */
.main-nav .nav-list {
  display: flex;
  align-items: center;
  gap: 20px;
}
.main-nav .nav-list > li > a {
  color: #c8dfd6;
  font-size: .85rem;
  font-weight: 500;
  transition: color .2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.main-nav .nav-list > li > a:hover { color: #fff; }

/* CTA pill in nav */
@keyframes btnShimmer {
  0%   { background-position: -250% center; }
  100% { background-position: 250% center; }
}
@keyframes ctaGlow {
  0%,100% { box-shadow: 0 4px 18px rgba(212,168,72,.35), 0 0 0 0 rgba(212,168,72,.4); }
  50%      { box-shadow: 0 6px 28px rgba(212,168,72,.6), 0 0 0 7px rgba(212,168,72,0); }
}
.nav-list .nav-cta a {
  background: linear-gradient(105deg, #c9a227 0%, #f0c84a 35%, #fff8dc 50%, #f0c84a 65%, #c9a227 100%);
  background-size: 250% auto;
  color: var(--T) !important;
  padding: 9px 22px;
  border-radius: 999px;
  font-weight: 700 !important;
  font-size: .84rem !important;
  display: inline-block;
  position: relative;
  animation: btnShimmer 2.8s linear infinite, ctaGlow 2.5s ease-in-out infinite;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  letter-spacing: .02em;
}
.nav-list .nav-cta a:hover {
  color: #fff !important;
  transform: scale(1.09) translateY(-1px);
  animation: none;
  background: linear-gradient(105deg, #b8891a, #e0b83a, #f5d060, #e0b83a, #b8891a);
  box-shadow: 0 8px 28px rgba(212,168,72,.6), 0 2px 8px rgba(0,0,0,.15);
}

/* Dropdown chevron toggle button */
.dropdown-toggle {
  background: none; border: none;
  color: #c8dfd6; cursor: pointer;
  width: 16px; height: 16px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; margin-left: -3px;
}
.dropdown-toggle svg { display: none; }
.dropdown-toggle::after {
  content: '';
  display: block;
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

/* Active nav item */
.main-nav .nav-list > li.nav-active > a { color: #fff !important; }
.main-nav .nav-list > li.nav-active > a::after {
  content: ''; position: absolute; bottom: -16px; left: 0; right: 0;
  height: 2px; background: var(--G); border-radius: 2px;
}
.main-nav .nav-list > li > a { position: relative; }

/* Desktop dropdown */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--SH);
  padding: 8px;
  min-width: 210px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: .22s;
  z-index: 50;
}
.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown li a {
  display: block;
  color: var(--INK);
  padding: 9px 13px;
  border-radius: 9px;
  font-size: .84rem;
  font-weight: 500;
  transition: .18s;
}
.dropdown li a:hover { background: var(--MS); color: var(--T); }

/* Hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2.5px;
  background: #fff;
  border-radius: 2px;
  transition: .3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Nav drawer header (hidden always – removed feature) ── */
.nav-drawer-hd { display: none; }
.nav-overlay    { display: none; }

/* Mobile nav – original simple dropdown */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .main-nav   { display: none; }
  .main-nav.open {
    display: block;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--T);
    padding: 12px 28px 22px;
    border-top: 1px solid rgba(255,255,255,.08);
    z-index: 100;
  }
  .main-nav.open .nav-list { flex-direction: column; align-items: flex-start; gap: 0; }
  .main-nav.open .nav-list > li { width: 100%; border-bottom: 1px solid rgba(255,255,255,.07); display: flex; flex-wrap: wrap; align-items: center; }
  .main-nav.open .nav-list > li:last-child { border-bottom: none; }
  .main-nav.open .nav-list > li > a { flex: 1; padding: 11px 0; color: #c8dfd6; }
  .main-nav.open .nav-list .nav-cta a { background: none; color: var(--G) !important; padding: 11px 0; border-radius: 0; font-size: .94rem !important; }
  .main-nav.open .dropdown-toggle { width: 36px; height: 42px; padding: 0 10px; }
  .main-nav.open .nav-list > li.nav-active > a { color: #fff !important; }
  .main-nav.open .nav-list > li.nav-active > a::after { display: none; }
  .main-nav.open .dropdown {
    width: 100%; flex-basis: 100%;
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; background: rgba(255,255,255,.06); border-radius: 10px;
    padding: 4px 8px; margin: 4px 0 8px; display: none;
  }
  .main-nav.open .has-dropdown.open .dropdown { display: block; }
  .main-nav.open .dropdown li a { color: #a7bfb5; font-size: .85rem; }
  .main-nav.open .dropdown li a:hover { background: rgba(255,255,255,.1); color: #fff; }
}

/* ─── 6. HOME HERO ─── */
.home-hero {
  background: linear-gradient(135deg, var(--T) 0%, #0d5c41 50%, var(--T) 100%);
  background-size: 200% 200%;
  animation: heroBgShift 10s ease infinite;
  min-height: 92vh;
  display: grid;
  position: relative;
  overflow: hidden;
}
.home-hero::before {
  content: ''; position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%; border: 1px solid rgba(143,211,182,.1);
  top: -200px; right: -160px; pointer-events: none;
}
.home-hero::after {
  content: ''; position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%; border: 1px solid rgba(143,211,182,.08);
  bottom: -120px; left: -100px; pointer-events: none;
}
.hero-bg-img {
  position: absolute; inset: 0;
  /* background-image is set inline from the admin-uploaded Hero background image */
  background-size: cover; background-position: center;
  opacity: .13;
}
.hero-body {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 40px; align-items: center;
  max-width: 1160px; margin: 0 auto;
  padding: 80px 28px 120px;
}
.hero-accent { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.hero-accent-line { width: 40px; height: 3px; background: var(--G); border-radius: 2px; }
.hero-accent span { color: var(--M); font-size: .83rem; font-weight: 600; letter-spacing: .06em; }
.home-hero h1 { color: #fff; font-size: clamp(2.4rem, 4.8vw, 3.9rem); line-height: 1.05; }
.home-hero h1 em { font-style: normal; color: var(--G); position: relative; }
.home-hero h1 em::after {
  content: ''; position: absolute;
  left: 0; bottom: -4px; width: 100%; height: 3px;
  background: var(--G); border-radius: 2px; opacity: .5;
}
.hero-sub { color: #b8d4c8; font-size: .97rem; margin: 22px 0 32px; max-width: 460px; line-height: 1.72; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-trust {
  display: flex; align-items: center; gap: 18px;
  margin-top: 36px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.hero-trust-avatars { display: flex; }
.hero-trust-avatars span {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--T); background: var(--T2);
  color: var(--G); font-weight: 800; font-size: .68rem;
  display: grid; place-items: center; margin-left: -8px;
}
.hero-trust-avatars span:first-child { margin-left: 0; }
.hero-trust-text { color: #b8d4c8; font-size: .83rem; }
.hero-trust-text b { color: #fff; font-size: .95rem; display: block; }
@keyframes drawBorder {
  0%         { stroke-dashoffset: 2000; opacity: 1; }
  80%        { stroke-dashoffset: 0;    opacity: 1; }
  92%        { stroke-dashoffset: 0;    opacity: 0; }
  100%       { stroke-dashoffset: 2000; opacity: 0; }
}
.hero-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(143,211,182,.2);
  border-radius: 28px; padding: 32px;
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; gap: 20px;
  position: relative;
}
.card-beam-svg {
  position: absolute; top: 0; left: 0;
  pointer-events: none; z-index: 10; overflow: visible;
}
.card-beam-rect {
  fill: none;
  stroke: #ffd700;
  stroke-width: 2.5;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px #ffd700) drop-shadow(0 0 14px rgba(255,180,0,.7));
  animation: drawBorder 4s linear infinite;
}
.hero-stat {
  display: flex; align-items: center; gap: 16px;
  padding: 18px; background: rgba(255,255,255,.07);
  border-radius: 16px; border: 1px solid rgba(255,255,255,.1);
  transition: .2s;
}
.hero-stat:hover { background: rgba(255,255,255,.12); }
.hero-stat-icon {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--G); display: grid; place-items: center; flex-shrink: 0;
}
.hero-stat-icon svg { width: 22px; height: 22px; stroke: var(--T); fill: none; stroke-width: 2; }
.hero-stat-num { color: #fff; font-size: 1.5rem; font-weight: 800; line-height: 1; }
.hero-stat-lbl { color: #9fb8ac; font-size: .77rem; margin-top: 3px; }
.hero-cta-card {
  background: var(--G); border-radius: 18px; padding: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.hero-cta-card p { color: var(--T); font-weight: 700; font-size: .92rem; line-height: 1.3; }
.hero-cta-card a {
  background: var(--T); color: #fff;
  padding: 10px 18px; border-radius: 999px;
  font-weight: 700; font-size: .82rem; white-space: nowrap; transition: .2s;
}
.hero-cta-card a:hover { background: var(--T1); }
.hero-wave { position: absolute; bottom: -1px; left: 0; width: 100%; z-index: 4; }
.hero-wave svg { width: 100%; height: 80px; display: block; }

/* ─── 7. STATS BAND ─── */
.stats-band { background: var(--G); }
.stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1160px; margin: 0 auto; }
.stat-item   { padding: 28px 24px; text-align: center; position: relative; }
.stat-item + .stat-item::before {
  content: ''; position: absolute;
  left: 0; top: 20%; height: 60%; width: 1px;
  background: rgba(14,58,47,.2);
}
.stat-num { font-size: 2.4rem; font-weight: 800; color: var(--T); line-height: 1; }
.stat-lbl { color: var(--T); font-size: .82rem; font-weight: 600; margin-top: 4px; opacity: .75; }

/* ─── 8. GENERIC SECTION SPACING ─── */
.section { padding: 86px 0; }

/* ─── 9. ABOUT (dark bento) ─── */
.about-b {
  position: relative; z-index: 2; padding: 62px 0; background: var(--T); overflow: hidden;
  margin-top: 22px; border-radius: 30px 30px 0 0;
}
.about-b::before {
  content: ''; position: absolute; top: -160px; left: -140px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(143,211,182,.18), transparent 70%); pointer-events: none;
}
.about-b::after {
  content: ''; position: absolute; bottom: -180px; right: -120px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(244,183,63,.14), transparent 70%); pointer-events: none;
}
.ab-head { position: relative; z-index: 1; max-width: 620px; margin-bottom: 30px; }
.ab-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--G); margin-bottom: 12px;
}
.ab-eyebrow::before { content: ''; width: 30px; height: 2px; background: var(--G); }
.ab-head h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); color: #fff; margin-bottom: 12px; }
.ab-head h2 em { color: var(--G); font-style: italic; }
.ab-head p { color: rgba(255,255,255,.72); font-size: .95rem; line-height: 1.7; }

.ab-bento {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-template-rows: 124px 124px; gap: 12px;
}
.ab-tile {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; padding: 16px 18px; backdrop-filter: blur(6px);
  transition: transform .5s ease, border-color .3s ease, background .3s ease, opacity .6s ease;
}
.ab-tile:hover { transform: translateY(-5px); border-color: rgba(143,211,182,.5); background: rgba(255,255,255,.08); }

/* Big image tile */
.ab-img { grid-row: 1 / span 2; padding: 0; overflow: hidden; position: relative; min-height: 0; }
.ab-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.ab-img:hover img { transform: scale(1.06); }
.ab-img-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px;
  background: linear-gradient(transparent, rgba(14,58,47,.9)); color: #fff;
}
.ab-img-cap b { display: block; font-size: .98rem; }
.ab-img-cap span { font-size: .78rem; color: rgba(255,255,255,.75); }

/* Stat tiles */
.ab-stat { display: flex; flex-direction: column; justify-content: center; }
.ab-stat .n { font-size: 1.8rem; font-weight: 800; color: var(--G); line-height: 1; letter-spacing: -.03em; }
.ab-stat .l { margin-top: 5px; font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.8); }

/* Feature tile */
.ab-feat { display: flex; flex-direction: column; gap: 7px; }
.ab-feat .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--G); display: grid; place-items: center; }
.ab-feat .ic svg { width: 17px; height: 17px; stroke: var(--T); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ab-feat h3 { color: #fff; font-size: .9rem; }
.ab-feat p { color: rgba(255,255,255,.68); font-size: .78rem; line-height: 1.42; }

/* Full-width CTA bar (below the boxes) */
.ab-cta {
  position: relative; z-index: 1; margin-top: 12px;
  background: linear-gradient(120deg, var(--G), var(--GD));
  border-radius: 16px; padding: 18px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.ab-cta h3 { color: var(--T); font-size: 1.05rem; }
.ab-cta p { color: rgba(14,58,47,.78); font-size: .84rem; margin-top: 3px; }
.ab-btn {
  background: var(--T); color: #fff; padding: 12px 24px; border-radius: 100px; font-weight: 700;
  font-size: .88rem; white-space: nowrap; transition: transform .25s ease, box-shadow .25s ease;
}
.ab-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(14,58,47,.6); }

/* ─── 9b. ABOUT PAGE (about.blade – classic layout) ─── */
.about-section { background: #fff; }
.about-grid-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about-visual  { position: relative; padding-bottom: 28px; }
.about-deco-num {
  font-size: clamp(5rem, 10vw, 9rem); font-weight: 800; line-height: 1;
  color: var(--LN); position: absolute; top: -16px; left: -8px;
  z-index: 2; pointer-events: none; letter-spacing: -.04em;
  opacity: .55;
}
.about-photo { position: relative; z-index: 1; border-radius: 24px; overflow: hidden; box-shadow: var(--SH); }
.about-photo img { width: 100%; height: 420px; object-fit: cover; display: block; transition: transform .6s ease; }
.about-photo:hover img { transform: scale(1.06); }
.about-badge-card {
  position: absolute; bottom: -14px; right: -14px; z-index: 2;
  background: #fff; border-radius: 18px; padding: 16px 20px;
  box-shadow: var(--SH); display: flex; align-items: center; gap: 12px;
}
.abt-badge-icon { width: 46px; height: 46px; border-radius: 13px; background: var(--G); display: grid; place-items: center; }
.abt-badge-icon svg { width: 22px; height: 22px; stroke: var(--T); fill: none; stroke-width: 2; }
.abt-badge-txt b    { display: block; font-size: 1.2rem; color: var(--T); }
.abt-badge-txt span { font-size: .76rem; color: var(--MUT); }
.about-text-v2 h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--T); margin-bottom: 18px; }
.about-text-v2 p  { color: var(--MUT); margin-bottom: 16px; font-size: .95rem; line-height: 1.72; }
.about-list-v2 { list-style: none; margin: 22px 0 30px; display: flex; flex-direction: column; gap: 12px; }
.about-list-v2 li { display: flex; align-items: flex-start; gap: 12px; font-size: .93rem; color: var(--INK); font-weight: 500; }
.about-check { width: 26px; height: 26px; border-radius: 8px; background: var(--MS); display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.about-check svg { width: 13px; height: 13px; stroke: var(--T); fill: none; stroke-width: 2.5; }

/* ─── 10. WHY CHOOSE US ─── */
.why-section  { background: var(--MS); }
.why-header   { text-align: center; max-width: 580px; margin: 0 auto 52px; }
.why-header h2 { font-size: clamp(1.85rem, 3.2vw, 2.55rem); margin: 10px 0 12px; }
.why-header p  { color: var(--MUT); }

.why-cards-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* Fluid variant (Home) — flows nicely for any number of cards (3, 4, 5…) */
.why-flow { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Why Choose Us slider (Home) — only kicks in when 5+ cards */
.why-wrap { position: relative; }
.why-wrap.is-slider .why-cards-row {
  display: flex; grid-template-columns: none; overflow-x: auto; gap: 20px;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 4px 2px;
}
.why-wrap.is-slider .why-cards-row::-webkit-scrollbar { display: none; }
.why-wrap.is-slider .why-card-v2 { flex: 0 0 calc((100% - 60px) / 4); scroll-snap-align: start; }
.why-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; display: none;
  align-items: center; justify-content: center; background: var(--G); color: var(--T);
  box-shadow: 0 12px 26px -8px rgba(0,0,0,.45); transition: background .15s, transform .15s;
}
.why-wrap.is-slider .why-nav { display: flex; }
.why-nav:hover { transform: translateY(-50%) scale(1.08); }
.why-nav:disabled { opacity: .3; cursor: default; transform: translateY(-50%); }
.why-nav.prev { left: -12px; }
.why-nav.next { right: -12px; }
.why-nav svg { width: 22px; height: 22px; stroke-width: 2.6; }
@media (max-width: 900px) { .why-wrap.is-slider .why-card-v2 { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 560px) { .why-wrap.is-slider .why-card-v2 { flex-basis: 84%; } }

/* Classic white cards (used on About page) */
.why-card-v2 {
  background: #fff;
  border-radius: 24px;
  padding: 30px 24px 28px;
  box-shadow: var(--SHS);
  transition: transform .5s ease, box-shadow .28s ease, border-color .28s ease, opacity .6s ease;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid transparent;
}
.why-card-v2:hover { transform: translateY(-7px); box-shadow: var(--SH); border-bottom-color: var(--G); }
.why-card-v2::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(to right, var(--T), var(--M));
  border-radius: 24px 24px 0 0;
}
.wc-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; position: relative; z-index: 1;
}
.wc-icon {
  width: 52px; height: 52px; border-radius: 16px; background: var(--MS);
  display: grid; place-items: center; flex-shrink: 0;
  transition: transform .35s ease, background .35s ease, box-shadow .35s ease;
}
.wc-icon svg { width: 24px; height: 24px; stroke: var(--T); fill: none; stroke-width: 2; }
.wc-num {
  font-size: 3rem; font-weight: 800; color: var(--LN); line-height: 1; letter-spacing: -.04em;
  transition: transform .35s ease, color .35s ease;
}
.why-card-v2 h3 { font-size: 1rem; color: var(--T); margin-bottom: 10px; font-weight: 700; position: relative; z-index: 1; }
.why-card-v2 p  { color: var(--MUT); font-size: .87rem; line-height: 1.68; position: relative; z-index: 1; }

/* Teal cards (Home page – .why-teal wrapper) */
.why-teal .why-card-v2 {
  background: linear-gradient(160deg, var(--T1), var(--T));
  border: 1px solid transparent;
  border-radius: 22px;
  padding: 32px 26px;
}
.why-teal .why-card-v2::before { display: none; }
.why-teal .why-card-v2::after {
  content: '';
  position: absolute; top: -40px; right: -40px; width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(244,183,63,.35), transparent 70%);
  pointer-events: none; transition: transform .45s ease, opacity .45s ease;
}
.why-teal .why-card-v2:hover { transform: translateY(-8px); box-shadow: var(--SH); border-color: rgba(244,183,63,.55); }
.why-teal .why-card-v2:hover::after { transform: scale(1.6); opacity: .85; }
.why-teal .wc-icon { background: var(--G); }
.why-teal .why-card-v2:hover .wc-icon { transform: rotate(-8deg) scale(1.08); box-shadow: 0 8px 20px -6px rgba(244,183,63,.7); }
.why-teal .wc-num { color: rgba(244,183,63,.85); }
.why-teal .why-card-v2:hover .wc-num { transform: scale(1.12); color: var(--G); }
.why-teal .why-card-v2 h3 { color: #fff; }
.why-teal .why-card-v2 p  { color: rgba(255,255,255,.78); }

/* ─── 11. FACILITIES ─── */
.fac-section { background: var(--PG); }
.fac-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px; margin-top: 52px;
}
.fcard {
  position: relative; display: block; color: #fff;
  height: 310px; border-radius: 20px; overflow: hidden;
  box-shadow: var(--SHS);
  transition: transform .5s ease, box-shadow .35s ease, opacity .6s ease;
}
.fcard:hover { transform: translateY(-8px); box-shadow: var(--SH); }
.fcard img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .6s ease;
}
.fcard:hover img { transform: scale(1.1); }
.fcard::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(transparent 20%, rgba(14,58,47,.55) 55%, rgba(14,58,47,.92));
  transition: background .35s ease;
}
.fcard:hover::before { background: linear-gradient(rgba(14,58,47,.25), rgba(14,58,47,.55) 45%, rgba(14,58,47,.95)); }
.fcard-ic {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  width: 44px; height: 44px; border-radius: 13px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center;
  transition: background .35s ease, transform .35s ease;
}
.fcard-ic svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fcard:hover .fcard-ic { background: var(--G); border-color: var(--G); transform: rotate(-6deg) scale(1.06); }
.fcard:hover .fcard-ic svg { stroke: var(--T); }
.fcard-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 20px 20px; }
.fcard-cap h3 { font-size: 1rem; color: #fff; font-weight: 700; }
.fcard-go {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--G); font-size: .78rem; font-weight: 700; margin-top: 6px;
  opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease;
}
.fcard-go svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fcard:hover .fcard-go { opacity: 1; transform: translateY(0); }

/* ─── 12. ADMISSION STEPS ─── */
.steps-section {
  background: linear-gradient(135deg, var(--T) 0%, #0a4a34 50%, var(--T) 100%);
  background-size: 200% 200%;
  animation: heroBgShift 10s ease infinite;
  position: relative; overflow: hidden;
}
.steps-section::before {
  content: ''; position: absolute;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(143,211,182,.14) 0%, transparent 70%);
  top: -100px; right: -80px;
  animation: orbFloat 8s ease-in-out infinite;
}
.steps-section::after {
  content: ''; position: absolute;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,168,72,.12) 0%, transparent 70%);
  bottom: -60px; left: -60px;
  animation: orbFloat2 11s ease-in-out infinite; animation-delay: -4s;
}
.steps-inner   { position: relative; z-index: 2; }
.steps-inner .eyebrow { color: var(--G); }
.steps-inner h2 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 12px 0 48px; max-width: 500px; }
.steps-row {
  display: grid; grid-template-columns: repeat(var(--n, 4), 1fr);
  position: relative;
}
@keyframes drawStepsLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes circlePopIn {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  65%  { transform: scale(1.25) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.steps-row::before {
  content: ''; position: absolute;
  top: 28px; height: 2px; z-index: 0;
  left: calc(50% / var(--n, 4));
  width: calc(100% - 100% / var(--n, 4));
  background: linear-gradient(90deg, var(--G), rgba(143,211,182,.4));
  transform: scaleX(0); transform-origin: left center;
}
.steps-row.steps-animate::before { animation: drawStepsLine 1.2s .4s ease forwards; }
.step-col {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  position: relative; z-index: 1; padding: 0 16px;
}
.step-circle {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--G); color: var(--T);
  font-weight: 800; font-size: 1.2rem;
  display: grid; place-items: center; margin-bottom: 22px;
  border: 3px solid var(--T);
  box-shadow: 0 0 0 6px rgba(244,183,63,.15);
  opacity: 0;
}
.step-col.revealed .step-circle {
  animation: circlePopIn .65s calc(var(--i, 0) * 0.15s + 0.1s) cubic-bezier(.34,1.56,.64,1) forwards;
}
.step-col h3 { color: #fff; font-size: .98rem; margin-bottom: 8px; opacity: 0; transition: opacity .4s ease, transform .4s ease; transform: translateY(12px); }
.step-col p  { color: #a7c0b5; font-size: .84rem; line-height: 1.6; opacity: 0; transition: opacity .4s ease, transform .4s ease; transform: translateY(10px); }
.step-col.revealed h3 { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 0.15s + 0.4s); }
.step-col.revealed p  { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 0.15s + 0.52s); }
.steps-cta   { text-align: center; margin-top: 44px; }

/* ─── 13. DIRECTOR MESSAGE ─── */
.director-section { background: #fff; }
.director-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.director-photo-wrap { position: relative; }
.director-deco {
  position: absolute; top: -18px; left: -18px;
  width: 100%; height: 100%;
  border-radius: 24px; background: var(--MS); z-index: 0;
}
.director-photo { position: relative; z-index: 1; border-radius: 24px; overflow: hidden; box-shadow: var(--SH); }
.director-photo img { width: 100%; height: 380px; object-fit: cover; display: block; transition: transform .6s ease; }
.director-photo:hover img { transform: scale(1.05); }
.quote-mark { font-size: 9rem; color: var(--MS); font-family: Georgia,serif; line-height: .7; margin-bottom: 10px; display: block; }
.director-text h2 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); color: var(--T); margin-bottom: 20px; }
.director-text blockquote {
  color: var(--MUT); font-size: .97rem; line-height: 1.78;
  border-left: 4px solid var(--G); padding-left: 22px;
  margin-bottom: 28px; font-style: italic;
}
.director-sig { display: flex; align-items: center; gap: 14px; }
.director-sig-line { width: 40px; height: 2px; background: var(--G); border-radius: 2px; }
.director-sig-name b    { display: block; color: var(--T); font-size: 1rem; }
.director-sig-name span { color: var(--MUT); font-size: .82rem; }

/* ─── 14. GALLERY ─── */
.gallery-section { background: var(--PG); }

/* Filter tabs */
.gal-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 36px 0 10px;
}
.gal-tab {
  border: 1px solid var(--LN); background: #fff; color: var(--T);
  padding: 9px 20px; border-radius: 100px; font-weight: 600; font-size: .86rem;
  cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.gal-tab:hover { border-color: var(--M); transform: translateY(-2px); }
.gal-tab.active { background: var(--T); color: #fff; border-color: var(--T); }

.gal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 210px;
  gap: 14px; margin-top: 26px;
}
.gallery-item { border-radius: 18px; overflow: hidden; cursor: pointer; position: relative; }
.gallery-item.gal-hide { display: none; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: .38s; }
.gallery-item:hover img { transform: scale(1.08); }
.gal-ov {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,58,47,.72), transparent 55%);
  opacity: 0; transition: .28s;
  display: flex; align-items: flex-end; padding: 14px 16px;
}
.gallery-item:hover .gal-ov { opacity: 1; }
.gal-cap { color: #fff; font-weight: 700; font-size: .84rem; }
@keyframes galFade { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.gal-empty { text-align: center; color: var(--MUT); margin-top: 36px; font-size: .92rem; }

/* See More button */
.gal-more-wrap { text-align: center; margin-top: 34px; }
.gal-more {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--T); color: #fff; padding: 13px 30px; border-radius: 100px;
  font-weight: 700; font-size: .9rem;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.gal-more:hover { background: var(--T1); transform: translateY(-2px); box-shadow: var(--SH); }
.gal-more svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* Lightbox */
.lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 1000; place-items: center; }
.lightbox.open { display: grid; }
.lightbox-content { max-width: 90vw; max-height: 88vh; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.lightbox-close {
  position: absolute; top: 18px; right: 22px;
  background: rgba(255,255,255,.12); border: none; color: #fff;
  width: 42px; height: 42px; border-radius: 50%; font-size: 1.4rem;
  cursor: pointer; display: grid; place-items: center; transition: .2s;
  font-family: inherit;
}
.lightbox-close:hover { background: rgba(255,255,255,.25); }

/* ─── 15. TESTIMONIALS ─── */
.testimonials-section { background: var(--T); position: relative; overflow: hidden; }
.testimonials-section::before {
  content: ''; position: absolute;
  width: 500px; height: 500px; border-radius: 50%;
  border: 1px solid rgba(143,211,182,.08); top: -150px; left: -120px;
}
.testimonials-section .sec-head-center h2  { color: #fff; }
.testimonials-section .sec-head-center p   { color: #a7c0b5; }
.testimonials-section .sec-head-center .eyebrow { color: var(--G); }
.test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; z-index: 2; }
.tcard {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px; padding: 28px; transition: .22s;
}
.tcard:hover { background: rgba(255,255,255,.12); transform: translateY(-4px); }
.tcard-qm    { font-size: 3rem; color: var(--G); font-family: Georgia,serif; line-height: .6; height: 20px; display: block; opacity: .8; }
.tcard-stars { color: var(--G); font-size: .88rem; letter-spacing: 1px; margin: 14px 0 8px; }
.tcard p    { color: #c0d8ce; font-size: .93rem; margin-bottom: 22px; line-height: 1.68; }
.tperson    { display: flex; align-items: center; gap: 12px; }
.tav { width: 42px; height: 42px; border-radius: 50%; background: var(--G); color: var(--T); display: grid; place-items: center; font-weight: 800; font-size: .8rem; flex-shrink: 0; }
.tperson b    { display: block; font-size: .9rem; color: #fff; }
.tperson span { font-size: .76rem; color: #88aaa0; }

/* ─── 16. PROGRAMS ─── */
.programs-section { background: var(--PG); }
.prog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 52px; }
.prog-flow { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pcard { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: var(--SHS); transition: .28s; }
.pcard:hover { transform: translateY(-7px); box-shadow: var(--SH); }
.pcard-header { padding: 28px 24px; background: var(--T); position: relative; overflow: hidden; }
.pcard-header::after {
  content: ''; position: absolute;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,.04); bottom: -40px; right: -30px;
}
.pcard-header svg { width: 36px; height: 36px; stroke: var(--G); fill: none; stroke-width: 1.8; position: relative; z-index: 1; }
.pcard-header h3  { color: #fff; font-size: 1.05rem; margin-top: 16px; position: relative; z-index: 1; }
.pcard-body { padding: 20px 24px; }
.pcard-body p { color: var(--MUT); font-size: .84rem; margin-bottom: 12px; line-height: 1.6; }
.pgrade {
  display: inline-flex; align-items: center;
  background: var(--GS); color: var(--GD);
  font-size: .76rem; font-weight: 700; padding: 5px 12px; border-radius: 999px;
}

/* ─── 17. CTA SPLIT ─── */
.cta-outer { padding: 0 0 82px; }
.cta-split  { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.cta-split-inner {
  background: var(--T); border-radius: 32px;
  overflow: hidden; display: grid; grid-template-columns: 1.2fr .8fr;
  position: relative;
}
.cta-split-inner::before {
  content: ''; position: absolute; inset: 0;
  background: url('https://picsum.photos/seed/91/1200/600');
  background-size: cover; background-position: center; opacity: .07;
}
.cta-left { padding: 60px 52px; position: relative; z-index: 1; }
.cta-left .eyebrow { color: var(--G); margin-bottom: 14px; display: block; }
.cta-left h2 { color: #fff; font-size: clamp(1.9rem, 3vw, 2.7rem); margin-bottom: 18px; }
.cta-left p  { color: #b0cec5; margin-bottom: 32px; font-size: .96rem; line-height: 1.7; max-width: 420px; }
.cta-btns    { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-right {
  background: var(--G);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 50px 36px; text-align: center; gap: 18px;
  position: relative; z-index: 1;
}
.cta-right-icon { width: 64px; height: 64px; border-radius: 20px; background: var(--T); display: grid; place-items: center; }
.cta-right-icon svg { width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 1.8; }
.cta-right h3  { color: var(--T); font-size: 1.35rem; }
.cta-right > p { color: rgba(14,58,47,.7); font-size: .87rem; font-weight: 600; }
.cta-contact-list  { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.cta-contact-item  { display: flex; align-items: center; gap: 10px; color: var(--T); font-size: .85rem; font-weight: 600; }
.cta-contact-item svg { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--T); fill: none; stroke-width: 2; }
.cta-contact-btn {
  background: var(--T); color: #fff;
  padding: 12px 26px; border-radius: 999px;
  font-weight: 700; font-size: .88rem;
  display: inline-block; transition: .2s;
}
.cta-contact-btn:hover { background: var(--T1); }

/* ─── 18. FOOTER ─── */
.site-footer { background: var(--T); color: #9fb8ac; padding: 60px 0 28px; }
.foot-announce {
  background: var(--G); border-radius: 20px;
  padding: 28px 36px; margin-bottom: 52px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.foot-announce p    { color: var(--T); font-weight: 700; font-size: 1.02rem; }
.foot-announce span { color: rgba(14,58,47,.65); font-size: .88rem; display: block; margin-top: 2px; font-weight: 500; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 38px; margin-bottom: 40px; }
.footer-logo  { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-logo img  { width: 40px; height: 40px; background: #fff; border-radius: 8px; padding: 3px; }
.footer-logo span { color: #fff; font-weight: 800; font-size: .96rem; }
.foot-tagline { color: var(--G); font-size: 1rem; font-weight: 800; font-style: italic; margin-bottom: 10px; }
.footer-about > p { font-size: .86rem; line-height: 1.68; max-width: 270px; }
.social-links { display: flex; gap: 10px; margin-top: 18px; }
.social-icon  {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.08); display: grid; place-items: center;
  color: #9fb8ac; transition: .2s;
}
.social-icon:hover { background: var(--G); color: var(--T); }
.social-icon svg  { width: 16px; height: 16px; }
.site-footer h4   { color: #fff; font-size: .94rem; margin-bottom: 16px; font-weight: 700; }
.footer-col ul li a { display: block; padding: 5px 0; font-size: .86rem; color: #9fb8ac; transition: color .2s; }
.footer-col ul li a:hover { color: var(--G); }
.footer-contact li { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; font-size: .86rem; }
.footer-contact .icon { flex-shrink: 0; font-size: 1rem; }
.footer-contact a { color: #9fb8ac; transition: color .2s; }
.footer-contact a:hover { color: var(--G); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; font-size: .82rem;
}
.footer-credit a { color: var(--M); }
.footer-credit a:hover { color: var(--G); }

/* ─── 19. BACK TO TOP ─── */
@keyframes bttPulse {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(1.9); opacity: 0;  }
}
@keyframes arrowBounce {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-4px); }
}
.back-to-top {
  position: fixed; bottom: 28px; right: 28px;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--T); color: #fff;
  border: 2px solid rgba(143,211,182,.28);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; cursor: pointer; z-index: 400;
  box-shadow: 0 8px 28px rgba(14,58,47,.35);
  opacity: 0; transform: translateY(16px) scale(0.7);
  pointer-events: none;
  transition: opacity .3s ease, transform .38s cubic-bezier(.34,1.56,.64,1), background .2s, box-shadow .25s;
}
.back-to-top::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--G);
  animation: bttPulse 2s ease-out infinite;
}
.back-to-top.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.back-to-top:hover { background: var(--T1); transform: translateY(-5px) scale(1.1); box-shadow: 0 14px 36px rgba(14,58,47,.5); }
.btt-arrow { display: inline-block; animation: arrowBounce 1.4s ease-in-out infinite; }

/* ═══ ADMISSION POPUP ═══ */
#adm-popup {
  visibility: hidden; pointer-events: none;
}
#adm-popup.adm-open {
  visibility: visible; pointer-events: auto;
}
.adm-overlay {
  position: fixed; inset: 0; background: rgba(10,40,30,.6);
  backdrop-filter: blur(4px); z-index: 1000;
  opacity: 0; transition: opacity .35s ease;
}
#adm-popup.adm-open .adm-overlay { opacity: 1; }
.adm-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + 40px));
  opacity: 0;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
  z-index: 1001; width: min(480px, 94vw);
  background: #fff; border-radius: 28px;
  overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.28);
}
#adm-popup.adm-open .adm-modal {
  transform: translate(-50%, -50%);
  opacity: 1;
}
.adm-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.18); color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s; z-index: 2;
}
.adm-close:hover { background: rgba(255,255,255,.32); }
.adm-close svg { width: 16px; height: 16px; }
.adm-header {
  background: linear-gradient(135deg, var(--T) 0%, var(--T1) 100%);
  padding: 32px 28px 28px; position: relative; text-align: center;
}
.adm-header-badge {
  display: inline-block; background: var(--G); color: var(--T);
  font-size: .75rem; font-weight: 800; padding: 4px 14px;
  border-radius: 999px; letter-spacing: .06em; margin-bottom: 12px;
}
.adm-header h2 { color: #fff; font-size: 1.6rem; margin: 0 0 8px; }
.adm-header p  { color: #9fd4bc; font-size: .9rem; margin: 0; }
.adm-form { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 16px; }
.adm-field { display: flex; flex-direction: column; gap: 6px; }
.adm-field label { font-size: .82rem; font-weight: 600; color: var(--MUT); }
.adm-field input,
.adm-field select {
  padding: 12px 14px; border: 1.5px solid var(--LN);
  border-radius: 12px; font-family: inherit; font-size: .93rem;
  color: var(--INK); background: var(--MS); outline: none; transition: border .2s;
}
.adm-field input:focus,
.adm-field select:focus { border-color: var(--T); background: #fff; }
.adm-submit {
  width: 100%; padding: 14px; border: none; border-radius: 14px;
  background: var(--T); color: #fff; font-size: 1rem;
  font-weight: 700; font-family: inherit; cursor: pointer;
  transition: background .2s, transform .2s; margin-top: 4px;
}
.adm-submit:hover { background: var(--T1); transform: translateY(-2px); }
.adm-note { text-align: center; font-size: .8rem; color: var(--MUT); margin: 0; }
.adm-success {
  padding: 40px 28px; flex-direction: column;
  align-items: center; text-align: center; gap: 12px;
}
.adm-success-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(30,115,85,.1); color: var(--T);
  font-size: 1.8rem; display: flex; align-items: center; justify-content: center;
}
.adm-success h3 { font-size: 1.3rem; color: var(--T); margin: 0; }
.adm-success p  { color: var(--MUT); margin: 0; font-size: .92rem; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ─── 20. INNER HERO (replaces old page-banner) ─── */
.inner-hero {
  background: var(--T);
  padding: 62px 0 82px;
  position: relative;
  overflow: hidden;
}
.inner-hero::before {
  content: ''; position: absolute;
  width: 600px; height: 600px; border-radius: 50%;
  border: 1px solid rgba(143,211,182,.1);
  top: -220px; right: -140px; pointer-events: none;
}
.inner-hero::after {
  content: ''; position: absolute;
  width: 380px; height: 380px; border-radius: 50%;
  border: 1px solid rgba(143,211,182,.07);
  bottom: -130px; left: -80px; pointer-events: none;
}
/* Split layout: left text + right image */
.inner-hero-split {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 52px; align-items: center;
}
.inner-hero-left { display: flex; flex-direction: column; }
.inner-hero .eyebrow { color: var(--G); margin-bottom: 14px; }
.inner-hero h1 { color: #fff; font-size: clamp(2rem, 3.8vw, 3rem); margin: 10px 0 14px; line-height: 1.1; }
.inner-hero h1 em { font-style: normal; color: var(--G); }
.inner-breadcrumb { color: #9fb8ac; font-size: .86rem; margin-bottom: 28px; }
.inner-breadcrumb a { color: var(--G); font-weight: 600; }
.inner-breadcrumb a:hover { text-decoration: underline; }
/* Chips row */
.inner-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.inner-chips span {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: #c8dfd6; padding: 7px 16px;
  border-radius: 999px; font-size: .8rem; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.ic-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--G); flex-shrink: 0; font-style: normal; }
/* Right image */
.inner-hero-right { position: relative; }
.inner-hero-img {
  width: 100%; height: 340px; object-fit: cover;
  border-radius: 24px;
  animation: kenBurns 10s ease-in-out infinite alternate;
  box-shadow: 0 24px 56px rgba(0,0,0,.3);
  display: block;
}
.inner-hero-badge {
  position: absolute; bottom: -18px; left: -18px;
  background: var(--G); border-radius: 18px;
  padding: 18px 22px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 28px rgba(244,183,63,.4);
}
.ihb-num { font-size: 2rem; font-weight: 800; color: var(--T); line-height: 1; }
.ihb-txt { font-size: .78rem; font-weight: 700; color: var(--T); opacity: .8; line-height: 1.3; }

/* Why 3-col override (about page has 6 cards) */
.why-3col { grid-template-columns: repeat(3, 1fr) !important; }

/* Solid teal icon variant */
.wc-icon-solid { background: var(--T) !important; }
.wc-icon-solid svg { stroke: #fff !important; }

/* Gold number variant */
.wc-num-gold { color: var(--G) !important; }

/* Vision callout box */
.vision-callout {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--GS); border-left: 4px solid var(--G);
  border-radius: 0 14px 14px 0;
  padding: 16px 20px; margin: 20px 0 24px;
}
.vision-callout svg { width: 22px; height: 22px; stroke: var(--GD); flex-shrink: 0; margin-top: 2px; }
.vision-callout p { color: var(--INK); font-size: .93rem; font-weight: 600; line-height: 1.6; margin: 0; }

/* ─── DIRECTOR / CHAIRMAN MESSAGE ─── */
.msg-section { background: #fff; }
.msg-alt     { background: var(--MS); }
.msg-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.msg-grid-reverse { grid-template-columns: 1.15fr .85fr; }
.msg-photo-wrap { position: relative; padding-bottom: 24px; }
.msg-photo-deco {
  position: absolute; top: -16px; left: -16px;
  width: 100%; height: 100%;
  border-radius: 24px; background: var(--MS); z-index: 0;
}
.msg-alt .msg-photo-deco { background: #fff; }
.msg-photo { position: relative; z-index: 1; border-radius: 24px; overflow: hidden; box-shadow: var(--SH); }
.msg-photo img { width: 100%; height: 420px; object-fit: cover; display: block; transition: transform .6s ease; }
.msg-photo:hover img { transform: scale(1.05); }
.msg-name-card {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  background: var(--T); border-radius: 14px;
  padding: 14px 22px; text-align: center;
  z-index: 2; white-space: nowrap;
  box-shadow: var(--SH);
}
.msg-name-card b    { display: block; color: #fff; font-size: .95rem; }
.msg-name-card span { color: var(--M); font-size: .76rem; }
.msg-quote-mark {
  font-size: 8rem; color: var(--MS);
  font-family: Georgia, serif; line-height: .7;
  display: block; margin-bottom: 8px;
}
.msg-alt .msg-quote-mark { color: #fff; opacity: .6; }
.msg-content h2 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); color: var(--T); margin-bottom: 18px; }
.msg-blockquote {
  color: var(--INK); font-size: .97rem; line-height: 1.78;
  font-style: italic;
  border-left: 4px solid var(--G);
  padding: 16px 22px;
  background: var(--GS);
  border-radius: 0 14px 14px 0;
  margin-bottom: 16px;
}
.msg-alt .msg-blockquote { background: #fff; }
.msg-para { color: var(--MUT); font-size: .94rem; line-height: 1.72; margin-bottom: 14px; }
.msg-signature  { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.msg-sig-line   { width: 40px; height: 2px; background: var(--G); border-radius: 2px; flex-shrink: 0; }
.msg-signature b    { display: block; color: var(--T); font-size: 1rem; }
.msg-signature span { color: var(--MUT); font-size: .82rem; }

/* ─── ACADEMICS PAGE ─── */

/* Academic Edge Strip */
.acad-edge { background: var(--T); padding: 0; }
.acad-edge-row {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 28px 0; flex-wrap: wrap; gap: 0;
}
.acad-edge-item { display: flex; align-items: center; gap: 14px; flex: 1; padding: 12px 20px; }
.acad-edge-div  { width: 1px; height: 48px; background: rgba(255,255,255,.1); flex-shrink: 0; }
.aei-icon {
  width: 46px; height: 46px; border-radius: 14px;
  background: rgba(244,183,63,.15);
  border: 1px solid rgba(244,183,63,.25);
  display: grid; place-items: center; flex-shrink: 0;
}
.aei-icon svg { width: 22px; height: 22px; stroke: var(--G); }
.aei-text b    { display: block; color: #fff; font-weight: 700; font-size: .9rem; }
.aei-text span { color: #9fb8ac; font-size: .78rem; }

/* Curriculum 2×2 premium cards */
.curr-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px; margin-top: 52px;
}
.curr-card-v2 {
  background: #fff; border-radius: 26px;
  overflow: hidden; box-shadow: var(--SHS);
  transition: .3s;
}
.curr-card-v2:hover { transform: translateY(-8px); box-shadow: var(--SH); }
.ccv2-top {
  background: var(--T);
  padding: 32px 28px 28px;
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; gap: 16px;
  min-height: 148px;
}
.ccv2-c2 { background: var(--T1); }
.ccv2-c3 { background: #164a3b; }
.ccv2-c4 { background: var(--T2); }
.ccv2-bg-num {
  position: absolute; top: -12px; right: 14px;
  font-size: 7rem; font-weight: 800;
  color: rgba(255,255,255,.06);
  line-height: 1; pointer-events: none;
  letter-spacing: -.04em;
}
.ccv2-top::after {
  content: ''; position: absolute;
  width: 160px; height: 160px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.07);
  bottom: -60px; right: -40px; pointer-events: none;
}
.ccv2-icon {
  width: 54px; height: 54px; border-radius: 17px;
  background: var(--G);
  display: grid; place-items: center; flex-shrink: 0;
  position: relative; z-index: 1;
  box-shadow: 0 6px 18px rgba(244,183,63,.35);
}
.ccv2-icon svg { width: 26px; height: 26px; stroke: var(--T); fill: none; stroke-width: 2; }
.ccv2-meta { position: relative; z-index: 1; }
.ccv2-level { display: block; color: #fff; font-size: 1.1rem; font-weight: 800; margin-bottom: 7px; }
.ccv2-grade {
  display: inline-block;
  background: rgba(244,183,63,.2);
  border: 1px solid rgba(244,183,63,.35);
  color: var(--G); font-size: .74rem; font-weight: 700;
  padding: 4px 13px; border-radius: 999px;
}
.ccv2-body { padding: 28px 28px 24px; }
.ccv2-body h3 { font-size: 1.08rem; color: var(--T); margin-bottom: 10px; }
.ccv2-body p  { color: var(--MUT); font-size: .9rem; line-height: 1.72; margin-bottom: 18px; }
.curr-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.curr-tags span {
  background: var(--MS); color: var(--T2);
  font-size: .74rem; font-weight: 700;
  padding: 5px 13px; border-radius: 999px;
}

/* Our Approach section */
.acad-approach-section { background: var(--T); padding: 80px 0; position: relative; overflow: hidden; }
.acad-approach-section::before {
  content: ''; position: absolute;
  width: 520px; height: 520px; border-radius: 50%;
  border: 1px solid rgba(143,211,182,.07);
  top: -180px; right: -120px;
}
.acad-approach-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center; position: relative; z-index: 2;
}
.acad-approach-left .sec-tag .eyebrow { color: var(--G); }
.acad-approach-left h2 { color: #fff; font-size: clamp(1.7rem, 2.8vw, 2.3rem); margin: 12px 0 16px; }
.acad-approach-left > p { color: #9fb8ac; font-size: .94rem; line-height: 1.72; margin-bottom: 28px; }
.acad-approach-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.acad-approach-pills span {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  color: #c8dfd6; font-size: .78rem; font-weight: 600;
  padding: 7px 15px; border-radius: 999px;
}
.acad-feat-list { display: flex; flex-direction: column; }
.acad-feat {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.08);
}
.acad-feat:last-child { border-bottom: none; }
.acad-feat-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--G); display: grid; place-items: center; flex-shrink: 0; margin-top: 2px;
}
.acad-feat-icon svg { width: 16px; height: 16px; stroke: var(--T); }
.acad-feat b { display: block; color: #fff; font-size: .93rem; margin-bottom: 4px; }
.acad-feat p { color: #9fb8ac; font-size: .83rem; line-height: 1.55; margin: 0; }

/* Faculty cards v2 */
.faculty-grid-v2 {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; margin-top: 52px;
}
/* Faculty slider (only when 5+ members) */
.faculty-wrap { position: relative; }
.faculty-wrap .faculty-grid-v2 { margin-top: 52px; }
.faculty-wrap.is-slider .faculty-grid-v2 {
  display: flex; grid-template-columns: none; overflow-x: auto; gap: 20px;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 4px;
}
.faculty-wrap.is-slider .faculty-grid-v2::-webkit-scrollbar { display: none; }
.faculty-wrap.is-slider .faculty-card-v2 { flex: 0 0 calc((100% - 60px) / 4); scroll-snap-align: start; }
.fac-nav {
  position: absolute; top: 135px; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; display: none;
  align-items: center; justify-content: center; background: var(--T); color: #fff;
  box-shadow: 0 12px 26px -8px rgba(20,73,58,.6); transition: background .15s, transform .15s;
}
.faculty-wrap.is-slider .fac-nav { display: flex; }
.fac-nav:hover { background: var(--T2, #14493a); transform: translateY(-50%) scale(1.08); }
.fac-nav:disabled { opacity: .3; cursor: default; transform: translateY(-50%); }
.fac-nav.prev { left: -12px; }
.fac-nav.next { right: -12px; }
.fac-nav svg { width: 22px; height: 22px; stroke-width: 2.6; }
@media (max-width: 900px) { .faculty-wrap.is-slider .faculty-card-v2 { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 560px) { .faculty-wrap.is-slider .faculty-card-v2 { flex-basis: 84%; } .fac-nav { top: 120px; } }
.faculty-card-v2 {
  background: #fff; border-radius: 22px;
  overflow: hidden; box-shadow: var(--SHS); transition: .28s;
}
.faculty-card-v2:hover { transform: translateY(-6px); box-shadow: var(--SH); }
.fac-photo { position: relative; overflow: hidden; }
.fac-photo img { width: 100%; height: 270px; object-fit: cover; display: block; transition: .38s; }
.fac-photo-ph { width: 100%; height: 270px; display: flex; align-items: center; justify-content: center; font-size: 4rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #1e6e55, #14493a); }
.faculty-card-v2:hover .fac-photo img { transform: scale(1.06); }
.fac-wing-ribbon {
  position: absolute; top: 16px; left: -1px;
  background: var(--G); color: var(--T);
  font-size: .72rem; font-weight: 800;
  padding: 5px 14px 5px 10px;
  border-radius: 0 999px 999px 0;
  box-shadow: 2px 2px 8px rgba(244,183,63,.3);
}
.fac-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,58,47,.85) 0%, transparent 55%);
  display: flex; align-items: flex-end; padding: 16px;
  opacity: 0; transition: .28s;
}
.faculty-card-v2:hover .fac-overlay { opacity: 1; }
.fac-overlay span { color: #fff; font-weight: 700; font-size: .85rem; }
.fac-info { padding: 18px 20px; border-top: 3px solid var(--G); }
.fac-info h3  { font-size: .97rem; color: var(--T); margin-bottom: 4px; }
.fac-role { font-size: .8rem; color: var(--MUT); font-weight: 600; }

/* Faculty join strip */
.fac-join-strip {
  margin-top: 48px; background: var(--T);
  border-radius: 22px; padding: 32px 40px;
  display: flex; align-items: center;
  justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.fac-join-strip h3 { color: #fff; font-size: 1.2rem; margin-bottom: 6px; }
.fac-join-strip p  { color: #9fb8ac; font-size: .9rem; }

/* ─── AMENITIES PAGE ─── */

/* Quick Nav Cards */
.amenity-nav-section { background: var(--T); padding: 0; }
.amenity-nav-row {
  display: flex; gap: 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.amenity-nav-card {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  padding: 24px 16px; color: #c8dfd6;
  transition: .22s; text-decoration: none;
  border-right: 1px solid rgba(255,255,255,.08);
  font-size: .82rem; font-weight: 600; text-align: center;
}
.amenity-nav-card:last-child { border-right: none; }
.amenity-nav-card:hover { background: rgba(255,255,255,.06); color: var(--G); }
.anc-icon {
  width: 44px; height: 44px; border-radius: 13px;
  background: rgba(244,183,63,.12);
  border: 1px solid rgba(244,183,63,.22);
  display: grid; place-items: center;
  transition: .22s;
}
.amenity-nav-card:hover .anc-icon { background: var(--G); }
.anc-icon svg { width: 20px; height: 20px; stroke: var(--G); transition: .22s; }
.amenity-nav-card:hover .anc-icon svg { stroke: var(--T); }

/* Alternating sections */
.amenity-block     { padding: 86px 0; background: #fff; }
.amenity-block-ms  { background: var(--MS); }
.amenity-block-pg  { background: var(--PG); }

.amenity-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}

/* Mini slider — premium rewrite */
.amenity-media .mini-slider {
  border-radius: 28px; overflow: hidden;
  box-shadow: var(--SH); position: relative;
}
.amenity-media .mini-slide img {
  width: 100%; height: 380px; object-fit: cover; display: block;
}
.amenity-media .mini-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: var(--G); border: none;
  width: 46px; height: 46px; border-radius: 50%;
  font-size: 1.4rem; line-height: 1;
  cursor: pointer; color: var(--T); font-weight: 800;
  transition: .22s; box-shadow: 0 4px 14px rgba(244,183,63,.4);
  display: flex; align-items: center; justify-content: center;
}
.amenity-media .mini-arrow:hover { background: var(--GD); transform: translateY(-50%) scale(1.08); }
.amenity-media .mini-prev { left: 16px; }
.amenity-media .mini-next { right: 16px; }
.amenity-media .mini-dots {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 7px;
  background: rgba(0,0,0,.25); padding: 7px 14px; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.amenity-media .mini-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.45); border: none; cursor: pointer; transition: .22s; padding: 0;
}
.amenity-media .mini-dot.active { background: var(--G); width: 22px; border-radius: 4px; }

/* Content side */
.amenity-content h2 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); color: var(--T); margin: 12px 0 16px; }
.amenity-content > p { color: var(--MUT); font-size: .94rem; line-height: 1.72; margin-bottom: 24px; }

.amenity-list { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-bottom: 26px; }
.amenity-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: .93rem; color: var(--INK); font-weight: 500; line-height: 1.5;
}
.al-icon {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--MS); display: grid; place-items: center; flex-shrink: 0; margin-top: 1px;
}
.amenity-block-ms .al-icon { background: #fff; }
.al-icon svg { width: 13px; height: 13px; stroke: var(--T); fill: none; stroke-width: 2.5; }

.amenity-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.amenity-pills span {
  background: var(--T); color: var(--M);
  font-size: .76rem; font-weight: 700;
  padding: 6px 14px; border-radius: 999px;
}
.amenity-block-ms .amenity-pills span { background: var(--T); color: var(--M); }

/* Bottom CTA */
.amenity-cta-section { background: var(--G); }
.amenity-cta-inner {
  display: flex; align-items: center;
  justify-content: space-between; gap: 32px;
  flex-wrap: wrap;
}
.amenity-cta-text .eyebrow { color: var(--T); opacity: .7; }
.amenity-cta-text h2 { color: var(--T); font-size: clamp(1.6rem, 2.4vw, 2rem); margin: 10px 0 12px; }
.amenity-cta-text p  { color: rgba(14,58,47,.72); font-size: .93rem; max-width: 480px; line-height: 1.7; }
.amenity-cta-btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* ─── CONTACT PAGE ─── */

/* Centered teal hero */
.contact-hero-v2 {
  background: var(--T);
  padding: 80px 0 110px;
  position: relative;
  overflow: hidden;
}
.contact-hero-arc1 {
  position: absolute; width: 620px; height: 620px; border-radius: 50%;
  border: 1px solid rgba(143,211,182,.1); top: -220px; right: -140px; pointer-events: none;
}
.contact-hero-arc2 {
  position: absolute; width: 380px; height: 380px; border-radius: 50%;
  border: 1px solid rgba(143,211,182,.07); bottom: -130px; left: -80px; pointer-events: none;
}

/* Floating contact cards */
.contact-cards-overlap { margin-top: -60px; position: relative; z-index: 10; padding-bottom: 70px; }
.contact-cards-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@keyframes cardRiseUp {
  from { opacity: 0; transform: translateY(80px); }
  to   { opacity: 1; transform: translateY(0); }
}
.contact-cards-row .contact-card-v2:nth-child(1) { animation: cardRiseUp .7s .1s cubic-bezier(.22,1,.36,1) both; }
.contact-cards-row .contact-card-v2:nth-child(2) { animation: cardRiseUp .7s .25s cubic-bezier(.22,1,.36,1) both; }
.contact-cards-row .contact-card-v2:nth-child(3) { animation: cardRiseUp .7s .4s cubic-bezier(.22,1,.36,1) both; }

.contact-card-v2 {
  background: #fff; border-radius: 22px;
  padding: 26px 22px; box-shadow: var(--SH);
  display: flex; align-items: flex-start; gap: 16px;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
  position: relative; overflow: hidden;
}
.contact-card-v2::after {
  content: ''; position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--G), var(--GD));
  border-radius: 0 0 22px 22px;
  transition: width .35s ease;
}
.contact-card-v2:hover { transform: translateY(-6px); box-shadow: 0 28px 64px -20px rgba(14,58,47,.28); }
.contact-card-v2:hover::after { width: 75%; }
.ccv-icon {
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--T); display: grid; place-items: center; flex-shrink: 0;
}
.ccv-icon svg { width: 22px; height: 22px; stroke: var(--G); transition: stroke .25s; }
.ccv-icon { transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .25s, box-shadow .25s; }
.contact-card-v2:hover .ccv-icon { transform: scale(1.18) rotate(-10deg); background: var(--T); box-shadow: 0 8px 22px rgba(14,58,47,.22); }
.contact-card-v2:hover .ccv-icon svg { stroke: #fff; }
.ccv-icon-gold { background: var(--G); }
.ccv-icon-gold svg { stroke: var(--T); }
.contact-card-v2:hover .ccv-icon-gold { background: var(--GD); }
.contact-card-v2:hover .ccv-icon-gold svg { stroke: #fff; }
.ccv-text b     { display: block; font-size: .9rem; color: var(--T); margin-bottom: 6px; font-weight: 800; }
.ccv-text a,
.ccv-text span  { display: block; font-size: .88rem; color: var(--MUT); font-weight: 500; line-height: 1.5; }
.ccv-text a:hover { color: var(--T); }
.ccv-wa {
  display: inline-flex !important; align-items: center; gap: 5px;
  color: #25d366 !important; font-weight: 700 !important;
  font-size: .8rem !important; margin-top: 5px;
}
.ccv-wa:hover { color: #1ebe5d !important; }
.ccv-hours { font-size: .78rem !important; color: #9fb8ac !important; margin-top: 4px; }

/* Premium contact card — teal left + white right */
.contact-card-split {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--SH);
  max-width: 980px;
  margin: 0 auto;
}
.ccs-left {
  background: var(--T);
  padding: 52px 40px;
  display: flex; flex-direction: column; gap: 32px;
  position: relative; overflow: hidden;
}
.ccs-left::after {
  content: ''; position: absolute;
  width: 280px; height: 280px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.07);
  bottom: -100px; right: -60px; pointer-events: none;
}
.ccs-left h2 { color: #fff; font-size: 1.85rem; margin: 12px 0 10px; line-height: 1.15; }
.ccs-left > div > p { color: #9fb8ac; font-size: .88rem; line-height: 1.7; }

.ccs-info-list { list-style: none; display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 1; }
.ccs-info-list li { display: flex; align-items: flex-start; gap: 14px; }
.ccs-info-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(244,183,63,.15); border: 1px solid rgba(244,183,63,.25);
  display: grid; place-items: center; flex-shrink: 0;
}
.ccs-info-icon svg { width: 18px; height: 18px; stroke: var(--G); }
.ccs-info-list b    { display: block; color: #fff; font-size: .84rem; font-weight: 700; margin-bottom: 3px; }
.ccs-info-list span,
.ccs-info-list a    { color: #9fb8ac; font-size: .84rem; line-height: 1.5; }
.ccs-info-list a:hover { color: var(--G); }

.ccs-wa-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #25d366; color: #fff;
  padding: 13px 20px; border-radius: 13px;
  font-weight: 700; font-size: .86rem;
  transition: .22s; position: relative; z-index: 1;
  width: fit-content;
}
.ccs-wa-btn:hover { background: #1ebe5d; transform: translateY(-2px); }
.ccs-wa-btn svg { width: 19px; height: 19px; flex-shrink: 0; }

.ccs-right {
  background: #fff;
  padding: 52px 44px;
}
.ccs-right h3 { font-size: 1.35rem; color: var(--T); margin-bottom: 6px; }
.ccs-right > p { color: var(--MUT); font-size: .87rem; margin-bottom: 24px; }

.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { margin-bottom: 14px; }
.form-group label {
  display: block; font-weight: 600; font-size: .81rem;
  color: var(--INK); margin-bottom: 6px;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--LN); border-radius: 11px;
  font-family: inherit; font-size: .9rem; color: var(--INK);
  background: var(--PG); transition: border-color .2s, background .2s; outline: none;
  appearance: none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--T2); background: #fff; }
.form-group textarea { resize: vertical; min-height: 110px; }

.contact-form-footer {
  display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap; margin-top: 6px;
}
.contact-submit-btn svg { width: 17px; height: 17px; }
.contact-or { font-size: .84rem; color: var(--MUT); }
.contact-or a { color: var(--T); font-weight: 700; }

.form-success {
  display: none; background: var(--MS);
  border: 1.5px solid var(--M); border-radius: 11px;
  padding: 13px 18px; color: var(--T);
  font-weight: 600; font-size: .87rem; margin-top: 14px;
}
.form-success.show { display: block; }

/* Map box */
.contact-map-box { border-radius: 24px; overflow: hidden; box-shadow: var(--SH); }
.contact-map-box iframe { display: block; width: 100%; height: 420px; border: none; }

/* ─── DISCLOSURES PAGE ─── */

/* Hero right card */
.disc-hero-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(143,211,182,.2);
  border-radius: 24px; padding: 28px 24px;
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; gap: 0;
}
.dhc-item { display: flex; align-items: center; gap: 16px; padding: 18px 0; opacity: 0; transform: translateX(20px); }
.dhc-item:nth-child(1) { animation: fadeLeft .5s .5s ease both; }
.dhc-item:nth-child(3) { animation: fadeLeft .5s .68s ease both; }
.dhc-item:nth-child(5) { animation: fadeLeft .5s .86s ease both; }
.dhc-div  { height: 1px; background: rgba(255,255,255,.1); }
.dhc-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(143,211,182,.15); display: grid; place-items: center; flex-shrink: 0;
}
.dhc-icon svg { width: 22px; height: 22px; stroke: var(--M); }
.dhc-icon-gold { background: rgba(244,183,63,.18); }
.dhc-icon-gold svg { stroke: var(--G); }
.dhc-item b    { display: block; color: #fff; font-size: .9rem; font-weight: 700; margin-bottom: 3px; }
.dhc-item span { color: #9fb8ac; font-size: .84rem; }

/* ── Info cards grid (School Details) ── */
.disc-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px; margin-top: 48px;
}
.disc-info-card {
  background: #fff; border-radius: 20px;
  padding: 26px 24px; box-shadow: var(--SHS);
  border: 1px solid var(--LN); display: flex;
  flex-direction: column; gap: 8px; transition: .25s;
}
.disc-info-card:hover { transform: translateY(-4px); box-shadow: var(--SH); border-color: var(--M); }
.dic-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--MS); display: grid; place-items: center; margin-bottom: 4px;
}
.dic-icon svg    { width: 22px; height: 22px; stroke: var(--T); }
.dic-icon-gold   { background: var(--GS); }
.dic-icon-gold svg { stroke: var(--GD); }
.dic-label { font-size: .74rem; font-weight: 700; color: var(--MUT); text-transform: uppercase; letter-spacing: .07em; }
.disc-info-card strong { font-size: .95rem; color: var(--INK); font-weight: 700; line-height: 1.4; }
.disc-info-card strong a { color: var(--T); }
.disc-info-card strong a:hover { color: var(--GD); }

/* ── Documents grid (dark teal bg) ── */
.disc-docs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: 52px;
}
.disc-doc-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(143,211,182,.15);
  border-radius: 22px; padding: 28px 24px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden; transition: .28s;
}
.disc-doc-card:hover { background: rgba(255,255,255,.11); transform: translateY(-5px); }
.disc-doc-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(143,211,182,.06) 0%, transparent 60%);
  pointer-events: none;
}
.ddc-num {
  font-size: 2.8rem; font-weight: 800; line-height: 1;
  color: rgba(255,255,255,.08); position: absolute;
  top: 16px; right: 20px;
}
.ddc-icon-wrap {
  width: 52px; height: 52px; border-radius: 16px;
  background: rgba(244,183,63,.15); display: grid; place-items: center;
}
.ddc-icon-wrap svg { width: 26px; height: 26px; stroke: var(--G); }
.disc-doc-card h3  { font-size: .92rem; color: #fff; font-weight: 700; line-height: 1.45; flex: 1; }
.ddc-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.1); color: #fff;
  font-size: .8rem; font-weight: 700;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  transition: .2s; width: fit-content;
}
.ddc-btn:hover { background: var(--G); color: var(--T); border-color: var(--G); }

/* ── Committees cards ── */
/* ═══ HOUSE ACTIVITY ═══ */
.house-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; margin-top: 48px;
}
/* House Activity photo gallery (below the house cards) */
.house-card {
  background: #fff; border-radius: 24px;
  border: 1px solid var(--LN); box-shadow: var(--SHS);
  overflow: hidden; transition: transform .3s, box-shadow .3s;
  display: flex; flex-direction: column;
}
.house-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0,0,0,.13); }

/* Per-house image slider */
.house-slider { position: relative; height: 240px; overflow: hidden; }
.house-slides { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.house-slides::-webkit-scrollbar { display: none; }
.house-slides img { min-width: 100%; width: 100%; height: 100%; object-fit: cover; display: block; scroll-snap-align: start; flex-shrink: 0; }
.house-noimg { min-width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #eef4f0, #dfeee7); color: #9db8ab; }
.house-noimg svg { width: 46px; height: 46px; }
.house-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.92); color: var(--T); display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 14px rgba(0,0,0,.28); opacity: 0; transition: opacity .2s, transform .15s; }
.house-card:hover .house-nav { opacity: 1; }
.house-nav:hover { transform: translateY(-50%) scale(1.1); }
.house-nav:disabled { opacity: 0 !important; pointer-events: none; }
.house-nav svg { width: 18px; height: 18px; stroke-width: 2.6; }
.house-nav.prev { left: 8px; } .house-nav.next { right: 8px; }
.house-dots { position: absolute; bottom: 12px; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 6px; }
.house-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.55); transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.house-dots span.on { background: #fff; width: 20px; border-radius: 4px; }
.house-overlay { position: absolute; left: 0; right: 0; top: 0; z-index: 2; padding: 16px 18px 22px; display: flex; flex-direction: column; gap: 5px; pointer-events: none; background: linear-gradient(to bottom, rgba(15,61,48,.94) 0%, rgba(15,61,48,.5) 55%, transparent 100%); }
.house-emblem { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.4); background: rgba(255,255,255,.15); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.house-emblem svg { width: 22px; height: 22px; }
.house-sub { color: rgba(255,255,255,.75); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.house-overlay h3 { color: #fff; font-size: 1.5rem; font-weight: 800; margin: 0; line-height: 1; letter-spacing: -.02em; }
.house-tag-pill { display: inline-block; width: fit-content; margin-top: 4px; color: #1a2e25; background: var(--G); font-size: .7rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; letter-spacing: .03em; }
.house-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.house-body > p { font-size: .87rem; color: var(--MUT); line-height: 1.7; margin: 0; flex: 1; }
.house-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.house-tags span { font-size: .74rem; font-weight: 700; padding: 5px 13px; border-radius: 999px; background: rgba(26,92,71,.1); color: var(--T); }
@media (max-width: 1024px) { .house-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .house-grid { grid-template-columns: 1fr; } }

/* ═══ BOOKS & PUBLISHERS ═══ */
.book-tabs {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 40px; justify-content: center;
}
.book-tab {
  padding: 10px 22px; border-radius: 999px; border: 1.5px solid var(--LN);
  background: #fff; color: var(--MUT); font-size: .88rem; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all .2s;
}
.book-tab:hover { border-color: var(--T); color: var(--T); }
.book-tab.active { background: var(--T); color: #fff; border-color: var(--T); }
.book-table-wrap { display: none; margin-top: 28px; border-radius: 20px; overflow-x: auto; box-shadow: var(--SH); -webkit-overflow-scrolling: touch; }
.book-table-wrap.active { display: block; }
.book-table { min-width: 580px; }
.book-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.book-table thead tr { background: var(--T); color: #fff; }
.book-table thead th { padding: 13px 18px; text-align: left; font-weight: 700; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; }
.book-table thead th:first-child { width: 56px; text-align: center; }
.book-table thead th:last-child { text-align: center; }
.book-table tbody tr { background: #fff; border-bottom: 1px solid var(--LN); transition: background .18s; }
.book-table tbody tr:last-child { border-bottom: none; }
.book-table tbody tr:nth-child(even) { background: var(--MS); }
.book-table tbody tr:hover { background: #d6ede3; }
.book-table tbody td { padding: 13px 18px; color: var(--INK); vertical-align: middle; }
.book-table tbody td:nth-child(1) { text-align: center; font-weight: 700; color: var(--T); }
.book-table tbody td:nth-child(5) { text-align: left; font-weight: 700; color: var(--INK); }
.book-table tbody td:nth-child(6) { text-align: center; }
.book-view-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--T); color: #fff;
  font-size: .75rem; font-weight: 700; padding: 6px 14px;
  border-radius: 999px; text-decoration: none;
  transition: background .2s, transform .2s; white-space: nowrap;
}
.book-view-btn:hover { background: var(--T1); transform: scale(1.05); }

.disc-infra-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px; margin-top: 48px;
}
.disc-infra-card {
  background: #fff; border-radius: 20px; padding: 24px 22px;
  border: 1px solid var(--LN); box-shadow: var(--SHS);
  display: flex; align-items: flex-start; gap: 16px;
  transition: transform .25s, box-shadow .25s;
}
.disc-infra-card:hover { transform: translateY(-4px); box-shadow: var(--SH); }
.dif-icon {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  background: rgba(30,115,85,.1); color: var(--T);
  display: flex; align-items: center; justify-content: center;
}
.dif-icon svg { width: 22px; height: 22px; }
.dif-icon.dif-icon-gold { background: rgba(212,168,72,.12); color: var(--GD); }
.dif-body { display: flex; flex-direction: column; gap: 2px; }
.dif-label { font-size: .78rem; font-weight: 600; color: var(--MUT); text-transform: uppercase; letter-spacing: .04em; }
.dif-value { font-size: 1.45rem; font-weight: 800; color: var(--T); line-height: 1.1; margin: 4px 0 2px; }
.dif-sub { font-size: .8rem; color: var(--MUT); }

.disc-committee-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-top: 48px;
}
.disc-committee-card {
  background: #fff; border-radius: 22px;
  padding: 32px 28px; box-shadow: var(--SHS);
  border: 1px solid var(--LN);
  display: flex; flex-direction: column; gap: 14px; transition: .25s;
}
.disc-committee-card:hover { transform: translateY(-5px); box-shadow: var(--SH); }
.dcc-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--MS); display: grid; place-items: center;
}
.dcc-icon svg     { width: 26px; height: 26px; stroke: var(--T); }
.dcc-icon-gold    { background: var(--GS); }
.dcc-icon-gold svg { stroke: var(--GD); }
.disc-committee-card h3 { font-size: 1.08rem; font-weight: 800; color: var(--T); }
.disc-committee-card p  { font-size: .88rem; color: var(--MUT); line-height: 1.6; flex: 1; }
.dcc-btn {
  display: inline-flex; align-items: center;
  background: var(--T); color: #fff;
  font-size: .82rem; font-weight: 700;
  padding: 10px 20px; border-radius: 999px;
  transition: .2s; width: fit-content;
}
.dcc-btn:hover { background: var(--GD); }
.dcc-result-badge {
  display: inline-block; background: var(--GS); color: var(--GD);
  font-size: .92rem; font-weight: 800; padding: 10px 22px;
  border-radius: 999px; border: 2px solid var(--G);
}
.disc-committee-result { border-top: 4px solid var(--G); }

/* ─── 20b. OLD PAGE BANNER (fallback for unrebuilt pages) ─── */
.page-banner { height: 280px; background-size: cover; background-position: center; position: relative; }
.page-banner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(14,58,47,.55), rgba(14,58,47,.75));
}
.page-title-card {
  background: #fff; border-radius: 20px; padding: 28px 36px;
  box-shadow: var(--SH); max-width: 700px; margin: -50px auto 60px;
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 20px;
}
.page-title-icon {
  width: 52px; height: 52px; border-radius: 14px; background: var(--MS);
  display: grid; place-items: center; font-size: 1.5rem; flex-shrink: 0;
}
.page-title h1   { font-size: clamp(1.5rem, 2.5vw, 2rem); color: var(--T); }
.page-breadcrumb { font-size: .8rem; color: var(--MUT); margin-top: 4px; }
.page-breadcrumb a { color: var(--GD); }

/* ─── 21. INNER PAGE SECTIONS ─── */
.vision-section, .about-home { padding: 80px 0; }
.vision-block { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 60px; }
.vision-block.reverse { direction: rtl; }
.vision-block.reverse > * { direction: ltr; }
.vision-image { overflow: hidden; border-radius: 20px; box-shadow: var(--SH); }
.vision-image img { width: 100%; object-fit: cover; height: 380px; display: block; transition: transform .6s ease; }
.vision-image:hover img { transform: scale(1.05); }
.vision-text h2   { font-size: clamp(1.6rem, 2.5vw, 2.1rem); color: var(--T); margin-bottom: 16px; }
.vision-text p    { color: var(--MUT); line-height: 1.72; margin-bottom: 12px; }
.vision-text ul   { margin: 16px 0 0 20px; }
.vision-text ul li { color: var(--MUT); margin-bottom: 8px; }
/* Why cards (about page) */
.why-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.why-card { background: #fff; border-radius: 20px; padding: 28px; box-shadow: var(--SHS); transition: .25s; }
.why-card:hover { transform: translateY(-5px); box-shadow: var(--SH); }
.why-card-icon { font-size: 2rem; margin-bottom: 14px; }
.why-card h3 { color: var(--T); font-size: 1rem; margin-bottom: 8px; }
.why-card p  { color: var(--MUT); font-size: .87rem; line-height: 1.65; }
/* Message blocks */
.message-block { display: grid; grid-template-columns: 1fr 1.5fr; gap: 52px; align-items: start; margin-bottom: 60px; }
.message-block.reverse { grid-template-columns: 1.5fr 1fr; }
.message-photo-wrap img { border-radius: 20px; box-shadow: var(--SH); width: 100%; object-fit: cover; }
.message-card { background: #fff; border-radius: 20px; padding: 36px; box-shadow: var(--SHS); }
.message-card blockquote { color: var(--MUT); font-style: italic; line-height: 1.75; border-left: 4px solid var(--G); padding-left: 18px; margin: 16px 0; }
.message-card h3 { color: var(--T); font-size: 1.1rem; }
/* Curriculum & faculty */
.curriculum-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; }
.curriculum-card { background: #fff; border-radius: 20px; padding: 32px; box-shadow: var(--SHS); }
.curriculum-card h3 { color: var(--T); font-size: 1.1rem; margin-bottom: 10px; }
.curriculum-card p  { color: var(--MUT); font-size: .9rem; line-height: 1.7; }
.faculty-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.faculty-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--SHS); text-align: center; }
.faculty-card img { width: 100%; height: 200px; object-fit: cover; }
.faculty-card-body { padding: 18px; }
.faculty-card h3 { color: var(--T); font-size: .95rem; margin-bottom: 4px; }
.faculty-card p  { color: var(--MUT); font-size: .82rem; }
/* Mini slider */
.mini-slider { position: relative; border-radius: 20px; overflow: hidden; }
.mini-slide  { display: none; }
.mini-slide.active { display: block; }
.mini-slide img { width: 100%; height: 380px; object-fit: cover; display: block; transition: transform .6s ease; }
.mini-slide:hover img { transform: scale(1.04); }
.mini-prev, .mini-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.9); border: none;
  width: 42px; height: 42px; border-radius: 50%;
  font-size: 1.2rem; cursor: pointer; opacity: .85; transition: .2s; color: var(--T);
}
.mini-prev:hover, .mini-next:hover { opacity: 1; background: #fff; }
.mini-prev { left: 12px; }
.mini-next { right: 12px; }
.mini-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.mini-dot  { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); border: none; cursor: pointer; transition: .2s; }
.mini-dot.active { background: #fff; }
/* Contact */
.contact-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 52px; }
.contact-info-card { background: #fff; border-radius: 20px; padding: 32px; text-align: center; box-shadow: var(--SHS); }
.contact-info-card .ci-icon { font-size: 2rem; margin-bottom: 14px; }
.contact-info-card h3   { color: var(--T); margin-bottom: 8px; }
.contact-info-card p, .contact-info-card a { color: var(--MUT); font-size: .9rem; }
.contact-form-wrap { background: #fff; border-radius: 24px; padding: 40px; box-shadow: var(--SHS); max-width: 700px; margin: 0 auto; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 600; font-size: .88rem; color: var(--INK); margin-bottom: 7px; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 12px 16px;
  border: 1.5px solid var(--LN); border-radius: 12px;
  font-family: inherit; font-size: .92rem; color: var(--INK);
  background: #fff; transition: border-color .2s; outline: none;
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--T2); }
.form-group textarea { resize: vertical; min-height: 130px; }
.form-success { display: none; background: var(--MS); border: 1.5px solid var(--M); border-radius: 14px; padding: 16px 22px; color: var(--T); font-weight: 600; margin-top: 16px; }
.form-success.show { display: block; }
/* Disclosures */
.disclosure-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.disclosure-card { background: #fff; border-radius: 18px; padding: 24px; box-shadow: var(--SHS); }
.disclosure-card h3 { color: var(--T); font-size: .94rem; margin-bottom: 8px; }
.disclosure-card p  { color: var(--MUT); font-size: .85rem; }
.disclosure-table { width: 100%; border-collapse: collapse; margin-top: 24px; }
.disclosure-table th { background: var(--T); color: #fff; padding: 12px 16px; text-align: left; font-size: .88rem; }
.disclosure-table td { padding: 12px 16px; border-bottom: 1px solid var(--LN); font-size: .88rem; color: var(--INK); }
.disclosure-table tr:hover td { background: var(--MS); }
/* Map */
.map-wrap { border-radius: 20px; overflow: hidden; box-shadow: var(--SHS); margin-top: 40px; }
.map-wrap iframe { display: block; width: 100%; border: none; }

/* ─── 22. RESPONSIVE ─── */
@media (max-width: 1040px) {
  .fac-grid       { grid-template-columns: repeat(3, 1fr); }
  .director-grid  { gap: 40px; }
  .faculty-grid   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .topbar-right { display: none; }
  .hero-body    { grid-template-columns: 1fr; padding: 50px 28px 110px; }
  .hero-card    { display: none; }
  .stats-inner  { grid-template-columns: repeat(2, 1fr); }
  .about-grid-v2, .director-grid { grid-template-columns: 1fr; }
  .about-badge-card { right: 0; bottom: -10px; }
  .about-deco-num { font-size: 6rem; }
  .ab-bento { grid-template-columns: 1fr 1fr; }
  .ab-img   { grid-column: span 2; grid-row: auto; min-height: 280px; }
  .why-cards-row { grid-template-columns: 1fr 1fr; }
  .fac-grid    { grid-template-columns: repeat(2, 1fr); }
  .steps-row   { grid-template-columns: 1fr 1fr; gap: 32px; }
  .steps-row::before { display: none; }
  .gal-grid    { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .gi-tall     { grid-row: span 1; }
  .gi-wide     { grid-column: span 1; }
  .test-grid   { grid-template-columns: 1fr; }
  .prog-grid   { grid-template-columns: 1fr 1fr; }
  .cta-split-inner { grid-template-columns: 1fr; }
  .cta-right   { padding: 36px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .foot-announce { flex-direction: column; text-align: center; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .vision-block, .message-block, .message-block.reverse { grid-template-columns: 1fr; }
  .msg-grid, .msg-grid-reverse { grid-template-columns: 1fr; }
  .msg-grid-reverse .msg-photo-wrap { order: -1; }
  .why-3col { grid-template-columns: 1fr 1fr !important; }
  .inner-hero-split { grid-template-columns: 1fr; }
  .inner-hero-right { display: none; }
  .why-cards-grid   { grid-template-columns: 1fr 1fr; }
  .curriculum-grid  { grid-template-columns: 1fr; }
  .contact-info-grid { grid-template-columns: 1fr; }
  .disclosure-grid  { grid-template-columns: 1fr 1fr; }
  .page-title-card  { flex-direction: column; text-align: center; }
}
@media (max-width: 640px) {
  .cta-left { padding: 36px 24px; }
  .topbar-links a:nth-child(3) { display: none; }
}
@media (max-width: 560px) {
  .hero-body  { padding: 38px 20px 100px; }
  .home-hero h1 { font-size: 2.1rem; }
  .fac-grid   { grid-template-columns: 1fr 1fr; }
  .steps-row  { grid-template-columns: 1fr; }
  .prog-grid  { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .gal-grid   { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
  .disclosure-grid { grid-template-columns: 1fr; }
  .why-cards-grid  { grid-template-columns: 1fr; }
  .why-3col        { grid-template-columns: 1fr !important; }
  .curr-grid-2x2   { grid-template-columns: 1fr; }
  .about-b         { padding: 70px 0; }
  .ab-bento        { grid-template-columns: 1fr; }
  .ab-img, .ab-cta { grid-column: auto; }
  .ab-cta          { flex-direction: column; align-items: flex-start; }
  .acad-approach-inner { grid-template-columns: 1fr; }
  .acad-edge-row   { gap: 0; }
  .acad-edge-item  { flex: 0 0 50%; }
  .acad-edge-div:nth-child(4) { display: none; }
  .faculty-grid-v2 { grid-template-columns: 1fr 1fr; }
  .fac-join-strip  { flex-direction: column; text-align: center; padding: 28px 24px; }
  .faculty-grid    { grid-template-columns: 1fr 1fr; }
  .acad-edge-item  { flex: 0 0 100%; }
  .acad-edge-div   { display: none; }
  .amenity-grid    { grid-template-columns: 1fr; gap: 36px; }
  .amenity-nav-row { flex-wrap: wrap; }
  .amenity-nav-card { flex: 0 0 33.333%; }
  .amenity-cta-inner { flex-direction: column; text-align: center; }
  .contact-cards-row   { grid-template-columns: 1fr; }
  .contact-card-split  { grid-template-columns: 1fr; }
  .ccs-left            { padding: 40px 28px; }
  .ccs-right           { padding: 40px 28px; }
  .contact-form-row    { grid-template-columns: 1fr; }
  .contact-form-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
  .disc-docs-grid         { grid-template-columns: 1fr 1fr; }
  .disc-committee-grid    { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ================= CUSTOM SECTIONS (client-built) ================= */
/* Text + Image */
.cs-textimg { background: #fff; }
.cs-textimg:nth-of-type(even) { background: var(--soft, #f4f8f5); }
.cs-ti-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.cs-ti-left .cs-ti-text { order: 2; }
.cs-ti-left .cs-ti-img  { order: 1; }
.cs-ti-text h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; margin: 6px 0 16px; color: var(--ink, #1a2e25); }
.cs-ti-text p { color: #5c6f66; font-size: 1rem; line-height: 1.8; }
.cs-ti-btn { margin-top: 22px; }
.cs-ti-img { overflow: hidden; border-radius: 18px; }
.cs-ti-img img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; border-radius: 18px; box-shadow: 0 24px 50px -20px rgba(20,73,58,.4); transition: transform .6s ease; }
.cs-ti-img:hover img { transform: scale(1.06); }
@media (max-width: 820px) {
  .cs-ti-grid { grid-template-columns: 1fr; gap: 28px; }
  .cs-ti-left .cs-ti-text, .cs-ti-left .cs-ti-img { order: 0; }
  .cs-ti-img img { max-height: 300px; }
}

/* Banner / CTA */
.cs-banner { padding: 64px 0; background: linear-gradient(135deg, var(--T2, #14493a), var(--T3, #0f3d30)); background-size: cover; background-position: center; }
/* When the banner is the last section it sits directly above the (also dark) footer —
   add a gap so the two dark blocks don't blend into one. */
main > .cs-banner:last-child { margin-bottom: 48px; }
.cs-banner-inner { text-align: center; max-width: 760px; }
.cs-banner-inner h2 { color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.2; margin-bottom: 14px; }
.cs-banner-inner p { color: rgba(255,255,255,.85); font-size: 1.05rem; line-height: 1.7; margin-bottom: 26px; }
.cs-banner-btn { display: inline-block; }

/* Quote / Message */
.cs-quote { background: var(--soft, #f4f8f5); }
.cs-quote-inner { max-width: 820px; }
.cs-quote-card { position: relative; background: #fff; border: 1px solid var(--ln, #dce8e1); border-radius: 20px; padding: 44px 40px 32px; box-shadow: 0 24px 50px -28px rgba(20,73,58,.35); }
.cs-quote-mark { width: 46px; height: 46px; color: var(--G, #c9a227); opacity: .35; margin-bottom: 8px; }
.cs-quote-card blockquote { font-size: 1.2rem; line-height: 1.75; color: #35473f; font-style: italic; margin-bottom: 24px; }
.cs-quote-person { display: flex; align-items: center; gap: 14px; }
.cs-quote-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--G, #c9a227); }
.cs-quote-person b { display: block; font-size: 1rem; color: var(--ink, #1a2e25); }
.cs-quote-person span { font-size: .86rem; color: #6b8a7a; }

/* Cards Row */
.cs-cards { background: #fff; }
.cs-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; margin-top: 36px; }
.cs-card { background: var(--soft, #f4f8f5); border: 1px solid var(--ln, #dce8e1); border-radius: 16px; padding: 26px 22px; transition: transform .18s, box-shadow .18s; }
.cs-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(20,73,58,.4); }
.cs-card-ic { width: 52px; height: 52px; border-radius: 13px; background: linear-gradient(135deg, var(--T1, #1e6e55), var(--T, #1a5c47)); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.cs-card-ic svg { width: 26px; height: 26px; stroke: #fff; }
.cs-card h3 { font-size: 1.08rem; color: var(--ink, #1a2e25); margin-bottom: 8px; }
.cs-card p { font-size: .92rem; line-height: 1.6; color: #5c6f66; }